three.js - 如何查看阴影贴图

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。