1 讲解

首先封装一下上节降到的画圆方法

有一点不同之处，在于smoothstep()函数传入的参数为r, r - blur，注意第一个数大于第二个数，这样产生的效果是
- if (d < r - blur) return 1;
- else if (d > r) return 0;
- d位于两者之间，返回0~1之间平滑过渡的数

// 形参(纹理坐标，圆心，半径，边界模糊长度)
float Circle(vec2 uv, vec2 p, float r, float blur)
{float d = length(uv - p);float c = smoothstep(r, r - blur, d); return c;
}

画一个黄色头

mask(遮罩)，很形象的名字。Circle函数使得屏幕上以(0,0)为圆心向外0.4个坐标单位的像素(此处忽略模糊部分)的mask变量都为1.0，而外面所有像素mask都为0，即mask在圆内为1，圆外为0
之后用每个像素的col，乘以自身的mask变量的效果就是：只有mask为1的像素才会正常显示黄色，mask为0的最终颜色值col为(0,0,0)

 // 背景底色vec3 col = vec3(1.0, 1.0, 0.0);  float mask = Circle(uv, vec2(0.0), 0.4, 0.05);  col *= mask; // 在圆内的像素col * 1为黄色，圆外为col * 0为黑色fragColor = vec4(vec3(col), 1.0);

画眼睛

对mask变量用加减法
思路很简单，刚刚我们已经画了一个圆作为头，头范围内的像素mask都为1。我们只需要再画两个眼睛，这两个眼睛内部像素mask也都为1，然后用头-这俩眼睛，即可

    float mask = Circle(uv, vec2(0.0)  ,  0.4, 0.05);   // 头mask -= Circle(uv, vec2(-0.15, 0.1), 0.07, 0.05);  // 左眼mask -= Circle(uv, vec2( 0.15, 0.1), 0.07, 0.05);     // 右眼

嘴巴

相同的思路，第一个圆画在原点，第二个圆稍微向上偏移0.1个单位，然后用第一个圆减去第二个圆，然后就能看到下图所示，嘴巴部分mouth变量为1，可视化一下就是fragColor = vec4(mouth.xyz, 1.0);

    float mouth = Circle(uv, vec2(0.0), 0.3, 0.01); mouth -= Circle(uv, vec2(0.0, 0.1), 0.3, 0.01);

用之前的结果减去嘴巴部分就能得到一个黄色笑脸

 mask -= mouth;

再次提醒，笑脸是通过每个像素的mask变量乘以颜色值col实现的。mask就是让屏幕上一部分像素为1，另一部分像素为0，然后对所有像素都用col * mask作为最终颜色。那么就只有mask为1的像素能显示col的颜色， col为0的像素只能显示黑色。

遮罩这个词就是这么来的，相当于给屏幕蒙上一个遮罩，只有这个遮罩内部的的像素可以有颜色，或者其他的操作等等，当然遮罩也不只是区分0,1也可以是其他数。

2 完整代码

float Circle(vec2 uv, vec2 p, float r, float blur)
{float d = length(uv - p);float c = smoothstep(r, r - blur, d); return c;
}void mainImage( out vec4 fragColor, in vec2 fragCoord )
{vec2 uv = fragCoord/iResolution.xy;uv -= 0.5;uv.x *= iResolution.x / iResolution.y; vec3 col = vec3(1.0, 1.0, 0.0);float mask = Circle(uv, vec2(0.0), 0.4, 0.05);mask -= Circle(uv, vec2(-0.15, 0.1), 0.07, 0.01); mask -= Circle(uv, vec2(0.15, 0.1), 0.07, 0.01); float mouth = Circle(uv, vec2(0.0), 0.3, 0.01);mouth -= Circle(uv, vec2(0.0, 0.1), 0.3, 0.01);if (mouth < 0.0)     // 嘴巴的两个圆相减，会让头顶往上的部分像素的mouth变量值为-1, 防止bug，把它们置零mouth = 0.0;mask -= mouth; col *= mask;fragColor = vec4(col, 1.0);
}

效果

最后封装整个笑脸作为一个函数

