CODEWITHSUNDEEP
three.jswebgl
gaitat
gaitat

Reputation: 12632

How to view the shadowmap

I would like to be able to view the generated shadow maps from all the scene light sources (spot-light or directional-light) on a separate canvas element.

Is there a way to achieve this with three.js? I would like some pointers.

Upvotes: 3

Views: 1815

Answers (2)

gaitat
gaitat

Reputation: 12632

In order to view the shadowmap from one light (spot or directional) you can do the following:

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

In a previous stage you need to set up the quadCamera

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

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

Upvotes: 2

Dragan Okanovic
Dragan Okanovic

Reputation: 7771

Take a look at: http://threejs.org/examples/webgl_multiple_canvases_complex.html and http://threejs.org/examples/webgl_multiple_canvases_grid.html

There should be THREE.MeshDepthMaterial, if not create you own depth-like THREE.ShaderMaterial.

Upvotes: 0

Related Questions