Simplified and improved webgl_materials_bumpmap_skin example.

examples/webgl_materials_bumpmap_skin.html

@@ -71,7 +71,7 @@
 
 			var mesh, mesh2;
 
-			var directionalLight, directionalLight2, pointLight, ambientLight, spotLight;
+			var directionalLight, directionalLight2;
 
 			var mouseX = 0;
 			var mouseY = 0;
@@ -105,44 +105,8 @@
 
 				// LIGHTS
 
-				ambientLight = new THREE.AmbientLight( 0x555555 );
-				scene.add( ambientLight );
-
-				//
-
-				pointLight = new THREE.PointLight( 0xffffff, 1.5, 1000 );
-				pointLight.position.set( 0, 0, 600 );
-
-				scene.add( pointLight );
-
-				// shadow for PointLight
-
-				spotLight = new THREE.SpotLight( 0xffffff, 1 );
-				spotLight.position.set( 0.05, 0.05, 1 );
-				scene.add( spotLight );
-
-				spotLight.position.multiplyScalar( 700 );
-
-				spotLight.castShadow = true;
-				spotLight.onlyShadow = true;
-				//spotLight.shadowCameraVisible = true;
-
-				spotLight.shadowMapWidth = 2048;
-				spotLight.shadowMapHeight = 2048;
-
-				spotLight.shadowCameraNear = 200;
-				spotLight.shadowCameraFar = 1500;
-
-				spotLight.shadowCameraFov = 40;
-
-				spotLight.shadowBias = -0.005;
-				spotLight.shadowDarkness = 0.15;
-
-				//
-
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 0.85 );
+				directionalLight = new THREE.DirectionalLight( 0xffffff, 2.25 );
 				directionalLight.position.set( 1, -0.5, 1 );
-				directionalLight.color.setHSL( 0.6, 1, 0.85 );
 				scene.add( directionalLight );
 
 				directionalLight.position.multiplyScalar( 500 );
@@ -162,23 +126,27 @@
 				directionalLight.shadowCameraBottom = -500;
 
 				directionalLight.shadowBias = -0.005;
-				directionalLight.shadowDarkness = 0.15;
+				directionalLight.shadowDarkness = 0.2;
 
 				//
 
-				directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.85 );
-				directionalLight2.position.set( 1, -0.5, -1 );
+				directionalLight2 = new THREE.DirectionalLight( 0x8888ff, 0.5 );
+				directionalLight2.position.set( - 1, 0.5, -1 );
 				scene.add( directionalLight2 );
 
 				//
 
 				loader = new THREE.JSONLoader();
-				loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100 ) } );
+				loader.load( "obj/leeperrysmith/LeePerrySmith.js", function ( geometry ) {
+
+					createScene( geometry, 100 )
+
+				} );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
-				renderer.setClearColor( 0x444a54 );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setClearColor( 0x242a34 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -233,24 +201,18 @@
 				var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
 
 				mapHeight.anisotropy = 4;
-				mapHeight.repeat.set( 0.998, 0.998 );
-				mapHeight.offset.set( 0.001, 0.001 );
 				mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
 				mapHeight.format = THREE.RGBFormat;
 
 				var mapSpecular = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-SPEC.jpg" );
 
 				mapSpecular.anisotropy = 4;
-				mapSpecular.repeat.set( 0.998, 0.998 );
-				mapSpecular.offset.set( 0.001, 0.001 );
 				mapSpecular.wrapS = mapSpecular.wrapT = THREE.RepeatWrapping;
 				mapSpecular.format = THREE.RGBFormat;
 
 				var mapColor = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
 
 				mapColor.anisotropy = 4;
-				mapColor.repeat.set( 0.998, 0.998 );
-				mapColor.offset.set( 0.001, 0.001 );
 				mapColor.wrapS = mapColor.wrapT = THREE.RepeatWrapping;
 				mapColor.format = THREE.RGBFormat;
 
@@ -273,12 +235,10 @@
 				uniforms[ "diffuse" ].value.setHex( 0xa0a0a0 );
 				uniforms[ "specular" ].value.setHex( 0xa0a0a0 );
 
-				uniforms[ "uRoughness" ].value = 0.145;
-				uniforms[ "uSpecularBrightness" ].value = 0.75;
-
-				uniforms[ "bumpScale" ].value = 16;
+				uniforms[ "uRoughness" ].value = 0.2;
+				uniforms[ "uSpecularBrightness" ].value = 0.5;
 
-				uniforms[ "offsetRepeat" ].value.set( 0.001, 0.001, 0.998, 0.998 );
+				uniforms[ "bumpScale" ].value = 8;
 
 				var material = new THREE.ShaderMaterial( { fragmentShader: fragmentShader, vertexShader: vertexShader, uniforms: uniforms, lights: true, derivatives: true } );