mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-19 09:56:12 +10:00
alteredq
ecad27eb11
Code is still rough around edges (it can be made nicer), though it should already produce one-to-one results with ubershader. Side-effect is that scene is no longer required as WebGLRenderer constructor parameter. Shader programs are now constructed upon first frame render and only then scene lights are examined.
161 lines
3.8 KiB
HTML
161 lines
3.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - shader</title>
|
|
<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;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container"></div>
|
|
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - shader demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
|
|
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
|
|
|
|
<script id="vertex_shader" type="x-shader/x-vertex">
|
|
void main()
|
|
{
|
|
gl_Position = vec4( position, 1.0 );
|
|
}
|
|
</script>
|
|
|
|
<script id="fragment_shader" type="x-shader/x-fragment">
|
|
#ifdef GL_ES
|
|
precision highp float;
|
|
#endif
|
|
|
|
uniform vec2 resolution;
|
|
uniform float time;
|
|
|
|
void main(void)
|
|
{
|
|
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(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 type="text/javascript">
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var uniforms, material, mesh;
|
|
|
|
var mouseX = 0, mouseY = 0,
|
|
lat = 0, lon = 0, phy = 0, theta = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
init();
|
|
setInterval( loop, 1000 / 60 );
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
camera = new THREE.Camera();
|
|
camera.position.z = 1;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
uniforms = {
|
|
time: { type: "f", value: 1.0 },
|
|
resolution: { type: "v2", value: new THREE.Vector2() }
|
|
};
|
|
|
|
material = new THREE.MeshShaderMaterial( {
|
|
|
|
vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
|
|
fragment_shader: document.getElementById( 'fragment_shader' ).textContent,
|
|
uniforms: uniforms
|
|
|
|
} );
|
|
|
|
mesh = new THREE.Mesh( new Plane( 2, 2 ), material );
|
|
scene.addObject( 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 ) {
|
|
|
|
uniforms.resolution.value.x = window.innerWidth;
|
|
uniforms.resolution.value.y = window.innerHeight;
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
}
|
|
|
|
function loop() {
|
|
|
|
uniforms.time.value += 0.05;
|
|
|
|
renderer.render( scene, camera );
|
|
stats.update();
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |