14 | 如何使用片元着色器进行几何造型？
月影
该思维导图由 AI 生成，仅供参考
你好，我是月影。
在 WebGL 中，片元着色器有着非常强大的能力，它能够并行处理图片上的全部像素，让数以百万计的运算同时完成。但也正因为它是并行计算的，所以它和常规代码顺序执行或者串行执行过程并不一样。因此，在使用片元着色器实现某些功能的时候，我们要采用与常规的 JavaScript 代码不一样的思路。
到底哪里不一样呢？今天，我就通过颜色控制，以及线段、曲线、简单几何图形等的绘制，来讲讲片元着色器是怎么进行几何造型的，从而加深你对片元着色器绘图原理的理解。
首先，我们来说比较简单的颜色控制。
如何用片元着色器控制局部颜色？
我们知道，片元着色器能够用来控制像素颜色，最简单的就是把图片绘制为纯色。比如，通过下面的代码，我们就把一张图片绘制为了纯黑色。
如果想让一张图片呈现不同的颜色，我们还可以根据纹理坐标值来绘制，比如，通过下面的代码，我们就可以让某个图案的颜色，从左到右由黑向白过渡。
不过，这种颜色过渡还比较单一，这里我们还可以改变一下渲染方式让图形呈现的效果更复杂。比如说，我们可以使用乘法创造一个 10*10 的方格，让每个格子左上角是绿色，右下角是红色，中间是过渡色。代码和显示的效果如下所示：
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了如何使用片元着色器进行几何造型，通过WebGL中的片元着色器实现颜色控制、绘制圆、线段和几何图形等功能。文章首先讲解了如何用片元着色器控制局部颜色，包括绘制纯色、颜色过渡和创建复杂效果的方法。接着详细讲解了如何用片元着色器绘制圆和线段，包括利用distance函数和smoothstep函数实现清晰的圆，以及利用向量计算绘制直线。进一步讨论了如何绘制线段和封闭平面图形，通过判断点到线段的距离实现绘制效果。文章通过具体的代码示例和解释，帮助读者深入理解片元着色器在几何造型中的应用，为读者提供了实用的技术指导和灵感。同时，文章还介绍了符号距离场渲染的方法，通过定义距离和根据距离着色的思路，展示了如何绘制多种几何图形和环形效果。这些方法不仅能帮助读者快速实现复杂的图形渲染，还为他们提供了统一的方法论，为WebGL开发者提供了有价值的技术参考。文章还提到了着色器造型的广泛应用，包括图像剪裁、动态修饰和3D场景中的几何体修饰等实际应用案例，为读者展示了片元着色器的实际用途和广泛适用性。文章总结了使用片元着色器进行几何造型的两种常用方法，并鼓励读者尝试绘制其他图形，以加深对着色器造型的理解和应用。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68
《跟月影学可视化》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(13)
- 最新
- 精选
- SamGSLS中可以debugger或者console.log操作吗，总感觉没有理解到webgl的原理
作者回复: 目前不能，glsl在浏览器中是不好调试。你多写写就会熟悉，可以看看shadertoy上的一些有趣的例子然后模仿
2020-08-021 
秋谷看到例子中的画布宽高都是相等的，如果是不等的情况下，能画出来圆吗，自己画出来的变成了椭圆了作者回复: 可以，和画布宽高无关，你不能只是直接缩放canvas，而是应该对应设置width和height
2021-07-21
姚凯伦使用符号距离场渲染的方式绘制线段感觉很难实现端点圆角和指定线段接头处的连结方式等效果作者回复: 后面有一节专门介绍绘制带宽度曲线，一般这种用挤压法比较好。
2020-10-08
武岳符号距离场，SDF，学习了2020-07-243
白夜那个进度条的例子没怎么看懂，老师能稍微解释一下吗？2020-09-0312
西门吹雪真是大开眼界 简单的代码 震撼的效果2020-09-131
有一种踏实clamp 函数还真是有点奇怪 1.理论上 clamp(x, a, b) = min(max(x, a), b)，显然当 a < b 时，才会有预期的效果，而当 a > b 时，返回的结果永远是 b； 2.但是 clamp(0.5, 1.3, 1.2) 返回 0，而 float b = 1.2; clamp(0.5, 1.3, b) 返回 1.2，这就令人费解！2023-12-04归属地：上海
量子蔷薇图片渐隐渐显没看懂，老师能解释一下吗？ gl_FragColor.rgb = color.rgb * clamp(0.5, 1.3, d + 1.0 * shading); 这里 clamp 函数的用法没看懂，渐变的某个时刻图片会变成黑色，也就是说 rgb 乘积会有 0 的情况，但是 clamp 里面我看不懂什么情况下返回的结果会是0？2022-10-24归属地：上海
阿不晕因为两个二维向量叉积的 z 轴分量的大小，就是这两个向量组成的平行四边形的面积，这段着实没有看懂。2022-08-12归属地：浙江1
冰糖爱白开水学这个课程，需要有一定基础2022-03-01
收起评论