強制一個精靈對象始終在THREE.js中的天體對象前面

我目前有一個自定義着色器在天穹上畫一個漸變，並希望在天蠍座前面有一個太陽/月亮（從用戶角度來看）。最簡單的方法是爲太陽和月亮拍攝精靈，但問題在於精靈會在天體中出現（精靈在前方和後方的中間部分）。我試圖用polygonoffset來解決這個問題，但是這似乎不適用於精靈對象。強制一個精靈對象始終在THREE.js中的天體對象前面

所以我的問題是，我如何在skydome上設置太陽/月亮，而不必修改我自定義的skydome着色器來添加漸變（最終會變得非常困難）太陽/月亮紋理？

以下是天球着色器的代碼。

new THREE.ShaderMaterial({ 
    uniforms: { 
     glow: { 
      type: "t", 
      value: THREE.ImageUtils.loadTexture(DEFAULT_PATH+"glow2.png") 
     }, 
     color: { 
      type: "t", 
      value: THREE.ImageUtils.loadTexture(DEFAULT_PATH+"sky2.png") 
     }, 
     lightDir: { 
      type: "v3", 
      value: self.lightPos 
     } 
    }, 
    vertexShader: [ 
     "varying vec3 vWorldPosition;", 
     "varying vec3 vPosition;", 
     "void main() {", 
      "vec4 worldPosition = modelMatrix * vec4(position, 1.0);", 
      "vWorldPosition = worldPosition.xyz;", 
      "vPosition = position;", 
      "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);", 
     "}" 
    ].join("\n"), 
    fragmentShader: [ 
     "uniform sampler2D glow;", 
     "uniform sampler2D color;", 
     "uniform vec3 lightDir;", 
     "varying vec3 vWorldPosition;", 
     "varying vec3 vPosition;", 
     "void main() {", 
      "vec3 V = normalize(vWorldPosition.xzy);", 
      "vec3 L = normalize(lightDir.xzy);", 
      "float vl = dot(V, L);", 
      "vec4 Kc = texture2D(color, vec2((L.y + 1.0)/2.0, V.y));", 
      "vec4 Kg = texture2D(glow, vec2((L.y + 1.0)/2.0, vl));", 
      "gl_FragColor = vec4(Kc.rgb + Kg.rgb * Kg.a/2.0, Kc.a);", 
     "}", 
    ].join("\n") 
});

來源

2013-04-27 Freddie Meyer

確保您的體育館被任何其他對象之前繪製和材料禁用depthWrite/depthTest標誌（depthWrite是這裏最重要的）：

yourmaterial = new THREE.ShaderMaterial({...}); 
yourmaterial.depthWrite = false; 
yourmaterial.depthTest = false; 
skydome.renderDepth = 1e20;

其中skydome是網格上您已申請yourmaterial。

來源

2013-04-27 09:49:39 Popov

強制一個精靈對象始終在THREE.js中的天體對象前面

回答

相關問題