如何查看陰影貼圖

Question

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

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

Answer 1

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

// 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)); 

Answer 2

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

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