如何查看陰影貼圖

我希望能夠在單獨的畫布元素上查看來自所有場景光源（聚光燈或方向燈）的生成陰影貼圖。如何查看陰影貼圖

有沒有辦法用three.js來實現這一點？我想要一些指針。

2013-05-08 gaitat

在第二個畫布上，設置渲染器，使用簡單的片段着色器添加四邊形，用於對紋理進行採樣（您的部門h地圖）並用正交相機渲染。通常，深度貼圖正在渲染到先前設置的渲染緩衝區中，並且使用quad的材質發送與渲染緩衝區顏色附件對應的sampler2D uniform。我還沒有把答案，因爲我不知道這是你需要什麼。 – 2013-05-08 09:56:40

是的，這是我想要的，但我找不到任何類似的例子。例如，如果場景有10個燈光，設置10個渲染器和10個不同的場景是不是很昂貴？ – gaitat 2013-05-08 20:41:01

方向燈應該只有一個，所以只能有一個地圖。對於聚光燈，如果有多個，請不要生成陰影貼圖，但要模擬陰影或使用某些投影貼圖或類似工具來減輕面積，如果有N個光源，則不需要渲染N個深度貼圖。如果你真的需要它，你應該考慮可能延遲渲染，你可以在threejs.org找到幾個例子，但它仍在進行中。 – 2013-05-08 22:00:28

爲了從一個光（點或定向）查看陰影貼圖可以執行以下操作：

// render scene as you normally would. 
// after this call the shadowmp has been generated 
renderer.render (scene, camera); 

// render a scene of one quad to see the shadowmap on your canvas 
quadMaterial.uniforms.map.value = light.shadowmap; 
renderer.render (quadScene, quadCamera);

在需要設置了quadCamera

// set up an orthographic camera 
quadCamera = new THREE.OrthographicCamera (textureWidth/- 2, textureHeight/2, textureWidth/2, textureHeight/- 2, -1000, 1000); 
quadCamera.position.z = 100;

前一級和quadScene

var quadScene = new THREE.Scene(); 

quadMaterial = new THREE.ShaderMaterial ({ 

     uniforms: 
     { 
      map: { type: "t", value: null }, 
     }, 

     vertexShader: 
     [ 
      "varying vec2 vUv;", 

      "void main()", 
      "{", 
       "vUv = vec2 (uv.x, 1.0 - uv.y);", 
       "gl_Position = projectionMatrix * modelViewMatrix * vec4 (position, 1.0);", 
      "}" 
     ].join("\n"), 

     fragmentShader: 
     [ 
      "uniform sampler2D map;", 
      "varying vec2 vUv;", 

      "float unpack_depth (const in vec4 rgba_depth)", 
      "{", 
       "const vec4 bit_shift = vec4 (1.0/(256.0 * 256.0 * 256.0), 1.0/(256.0 * 256.0), 1.0/256.0, 1.0);", 
       "float depth = dot (rgba_depth, bit_shift);", 

       "return depth;", 
      "}", 

      "void main()", 
      "{", 
       "vec4 rgbaDepth = texture2D (map, vUv);", 
       "float fDepth = unpack_depth (rgbaDepth);", 

       "gl_FragColor = vec4 (vec3 (fDepth), 1.0);", 
      "}" 
     ].join("\n"), 

     blending: THREE.NoBlending, 
     depthTest: false, 
     depthWrite: false, 
    }); 

quadScene.add (new THREE.Mesh (
    new THREE.PlaneGeometry (textureWidth, textureHeight), quadMaterial));

來源

2013-05-13 17:23:40 gaitat

看看： http://threejs.org/examples/webgl_multiple_canvases_complex.html 和 http://threejs.org/examples/webgl_multiple_canvases_grid.html

應該有THREE.MeshDepthMaterial，如果沒有創建自己的深度樣THREE.ShaderMaterial。

來源

2013-05-08 21:57:41

MeshDepthMaterial用於將深度信息應用到網格上。這是我需要使用的ShaderMaterial而不知道如何。我發現這個小提琴http://jsfiddle.net/DW9q4/43/，但它只顯示黑色。 – gaitat 2013-05-08 22:35:47

如何查看陰影貼圖

回答

相關問題