Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: Clean up basic shader examples

Mugen87 7 years ago
parent
733be119b0
commit
68bdd05fa3
3 changed files with 87 additions and 118 deletions
Split View Show Diff Stats
  1. 32 30
      examples/webgl_shader.html
  2. 36 49
      examples/webgl_shader2.html
  3. 19 39
      examples/webgl_shader_lava.html

+ 32 - 30
examples/webgl_shader.html
View File 

@@ -28,7 +28,6 @@
 
 				color: #ffffff;
 
 			}
 
 
-			#oldie a { color:#da0 }
 
 		</style>
 
 	</head>
 
 	<body>
 
@@ -42,8 +41,12 @@
 
 
 		<script id="vertexShader" type="x-shader/x-vertex">
 
 
+			varying vec2 vUv;
 
+
 
 			void main()	{
 
 
+				vUv = uv;
 
+
 
 				gl_Position = vec4( position, 1.0 );
 
 
 			}
 
@@ -52,34 +55,37 @@
 
 
 		<script id="fragmentShader" type="x-shader/x-fragment">
 
 
-			uniform vec2 resolution;
 
+			varying vec2 vUv;
 
+
 
 			uniform float time;
 
 
 			void main()	{
 
 
-				vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
 
-				float a = time*40.0;
 
-				float d,e,f,g=1.0/40.0,h,i,r,q;
 
-				e=400.0*(p.x*0.5+0.5);
 
-				f=400.0*(p.y*0.5+0.5);
 
-				i=200.0+sin(e*g+a/150.0)*20.0;
 
-				d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
 
-				r=sqrt(pow(abs(i-e),2.0)+pow(abs(d-f),2.0));
 
-				q=f/r;
 
-				e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
 
-				d=sin(e*g)*176.0+sin(e*g)*164.0+r;
 
-				h=((f+d)+a/2.0)*g;
 
-				i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
 
-				h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
 
-				h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
 
-				i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
 
-				i=mod(i/5.6,256.0)/64.0;
 
-				if(i<0.0) i+=4.0;
 
-				if(i>=2.0) i=4.0-i;
 
-				d=r/350.0;
 
-				d+=sin(d*d*8.0)*0.52;
 
-				f=(sin(a*g)+1.0)/2.0;
 
-				gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
 
+				vec2 p = - 1.0 + 2.0 * vUv;
 
+				float a = time * 40.0;
 
+				float d, e, f, g = 1.0 / 40.0 ,h ,i ,r ,q;
 
+
 
+				e = 400.0 * ( p.x * 0.5 + 0.5 );
 
+				f = 400.0 * ( p.y * 0.5 + 0.5 );
 
+				i = 200.0 + sin( e * g + a / 150.0 ) * 20.0;
 
+				d = 200.0 + cos( f * g / 2.0 ) * 18.0 + cos( e * g ) * 7.0;
 
+				r = sqrt( pow( abs( i - e ), 2.0 ) + pow( abs( d - f ), 2.0 ) );
 
+				q = f / r;
 
+				e = ( r * cos( q ) ) - a / 2.0;
 
+				f = ( r * sin( q ) ) - a / 2.0;
 
+				d = sin( e * g ) * 176.0 + sin( e * g ) * 164.0 + r;
 
+				h = ( ( f + d ) + a / 2.0 ) * g;
 
+				i = cos( h + r * p.x / 1.3 ) * ( e + e + a ) + cos( q * g * 6.0 ) * ( r + h / 3.0 );
 
+				h = sin( f * g ) * 144.0 - sin( e * g ) * 212.0 * p.x;
 
+				h = ( h + ( f - e ) * q + sin( r - ( a + h ) / 7.0 ) * 10.0 + i / 4.0 ) * g;
 
+				i += cos( h * 2.3 * sin( a / 350.0 - q ) ) * 184.0 * sin( q - ( r * 4.3 + a / 12.0 ) * g ) + tan( r * g + h ) * 184.0 * cos( r * g + h );
 
+				i = mod( i / 5.6, 256.0 ) / 64.0;
 
+				if ( i < 0.0 ) i += 4.0;
 
+				if ( i >= 2.0 ) i = 4.0 - i;
 
+				d = r / 350.0;
 
+				d += sin( d * d * 8.0 ) * 0.52;
 
+				f = ( sin( a * g ) + 1.0 ) / 2.0;
 
+				gl_FragColor = vec4( vec3( f * i / 1.6, i / 2.0 + d / 13.0, i ) * d * p.x + vec3( i / 1.3 + d / 8.0, i / 2.0 + d / 18.0, i ) * d * ( 1.0 - p.x ), 1.0 );
 
 
 			}
 
 
