Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 68bdd05f 编写于 作者: M Mugen87
浏览文件
操作

Examples: Clean up basic shader examples

上级 733be119
显示空白变更内容
内联 并排
Showing with 87 addition and 118 deletion
examples/webgl_shader.html
浏览文件 @ 68bdd05f
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
color: #ffffff; color: #ffffff;
} }
#oldie a { color:#da0 }
</style> </style>
</head> </head>
<body> <body>
...@@ -42,8 +41,12 @@ ...@@ -42,8 +41,12 @@
<script id="vertexShader" type="x-shader/x-vertex"> <script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() { void main() {
vUv = uv;
gl_Position = vec4( position, 1.0 ); gl_Position = vec4( position, 1.0 );
} }
...@@ -52,34 +55,37 @@ ...@@ -52,34 +55,37 @@
<script id="fragmentShader" type="x-shader/x-fragment"> <script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 resolution; varying vec2 vUv;
uniform float time; uniform float time;
void main() { void main() {
vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy; vec2 p = - 1.0 + 2.0 * vUv;
float a = time*40.0; float a = time * 40.0;
float d,e,f,g=1.0/40.0,h,i,r,q; 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); e = 400.0 * ( p.x * 0.5 + 0.5 );
i=200.0+sin(e*g+a/150.0)*20.0; f = 400.0 * ( p.y * 0.5 + 0.5 );
d=200.0+cos(f*g/2.0)*18.0+cos(e*g)*7.0; i = 200.0 + sin( e * g + a / 150.0 ) * 20.0;
r=sqrt(pow(abs(i-e),2.0)+pow(abs(d-f),2.0)); d = 200.0 + cos( f * g / 2.0 ) * 18.0 + cos( e * g ) * 7.0;
q=f/r; r = sqrt( pow( abs( i - e ), 2.0 ) + pow( abs( d - f ), 2.0 ) );
e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0; q = f / r;
d=sin(e*g)*176.0+sin(e*g)*164.0+r; e = ( r * cos( q ) ) - a / 2.0;
h=((f+d)+a/2.0)*g; f = ( r * sin( q ) ) - a / 2.0;
i=cos(h+r*p.x/1.3)*(e+e+a)+cos(q*g*6.0)*(r+h/3.0); d = sin( e * g ) * 176.0 + sin( e * g ) * 164.0 + r;
h=sin(f*g)*144.0-sin(e*g)*212.0*p.x; h = ( ( f + d ) + a / 2.0 ) * g;
h=(h+(f-e)*q+sin(r-(a+h)/7.0)*10.0+i/4.0)*g; i = cos( h + r * p.x / 1.3 ) * ( e + e + a ) + cos( q * g * 6.0 ) * ( r + h / 3.0 );
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); h = sin( f * g ) * 144.0 - sin( e * g ) * 212.0 * p.x;
i=mod(i/5.6,256.0)/64.0; h = ( h + ( f - e ) * q + sin( r - ( a + h ) / 7.0 ) * 10.0 + i / 4.0 ) * g;
if(i<0.0) i+=4.0; 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 );
if(i>=2.0) i=4.0-i; i = mod( i / 5.6, 256.0 ) / 64.0;
d=r/350.0; if ( i < 0.0 ) i += 4.0;
d+=sin(d*d*8.0)*0.52; if ( i >= 2.0 ) i = 4.0 - i;
f=(sin(a*g)+1.0)/2.0; d = r / 350.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); 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 @@ ...@@ -109,8 +115,7 @@
var geometry = new THREE.PlaneBufferGeometry( 2, 2 ); var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
uniforms = { uniforms = {
time: { value: 1.0 }, time: { value: 1.0 }
resolution: { value: new THREE.Vector2() }
}; };
var material = new THREE.ShaderMaterial( { var material = new THREE.ShaderMaterial( {
...@@ -138,9 +143,6 @@ ...@@ -138,9 +143,6 @@
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
uniforms.resolution.value.x = renderer.domElement.width;
uniforms.resolution.value.y = renderer.domElement.height;
} }
// //
......
examples/webgl_shader2.html
浏览文件 @ 68bdd05f
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
color: #ffffff; color: #ffffff;
} }
#oldie a { color:#da0 }
</style> </style>
</head> </head>
<body> <body>
...@@ -44,13 +43,12 @@ ...@@ -44,13 +43,12 @@
<script id="fragment_shader4" type="x-shader/x-fragment"> <script id="fragment_shader4" type="x-shader/x-fragment">
uniform float time; uniform float time;
uniform vec2 resolution;
varying vec2 vUv; varying vec2 vUv;
void main( void ) { 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 red = abs( sin( position.x * position.y + time / 5.0 ) );
float green = abs( sin( position.x * position.y + time / 4.0 ) ); float green = abs( sin( position.x * position.y + time / 4.0 ) );
...@@ -64,7 +62,6 @@ ...@@ -64,7 +62,6 @@
<script id="fragment_shader3" type="x-shader/x-fragment"> <script id="fragment_shader3" type="x-shader/x-fragment">
uniform float time; uniform float time;
uniform vec2 resolution;
varying vec2 vUv; varying vec2 vUv;
...@@ -87,7 +84,6 @@ ...@@ -87,7 +84,6 @@
<script id="fragment_shader2" type="x-shader/x-fragment"> <script id="fragment_shader2" type="x-shader/x-fragment">
uniform float time; uniform float time;
uniform vec2 resolution;
uniform sampler2D texture; uniform sampler2D texture;
...@@ -95,7 +91,7 @@ ...@@ -95,7 +91,7 @@
void main( void ) { 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 a = atan( position.y, position.x );
float r = sqrt( dot( position, position ) ); float r = sqrt( dot( position, position ) );
...@@ -115,38 +111,37 @@ ...@@ -115,38 +111,37 @@
<script id="fragment_shader1" type="x-shader/x-fragment"> <script id="fragment_shader1" type="x-shader/x-fragment">
uniform vec2 resolution;
uniform float time; uniform float time;
varying vec2 vUv; varying vec2 vUv;
void main(void) void main(void) {
{
vec2 p = - 1.0 + 2.0 * vUv;
vec2 p = -1.0 + 2.0 * vUv; float a = time * 40.0;
float a = time*40.0; float d, e, f, g = 1.0 / 40.0 ,h ,i ,r ,q;
float d,e,f,g=1.0/40.0,h,i,r,q;
e = 400.0 * ( p.x * 0.5 + 0.5 );
e=400.0*(p.x*0.5+0.5); f = 400.0 * ( p.y * 0.5 + 0.5 );
f=400.0*(p.y*0.5+0.5); i = 200.0 + sin( e * g + a / 150.0 ) * 20.0;
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;
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 ) );
r=sqrt(pow(i-e,2.0)+pow(d-f,2.0)); q = f / r;
q=f/r; e = ( r * cos( q ) ) - a / 2.0;
e=(r*cos(q))-a/2.0;f=(r*sin(q))-a/2.0; f = ( r * sin( q ) ) - a / 2.0;
d=sin(e*g)*176.0+sin(e*g)*164.0+r; d = sin( e * g ) * 176.0 + sin( e * g ) * 164.0 + r;
h=((f+d)+a/2.0)*g; 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); 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 = 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; 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 += 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; i = mod( i / 5.6, 256.0 ) / 64.0;
if(i<0.0) i+=4.0; if ( i < 0.0 ) i += 4.0;
if(i>=2.0) i=4.0-i; if ( i >= 2.0 ) i = 4.0 - i;
d=r/350.0; d = r / 350.0;
d+=sin(d*d*8.0)*0.52; d += sin( d * d * 8.0 ) * 0.52;
f=(sin(a*g)+1.0)/2.0; 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); 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 @@ ...@@ -171,12 +166,10 @@
var container, stats; var container, stats;
var camera, scene, renderer; var camera, scene, renderer, clock;
var uniforms1, uniforms2; var uniforms1, uniforms2;
var clock = new THREE.Clock();
init(); init();
animate(); animate();
...@@ -189,17 +182,17 @@ ...@@ -189,17 +182,17 @@
scene = new THREE.Scene(); 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 = { uniforms1 = {
time: { value: 1.0 }, time: { value: 1.0 }
resolution: { value: new THREE.Vector2() }
}; };
uniforms2 = { uniforms2 = {
time: { value: 1.0 }, time: { value: 1.0 },
resolution: { value: new THREE.Vector2() }, texture: { value: new THREE.TextureLoader().load( 'textures/disturb.jpg' ) }
texture: { value: new THREE.TextureLoader().load( "textures/disturb.jpg" ) }
}; };
uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping; uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping;
...@@ -243,12 +236,6 @@ ...@@ -243,12 +236,6 @@
function onWindowResize( event ) { 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.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
......
examples/webgl_shader_lava.html
浏览文件 @ 68bdd05f
...@@ -50,12 +50,10 @@ ...@@ -50,12 +50,10 @@
<script src="js/postprocessing/FilmPass.js"></script> <script src="js/postprocessing/FilmPass.js"></script>
<script src="js/Detector.js"></script> <script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script id="fragmentShader" type="x-shader/x-fragment"> <script id="fragmentShader" type="x-shader/x-fragment">
uniform float time; uniform float time;
uniform vec2 resolution;
uniform float fogDensity; uniform float fogDensity;
uniform vec3 fogColor; uniform vec3 fogColor;
...@@ -67,11 +65,11 @@ ...@@ -67,11 +65,11 @@
void main( void ) { void main( void ) {
vec2 position = -1.0 + 2.0 * vUv; vec2 position = - 1.0 + 2.0 * vUv;
vec4 noise = texture2D( texture1, vUv ); vec4 noise = texture2D( texture1, vUv );
vec2 T1 = vUv + vec2( 1.5, -1.5 ) * time *0.02; vec2 T1 = vUv + vec2( 1.5, - 1.5 ) * time * 0.02;
vec2 T2 = vUv + vec2( -0.5, 2.0 ) * time * 0.01; vec2 T2 = vUv + vec2( - 0.5, 2.0 ) * time * 0.01;
T1.x += noise.x * 2.0; T1.x += noise.x * 2.0;
T1.y += noise.y * 2.0; T1.y += noise.y * 2.0;
...@@ -83,9 +81,9 @@ ...@@ -83,9 +81,9 @@
vec4 color = texture2D( texture2, T2 * 2.0 ); vec4 color = texture2D( texture2, T2 * 2.0 );
vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 ); 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.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.g > 1.0 ) { temp.rb += temp.g - 1.0; }
if( temp.b > 1.0 ){ temp.rg += temp.b - 1.0; } if( temp.b > 1.0 ) { temp.rg += temp.b - 1.0; }
gl_FragColor = temp; gl_FragColor = temp;
...@@ -120,22 +118,11 @@ ...@@ -120,22 +118,11 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); 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, mesh;
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;
init(); init();
animate(); animate();
...@@ -144,11 +131,13 @@ ...@@ -144,11 +131,13 @@
container = document.getElementById( 'container' ); 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; camera.position.z = 4;
scene = new THREE.Scene(); scene = new THREE.Scene();
clock = new THREE.Clock();
var textureLoader = new THREE.TextureLoader(); var textureLoader = new THREE.TextureLoader();
uniforms = { uniforms = {
...@@ -156,10 +145,9 @@ ...@@ -156,10 +145,9 @@
fogDensity: { value: 0.45 }, fogDensity: { value: 0.45 },
fogColor: { value: new THREE.Vector3( 0, 0, 0 ) }, fogColor: { value: new THREE.Vector3( 0, 0, 0 ) },
time: { value: 1.0 }, time: { value: 1.0 },
resolution: { value: new THREE.Vector2() },
uvScale: { value: new THREE.Vector2( 3.0, 1.0 ) }, uvScale: { value: new THREE.Vector2( 3.0, 1.0 ) },
texture1: { value: textureLoader.load( "textures/lava/cloud.png" ) }, texture1: { value: textureLoader.load( 'textures/lava/cloud.png' ) },
texture2: { value: textureLoader.load( "textures/lava/lavatile.jpg" ) } texture2: { value: textureLoader.load( 'textures/lava/lavatile.jpg' ) }
}; };
...@@ -168,7 +156,7 @@ ...@@ -168,7 +156,7 @@
var size = 0.65; var size = 0.65;
material = new THREE.ShaderMaterial( { var material = new THREE.ShaderMaterial( {
uniforms: uniforms, uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent, vertexShader: document.getElementById( 'vertexShader' ).textContent,
...@@ -176,7 +164,7 @@ ...@@ -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; mesh.rotation.x = 0.3;
scene.add( mesh ); scene.add( mesh );
...@@ -187,10 +175,6 @@ ...@@ -187,10 +175,6 @@
container.appendChild( renderer.domElement ); container.appendChild( renderer.domElement );
renderer.autoClear = false; renderer.autoClear = false;
//
stats = new Stats();
//container.appendChild( stats.dom );
// //
...@@ -216,9 +200,6 @@ ...@@ -216,9 +200,6 @@
function onWindowResize( event ) { function onWindowResize( event ) {
uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight; camera.aspect = window.innerWidth / window.innerHeight;
...@@ -235,7 +216,6 @@ ...@@ -235,7 +216,6 @@
requestAnimationFrame( animate ); requestAnimationFrame( animate );
render(); render();
stats.update();
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或