https://www.magfine.it/mg3d/3dview/mrdoob-three.js/examples/js/utils/ShadowMapViewer.js

1/**
2 * @author arya-s / https://github.com/arya-s
3 *
4 * This is a helper for visualising a given light's shadow map.
5 * It works for shadow casting lights: THREE.DirectionalLight and THREE.SpotLight.
6 * It renders out the shadow map and displays it on a HUD.
7 *
8 * Example usage:
9 *	1) Include <script src='examples/js/utils/ShadowMapViewer.js'><script> in your html file
10 *
11 *	2) Create a shadow casting light and name it optionally:
12 *		var light = new THREE.DirectionalLight( 0xffffff, 1 );
13 *		light.castShadow = true;
14 *		light.name = 'Sun';
15 *
16 *	3) Create a shadow map viewer for that light and set its size and position optionally:
17 *		var shadowMapViewer = new THREE.ShadowMapViewer( light );
18 *		shadowMapViewer.size.set( 128, 128 );	//width, height  default: 256, 256
19 *		shadowMapViewer.position.set( 10, 10 );	//x, y in pixel	 default: 0, 0 (top left corner)
20 *
21 *	4) Render the shadow map viewer in your render loop:
22 *		shadowMapViewer.render( renderer );
23 *
24 *	5) Optionally: Update the shadow map viewer on window resize:
25 *		shadowMapViewer.updateForWindowResize();
26 *
27 *	6) If you set the position or size members directly, you need to call shadowMapViewer.update();
28 */
29
30THREE.ShadowMapViewer = function ( light ) {
31
32	//- Internals
33	var scope = this;
34	var doRenderLabel = ( light.name !== undefined && light.name !== '' );
35	var userAutoClearSetting;
36
37	//Holds the initial position and dimension of the HUD
38	var frame = {
39		x: 10,
40		y: 10,
41		width: 256,
42		height: 256
43	};
44
45	var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10 );
46	camera.position.set( 0, 0, 2 );
47	var scene = new THREE.Scene();
48
49	//HUD for shadow map
50	var shader = THREE.UnpackDepthRGBAShader;
51
52	var uniforms = new THREE.UniformsUtils.clone( shader.uniforms );
53	var material = new THREE.ShaderMaterial( {
54		uniforms: uniforms,
55		vertexShader: shader.vertexShader,
56		fragmentShader: shader.fragmentShader
57	} );
58	var plane = new THREE.PlaneBufferGeometry( frame.width, frame.height );
59	var mesh = new THREE.Mesh( plane, material );
60
61	scene.add( mesh );
62
63
64	//Label for light's name
65	var labelCanvas, labelMesh;
66
67	if ( doRenderLabel ) {
68
69		labelCanvas = document.createElement( 'canvas' );
70
71		var context = labelCanvas.getContext( '2d' );
72		context.font = 'Bold 20px Arial';
73
74		var labelWidth = context.measureText( light.name ).width;
75		labelCanvas.width = labelWidth;
76		labelCanvas.height = 25;	//25 to account for g, p, etc.
77
78		context.font = 'Bold 20px Arial';
79		context.fillStyle = 'rgba( 255, 0, 0, 1 )';
80		context.fillText( light.name, 0, 20 );
81
82		var labelTexture = new THREE.Texture( labelCanvas );
83		labelTexture.magFilter = THREE.LinearFilter;
84		labelTexture.minFilter = THREE.LinearFilter;
85		labelTexture.needsUpdate = true;
86
87		var labelMaterial = new THREE.MeshBasicMaterial( { map: labelTexture, side: THREE.DoubleSide } );
88		labelMaterial.transparent = true;
89
90		var labelPlane = new THREE.PlaneBufferGeometry( labelCanvas.width, labelCanvas.height );
91		labelMesh = new THREE.Mesh( labelPlane, labelMaterial );
92
93		scene.add( labelMesh );
94
95	}
96
97
98	function resetPosition () {
99
100		scope.position.set( scope.position.x, scope.position.y );
101
102	}
103
104	//- API
105	// Set to false to disable displaying this shadow map
106	this.enabled = true;
107
108	// Set the size of the displayed shadow map on the HUD
109	this.size = {
110		width: frame.width,
111		height: frame.height,
112		set: function ( width, height ) {
113
114			this.width = width;
115			this.height = height;
116
117			mesh.scale.set( this.width / frame.width, this.height / frame.height, 1 );
118
119			//Reset the position as it is off when we scale stuff
120			resetPosition();
121
122		}
123	};
124
125	// Set the position of the displayed shadow map on the HUD
126	this.position = {
127		x: frame.x,
128		y: frame.y,
129		set: function ( x, y ) {
130
131			this.x = x;
132			this.y = y;
133
134			var width = scope.size.width;
135			var height = scope.size.height;
136
137			mesh.position.set( - window.innerWidth / 2 + width / 2 + this.x, window.innerHeight / 2 - height / 2 - this.y, 0 );
138
139			if ( doRenderLabel ) labelMesh.position.set( mesh.position.x, mesh.position.y - scope.size.height / 2 + labelCanvas.height / 2, 0 );
140
141		}
142	};
143
144	this.render = function ( renderer ) {
145
146		if ( this.enabled ) {
147
148			//Because a light's .shadowMap is only initialised after the first render pass
149			//we have to make sure the correct map is sent into the shader, otherwise we
150			//always end up with the scene's first added shadow casting light's shadowMap
151			//in the shader
152			//See: https://github.com/mrdoob/three.js/issues/5932
153			uniforms.tDiffuse.value = light.shadow.map.texture;
154
155			userAutoClearSetting = renderer.autoClear;
156			renderer.autoClear = false; // To allow render overlay
157			renderer.clearDepth();
158			renderer.render( scene, camera );
159			renderer.autoClear = userAutoClearSetting;	//Restore user's setting
160
161		}
162
163	};
164
165	this.updateForWindowResize = function () {
166
167		if ( this.enabled ) {
168
169			 camera.left = window.innerWidth / - 2;
170			 camera.right = window.innerWidth / 2;
171			 camera.top = window.innerHeight / 2;
172			 camera.bottom = window.innerHeight / - 2;
173			 camera.updateProjectionMatrix();
174
175			 this.update();
176		}
177
178	};
179
180	this.update = function () {
181
182		this.position.set( this.position.x, this.position.y );
183		this.size.set( this.size.width, this.size.height );
184
185	};
186
187	//Force an update to set position/size
188	this.update();
189
190};
191
192THREE.ShadowMapViewer.prototype.constructor = THREE.ShadowMapViewer;