写在前面 好久没有更新shadertoy系列了,我万万没想到有童鞋还惦记着它...之前说过希望可以一周更新一篇,现在看来是不怎么可能了,一个月更新一篇的希望比较大(不要再相信我了...) 我把之前实现的这个系列上传到了GitHub(https://github.com/candycat1992/Shadertoy_Lab)上,有兴趣的可以去下载下来.当然,也希望有网友可以一起贡献这个项目. GitHub上这个项目大部分灵感来源于shadertoy(https://www.shadertoy.co…

Atitit Atitit 图像处理之 Oilpaint油画滤镜 水彩画 源码实现 1.1. 具体原理参考1 2. 水彩画滤镜算法如下:1 2.1. 这个其实就是灰度层次降低维度的过程.2 2.2. 模板半径Radius用来调节水彩画的水彩程度.即是颜色的降低维度的过程2 1.1. 具体原理参考 Atitit 图像处理之仿油画效果 Oilpaint油画滤镜 水彩画 漫画滤镜 v2 2. 水彩画滤镜算法如下: 灰度,离散化(聚类).. 灰度层次N就是水彩画最多使用的颜色明暗层次,一般7种一下为好…

Atitit 图像处理之仿油画效果 Oilpaint油画滤镜 水彩画 漫画滤镜 v2 1.1. 具体源码参考1 2. ,油画 水彩画具有几个比较明显的特点如下:1 2.1. 明暗层次(灰度)较少  也就5级别够用了1 2.2. 颜色泛用   使用的颜色比较单一,一般不会超过7种颜色,不像真实照片那样,具有丰富的颜色种类:2 3. 水彩画滤镜算法如下:2 3.1. 这个其实就是灰度层次降低维度的过程.3 3.2. 模板半径Radius用来调节水彩画的水彩程度.即是颜色的降低维度的过程3 3.3.…

shadertoy 原型,https://www.shadertoy.com/view/XslGRr 先说几个概念 Shader language目前有3种主流语言:基于OpenGL的GLSL(OpenGL Shading Language,也称为GLslang),基于Direct3D的HLSL(High Level Shading Language),还有NVIDIA公司的Cg (C for Graphic)语言. 其中unity使用的是GLSL,unity使用的是Cg,并且进一步封装,称为s…

写在前面 我在9月份的时候对博客的主页换了个模板,一些童鞋可能会发现边栏多了个小雨伞的动画,再细心的同学可能会发现如果一直开着我的博客电脑耗电更快了--当然啦,也有可能你看到的是一团黑,这说明你该换更高级的浏览器啦! 前几天有人问我这个是怎么实现的,其实我一直都想写一下的.这个例子的灵感是我暑假的时候喝了一杯奶茶(我超爱喝奶茶--),然后觉得杯子上的图案非常可爱(有点类似于吉米的那种画风).当然啦,用我相信用PS很多人都可以画出来,后来我就想可以不可以在shadertoy上把这个图画出来?于是就…

写在前面 在之前的基础篇中,我们讲到了在绘制点线时如何处理边缘的锯齿,也就是使用smoothstep函数.而模糊参数是一些定值,或者是跟屏幕分辨率相关的数值,例如分辨率宽度的5%等等.但这种方法其实是有一种问题的.这需要我们从绘制的图像说起. ShaderToy中绘制的很多图像可以说是一种Procedure Texture,过程纹理,即是计算机生成的纹理.拿之前画的圆和线来说,这些圆和线的绘制过程,是我们计算每个fragment到"期望图像"的距离,然后根据距离来判断使用哪种颜色.如果…

写在前面 呜呼,好久没有写博客了,好惭愧.题外话,感觉越大就越想家,希望可以一直和家人在一起,哪怕只是坐在一起不说话也觉得很温暖,一想到要分开眼睛就开始酸,哎.开学还是爬上来老实更新博客学习吧~ 今天爬上来一看,发现CSDN的博客编辑终于更新了!进步总是好的,以前的编辑器实在很捉急.使用这种标记语言的确方便了很多,但好像颜色字体没法设置?程序员果然对美观没什么追求. ShaderToy 如果你还没听过ShaderToy,那你就真的错过了一个很好的shader学习网站.我是在群里有一次听到小伙伴们…

写在前面 写前面一篇的时候,发现还是不够基础.因此打算增加几篇基础篇,从点线面开始,希望可以更好理解. 其实用Pixel Shader的过程很像在纸上绘画的过程.屏幕上的每一个像素对应了纸上的一个方格,如果你愿意,你甚至可以一个个判断像素的位置,从而画出任何你想画的图像,也的确有爱好者这么做过.但往往,我们需要的是一个动态的效果,这个效果往往依赖于数学公式的约束.我们可以说是,用数学去绘画.我们用数学去约束,哪些点应该用什么颜色去绘制. 这篇,我们从基本的点和线开始,看一下如何在Pixel Sh…

写在前面 注:如果你还不了解ShaderToy,请看开篇. 作为ShaderToy系列的第一篇,我们先来点简单的.下面是效果: (CSDN目前不能传gif文件了,暂时空缺,可以看下面的原shader效果,是一样的) 原Shader地址:https://www.shadertoy.com/view/XsfGRn 代码 我们使用了之前的开篇中的基础模板.这里仅仅给出main函数的代码: vec4 main(vec2 fragCoord) { vec2 p = (2.0*fragCoord.xy-iR…

嗯,其实渲染球体,可以看做就是一个2d圆形图案+渲染光泽的函数. 定义球体结构——半径,球心坐标 struct Sphere { vec3 center; float radius; };edzx- 定义光线——光源坐标,方向 struct Ray { vec3 origin; vec3 direction; }; 检测“光线”与“球体”是否相交,若未相交返回false,相交返回从光源到球面的距离 数学解释如下 图中红色线条即光线,重要线段已标注变量,光照方向记作向量Dir. 首先,需要判断光线…

*继续:ShaderToy基础学习中d(`･∀･)b 对每个像素点进行旋转,其实加个公式就ok了啊. 对网格进行旋转: 代码如下: #define TUTORIAL 2 #define PI 3.14159265359 #if TUTORIAL == 1 float linearstep(float edge0, float edge1, float x) { float t = (x - edge0)/(edge1 - edge0); return clamp(t, 0.0, 1.0); }…

*示例代码可以直接在ShaderToy中运行. *我放在这里咯ShaderToy基础学习中~欢迎交流(ﾉ>ω<)ﾉ 先上未抗锯齿的两个圆形图案,可以清楚看清图案边缘像素块,即“锯齿”. 附代码: void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 r = 2.0*vec2(fragCoord.xy - 0.5*iResolution.xy)/iResolution.y; vec2 center1 = vec2(-); v…

最近对shader产生了浓厚兴趣,发现一个超有意思的网站shadertoy.com,各种有意思的shader,很多都是百行以内代码实现,除了学习,作为opgl的练习场所也很不错. 分享今天看的一篇shadertoy入门教程https://gamedevelopment.tutsplus.com/tutorials/a-beginners-guide-to-coding-graphics-shaders--cms-23313 以及一位新人大佬分享的新手教程https://www.shadertoy…

做图形就要玩shader,我的shader进阶之路,从学习怎么使用shaderToy开始.首先介绍我是看哪篇文章学习的,给出参考文章地址:https://blog.csdn.net/xufeng0991/article/details/78076824,由于本菜鸟是第一次玩shaderToy,就完全根据丿寒灬风丨博主的脚步往前走,一步一步学. 第一步,咱来注册一个账号哈.简单方便,有账号了,我的shaderToy账号就是ccentry,截图一张 好了,我们已经可以看到,有很多demo可供学习,那…

shadertoy使用教程 /** *常量定义 */ uniform vec3 iResolution; // 窗口分辨率,单位像素 uniform float iTime; // 程序运行的时间,单位秒 uniform float iTimeDelta; // 渲染时间,单位秒 uniform float iFrame; // 帧率 uniform vec4 iMouse; // 鼠标位置 uniform vec4 iDate; // 日期(年,月,日,时) 主函数 void mainImag…

觉得shadertoy上的一些网友的作品写得很好,加上自己对glsl一些内置函数,内置变量不是很熟悉,于是决定开始学习一下上面一些大佬的代码. 今天的案例是这个: 附上shaderToy的地址:https://www.shadertoy.com/view/ll2GD3 用three.js的ShaderMaterial实现的着色器代码如下: <script id="vertex-shader-1" type="x-shader/x-vertex"> voi…

Note: This series blog was translated from Nathan Vaughn's Shaders Language Tutorial and has been authorized by the author. If reprinted or reposted, please be sure to mark the original link and description in the key position of the article after ob…

Note: This series blog was translated from Nathan Vaughn's Shaders Language Tutorial and has been authorized by the author. If reprinted or reposted, please be sure to mark the original link and description in the key position of the article after ob…

Note: This series blog was translated from Nathan Vaughn's Shaders Language Tutorial and has been authorized by the author. If reprinted or reposted, please be sure to mark the original link and description in the key position of the article after ob…

Note: This series blog was translated from Nathan Vaughn's Shaders Language Tutorial and has been authorized by the author. If reprinted or reposted, please be sure to mark the original link and description in the key position of the article after ob…

Note: This series blog was translated from Nathan Vaughn's Shaders Language Tutorial and has been authorized by the author. If reprinted or reposted, please be sure to mark the original link and description in the key position of the article after ob…

首先在PS里操作: 1.磨皮液化 磨皮液化就不细说啦~常规操作. 2.背景调色 分析:想塑造油画般的感觉,背景颜色想要蓝绿色 1.用可选颜色工具里面的中性色改变整体颜色,把皮肤和头发颜色用蒙版擦出来: 2.用颜色查找工具里面的vsco u2 high sun这个滤镜,使画面里的蓝绿色更加突出,调整图层不透明度,按住alt键,点击该图层与上个图层的中间缝隙区域进行置入,省去再一次用蒙版擦出皮肤,后面的步骤会频繁使用这个操作: 3.先用可选颜色工具里面的中性色调整整体颜色,再使用绿色减青减红假黄,让…

https://zhuanlan.zhihu.com/p/38942460 发现这个挺好玩,有空学习一下…

最近在cocos creator上打算写个U3D中shader功能的插件(能在属性面板调整shader属性). 对其中一个功能有点疑惑,就是U3D中一个渲染物体上可以挂多个材质,后来查询了下,一个物体上挂多个材质的时候,每个材质复杂渲染对应的子mesh,但如果一个object只有一个mesh时, 那么挂载在其下的所有材质都会作用在这个mesh上,达到了混合的作用. 但是在OpenGl渲染中,每次渲染只能用一个shader,而每个物体也只能挂一个shader被渲染. 因此不能直接给一个物体挂多个着…

2016-2017-2 <Java程序设计>预备作业2总结 古希腊学者普罗塔戈说过:「头脑不是一个要被填满的容器,而是一束需要被点燃的火把.」 在对计算机系的学生情况的调查中,我说: 最近几年,我有一个深刻的体会:了解学生是上好课的一个基础.如果老师不了解学生的基础,每周的学习情况,学习状态,学习效果,那么,不少同学从第三周就开始跟不上学习进度了,然后就放弃学习了,等着期末背背就过关了.这样四年的学习效果就像大学生上课为什么一定要认真听讲?所说的 有很多人上完了大学,思考方式还是那种「原生态」…

Instagram,Snapchat,Photoshop. 所有这些应用都是用来做图像处理的.图像处理可以简单到把一张照片转换为灰度图,也可以复杂到是分析一个视频,并在人群中找到某个特定的人.尽管这些应用非常的不同,但这些例子遵从同样的流程,都是从创造到渲染. 在电脑或者手机上做图像处理有很多方式,但是目前为止最高效的方法是有效地使用图形处理单元,或者叫 GPU.你的手机包含两个不同的处理单元,CPU 和 GPU.CPU 是个多面手,并且不得不处理所有的事情,而 GPU 则可以集中来处理好一件事…

http://imgtec.eetrend.com/blog/3912 http://blog.csdn.net/zj8792612/article/details/16116145   在线着色器编辑 1.http://pixelshaders.com/editor/ 2.http://yase.chnk.us/ http://glslsandbox.com/  https://www.shadertoy.com/ http://codedstructure.net/projects/webg…

http://blog.csdn.net/noahzuo/article/details/51133166 国外HLSL网站 https://www.shadertoy.com/browse…

Gesture Drawing with Alex Woo Gesture Drawing with Alex Woo and Louis Gonzales http://eisneim.com/?page_id=1271 ------------------------------Animation------------------------------Basics Animation 03 Drawing for Animation (基础动画03绘图动画电子书)http://www.9…

java 泛型深入之Set有用工具 各种集合泛型深入使用演示样例,匿名内部类.内部类应用于泛型探讨 //Sets.java package org.rui.generics.set; import java.util.HashSet; import java.util.Set; /** * 一个Set有用工具 * @author lenovo * */ public class Sets { public static<T> Set<T> union(Set<T> a,…