Three.js 如何查看阴影贴图

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

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

看看： 和

---

应该有三个.MeshDepthMaterial，如果不是像三个.ShaderMaterial那样创建自己的深度。

要从一个灯光（聚光灯或定向灯）查看阴影贴图，可以执行以下操作：

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

在前一阶段中，您需要设置四摄像头

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

四元场景呢

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

---

在第二个画布上，设置渲染器，添加带有简单片段着色器的四边形，该着色器对纹理（深度贴图）进行采样，并使用正交摄影机进行渲染。通常，深度贴图将渲染到先前设置的renderbuffer中，并使用四边形的材质发送与renderbuffer的颜色附件相对应的二维均匀采样。我没有给出答案，因为我不确定这是否是你需要的。是的，这是我想要的，但我找不到任何类似的例子。另外，如果场景有10个灯光，设置10个渲染器和10个不同的场景不是很昂贵吗？平行光应该只有一个，所以只有一个贴图。对于聚光灯，如果有多个，则不生成阴影贴图，而是使用一些投影纹理或类似的方法模拟阴影或照亮区域，如果有N个灯光，则不需要渲染N个深度贴图。如果你真的需要它，你应该考虑延迟渲染，你可以在SuthEj.Org中找到几个例子，但是它仍然在进行中。我真的没有问如何模拟n-聚光灯阴影图。只是如何显示它们。顺便说一下，一个场景可以有n个平行光。MeshDepthMaterial用于将深度信息应用到网格上。这是一个着色器材质，我需要使用，只是不知道如何使用。我找到了这把小提琴，但它只显示黑色。