Merge pull request #12262 from WestLangley/dev-cloth

Animation cloth example: clean up

examples/webgl_animation_cloth.html

@@ -44,40 +44,6 @@
 
 		<script src="js/Cloth.js"></script>
 
-		<script type="x-shader/x-fragment" id="fragmentShaderDepth">
-
-			#include <packing>
-
-			uniform sampler2D texture;
-			varying vec2 vUV;
-
-			void main() {
-
-				vec4 pixel = texture2D( texture, vUV );
-
-				if ( pixel.a < 0.5 ) discard;
-
-				gl_FragData[ 0 ] = packDepthToRGBA( gl_FragCoord.z );
-
-			}
-		</script>
-
-		<script type="x-shader/x-vertex" id="vertexShaderDepth">
-
-			varying vec2 vUV;
-
-			void main() {
-
-				vUV = 0.75 * uv;
-
-				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-
-				gl_Position = projectionMatrix * mvPosition;
-
-			}
-
-		</script>
-
 		<script>
 
 			/* testing cloth simulation */
@@ -134,10 +100,7 @@
 				// camera
 
 				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
-				camera.position.x = 1000;
-				camera.position.y = 50;
-				camera.position.z = 1500;
-				scene.add( camera );
+				camera.position.set( 1000, 50, 1500 );
 
 				// lights
 
@@ -145,7 +108,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
-				light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
+				light = new THREE.DirectionalLight( 0xdfebff, 1 );
 				light.position.set( 50, 200, 100 );
 				light.position.multiplyScalar( 1.3 );
 
@@ -170,6 +133,8 @@
 				var loader = new THREE.TextureLoader();
 				var clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
 				clothTexture.wrapS = clothTexture.wrapT = THREE.RepeatWrapping;
+				clothTexture.offset.set( 0.1, 0.1 );
+				clothTexture.repeat.set( 0.5, 0.5 );
 				clothTexture.anisotropy = 16;
 
 				var clothMaterial = new THREE.MeshPhongMaterial( {
@@ -180,12 +145,8 @@
 				} );
 
 				// cloth geometry
-				clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h );
-				clothGeometry.dynamic = true;
 
-				var uniforms = { texture:  { value: clothTexture } };
-				var vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
-				var fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;
+				clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h );
 
 				// cloth mesh
 
@@ -194,16 +155,17 @@
 				object.castShadow = true;
 				scene.add( object );
 
-				object.customDepthMaterial = new THREE.ShaderMaterial( {
-					uniforms: uniforms,
-					vertexShader: vertexShader,
-					fragmentShader: fragmentShader,
-					side: THREE.DoubleSide
+				object.customDepthMaterial = new THREE.MeshDepthMaterial( {
+
+					depthPacking: THREE.RGBADepthPacking,
+					map: clothTexture,
+					alphaTest: 0.5
+
 				} );
 
 				// sphere
 
-				var ballGeo = new THREE.SphereGeometry( ballSize, 20, 20 );
+				var ballGeo = new THREE.SphereBufferGeometry( ballSize, 32, 16 );
 				var ballMaterial = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
 
 				sphere = new THREE.Mesh( ballGeo, ballMaterial );
@@ -228,7 +190,7 @@
 
 				// poles
 
-				var poleGeo = new THREE.BoxGeometry( 5, 375, 5 );
+				var poleGeo = new THREE.BoxBufferGeometry( 5, 375, 5 );
 				var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100 } );
 
 				var mesh = new THREE.Mesh( poleGeo, poleMat );
@@ -245,14 +207,14 @@
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( new THREE.BoxGeometry( 255, 5, 5 ), poleMat );
+				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 255, 5, 5 ), poleMat );
 				mesh.position.y = - 250 + ( 750 / 2 );
 				mesh.position.x = 0;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var gg = new THREE.BoxGeometry( 10, 10, 10 );
+				var gg = new THREE.BoxBufferGeometry( 10, 10, 10 );
 				var mesh = new THREE.Mesh( gg, poleMat );
 				mesh.position.y = - 250;
 				mesh.position.x = 125;
@@ -285,7 +247,7 @@
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = Math.PI * 0.5;
 				controls.minDistance = 1000;
-				controls.maxDistance = 7500;
+				controls.maxDistance = 5000;
 
 				// performance monitor
 
@@ -341,16 +303,13 @@
 
 				}
 
+				clothGeometry.verticesNeedUpdate = true;
+
 				clothGeometry.computeFaceNormals();
 				clothGeometry.computeVertexNormals();
 
-				clothGeometry.normalsNeedUpdate = true;
-				clothGeometry.verticesNeedUpdate = true;
-
 				sphere.position.copy( ballPosition );
 
-				camera.lookAt( scene.position );
-
 				renderer.render( scene, camera );
 
 			}