webgl-3d-animation
Version:
Interactive 3D animation using WebGL showing a 2D predator prey ecology on a grid which is real-time mapped onto the surface of a 3D torus. node.js server side gives access to WAV format files which are rendered using Web Audio API
86 lines (77 loc) • 2.73 kB
HTML
<html>
<head>
<title>WebGL Reader</title>
<script id="vertex" type="text/x-glsl-vert">
varying float vZ;
uniform float time;
uniform float effectAmount;
varying vec2 vUv;
mat3 rotateAngleAxisMatrix(float angle, vec3 axis) {
float c = cos(angle);
float s = sin(angle);
float t = 1.0 - c;
axis = normalize(axis);
float x = axis.x, y = axis.y, z = axis.z;
return mat3(
t*x*x + c, t*x*y + s*z, t*x*z - s*y,
t*x*y - s*z, t*y*y + c, t*y*z + s*x,
t*x*z + s*y, t*y*z - s*x, t*z*z + c
);
}
vec3 rotateAngleAxis(float angle, vec3 axis, vec3 v) {
return rotateAngleAxisMatrix(angle, axis) * v;
}
void main() {
float idx = floor(position.y/1.1)*80.0 + floor(position.x/1.1);
vec3 corner = vec3(floor(position.x/1.1)*1.1, floor(position.y/1.1)*1.1, 0.0);
vec3 mid = corner + vec3(0.5, 0.5, 0.0);
vec3 rpos = rotateAngleAxis(idx+time, vec3(mod(idx,16.0), -8.0+mod(idx,15.0), 1.0), position - mid) + mid;
vec4 fpos = vec4( mix(position,rpos,effectAmount), 1.0 );
fpos.x += -35.0;
fpos.z += ((sin(idx+time*2.0)))*4.2*effectAmount;
fpos.y += ((cos(idx+time*2.0)))*4.2*effectAmount;
vec4 mvPosition = modelViewMatrix * fpos;
mvPosition.y += 10.0*sin(time*0.5+mvPosition.x/25.0)*effectAmount;
mvPosition.x -= 10.0*cos(time*0.5+mvPosition.y/25.0)*effectAmount;
vec4 p = projectionMatrix * mvPosition;
vUv = uv;
vZ = p.z;
gl_Position = p;
}
</script>
<script id="fragment" type="text/x-glsl-frag">
varying float vZ;
varying vec2 vUv;
uniform float time;
uniform float effectAmount;
uniform vec2 size;
uniform sampler2D map;
void main() {
vec2 d = gl_FragCoord.xy - (0.5+0.02*sin(time))*size*vec2(1.0, 1.0);
vec4 diffuse = texture2D(map, vUv);
float a = sin(time*0.3)*2.0*3.14159;
d = vec2( d.x*cos(a) + d.y*sin(a),
-d.x*sin(a) + d.y*cos(a));
vec2 rg = vec2(0.0)+abs(d)/(0.5*size);
float b = abs(vZ) / 540.0;
gl_FragColor = mix(diffuse, vec4(rg,b,diffuse.a), effectAmount);
}
</script>
<script src="Three.js"></script>
<script src="dat.gui.min.js"></script>
<!-- <script src="big_book.js"></script> -->
<script src="perspective_projection_3d_in_clip_space_nonewlines.js"></script>
<script src="particles_three.js"></script>
<style>
html {
background-color: #fff;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>