如何查看阴影贴图

我希望能够在单独的画布元素上查看来自所有场景光源（聚光灯或方向灯）的生成阴影贴图。如何查看阴影贴图

有没有办法用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

如何查看阴影贴图

回答

相关问题