Improved webgl_materials_translucenty example.

examples/files.js

@@ -172,6 +172,7 @@ var files = {
 		"webgl_materials_texture_manualmipmap",
 		"webgl_materials_texture_partialupdate",
 		"webgl_materials_texture_rotation",
+		"webgl_materials_translucency",
 		"webgl_materials_transparency",
 		"webgl_materials_variations_basic",
 		"webgl_materials_variations_lambert",

examples/webgl_materials_translucency.html

@@ -42,9 +42,9 @@
 
 		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-		var container, stats, font;
-
+		var container, stats;
 		var camera, scene, renderer, controls;
+		var model;
 
 		init();
 		animate();
@@ -53,7 +53,6 @@
 
 			container = document.createElement( 'div' );
 			document.body.appendChild( container );
-			font = font;
 
 			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
 			camera.position.set( 0.0, 300, 400 * 4 );
@@ -100,74 +99,82 @@
 			window.addEventListener( 'resize', onWindowResize, false );
 
 			initMaterial();
+
 		}
 
 		function initMaterial() {
-			var shader = new THREE.TranslucentShader();
-			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-
-			// Materials
 
 			var loader = new THREE.TextureLoader();
-			var imgTexture = loader.load("models/fbx/white.jpg");
-			var thicknessTexture = loader.load("models/fbx/bunny_thickness.png");
+			var imgTexture = loader.load( 'models/fbx/white.jpg' );
+			var thicknessTexture = loader.load( 'models/fbx/bunny_thickness.png' );
 			imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
-			uniforms[ "map" ].value = imgTexture;
-
-			uniforms[ "diffuse" ].value = new THREE.Vector3(1.0, 0.2, 0.2);
-			uniforms[ "shininess" ].value = 500;
-
-			uniforms[ "thicknessMap" ].value = thicknessTexture;
-			uniforms[ "thicknessColor" ].value = new THREE.Vector3(0.5, 0.3, 0.3);
-			uniforms[ "thicknessDistortion" ].value = 0.1;
-			uniforms[ "thicknessAmbient" ].value = 0.1;
-			uniforms[ "thicknessAttenuation" ].value = 0.8;
-			uniforms[ "thicknessPower" ].value = 2;
-			uniforms[ "thicknessScale" ].value = 10.0;
+			var shader = new THREE.TranslucentShader();
+			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
-			var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
-			var material = new THREE.ShaderMaterial( parameters );
+			uniforms[ 'map' ].value = imgTexture;
+
+			uniforms[ 'diffuse' ].value = new THREE.Vector3( 1.0, 0.2, 0.2 );
+			uniforms[ 'shininess' ].value = 500;
+
+			uniforms[ 'thicknessMap' ].value = thicknessTexture;
+			uniforms[ 'thicknessColor' ].value = new THREE.Vector3( 0.5, 0.3, 0.3 );
+			uniforms[ 'thicknessDistortion' ].value = 0.1;
+			uniforms[ 'thicknessAmbient' ].value = 0.1;
+			uniforms[ 'thicknessAttenuation' ].value = 0.8;
+			uniforms[ 'thicknessPower' ].value = 2;
+			uniforms[ 'thicknessScale' ].value = 10.0;
+
+			var material = new THREE.ShaderMaterial( {
+				uniforms: uniforms,
+				vertexShader: shader.vertexShader,
+				fragmentShader: shader.fragmentShader,
+				lights: true
+			} );
 			material.extensions.derivatives = true;
 
 			// LOADER
 
 			var loader = new THREE.FBXLoader();
-			loader.load("models/fbx/stanford-bunny.fbx", function(object) {
-				loadedModel(object, 1, material);
-			});
-		}
+			loader.load( 'models/fbx/stanford-bunny.fbx', function ( object ) {
+
+				model = object.children[ 0 ];
+				model.position.set( 0, 0, 10 );
+				model.scale.setScalar( 1 );
+				model.material = material;
+				scene.add( model );
+
+			} );
 
-		function loadedModel(object, scale, material) {
-			object.children[0].position.x = 0;
-			object.children[0].position.y = 0;
-			object.children[0].position.z = 10;
-			object.children[0].scale.set(scale, scale, scale);
-			object.children[0].material = material;
-			scene.add(object);
 		}
 
 		function onWindowResize() {
+
 			camera.aspect = window.innerWidth / window.innerHeight;
 			camera.updateProjectionMatrix();
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
+
 		}
 
 		//
 
 		function animate() {
+
 			requestAnimationFrame( animate );
 
 			render();
+
 			stats.update();
+
 		}
 
 		function render() {
-			var timer = Date.now() * 0.00025;
 
-			camera.lookAt( scene.position );
+			if ( model ) model.rotation.y = performance.now() / 5000;
+
 			renderer.render( scene, camera );
+
 		}
 
 	</script>