three.js 之透明物体不能正常显示

这几天遇到一个需求，类似这个案例：http://www.hightopo.com/demo/FaultDetection/

就是这个透明渐变呼吸光柱，看到之后就想着写个shader材质实现透明度渐变，并随着时间微弱变化就好了，但是写完之后，透明部分的渲染却出了问题。

请先无视顶部纹理，因为这不是重点，我们可以看到同一物体在不同角度下，透明部分的渲染却不一样（某些角度下，透明部分渲染为白色）

由于刚开始百度的姿势不正确加上自己的一点小疏忽，折腾了半天，最后，还是在这篇文章中找到了答案。https://www.jianshu.com/p/5807b5f69480

答案就是为透明物体设置渲染层级。

//按层级进行先后渲染

this.renderer.sortObjects = true;

//设置透明物体的渲染层级（默认是0）

cylinder.renderOrder = ;

最后奉上该呼吸效果的shader：

const Gradient = {

    vs:`

        varying vec3 iPosition;

        void main(){

            iPosition = position;

            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

        }

    `,

    fs:`

        varying vec3 iPosition;

        uniform float time;

        void main(){

            vec3 color = vec3(./.,./.,./.);

            float height = iPosition.y + .;

            float white = (distance(vec2(iPosition.x,iPosition.z),vec2(0.0))-6.0)/(6.0 * (sqrt(2.0)-1.0));

            float alphax = smoothstep(0.0,1.0,white );

            float alphay = smoothstep(1.0,0.0,height/25.0 + sin(time) * 0.2 );

            if(height<0.1||height>29.9){

                discard;

            }

            gl_FragColor = vec4(color +vec3(.,.,.)* alphax * 0.0008,alphay*0.7);

        }

    `

}

注意：

alphax是为了给x轴添加红色权重，alphay是y轴的呼吸效果

巴特西

three.js 之透明物体不能正常显示

最新文章

热门文章

巴特西

three.js 之 透明物体不能正常显示

最新文章

热门文章

three.js 之透明物体不能正常显示