@@ -109,8 +115,7 @@
 
 				var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
 
 				uniforms = {
 
-					time:       { value: 1.0 },
 
-					resolution: { value: new THREE.Vector2() }
 
+					time: { value: 1.0 }
 
 				};
 
 
 				var material = new THREE.ShaderMaterial( {
 
@@ -138,9 +143,6 @@
 
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-				uniforms.resolution.value.x = renderer.domElement.width;
 
-				uniforms.resolution.value.y = renderer.domElement.height;
 
-
 
 			}
 
 
 			//

+ 36 - 49
examples/webgl_shader2.html
View File 

@@ -28,7 +28,6 @@
 
 				color: #ffffff;
 
 			}
 
 
-			#oldie a { color:#da0 }
 
 		</style>
 
 	</head>
 
 	<body>
 
@@ -44,13 +43,12 @@
 
 		<script id="fragment_shader4" type="x-shader/x-fragment">
 
 
 			uniform float time;
 
-			uniform vec2 resolution;
 
 
 			varying vec2 vUv;
 
 
 			void main( void ) {
 
 
-				vec2 position = -1.0 + 2.0 * vUv;
 
+				vec2 position = - 1.0 + 2.0 * vUv;
 
 
 				float red = abs( sin( position.x * position.y + time / 5.0 ) );
 
 				float green = abs( sin( position.x * position.y + time / 4.0 ) );
 
@@ -64,7 +62,6 @@
 
 		<script id="fragment_shader3" type="x-shader/x-fragment">
 
 
 			uniform float time;
 
-			uniform vec2 resolution;
 
 
 			varying vec2 vUv;
 
 
@@ -87,7 +84,6 @@
 
 		<script id="fragment_shader2" type="x-shader/x-fragment">
 
 
 			uniform float time;
 
-			uniform vec2 resolution;
 
 
 			uniform sampler2D texture;
 
 
@@ -95,7 +91,7 @@
 
 
 			void main( void ) {
 
 
-				vec2 position = -1.0 + 2.0 * vUv;
 
+				vec2 position = - 1.0 + 2.0 * vUv;
 
 
 				float a = atan( position.y, position.x );
 
 				float r = sqrt( dot( position, position ) );
 
@@ -115,38 +111,37 @@
 
 
 		<script id="fragment_shader1" type="x-shader/x-fragment">
 
 
-			uniform vec2 resolution;
 
 			uniform float time;
 
 
 			varying vec2 vUv;
 
 
-			void main(void)
 
-			{
 
-
 
-				vec2 p = -1.0 + 2.0 * vUv;
 
-				float a = time*40.0;
 
-				float d,e,f,g=1.0/40.0,h,i,r,q;
 
-
 
-				e=400.0*(p.x*0.5+0.5);
 
-				f=400.0*(p.y*0.5+0.5);
 
-				i=200.0+sin(e*g+a/150.0)*20.0;
 
-				d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0;
 
-				r=sqrt(pow(i-e,2.0)+pow(d-f,2.0));
 
-				q=f/r;
 
-				e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0;
 
-				d=sin(e*g)*176.0+sin(e*g)*164.0+r;
 
-				h=((f+d)+a/2.0)*g;
 
-				i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0);
 
-				h=sin(f*g)*144.0-sin(e*g)*212.0*p.x;
 
-				h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g;
 
-				i+=cos(h*2.3*sin(a/350.0-q))*184.0*sin(q-(r*4.3+a/12.0)*g)+tan(r*g+h)*184.0*cos(r*g+h);
 
-				i=mod(i/5.6,256.0)/64.0;
 
-				if(i<0.0) i+=4.0;
 
-				if(i>=2.0) i=4.0-i;
 
-				d=r/350.0;
 
-				d+=sin(d*d*8.0)*0.52;
 
-				f=(sin(a*g)+1.0)/2.0;
 
-				gl_FragColor=vec4(vec3(f*i/1.6,i/2.0+d/13.0,i)*d*p.x+vec3(i/1.3+d/8.0,i/2.0+d/18.0,i)*d*(1.0-p.x),1.0);
 
+			void main(void) {
 
+
 
+				vec2 p = - 1.0 + 2.0 * vUv;
 
+				float a = time * 40.0;
 
+				float d, e, f, g = 1.0 / 40.0 ,h ,i ,r ,q;
 
+
 
+				e = 400.0 * ( p.x * 0.5 + 0.5 );
 
+				f = 400.0 * ( p.y * 0.5 + 0.5 );
 
+				i = 200.0 + sin( e * g + a / 150.0 ) * 20.0;
 
+				d = 200.0 + cos( f * g / 2.0 ) * 18.0 + cos( e * g ) * 7.0;
 
+				r = sqrt( pow( abs( i - e ), 2.0 ) + pow( abs( d - f ), 2.0 ) );
 
+				q = f / r;
 
+				e = ( r * cos( q ) ) - a / 2.0;
 
+				f = ( r * sin( q ) ) - a / 2.0;
 
+				d = sin( e * g ) * 176.0 + sin( e * g ) * 164.0 + r;
 
+				h = ( ( f + d ) + a / 2.0 ) * g;
 
+				i = cos( h + r * p.x / 1.3 ) * ( e + e + a ) + cos( q * g * 6.0 ) * ( r + h / 3.0 );
 
+				h = sin( f * g ) * 144.0 - sin( e * g ) * 212.0 * p.x;
 
+				h = ( h + ( f - e ) * q + sin( r - ( a + h ) / 7.0 ) * 10.0 + i / 4.0 ) * g;
 
+				i += cos( h * 2.3 * sin( a / 350.0 - q ) ) * 184.0 * sin( q - ( r * 4.3 + a / 12.0 ) * g ) + tan( r * g + h ) * 184.0 * cos( r * g + h );
 
+				i = mod( i / 5.6, 256.0 ) / 64.0;
 
+				if ( i < 0.0 ) i += 4.0;
 
+				if ( i >= 2.0 ) i = 4.0 - i;
 
+				d = r / 350.0;
 
+				d += sin( d * d * 8.0 ) * 0.52;
 
+				f = ( sin( a * g ) + 1.0 ) / 2.0;
 
+				gl_FragColor = vec4( vec3( f * i / 1.6, i / 2.0 + d / 13.0, i ) * d * p.x + vec3( i / 1.3 + d / 8.0, i / 2.0 + d / 18.0, i ) * d * ( 1.0 - p.x ), 1.0 );
 
 
 			}
 
 
@@ -171,12 +166,10 @@
 
 
 			var container, stats;
 
 
-			var camera, scene, renderer;
 
+			var camera, scene, renderer, clock;
 
 
 			var uniforms1, uniforms2;
 
 
-			var clock = new THREE.Clock();
 
-
 
 			init();
 
 			animate();
 
 
@@ -189,17 +182,17 @@
 
 
 				scene = new THREE.Scene();
 
 
-				var geometry = new THREE.BoxGeometry( 0.75, 0.75, 0.75 );
 
+				clock = new THREE.Clock();
 
+
 
+				var geometry = new THREE.BoxBufferGeometry( 0.75, 0.75, 0.75 );
 
 
 				uniforms1 = {
 
-					time:       { value: 1.0 },
 
-					resolution: { value: new THREE.Vector2() }
 
+					time: { value: 1.0 }
 
 				};
 
 
 				uniforms2 = {
 
-					time:       { value: 1.0 },
 
-					resolution: { value: new THREE.Vector2() },
 
-					texture:    { value: new THREE.TextureLoader().load( "textures/disturb.jpg" ) }
 
+					time: { value: 1.0 },
 
+					texture: { value: new THREE.TextureLoader().load( 'textures/disturb.jpg' ) }
 
 				};
 
 
 				uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping;
 
@@ -243,12 +236,6 @@
 
 
 			function onWindowResize( event ) {
 
 
-				uniforms1.resolution.value.x = window.innerWidth;
 
-				uniforms1.resolution.value.y = window.innerHeight;
 
-
 
-				uniforms2.resolution.value.x = window.innerWidth;
 
-				uniforms2.resolution.value.y = window.innerHeight;
 
-
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
 				camera.updateProjectionMatrix();

+ 19 - 39
examples/webgl_shader_lava.html
View File 

@@ -50,12 +50,10 @@
 
 		<script src="js/postprocessing/FilmPass.js"></script>
 
 
 		<script src="js/Detector.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
 
 		<script id="fragmentShader" type="x-shader/x-fragment">
 
 
 			uniform float time;
 
-			uniform vec2 resolution;
 
 
 			uniform float fogDensity;
 
 			uniform vec3 fogColor;
 
@@ -67,11 +65,11 @@
 
 
 			void main( void ) {
 
 
-				vec2 position = -1.0 + 2.0 * vUv;
 
+				vec2 position = - 1.0 + 2.0 * vUv;
 
 
 				vec4 noise = texture2D( texture1, vUv );
 
-				vec2 T1 = vUv + vec2( 1.5, -1.5 ) * time  *0.02;
 
-				vec2 T2 = vUv + vec2( -0.5, 2.0 ) * time * 0.01;
 
+				vec2 T1 = vUv + vec2( 1.5, - 1.5 ) * time * 0.02;
 
+				vec2 T2 = vUv + vec2( - 0.5, 2.0 ) * time * 0.01;
 
 
 				T1.x += noise.x * 2.0;
 
 				T1.y += noise.y * 2.0;
 
@@ -83,9 +81,9 @@
 
 				vec4 color = texture2D( texture2, T2 * 2.0 );
 
 				vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 );
 
 
-				if( temp.r > 1.0 ){ temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); }
 
-				if( temp.g > 1.0 ){ temp.rb += temp.g - 1.0; }
 
-				if( temp.b > 1.0 ){ temp.rg += temp.b - 1.0; }
 
+				if( temp.r > 1.0 ) { temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); }
 
+				if( temp.g > 1.0 ) { temp.rb += temp.g - 1.0; }
 
+				if( temp.b > 1.0 ) { temp.rg += temp.b - 1.0; }
 
 
 				gl_FragColor = temp;
 
 
@@ -120,22 +118,11 @@
 
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
-			var container, stats;
 
+			var container;
 
 
-			var clock = new THREE.Clock();
 
+			var camera, scene, renderer, composer, clock;
 
 
-			var camera, scene, renderer, composer;
 
-
 
-			var uniforms, material, mesh;
 
-
 
-			var mouseX = 0, mouseY = 0,
 
-			lat = 0, lon = 0, phy = 0, theta = 0;
 
-
 
-			var width = window.innerWidth || 2;
 
-			var height = window.innerHeight || 2;
 
-
 
-			var windowHalfX = width / 2;
 
-			var windowHalfY = height / 2;
 
+			var uniforms, mesh;
 
 
 			init();
 
 			animate();
 
@@ -144,22 +131,23 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 35, windowHalfX / windowHalfY, 1, 3000 );
 