float Circle(vec2 uv, vec2 p, float r, float blur)
{float d = length(uv - p);float c = smoothstep(r, r - blur, d);// 界内返回0,1 ，小于边界返回1， 大于边界返回0return c;
}float Smiley(vec2 uv, vec2 p, float size)
{// 对笑脸做任何移动、缩放、旋转等操作，直接操作uv坐标是最方便快捷的uv -= p;uv /= size;// 头float mask = Circle(uv, vec2(0.), .4, .01);// 眼睛mask -= Circle(uv, vec2(-.15, .1), .07, .01); mask -= Circle(uv, vec2(.15, .1), .07, .01); // 嘴巴float mouth = Circle(uv, vec2(.0), .3, .01);mouth -= Circle(uv, vec2(.0, .1), .3, .01);if (mouth < 0.) mouth = 0.;mask -= mouth; return mask;
}void mainImage( out vec4 fragColor, in vec2 fragCoord )
{vec2 uv = fragCoord/iResolution.xy;// [0,1]uv -= .5;// [-0.5,0.5]uv.x *= iResolution.x / iResolution.y; // 让像素变成正方形(uv坐标依然是x要多于1的)vec3 col = vec3(0.);vec2 pos = vec2(sin(iTime) / 2., sin(2. * iTime) / 4.);float size = sin(2. *iTime) / 10. + .2;float mask = Smiley(uv, pos, size);col = vec3(1., 1., 0.) * mask;fragColor = vec4(col, 1.);
}

Shadertoy基础教学02、画笑脸相关推荐

高林大学计算机应用基础试题及答案,计算机应用基础教学课件作者高林02单元2Windows7的使用课件.doc...
计算机应用基础教学课件作者高林02单元2Windows7的使用课件.doc (27页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 9.90 积分单元2 ...
python爬虫入门-python爬虫入门，8分钟就够了，最简单的基础教学！
一.基础入门 1.1什么是爬虫爬虫(spider,又网络爬虫),是指向网站/网络发起请求,获取资源后分析并提取有用数据的程序. 从技术层面来说就是通过程序模拟浏览器请求站点的行为,把站点返回的HT ...
计算机基础教育德育教学,【家庭教育论文】计算机基础教学的德育教育(共2650字)...
摘要:在中职计算机教育开展的过程中,许多的教师往往只注重学生对于计算机基础知识的掌握情况,而并没有能够重视学生的综合素质的提升也就导致许多学生存在道德意识薄弱的情况,无法有效的提高学生的综合能力.本文 ...
学校计算机教学演示,案例演示在计算机基础教学中的运用
随着电脑的普及,计算机基础教学也在逐步地发展,教学方法和教学理念也日趋完善.由于计算机基础是一门比较强调动手能力和实用性的学科,它要求学生能自己动手操作,那么案例演示这种教学方法就比较适用于计算机基础 ...
计算机应用基础教学反思与改进,中职《计算机应用基础》课程教学反思
中职<计算机应用基础>课程教学反思摘要:<计算机应用基础>是中职学校开设的一门基础课程,这门课实用性强.我在课堂上注重培养学生的学习兴趣:充分利用现代教育技术,提高学生学习积 ...
golang开发工程师-第一步：golang入门基础教学
golang入门基础教学前言一.golang的优势何在? 二.goland破解教程三.goland的使用教程四.一个简单的go代码五.变量的声明和赋值六.数据类型的基本介绍七.访问权限[ ...
计算机应用基础小结,计算机应用基础教学小结
龙源期刊网 http://doc.docsou.com 计算机应用基础教学小结作者:杨菲来源:<电脑知识与技术>2012年第02期摘要:该文结合在计算机应用基础教学中的教学实践,从几 ...
基础计算机教学论文,计算机基础教学论文范文
计算机基础的教学在高职院校的教学中占有重要地位,所以,在教学上我们一定要做好才是.下面是小编为大家整理的计算机基础教学论文,希望对大家有帮助. 网络背景的高职计算机基础教学路径摘要:计算机基础的教学 ...
非专业老师上怎么计算机课,非计算机专业计算机基础教学研究
非计算机专业计算机基础教学研究本文关键词:教学研究,计算机专业,计算机,基础非计算机专业计算机基础教学研究本文简介:摘要:当前我国的经济社会都在飞速发展,科技水平持续提升,尤其是新一代的计算机技 ...

Shadertoy基础教学02、画笑脸

文章目录

1 讲解

2 完整代码

Shadertoy基础教学02、画笑脸相关推荐

最新文章

热门文章