threejs中两种着色器材质
- ShaderMaterial
- RawShaderMaterial
其中RawShadermaterial 会需要自己写全所有用到的变量和属性， 而前者系统会补全一些属性。
如果使用 shaderMaterial 这四个属性就可以不需要声明
·设置精度· precision lowp float; 表示进行低精度的浮点数计算
shader : 波浪形状 让z轴 等于 sin() 这个函数计算后的之，周期函数都可以。波浪起伏多少取决于顶点数量。
根据深度z轴颜色变化， 就需要 varying 传递 modelPosition.z
然后在片元着色器中接受，然后颜色根据深度设置
根据uniform 传递的 纹理贴图去设置gl_gColor:
传递vUV 贴图 unifrom :{ uTexture:texture }
uniform sampler2D uTexture;
vec4 textureColor = texture2D(uTexture, vUV); textureColor.rgb *=deep // 也可以设置根据不同深度 设置亮度不同
gl_FragColor = textureColor;
- shader 图像渐变反复的效果 mod(t, 1.0)取模运算
- 图片反复但是不渐变 step(0.5, t) 表示 小于 0.5 =）0 大于0.5 =》 1
- 窗户效果 x轴 + y 轴
- step(0.2, max(x, y)) 得到 中间 和 周围不同的纹理，
- 得到纹理层次 一个层次一个颜色 floor(vUV.x * 10.0) / 10 =》 0.1 0.2 0.3 。。。 1.0
- length(vec2(x, y)) 画圆， 从中心点开始 distance(vUV, vec2(0.5, 0.5))
