threejs 着色器 Shader 绘制马路

基础方法介绍（使用到的方法）

mod(x,y);

• 表示x–y*floor(x/y)
• mod 可以简单理解为 x % y （自行理解）
• 简单使用

• 实例代码1 --- 片元着色器代码 mod 可以简单理解为 vUv.x % 0.3 （自行理解）

    varying vec2 vUv;
    void main() {
        float strength = mod(vUv.x,0.3);
        gl_FragColor = vec4(strength,strength,strength,1.0); 
    }

我们转换思维去想一想 是不是 加上 step 方法会不会就可以把颜色再深入表达出来呢!

stop

• ( float number , float value) 内置函数 理解为：value > number ? 1 : 0;

我们来看看 介绍完 step 方法后 mod 结合 step 可以绘制出什么效果吧~ （结合我们的马路案例作介绍）

• 代码实例2 （片元着色器代码）可以自行测试看效果

    varying vec2 vUv;
    void main() {
       if(step(0.15 , mod(vUv.y + 0.1  ,0.5)) == 1.0){
          gl_FragColor = vec4(1.0);
       } 
    }

效果已经完成一半了 我们再吧效果的范围缩小到中间区域 是不是我们想要的马路效果就出来了呢~

• 代码实例3 （片元着色器代码）可以自行测试看效果

   varying vec2 vUv;
        uniform vec3 uColor;
        uniform float uTime;

        void main () {
            if(vUv.x >= 0.45 && vUv.x <= 0.55 ){
                if(step(0.15 , mod(vUv.y + 0.1  ,0.5)) == 1.0){
                  gl_FragColor = vec4(1.0,1.0,0.0,1.0);
                } else{
                    gl_FragColor = vec4(uColor,1.0);
                }
                return;
            }
            gl_FragColor = vec4(uColor,1.0);
        }

最终效果

代码 着色器部分

const geometry = new THREE.PlaneBufferGeometry(3, 5, 32, 32);
const material = new THREE.ShaderMaterial({
    uniforms: {
        uColor:{
            value:new THREE.Color('#080E1C')
        }
    },
    vertexShader: `
        varying vec2 vUv;
        varying vec3 v_position;

        void main() {
            vUv = uv;
            v_position =  position;

            vec4 modelPosition = modelMatrix * vec4( position, 1.0 );
            gl_Position = projectionMatrix * viewMatrix * modelPosition;
        }
        `,
    transparent:true,
    fragmentShader: `
        varying vec2 vUv;
        uniform vec3 uColor;
        uniform float uTime;

        void main () {
            if(vUv.x >= 0.45 && vUv.x <= 0.55 ){
                gl_FragColor = mix(vec4(uColor,1.0),vec4(1.0,1.0,0.0,1.0),step(0.15 , mod(vUv.y + 0.1  ,0.5)));
                return;
            }
            gl_FragColor = vec4(uColor,1.0);
        }
     `
})

感兴趣的话可以试着优化 （自行发挥）；