ThreeJs-11精通着色器编程（重难点）
着色器语言编程比较重要，后面的几个章节都会围绕这个来做特效一.初识着色器语言
首先什么叫做着色器，他是一种语言，首先需要设置为着色器材质，然后在材质里面书写一些语言，可以告诉他顶点，然后去自定义一些东西，比如我想要这一面为红色等等
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135233332-1708567879.png
比如用一个基础材质做了一个平面
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135232835-2015712741.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135232451-792191584.png
现在改为着色器材质
着色器里面一个顶点着色器告诉顶点位置，gl只能支持四维向量，vec4表示四维向量，position是有material自带的position直接拿过来的，最后一个1是第四个顶点
下面一个事片源着色器，负责告诉这个顶点要干嘛，比如我要修改颜色，也是一个四维向量rgba并且是浮点数，这个颜色就表示红色
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135231996-2027416106.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135231576-385567676.png
此时呢颜色就出来了，但是并不会跟着坐标轴转换
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135231167-486963127.png
此时需要将顶点位置进行转换，这个公式也是固定的
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135230771-856990757.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135230239-1173695408.png
此时就能随便动了
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135229856-1580207551.png
1.1 插件安装与文件导入开发
当然这个语言有时候可能会写很多，在一个模板字符串里面就比较麻烦，没有任何代码提示，而且也不会报错
所以一般我们都会这么来
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135229487-639341373.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135229113-1760759968.png
这边导入并使用
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135228750-229077558.png
这里解决了些东西弄了半天，反正vite不支持直接这样分包导入
如果一定要这样需要下载并配置
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135228360-268777949.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135228024-252809839.png
可以安装的插件，第一个对glsl语言的支持不再是字符串，第二个是格式化并代码提示的
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135227598-508344798.png
1.2 原始着色器材质(RawShaderMaterial)
原始着色器和之前的着色器材质用法基本类似，唯一的区别就是，着色器材质很多都是可以默认直接拿mesh里面的比如position，但是原始着色器材质，所有的矩阵的属性都需要声明
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135227233-514299610.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135226870-1611095264.png
到这里就可以实现之前着色器一样的效果，初次之外还有一些别的设置
还有一个属性uv，他表示的是顶点，二维属性那就是二维平面的顶点
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135226493-2117711647.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135226126-544847899.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135225749-779804906.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135225404-1975030729.png
1.3 控制顶点类型改变波浪形状
到目前为止好像也没有看出这个材质特殊性在哪
我们可以把之前顶点着色器代表位置的参数领出来作为一个变量，可以去单独设置他的x轴z轴等
需要注意的是：这里的position每个轴的范围是-1到1，参考之前的uv顶点，也就是x轴是越来越大的，所以如果你用z轴去加x轴，就会变成这个效果，细品
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135225020-1535650147.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135224656-998324328.png
这里提供一个sin函数
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135224011-897759915.gif
当然这是横着的波浪如果要竖着那就是对应还是z轴加y轴
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135222848-960125306.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135222480-1485040563.png
然后还可以来一个例子可以根据不同的凸出起来的高度设置暗度不同的颜色，所以首先我要拿到z轴
顶点这边声明可以交换的属性并且把z轴给上去
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135222120-1128485983.png
顶点拿过来的值不支持修改，如果要改，那就拿过来在片段着色器里面改，声明一个变量需要声明是什么类型的值，这里只是为了让范围在0-1
一定要注意分号每一行都要加分号
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135221745-879894905.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135221354-1354867788.png
1.4 uniform传递变量
我们可以让这个波浪动起来，既然要动起来就可以让z轴加一些动态的数据，其实就是时间就可以了
首先我们材质这里是可以传值进来的
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135221021-472430671.png
然后在动画函数里面，之前拿到过时间的函数，这个函数就是从进入3D一直以来的秒数
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135220690-1304555247.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135220354-1412244813.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135219932-636714773.gif
1.5 uv纹理
如果有一张图，比如冬奥会的旗帜是否可以让他实现彩旗飘飘的效果，这里需要用到uv纹理贴图
大概步骤是，加载贴图，然后跟刚才一样通过变量传进来
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135219521-525580401.png
这边接收注意有专门的类型，根据顶点去除对应的颜色，刚好是四个点，图片也是四个点
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135219176-520730689.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135218767-1084171922.gif
二.着色器编写各类型图案
2.1 上部分
首先回到最开始的状态，用uv作为四个顶点的颜色的状态
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135218359-1995063133.png
对于之前uv的应用
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135217846-2116364334.png
利用uv实现渐变效果
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135217418-1603248083.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135216955-966770456.png
mod取余函数
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135216091-909785178.gif
step函数
实现斑马效果，注意上面mod的结果0-1之间
当然如果是对vUv.x那就是垂直条纹
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135215616-497351606.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135215210-1366121845.png
条纹还可以相加，x轴弄完弄y轴
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135214780-1364871380.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135214384-998412907.png
当然加减乘除其实都是可以的，分别可以完成不同的图案
乘的话就是类似于一个正方形
只有1的位置才是白色，因为值设置的很大0.8，所以1的很少
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135213976-937621039.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135213555-259126297.png
如果设置的很小大多数都可以为1
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135213191-1219082044.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135212813-1713429462.png
相减
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135212374-2039944492.png
如果相乘，值有些偏差此时可以形成一个条状效果
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135211952-583570084.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135211588-2035109226.png
那我如果来两个条带相加呢
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135211209-983702256.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135210811-1982063442.png
T型图，也就是设置偏移量，乘了10之后，减一些值
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135210360-2091962332.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135209923-696677389.png
利用绝对值 abs函数
首先这里可以理解下
此时表示0-0.5，为什么以为vUv的值是0-1，减去0.5后，那就是-0.5-0.5，但是颜色rgba不支持负数，所以x轴就只能从0-0.5开始变，小于0的部分就都是黑色
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135209505-1492832581.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135209028-1786292003.png
那如果我想实现一个从白到黑再到白的效果，那就要用到绝对值
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135208598-1302648701.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135208089-413864405.png
2.2 下部分
min函数
实现十字交叉效果
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135207717-144540450.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135207309-1496686597.png
同理把min改为max
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135206928-481541096.png
利用step函数
外围是1，里面是0
想反过来前面加个1.0-即可
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135206526-180769980.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135206117-1489493342.png
floor函数向下取整
同方法可以用向上取整ceil就是现在的图案白的更多一点
也可以实现之前的条纹渐变
x*10范围在0-9.9999向下取整后那就是0-9再除以10那就是0-1左右
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135205713-40908507.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135205291-599044575.png
既然说floor可以实现渐变，之前也说乘可以实现格子效果，那么
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135204901-1241188278.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135204545-400011109.png
随机值
glsl本身没有随机函数，这里推荐一个网站
https://thebookofshaders.com/
类似于glsl的文档，里面有一些关于随机怎么生成的使用，直接拿过来
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135204195-52107864.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135203844-548508945.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135203443-164000927.png
同理改造下，让每个网格随机
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135203036-990485433.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135202620-1583802111.png
length函数
通过length函数得到uv变量长度给到color可以实现一个半径的扩展渐变效果
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135202250-1678035310.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135201865-976180637.png
distance函数，两个向量之间的距离
比如上面那个图案我不想以圆弧向外扩进，想以中心远点扩展，那我就可以计算顶点到0.5 0.5的距离，0.5 0.5就是中心原点
要反过来颜色，就1-
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135201429-1049020896.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135200997-2081989216.png
除法
前面加减乘都是有了对应的效果，由刚才的效果可知，越中间，和原点的距离是越短的值肯定就越小，那么一个值除以小值结果反而越大，除以大值结果反而越小，所以除法之后，中间越大，就越亮接近白色
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135200626-488787737.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135200250-2133315687.png
那如果此时减去一个1.0，周围可能会使负数，之前也看过负数也是黑色，然后光圈周围会越来越胆，最后只剩下比1大的还保留颜色
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135159884-1533675489.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135159543-670865103.png
设置uVu
我们可以对uVu进行直接设置，乘就是拉伸
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135159112-744534997.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135158701-382464255.png
加减就是偏移
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135158350-1233512329.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135157965-833656349.png
套用十字交叉效果
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135157411-180677819.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135156951-728269506.png
当然也可以直接相加
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135156509-1201100479.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135156108-1991731490.png
如果你想要这个图案旋转起来
也是一样的需要去找一些能实现的函数
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135155747-620060863.png
三个参数一个是uv，一个是旋转角度，一个是中心原点位置
旋转角度，也没有pi可以使用这里就用3.14代替，*0.25就表示180度，向量如果都是0.5可以只写一个
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135155397-701305719.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135155023-1930780166.png
如果要动起来传一个时间属性就可以了
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135154689-1273875767.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135153931-590831564.gif
三.shader着色器编写高级图案
3.1 上部分
实现圆形
顶点到原点的距离扩散，但是同时给个限定要么黑要么白
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135152871-847158385.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135152424-1378480198.png
如果你想让黑色再小点，也就是偏移往回走
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135152085-866802311.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135151751-755343101.png
实现圆环效果，也就是里面再来个圆，一个偏移量大一个小，然后乘起来
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135151341-214342233.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135151001-222114744.png
当然实现光圈的效果不止这一种比如还有
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135150657-70930903.png
实现波浪环效果
就是把顶点的x和y进行改造，加上sin角度，放入刚才环形里面
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135150236-1935882897.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135149837-1562239537.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135149450-1023735366.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135148982-199274362.png
实现雷达效果
需要用到一个 atan反正切函数
先简单设置一个角度
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135148558-1667992608.png
然后就可以得到这么一个图案，从左下顶点开始沿着一个顺时针，颜色变淡
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135148008-796456971.png
调整一下从中心原点开始，不从左下角开始
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135147591-911875256.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135147224-820479342.png
但是现在角度有点问题，左边部分是小于1减去0.5还是负数所以是黑色，这里有个公式
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135146826-1477895503.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135146425-1472238604.png
然后用刚才实现圆环的效果，给到透明度
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135145998-453660352.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135145559-1726192107.png
或者也可以用刚才实现圆的效果
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135145154-1429770548.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135144708-1574992688.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135144363-444962849.png
实现动态效果，就用刚才的旋转加时间方法拿来给到uv
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135143915-1886542017.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135143426-1744723317.gif
万花筒效果
角度不变但是使用角度乘以一个数（决定到时候万花筒有多少壁），再对6.28取余，6.28就是2π，就是一圈
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135142892-973780062.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135142381-1567379425.png
或者也可以先把角度除了6.28
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135141928-962835159.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135141506-1868351144.png
当然也可以在最上面定义好一个π，注意定义的方式
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135141106-1701538299.png
3.2 下部分
分享一个网站https://www.shadertoy.com/，国内外大佬分享着色器成果的地方
噪声效果
可以在文档里面看到，一种随机效果，可以实现云，沙滩等效果
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135140728-976866833.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135140136-531571662.png
实现波纹效果
文档直接复制其函数
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135139478-533441346.png
直接用上来还不行还需要配合分段函数来
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135139020-1221436339.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135138515-1287523721.png
sin实现波纹效果
本身直接加sin是很模糊的
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135138092-781299692.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135137637-1738329388.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135137206-29919662.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135136687-1378103889.png
现在想实现一个效果除了这些颜色在混合一点颜色进来，还有一个函数叫做混合mix
黑加黄，第三个参数就是第三种颜色，就是黑
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135136341-1274827486.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135135975-695343024.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135135604-1771753330.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135135177-1803504414.png
融入波纹给到比例即可
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135134836-746405543.png
https://img2023.cnblogs.com/blog/2680817/202412/2680817-20241231135133738-1525460424.png
剩下漫天孔明灯效果
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]