mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-24 20:36:00 +10:00
alteredq
942a6c89c9
Lots of code got cleaner with seconds, seems we used them before all around. Also changed examples that didn't need deltas to simple Date.now() plus some more examples cleaning, trying to get rid of obsolescence warnings.
298 lines
7.0 KiB
HTML
298 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - materials - shaders [custom]</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
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;
|
|
}
|
|
|
|
#oldie a { color:#da0 }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<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>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<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;
|
|
|
|
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>
|
|
|
|
<script id="fragment_shader3" type="x-shader/x-fragment">
|
|
|
|
uniform float time;
|
|
uniform vec2 resolution;
|
|
|
|
varying vec2 vUv;
|
|
|
|
void main( void ) {
|
|
|
|
vec2 position = vUv;
|
|
|
|
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">
|
|
|
|
uniform float time;
|
|
uniform vec2 resolution;
|
|
|
|
uniform sampler2D texture;
|
|
|
|
varying vec2 vUv;
|
|
|
|
void main( void ) {
|
|
|
|
vec2 position = -1.0 + 2.0 * vUv;
|
|
|
|
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;
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<script id="vertexShader" type="x-shader/x-vertex">
|
|
|
|
varying vec2 vUv;
|
|
|
|
void main()
|
|
{
|
|
vUv = uv;
|
|
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
|
|
gl_Position = projectionMatrix * mvPosition;
|
|
}
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var container, stats;
|
|
|
|
var start_time;
|
|
|
|
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();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
camera = new THREE.PerspectiveCamera( 40, windowHalfX / windowHalfY, 1, 3000 );
|
|
camera.position.z = 4;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
start_time = Date.now();
|
|
|
|
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: THREE.ImageUtils.loadTexture( "textures/disturb.jpg" ) }
|
|
};
|
|
|
|
uniforms2.texture.texture.wrapS = uniforms2.texture.texture.wrapT = THREE.Repeat;
|
|
|
|
var size = 0.75, mlib = [],
|
|
params = [ [ 'fragment_shader1', uniforms1 ], [ 'fragment_shader2', uniforms2 ], [ 'fragment_shader3', uniforms1 ], [ 'fragment_shader4', uniforms1 ] ];
|
|
|
|
for( var i = 0; i < params.length; i++ ) {
|
|
|
|
material = new THREE.ShaderMaterial( {
|
|
|
|
uniforms: params[ i ][ 1 ],
|
|
vertexShader: document.getElementById( 'vertexShader' ).textContent,
|
|
fragmentShader: document.getElementById( params[ i ][ 0 ] ).textContent
|
|
|
|
} );
|
|
|
|
mlib[ i ] = material;
|
|
|
|
mesh = new THREE.Mesh( new THREE.CubeGeometry( size, size, size, 1, 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.add( mesh );
|
|
|
|
meshes[ i ] = mesh;
|
|
|
|
}
|
|
|
|
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;
|
|
|
|
uniforms2.resolution.value.x = window.innerWidth;
|
|
uniforms2.resolution.value.y = window.innerHeight;
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
uniforms1.time.value += 0.05;
|
|
uniforms2.time.value = ( Date.now() - start_time ) / 1000;
|
|
|
|
for( var i = 0; i < meshes.length; ++ i ) {
|
|
|
|
meshes[ i ].rotation.y += 0.01 * ( i % 2 ? 1 : -1 );
|
|
meshes[ i ].rotation.x += 0.01 * ( i % 2 ? -1 : 1 );
|
|
|
|
}
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|