遮擋THREE.js中的對象的部分透明着色器

我正在製作覆蓋棋盤的戰爭霧層的遊戲。我希望有一個光標，當玩家將鼠標放在一個貼圖上時顯示出來，並且我正在使用着色器周圍的發光效果實現此功能，同樣使用着色器實現。遮擋THREE.js中的對象的部分透明着色器

我遇到了一個奇怪的問題：發光效果適用於正x值（當相機設置爲x = -250,y = 250時），但我無法看到x值爲負值，除非相機旋轉到幾乎完全垂直（或者我將的相機移動到的戰霧層下）。

這很難解釋，所以我做了一個演示CodePen問題：https://codepen.io/jakedluhy/pen/QqzajN?editors=0010

我很新的自定義着色，所以任何見解或幫助將不勝感激。下面是戰爭迷霧的着色器：對於「光暈」

// Vertex 
varying vec4 vColor; 

void main() { 
    vec3 cRel = cameraPosition - position; 

    float dx = (20.0 * cRel.x)/cRel.y; 
    float dz = (20.0 * cRel.z)/cRel.y; 

    gl_Position = projectionMatrix * 
       modelViewMatrix * 
       vec4(
        position.x + dx, 
        position.y, 
        position.z + dz, 
        1.0 
       ); 

    vColor = vec4(0.0, 0.0, 0.0, 0.7); 
} 

// Fragment 
varying vec4 vColor; 

void main() { 
    gl_FragColor = vColor; 
}

而且着色器：

// Vertex 
varying vec4 vColor; 
attribute float alpha; 

void main() { 
    vColor = vec4(color, alpha); 

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

// Fragment 
varying vec4 vColor; 

void main() { 
    gl_FragColor = vColor; 
}

在頂點着色器的戰爭迷霧的數學是保持迷霧中相對於遊戲板的位置。

標記three.js所和GLSL，因爲我不知道這是否是一個three.js所獨有的問題或不...

編輯：版本0.87.1

來源

2017-10-18 Jake Dluhy

你的例子看起來很奇怪。通過在霧氣材質上設置depthWrite:false這兩個方塊呈現。

版本0.87.1

來源

2017-10-19 00:45:03 pailhead

你介意我問你所說的「怪異」是什麼意思？但這絕對有效，看起來是預期的用途！從文檔：「繪製2D疊加層時，禁用深度寫入可能很有用，以便將多個東西疊加在一起而不會創建z-index工件。」 –

我無法分辨戰爭迷霧的位置，而沒有深入研究代碼。我認爲你做錯了，如果你依靠三個人來分類，他們可能會因爲你打算做的事而離開。如果您正在處理從鳥類角度來看的地形，那麼有層次感是有意義的 - 可能是不同的「THREE.Scene」，您可以按照需要的順序「手動」渲染。 – pailhead

RenderTerrain（）RenderUnits（）RenderEffects（）等... – pailhead

遮擋THREE.js中的對象的部分透明着色器

回答

相關問題