Permalink
Browse files

Complete ShadowMap js sample

  • Loading branch information...
1 parent ec50048 commit 57fcf062ff1d4f1eb7d4b9dc2a16bd00735f3149 @dimroc committed Sep 27, 2012
Showing with 163 additions and 2 deletions.
  1. +15 −0 index.html
  2. +1 −0 js/samples.js
  3. +147 −0 js/samples/shadow_map.js
  4. +0 −2 todo
View
15 index.html
@@ -1009,6 +1009,21 @@
</section>
<section>
+ <section>
+ <h3>Shadow Maps</h3>
+ <canvas data-sample="shadow_map"></canvas>
+ </section>
+
+ <section>
+ <h3>Render to texture</h3>
+ <p>Render a snap shot from the perspective of the light</p>
+ <img class="float_left" style="width:50%"
+ src="http://download.autodesk.com/global/docs/motionbuilder2013/en-us/images/GUID-48D90406-3DCC-4CF6-9A20-6EEC0DD2FBBC-low.png">
+ <canvas data-sample="render_to_texture"></canvas>
+ </section>
+ </section>
+
+ <section>
<h3>John Carmack on WebGL</h3>
<br/>
<div class="ytapiplayer" id="ytplayer"
View
1 js/samples.js
@@ -54,6 +54,7 @@
"js/samples/todo_lighted_spinning_textured_cube.js",
"js/samples/todo_lighted_spinning_cube.js",
"js/samples/particles.js",
+ "js/samples/shadow_map.js",
"js/samples/render_to_texture.js",
"js/samples/blur_post_process.js",
"js/samples/webgl_spinning_wireframe_cube.js",
View
147 js/samples/shadow_map.js
@@ -0,0 +1,147 @@
+(function() {
+
+ function ShadowMap() {
+ var SHADOW_MAP_WIDTH, SHADOW_MAP_HEIGHT;
+ SHADOW_MAP_WIDTH = SHADOW_MAP_HEIGHT = 512;
+
+ var width = sample_defaults.width * 2;
+ var height = sample_defaults.height * 2;
+ var clock = new THREE.Clock();
+
+ function createLight() {
+ var light = new THREE.SpotLight ( 0xffffffff );
+
+ light.position.set( 0, 15, 0);
+ light.target.position.set( 0, 0, 0 );
+
+ light.castShadow = true;
+
+ light.shadowCameraVisible = true;
+
+ light.shadowCameraNear = 1;
+ light.shadowCameraFar = 16;
+
+ light.shadowMapWidth = SHADOW_MAP_WIDTH;
+ light.shadowMapHeight = SHADOW_MAP_HEIGHT;
+
+ return light;
+ }
+
+ function createCubeMesh() {
+ var scale = 2.5;
+ var geometry = new THREE.CubeGeometry( scale, scale, scale );
+ var material = new THREE.MeshPhongMaterial({ color: 0xdddddd, antialias:true });
+
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.position.y = 10;
+ mesh.castShadow = true;
+
+ return mesh;
+ }
+
+ function createFloorMesh() {
+ var geometry = new THREE.PlaneGeometry( 12, 12 );
+ var planeMaterial = new THREE.MeshPhongMaterial( { color: 0xdddddd } );
+
+ var floor = new THREE.Mesh( geometry, planeMaterial );
+
+ floor.position.set( 0, 0, 0 );
+ floor.rotation.x = - Math.PI / 2;
+
+ floor.castShadow = false;
+ floor.receiveShadow = true;
+ return floor;
+ }
+
+ function createHUD() {
+ var scene = new THREE.Scene();
+
+ var camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2);
+ camera.position.z = 10;
+
+ var shader = THREE.ShaderExtras[ "unpackDepthRGBA" ];
+ var uniforms = new THREE.UniformsUtils.clone( shader.uniforms );
+
+ var hudMaterial = new THREE.ShaderMaterial( { vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, uniforms: uniforms } );
+
+ var hudGeo = new THREE.PlaneGeometry( SHADOW_MAP_WIDTH / 2, SHADOW_MAP_HEIGHT / 2 );
+ var hudMesh = new THREE.Mesh( hudGeo, hudMaterial );
+ hudMesh.position.x = ( width - SHADOW_MAP_WIDTH / 2 ) * 0.5;
+ hudMesh.position.y = ( height - SHADOW_MAP_HEIGHT / 2 ) * 0.5;
+
+ scene.add( hudMesh );
+
+ return {
+ scene: scene,
+ camera: camera,
+ update: function(shadowMap) {
+ hudMaterial.uniforms.tDiffuse.texture = shadowMap;
+ }
+ };
+ }
+
+ function createShadowWorld() {
+ var scene = new THREE.Scene();
+
+ var camera = new THREE.PerspectiveCamera( 30, width / height, 1, 1000 );
+ camera.position.set( 5, 20, 40 );
+ camera.lookAt( new THREE.Vector3(5,6,0));
+
+ var light = createLight();
+ var cubeMesh = createCubeMesh();
+ var floorMesh = createFloorMesh();
+
+ scene.add( light );
+ scene.add( cubeMesh );
+ scene.add( floorMesh );
+
+ return {
+ scene: scene,
+ camera: camera,
+ light: light,
+ animate: function(delta) {
+ cubeMesh.rotation.y += 0.5 * delta;
+ }
+ };
+ }
+
+ this.initialize = function(canvas) {
+ var shadowWorld = createShadowWorld();
+ var hud = createHUD();
+
+ var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
+
+ renderer.setSize( width, height );
+ renderer.autoClear = false;
+
+ renderer.shadowMapEnabled = true;
+ renderer.shadowMapSoft = true;
+
+ var instance = { active: false };
+ function animate() {
+ requestAnimationFrame( animate, canvas );
+ var delta = clock.getDelta();
+
+ if(!instance.active || sample_defaults.paused) return;
+
+ hud.update(shadowWorld.light.shadowMap);
+
+ shadowWorld.animate(delta);
+
+ renderer.clear();
+ renderer.render( shadowWorld.scene, shadowWorld.camera );
+ renderer.render( hud.scene, hud.camera );
+ }
+
+ animate();
+ return instance;
+ };
+ }
+
+ window.samples.shadow_map = {
+ initialize: function(canvas) {
+ var shadowMap = new ShadowMap();
+ return shadowMap.initialize(canvas);
+ }
+ };
+})();
View
2 todo
@@ -1,5 +1,3 @@
-shadowmaps
-
vertex textures
animations

0 comments on commit 57fcf06

Please sign in to comment.