如何查看阴影贴图答案

【问题标题】：How to view the shadowmap如何查看阴影贴图
【发布时间】：2013-05-02 10:31:51
【问题描述】：

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

有没有办法用three.js 实现这一点？我想要一些指针。

【问题讨论】：

在第二个画布上，设置渲染器，使用简单的片段着色器添加四边形，该着色器对纹理（您的深度图）进行采样，并使用正交相机进行渲染。通常，深度图被渲染到先前设置的渲染缓冲区中，并使用四边形的材质发送与渲染缓冲区的颜色附件相对应的 sampler2D 统一。我没有给出答案，因为我不确定这是否是您需要的。
是的，这就是我想要的，但我找不到任何类似的例子。此外，如果场景有 10 个灯光，那么设置 10 个渲染器和 10 个不同的场景会不会很昂贵？
定向光应该只有一个，所以只有一张图。对于聚光灯，如果有多个，不要生成阴影贴图，而是使用一些投影纹理或类似的东西来模拟阴影或照亮区域，如果有 N 个灯光，则不需要渲染 N 个深度贴图。如果你真的需要它，你应该考虑延迟渲染，你可以在threejs.org上找到一些例子，但它仍在进行中。
我真的没有问如何模拟 n-spot-light shadowmaps。只是如何显示它们。顺便说一句，一个场景可以有 n 个方向灯。

【解决方案1】：

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

应该有THREE.MeshDepthMaterial，如果没有创建你自己的深度类THREE.ShaderMaterial。

【讨论】：

MeshDepthMaterial 用于将深度信息应用到网格上。这是我需要使用的 ShaderMaterial，只是不知道如何使用。我找到了这个小提琴jsfiddle.net/DW9q4/43，但它只显示黑色。

【解决方案2】：

为了从一个光源（点光源或定向光源）查看阴影贴图，您可以执行以下操作：

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

【讨论】：