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。

如何查看shadowmap

2 个答案: