three.js 之 透明物體不能正常顯示

這幾天遇到一個需求，類似這個案例：http://www.hightopo.com/demo/FaultDetection/

就是這個透明漸變呼吸光柱，看到之后就想着寫個shader材質實現透明度漸變，並隨着時間微弱變化就好了，但是寫完之后，透明部分的渲染卻出了問題。

請先無視頂部紋理，因為這不是重點，我們可以看到同一物體在不同角度下，透明部分的渲染卻不一樣（某些角度下，透明部分渲染為白色）

由於剛開始百度的姿勢不正確加上自己的一點小疏忽，折騰了半天，最后，還是在這篇文章中找到了答案。https://www.jianshu.com/p/5807b5f69480

答案就是為透明物體設置渲染層級。

//按層級進行先后渲染
this.renderer.sortObjects = true;

//設置透明物體的渲染層級（默認是0）
cylinder.renderOrder = 9;

最后奉上該呼吸效果的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(89./255.,208./255.,255./255.);
            float height = iPosition.y + 15.;
            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(255.,0.,0.)* alphax * 0.0008,alphay*0.7);  
        }
    `
}

注意：

alphax是為了給x軸添加紅色權重，alphay是y軸的呼吸效果