Skip to content
Browse files

work on shadowmap example

  • Loading branch information...
1 parent da48c2f commit a61297195b73d6afd47764b0005a1a8f2089247c @jeromeetienne committed Mar 3, 2013
View
111 plugins/shadowmap/examples/demo.html
@@ -1,21 +1,51 @@
<!doctype html><title>Minimal tQuery Page</title>
<script src="../../../build/tquery-bundle-require.js"></script>
<body><script>
-require([
- 'tquery.text', 'tquery.skymap',
- 'tquery.pproc', 'tquery.datguituner',
- ], function(){
+require([ 'tquery.text'
+ , 'tquery.skymap'
+ , 'tquery.pproc'
+ , 'tquery.datguituner'
+ , 'tquery.modifiers'
+ , 'tquery.shadowmap'
+ , 'tquery.grassground'
+], function(){
var world = tQuery.createWorld().boilerplate().start();
+
+ world.shadowMapEnabled(true)
- // world.getCameraControls().rangeX = 1/2;
- // world.getCameraControls().rangeY = 1/2;
+ world.tCamera().position.z = 5;
+
+ //tQuery.createSkymap('skybox').addTo(world);
+ world.tRenderer().setClearColorHex( 0x000000, 1 );
tQuery.createAmbientLight().addTo(world).color(0x444444);
- tQuery.createDirectionalLight().addTo(world).position(-1, 1, 1)
- .intensity(2)
+ tQuery.createDirectionalLight().addTo(world).position(0, 1, 1)
+ .intensity(1)
.color(0x888888)
-// tQuery.createDirectionalLight().addTo(world).position( 1,-1, 1).color(0x4444aa);
+ .castShadow(true)
+ .shadowDarkness(0.4)
+ .shadowMap(512*2,512*2)
+ .shadowCamera(3, -3, 2, -2, 0.1, 50)
+ //.shadowCameraVisible(true)
+
+ var texture = THREE.ImageUtils.loadTexture('../../assets/images/wood.jpg')
+ texture.wrapS = THREE.RepeatWrapping;
+ texture.wrapT = THREE.RepeatWrapping;
+ texture.repeat.set(2, 2);
+ tQuery.createCube(10,1,10,5,1,5).addTo(world)
+ .geometry()
+ .smooth(1.3)
+ .back()
+ .setPhongMaterial()
+ .map(texture)
+ .envMap(tQuery.createCubeTexture('mars'))
+ .reflectivity(0.2)
+ .bumpMap(texture)
+ .bumpScale(0.3)
+ .back()
+ .translateY(-2)
+ .receiveShadow(true)
// create the spot
var spot = tQuery.createCylinder(0.3, 0.0001, 0.8).addTo(world)
@@ -25,34 +55,38 @@
.smooth(1.3)
.back()
.setPhongMaterial({
- ambient : 0xffffff,
- color : 0xffffFF,
- shininess : 80,
- envMap : tQuery.createCubeTexture('pisa')
- }).back();
+ ambient : 0xffffff,
+ color : 0xffffFF,
+ shininess : 80,
+ envMap : tQuery.createCubeTexture('pisa')
+ }).back()
+ .scaleBy(3)
world.loop().hook(function(delta, now){
var angle = 0.15 * now * Math.PI * 2;
- var positionX = Math.cos(angle*1.0)*3;
- var positionY = Math.cos(angle*1/4)*1.3;
- var positionZ = Math.sin(angle*1.0)*1.1;
- spot.position(positionX, positionY, positionZ)
-
-
- spot.get(0).lookAt( world.tScene().position );
+ var positionX = Math.cos(angle*1.0)*3*2;
+ var positionY = Math.cos(angle*1/4)*1.3 + 1;
+ var positionZ = Math.sin(angle*1.0)*1.1*4;
+ spot.position(positionX, positionY, positionZ).lookAt(0,0,0)
});
- var pointLight = tQuery.createPointLight().addTo(spot)
- .color(0xFF8844).intensity(3);
+ var pointLight = tQuery.createSpotLight().addTo(spot)
+ .color(0xFF8844)
+ .intensity(4)
+ .castShadow(true)
+ .shadowDarkness(0.6)
+ .shadowMap(512*4,512*4)
+ .shadowCamera(100, -100, 30, -30, 0.1, 20)
+ //.shadowCameraVisible(true)
- world.addEffectComposer()
- .bleachbypass()
- .motionBlur(0.5)
- .film(0.5, 0.25, 648, false)
- .vignette()
- .finish();
+ // world.addEffectComposer()
+ // .bleachbypass()
+ // .motionBlur(0.5)
+ // .film(0.5, 0.25, 648, false)
+ // .vignette()
+ // .finish();
// // init dat.gui
// var gui = new dat.GUI();
@@ -69,19 +103,12 @@
//var text = tQuery.createSphere(1, 32, 32).addTo(world)
var text = tQuery.createText('LIGHT').addTo(world)
- .scaleBy(1)
- .setPhongMaterial({
- map : THREE.ImageUtils.loadTexture('../../assets/images/wood.jpg'),
- //reflectivity : 0.8,
- ambient : 0x808080,
- //color : 0xAA8800,
- //color : 0x6688FF,
- shininess : 120,
- //envMap : tQuery.createCubeTexture('swedishRoyalCastle')
- }).back();
-
- tQuery.createSkymap('skybox').addTo(world);
- world.tRenderer().setClearColorHex( 0x000000, 1 );
+ .setPhongMaterial()
+ .ambient(0x808080)
+ .shininess(120)
+ .map('../../assets/images/plywood.jpg')
+ .back()
+ .castShadow(true)
})
</script></body>
View
50 plugins/shadowmap/examples/test-cascadeshadowmap.html
@@ -0,0 +1,50 @@
+<!doctype html><title>Minimal tQuery Page</title>
+<script src="../../../build/tquery-bundle-require.js"></script>
+<body><script>
+require([ 'tquery.grassground'
+ , 'tquery.shadowmap'
+], function(){
+ var world = tQuery.createWorld().boilerplate().start();
+ //world.shadowMapEnabled(true)
+
+ world.tCamera().position.z = 50;
+
+ var tRenderer = world.tRenderer()
+ tRenderer.gammaInput = true;
+ tRenderer.gammaOutput = true;
+ //tRenderer.shadowMapEnabled = true;
+
+ //tRenderer.shadowMapCascade = true;
+ tRenderer.shadowMapType = THREE.PCFSoftShadowMap;
+ //tRenderer.shadowMapDebug = true;
+
+ tQuery.createTorusKnot().addTo(world)
+ .translateY(2)
+ .castShadow(true)
+ .scale(150)
+
+ tQuery.createGrassGround({
+ textureRepeatX : 10*250,
+ textureRepeatY : 10*250,
+ }).addTo(world).scale(30*250)
+ .receiveShadow(true)
+
+ var light = new THREE.DirectionalLight( 0xffffff, 2.25 );
+ light.position.set( 200, 450, 500 );
+
+ light.castShadow = true;
+ light.shadowMapWidth = 1024;
+ light.shadowMapHeight = 1024;
+ light.shadowMapDarkness = 0.95;
+ light.shadowCameraVisible = true;
+
+ light.shadowCascade = true;
+ light.shadowCascadeCount = 3;
+ light.shadowCascadeNearZ = [ -1.000, 0.995, 0.998 ];
+ light.shadowCascadeFarZ = [ 0.995, 0.998, 1.000 ];
+ light.shadowCascadeWidth = [ 1024, 1024, 1024 ];
+ light.shadowCascadeHeight = [ 1024, 1024, 1024 ];
+
+ tQuery(light).addTo(world)
+});
+</script></body>
View
18 plugins/shadowmap/tquery.light.shadowmap.js
@@ -17,3 +17,21 @@ tQuery.DirectionalLight.registerInstance('shadowCamera', function(right, left, t
.shadowCameraTop(top)
.shadowCameraBottom(bottom);
});
+
+
+tQuery.SpotLight.registerInstance('shadowMap', function(width, height){
+ return this.shadowMapWidth(width).shadowMapHeight(height);
+});
+
+/**
+ * little helper to set all shadowCamera params
+*/
+tQuery.SpotLight.registerInstance('shadowCamera', function(right, left, top, bottom, near, far){
+ if( near !== undefined && far !== undefined ){
+ this.shadowCameraNear(near).shadowCameraFar(far);
+ }
+ return this.shadowCameraRight(right)
+ .shadowCameraLeft(left)
+ .shadowCameraTop(top)
+ .shadowCameraBottom(bottom);
+});

0 comments on commit a612971

Please sign in to comment.
Something went wrong with that request. Please try again.