114 Three.js实现深度遮挡的下雨特效

以上为当前效果的动图。

效果查看地址：https://www.wjceo.com/blog/threejs2/2020-09-01/203.html

渲染深度图

实现当前的效果，其实主要的用到了就是深度图原理。首先，我们需要实现生成一张深度图，在three.js里面，实现深度图的生成，其实就是renderTarget对象，这里，我讲解一下，如何生成一张three.js的深度图。
首先，你需要确定一下，你要生成深度图的范围，就是个宽高深范围，需要创建一个正交相机，定位到你需要生成深度范围的上方中心。
你还需要创建一个新的场景，three.js的Scene对象有一个overrideMaterial属性（如果不为空，它将强制场景中的每个物体使用这里的材质来渲染。默认值为null。），此属性可以设置一个材质对象，我这里直接赋值了一个shaderMaterial对象，用于需要渲染深度图信息的模型。
重要的一步就是渲染，在渲染前，我们需要设置渲染深度图场景的children列表，这里不能使用add方法添加渲染对象，因为你使用add方法，会修改掉原对象的parent，那么，绘制默认场景时，它的世界坐标获取有可能会出现错误，我们将需要渲染的3d对象直接push到床架你的一个新数组中，然后赋值给渲染深度图场景的children。
最后，绘制深度图时，直接用renderer对象即可：

        renderer.setRenderTarget(target);
        depthScene.children = [terrain];
        renderer.render(depthScene, orthCamera);
        renderer.setRenderTarget(null);

这里，直接设置了渲染对象，然后设置了一下深度渲染列表。渲染完深度场景后，再将渲染对象设置为null。这样就实现了一张深度图的渲染。

实现下雨时的深度裁剪

在上一节，我实现了雨滴朝向相机，并垂直于地面的效果。虽然是一个比较取巧的方式，详情见上一章。这一章，在之前的shader上面，修改了一下实现了深度裁剪。
那么，主要修改针对于雨滴的shader进行一下修改。在材质属性上，多添加了，深度相机矩阵，深度图，以及从顶点着色器传入到片元着色器的深度uv。
每次计算一个雨滴位置的使用，通过相机的逆矩阵，计算出来，当前相机位置的uv坐标。这里逻辑和场景世界坐标转平面坐标一个道理，获取到世界坐标，然后获取到基于左下角的uv映射。再转到片元着色器里面，在片元着色器里，增加通过深度uv去深度纹理上面拾取深度信息，根据盒子的高度，计算出遮挡的实际位置，如果当前渲染位置超过了遮挡位置，直接不渲染内容。这样就实现了根据地形的深度裁剪。

        material.onBeforeCompile = function (shader, renderer) {
            const getFoot = `
            uniform float top;
            uniform float bottom;
            uniform float time;
            uniform mat4 cameraMatrix;
            varying float depth;
            varying vec2 depthUv;
            #include <common>
            float angle(float x, float y){
                return atan(y, x);  
            }
            vec2 getFoot(vec2 camera,vec2 normal,vec2 pos){
                vec2 position;

                float distanceLen = distance(pos, normal);

                float a = angle(camera.x - normal.x, camera.y - normal.y);

                pos.x > normal.x ? a -= 0.785 : a += 0.785; 

                position.x = cos(a) * distanceLen;
                position.y = sin(a) * distanceLen;
                
                return position + normal;
            }
            `;
            const begin_vertex = `
            vec2 foot = getFoot(vec2(cameraPosition.x, cameraPosition.z),  vec2(normal.x, normal.z), vec2(position.x, position.z));
            float height = top - bottom;
            float y = normal.y - bottom - height * time;
            y = y + (y < 0.0 ? height : 0.0);
            float ratio = (1.0 - y / height) * (1.0 - y / height);
            depth = ratio;
            y = height * (1.0 - ratio);
            y += bottom;
            y += position.y - normal.y;
            vec3 transformed = vec3( foot.x, y, foot.y );
            vec4 cameraDepth = cameraMatrix * vec4(transformed, 1.0);
            depthUv = cameraDepth.xy/2.0 + 0.5;
            `;

            const depth_vary = `
            uniform sampler2D tDepth;
            uniform float opacity;
            varying float depth;
            varying vec2 depthUv;

            float decodeRGBA2Float(vec4 rgba)
            {
                return dot(rgba, vec4(1.0, 1.0 / 255.0, 1.0 / 65025.0, 1.0 / 16581375.0));
            }
            `;

            const depth_frag = `
              if(1.0 - depth < decodeRGBA2Float(texture2D( tDepth, depthUv ))) discard;
              vec4 diffuseColor = vec4( diffuse, opacity );
            `
            shader.vertexShader = shader.vertexShader.replace(
                "#include <common>",
                getFoot
            );
            shader.vertexShader = shader.vertexShader.replace(
                "#include <begin_vertex>",
                begin_vertex
            );
            shader.fragmentShader = shader.fragmentShader.replace('uniform float opacity;', depth_vary)
            shader.fragmentShader = shader.fragmentShader.replace('vec4 diffuseColor = vec4( diffuse, opacity );', depth_frag)

            shader.uniforms.cameraPosition = {
                value: new THREE.Vector3(0, 200, 0)
            }
            shader.uniforms.top = {
                value: 2000
            }
            shader.uniforms.bottom = {
                value: -2000
            }
            shader.uniforms.time = {
                value: 0
            }
            shader.uniforms.cameraMatrix = {
                value: new THREE.Matrix4()
            }
            shader.uniforms.tDepth = {
                value: target.texture
            }
            material.uniforms = shader.uniforms;
        };