+				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
 
 				camera.position.z = 4;
 
 
 				scene = new THREE.Scene();
 
 
+				clock = new THREE.Clock();
 
+
 
 				var textureLoader = new THREE.TextureLoader();
 
 
 				uniforms = {
 
 
 					fogDensity: { value: 0.45 },
 
-					fogColor:   { value: new THREE.Vector3( 0, 0, 0 ) },
 
-					time:       { value: 1.0 },
 
-					resolution: { value: new THREE.Vector2() },
 
-					uvScale:    { value: new THREE.Vector2( 3.0, 1.0 ) },
 
-					texture1:   { value: textureLoader.load( "textures/lava/cloud.png" ) },
 
-					texture2:   { value: textureLoader.load( "textures/lava/lavatile.jpg" ) }
 
+					fogColor: { value: new THREE.Vector3( 0, 0, 0 ) },
 
+					time: { value: 1.0 },
 
+					uvScale: { value: new THREE.Vector2( 3.0, 1.0 ) },
 
+					texture1: { value: textureLoader.load( 'textures/lava/cloud.png' ) },
 
+					texture2: { value: textureLoader.load( 'textures/lava/lavatile.jpg' ) }
 
 
 				};
 
 
@@ -168,7 +156,7 @@
 
 
 				var size = 0.65;
 
 
-				material = new THREE.ShaderMaterial( {
 
+				var material = new THREE.ShaderMaterial( {
 
 
 					uniforms: uniforms,
 
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
@@ -176,7 +164,7 @@
 
 
 				} );
 
 
-				mesh = new THREE.Mesh( new THREE.TorusGeometry( size, 0.3, 30, 30 ), material );
 
+				mesh = new THREE.Mesh( new THREE.TorusBufferGeometry( size, 0.3, 30, 30 ), material );
 
 				mesh.rotation.x = 0.3;
 
 				scene.add( mesh );
 
 
@@ -187,10 +175,6 @@
 
 				container.appendChild( renderer.domElement );
 
 				renderer.autoClear = false;
 
 
-				//
 
-
 
-				stats = new Stats();
 
-				//container.appendChild( stats.dom );
 
 
 				//
 
 
@@ -216,9 +200,6 @@
 
 
 			function onWindowResize( event ) {
 
 
-				uniforms.resolution.value.x = window.innerWidth;
 
-				uniforms.resolution.value.y = window.innerHeight;
 
-
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 
@@ -235,7 +216,6 @@
 
 				requestAnimationFrame( animate );
 
 
 				render();
 
-				stats.update();
 
 
 			}