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.1 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
M
Changed build setup:  
Mr.doob 已提交
38 
		<script type="text/javascript" src="../build/Three.js"></script>
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
39
M
Changed build setup:  
Mr.doob 已提交
40 
		<script type="text/javascript" src="js/Detector.js"></script>
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
41 42 
		<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 已提交
43 44 45 46 47 48 49 

		<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 已提交
50
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
51 52 53 
			void main( void ) {

				vec2 position = -1.0 + 2.0 * vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
54
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
55 56 57 58 59 60 61 62 
				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 已提交
63
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
64 65 66 67 
		<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 已提交
68
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
69 
			varying vec2 vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
70
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
71 72 73 
			void main( void ) {

				vec2 position = vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
74
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
75 76 77 78 79 80 81 82 83 84 85 86 87 
				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 已提交
88
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
89 90 91 92 
			uniform float time;
			uniform vec2 resolution;

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

				vec2 position = -1.0 + 2.0 * vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
99
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 
				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 已提交
125
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
126 127 
			void main(void)
			{
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
128
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
129 
				vec2 p = -1.0 + 2.0 * vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 
				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 已提交
154 
			}
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
155
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
156 157 158 
		</script>

		<script id="vertex_shader" type="x-shader/x-vertex">
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
159
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
160 
			varying vec2 vUv;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
161
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
162 163 164 165 166 167 
			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 已提交
168
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
169 170 171 172 
		</script>

		<script type="text/javascript">
M
Changed build setup:  
Mr.doob 已提交
173 
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
174
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
175 176 177 
			var container, stats;

			var start_time;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
178
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
179 180 181 182 183 184 185 186 187 188 189 
			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 已提交
190 
			animate();
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
191 192 193 194 195 196 197 198 199 200 201 

			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 已提交
202
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
203 204 205 206 207 208 209 210 211 212 
				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 已提交
213
A
Fixed bug in shader demo.  
alteredq 已提交
214 
				uniforms2.texture.texture.wrap_s = uniforms2.texture.texture.wrap_t = THREE.Repeat;
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
215
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
216 
				var size = 0.75, mlib = [],
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
217 
					params = [ [ 'fragment_shader1', uniforms1 ],  [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
218
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
219 
				for( var i = 0; i < params.length; i++ ) {
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
220
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
221 222 223 224 225 226 227 
					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 已提交
228
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
229 230 231 232 233 234 
					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 已提交
235
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
236 237 238 
					meshes[ i ] = mesh;

				}
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
239
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 
				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 已提交
258
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
259 260 
				uniforms2.resolution.value.x = window.innerWidth;
				uniforms2.resolution.value.y = window.innerHeight;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
261
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
262 263 264 265 
				renderer.setSize( window.innerWidth, window.innerHeight );

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

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

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

				uniforms1.time.value += 0.05;
				uniforms2.time.value = ( new Date().getTime() - start_time ) / 1000;
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
281
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
282 
				for( var i = 0; i < meshes.length; ++i ) {
M
All examples now use RequestAnimationFrame.js (pheww!)  
Mr.doob 已提交
283
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
284 285 
					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 已提交
286
A
How to use 2d shaders as procedural animated textures.  
alteredq 已提交
287 288 289 290 291 292 293 294 295 296 
				}

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>