Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 fbdbdbf3 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #12164 from Mugen87/examples 

Examples: Clean up basic shader examples
上级 ba37015a 68bdd05f
隐藏空白更改
内联 并排
Showing with 87 addition and 118 deletion
examples/webgl_shader.html
浏览文件 @ fbdbdbf3
......@@ -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;
}
//
......
examples/webgl_shader2.html
浏览文件 @ fbdbdbf3
......@@ -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();
......
examples/webgl_shader_lava.html
浏览文件 @ fbdbdbf3
......@@ -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();
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或