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

Three.js笔记 专栏收录该内容
118 篇文章 66 订阅

在这里插入图片描述
以上为当前效果的动图。

效果查看地址: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;
        };
  • 3
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值