Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_shader2.html 7.0 KB
Newer Older
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
1 2 3 
<!DOCTYPE HTML>
<html lang="en">
	<head>
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
4 
		<title>three.js webgl - materials - shaders [custom]</title>
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 
		<meta charset="utf-8">
		<style type="text/css">
			body {
				color: #ffffff;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;

				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				padding: 5px;
			}

			a {

				color: #ffffff;
			}
A
Added centralized message for non-WebGL-compatible browser to majority of examples.  
alteredq 已提交
30 
			#oldie a { color:#da0 }
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
31 32 33 34 
		</style>
	</head>
	<body>
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
35 36 
		<div id="container"></div>
		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
37 38 39 

		<script type="text/javascript" src="../build/ThreeExtras.js"></script>
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
40 41 
		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
		<script type="text/javascript" src="js/Stats.js"></script>
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
42 43 44 45 46 47 48 

		<script id="fragment_shader4" type="x-shader/x-fragment">

			uniform float time;
			uniform vec2 resolution;

			varying vec2 vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
49
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
50 51 52 
			void main( void ) {

				vec2 position = -1.0 + 2.0 * vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
53
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
54 55 56 57 58 59 60 61 
				float red = abs( sin( position.x * position.y + time / 5.0 ) );
				float green = abs( sin( position.x * position.y + time / 4.0 ) );
				float blue = abs( sin( position.x * position.y + time / 3.0 ) );
				gl_FragColor = vec4( red, green, blue, 1.0 );

			}

		</script>
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
62
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
63 64 65 66 
		<script id="fragment_shader3" type="x-shader/x-fragment">

			uniform float time;
			uniform vec2 resolution;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
67
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
68 
			varying vec2 vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
69
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
70 71 72 
			void main( void ) {

				vec2 position = vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
73
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
74 75 76 77 78 79 80 81 82 83 84 85 86 
				float color = 0.0;
				color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );
				color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );
				color += sin( position.x * sin( time / 5.0 ) * 10.0 ) + sin( position.y * sin( time / 35.0 ) * 80.0 );
				color *= sin( time / 10.0 ) * 0.5;

				gl_FragColor = vec4( vec3( color, color * 0.5, sin( color + time / 3.0 ) * 0.75 ), 1.0 );

			}

		</script>

		<script id="fragment_shader2" type="x-shader/x-fragment">
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
87
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
88 89 90 91 
			uniform float time;
			uniform vec2 resolution;

			uniform sampler2D texture;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
92
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
93 
			varying vec2 vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
94
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
95 96 97 
			void main( void ) {

				vec2 position = -1.0 + 2.0 * vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
98
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 
				float a = atan( position.y, position.x );
				float r = sqrt( dot( position, position ) );

				vec2 uv;
				uv.x = cos( a ) / r;
				uv.y = sin( a ) / r;
				uv /= 10.0;
				uv += time * 0.05;

				vec3 color = texture2D( texture, uv ).rgb;

				gl_FragColor = vec4( color * r * 1.5, 1.0 );

			}
		</script>

		<script id="fragment_shader1" type="x-shader/x-fragment">
			#ifdef GL_ES
			precision highp float;
			#endif

			uniform vec2 resolution;
			uniform float time;

			varying vec2 vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
124
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
125 126 
			void main(void)
			{
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
127
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
128 
				vec2 p = -1.0 + 2.0 * vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 
				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);
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
153 
			}
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
154
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
155 156 157 
		</script>

		<script id="vertex_shader" type="x-shader/x-vertex">
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
158
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
159 
			varying vec2 vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
160
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
161 162 163 164 165 166 
			void main()
			{
				vUv = uv;
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_Position = projectionMatrix * mvPosition;
			}
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
167
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
168 169 170 171 
		</script>

		<script type="text/javascript">
A
Renamed THREE.Supports to THREE.Detector, moved it to extras. Also cleaned up example title tags.  
alteredq 已提交
172 
			if ( ! THREE.Detector.webgl ) THREE.Detector.addGetWebGLMessage();
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
173
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
174 175 176 
			var container, stats;

			var start_time;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
177
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
178 179 180 181 182 183 184 185 186 187 188 
			var camera, scene, renderer;

			var uniforms1, uniforms2, material1, material2, mesh, meshes = [];

			var mouseX = 0, mouseY = 0,
			lat = 0, lon = 0, phy = 0, theta = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
189 
			animate();
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
190 191 192 193 194 195 196 197 198 199 200 

			function init() {

				container = document.getElementById( 'container' );

				camera = new THREE.Camera( 40, windowHalfX / windowHalfY, 1, 3000 );
				camera.position.z = 4;

				scene = new THREE.Scene();

				start_time = new Date().getTime();
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
201
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
202 203 204 205 206 207 208 209 210 211 
				uniforms1 = {
					time: { type: "f", value: 1.0 },
					resolution: { type: "v2", value: new THREE.Vector2() }
				};

				uniforms2 = {
					time: { type: "f", value: 1.0 },
					resolution: { type: "v2", value: new THREE.Vector2() },
					texture: { type: "t", value: 0, texture: ImageUtils.loadTexture( "textures/disturb.jpg" ) }
				};
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
212
A
Fixed bug in shader demo.  
alteredq 已提交
213 
				uniforms2.texture.texture.wrap_s = uniforms2.texture.texture.wrap_t = THREE.Repeat;
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
214
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
215 
				var size = 0.75, mlib = [],
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
216 
					params = [ [ 'fragment_shader1', uniforms1 ],  [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
217
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
218 
				for( var i = 0; i < params.length; i++ ) {
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
219
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
220 221 222 223 224 225 226 
					material = new THREE.MeshShaderMaterial( {

						uniforms: params[ i ][ 1 ],
						vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
						fragment_shader: document.getElementById( params[ i ][ 0 ] ).textContent

						} );
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
227
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
228 229 230 231 232 233 
					mlib[ i ] = material;

					mesh = new THREE.Mesh( new Cube( size, size, size, 1, 1, [ mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ], mlib[ i ] ], false ), new THREE.MeshFaceMaterial() );
					mesh.position.x = i - (params.length - 1)/2;
					mesh.position.y = i % 2 - 0.5;
					scene.addObject( mesh );
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
234
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
235 236 237 
					meshes[ i ] = mesh;

				}
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
238
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 
				renderer = new THREE.WebGLRenderer();
				container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				onWindowResize();

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize( event ) {

				uniforms1.resolution.value.x = window.innerWidth;
				uniforms1.resolution.value.y = window.innerHeight;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
257
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
258 259 
				uniforms2.resolution.value.x = window.innerWidth;
				uniforms2.resolution.value.y = window.innerHeight;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
260
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
261 262 263 264 
				renderer.setSize( window.innerWidth, window.innerHeight );

			}
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
265 266 267 268 269 270 271 272 273 274 275 276 
			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
277 278 279 

				uniforms1.time.value += 0.05;
				uniforms2.time.value = ( new Date().getTime() - start_time ) / 1000;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
280
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
281 
				for( var i = 0; i < meshes.length; ++i ) {
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
282
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
283 284 
					meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
					meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
285
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
286 287 288 289 290 291 292 293 294 295 
				}

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>