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
258 lines (177 loc) • 5.83 kB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Event Horizon</title>
<!--
http://localhost:8888/mandelbrot_maybach.html
http://blog.mayflower.de/4584-Playing-around-with-pixel-shaders-in-WebGL.html
-->
<!-- <script type="text/javascript" src="common/glMatrix-0.9.5.min.js"></script> -->
<!-- <script type="text/javascript" src="common/gl-matrix.2.1.0.js"></script> -->
<!--
<script type="text/javascript" src="common/gl-matrix.1.3.7.js"></script>
<script type="text/javascript" src="common/common.js"></script>
<script type="text/javascript" src="common/vec3.js"></script>
<script type="text/javascript" src="common/webgl-utils.js"></script>
<script type="text/javascript" src="common/Common_Utils.js"></script>
-->
<!--
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
// varying vec4 vColor;
// uniform vec2 resolution;
#define NUM_STEPS 50
#define ZOOM_FACTOR 2.0
#define X_OFFSET 0.5
void main() {
vec2 z;
float x,y;
int steps;
float normalizedX = (gl_FragCoord.x - 320.0) / 640.0 * ZOOM_FACTOR *
(640.0 / 480.0) - X_OFFSET;
float normalizedY = (gl_FragCoord.y - 240.0) / 480.0 * ZOOM_FACTOR;
z.x = normalizedX;
z.y = normalizedY;
for (int i=0;i<NUM_STEPS;i++) {
steps = i;
x = (z.x * z.x - z.y * z.y) + normalizedX;
y = (z.y * z.x + z.x * z.y) + normalizedY;
if((x * x + y * y) > 4.0) {
break;
}
z.x = x;
z.y = y;
}
if (steps == NUM_STEPS-1) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
}
</script>
-->
<!-- <script type="text/javascript" src="mandelbrot_maybach.js"></script> -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">// <![CDATA[
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
// ]]></script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">// <![CDATA[
// void main() {
// gl_FragColor = vec4(gl_FragCoord.x / 640.0, gl_FragCoord.y / 480.0, 0, 1);
// }
#define NUM_STEPS 50
#define ZOOM_FACTOR 2.0
#define X_OFFSET 0.5
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
precision mediump int;
void main() {
vec2 z;
float x,y;
int steps;
float normalizedX = (gl_FragCoord.x - 320.0) / 640.0 * ZOOM_FACTOR *
(640.0 / 480.0) - X_OFFSET;
float normalizedY = (gl_FragCoord.y - 240.0) / 480.0 * ZOOM_FACTOR;
z.x = normalizedX;
z.y = normalizedY;
for (int i=0;i<NUM_STEPS;i++) {
steps = i;
x = (z.x * z.x - z.y * z.y) + normalizedX;
y = (z.y * z.x + z.x * z.y) + normalizedY;
if((x * x + y * y) > 4.0) {
break;
}
z.x = x;
z.y = y;
}
if (steps == NUM_STEPS-1) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} else {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
}
// ]]></script>
<script type="text/javascript">// <![CDATA[
var gl;
var canvas;
var buffer;
var program ;
window.onload = init;
function init() {
canvas = document.getElementById('ecology_simulation');
gl = canvas.getContext('experimental-webgl');
canvas.width = 640;
canvas.height = 480;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
// ---
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0]),
gl.STATIC_DRAW
);
var shaderScript;
var shaderSource;
var vertexShader;
var fragmentShader;
shaderScript = document.getElementById("2d-vertex-shader");
shaderSource = shaderScript.text;
vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, shaderSource);
gl.compileShader(vertexShader);
shaderScript = document.getElementById("2d-fragment-shader");
shaderSource = shaderScript.text;
fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, shaderSource);
gl.compileShader(fragmentShader);
program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// ----
render();
}
function render() {
window.requestAnimationFrame(render, canvas);
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// ---
positionLocation = gl.getAttribLocation
positionLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
// ]]></script>
</head>
<!-- <body onload="webgl_3d_animation.internal_webGLStart();" > -->
<body>
<ul id="error_output"></ul>
<p>
</p>
<canvas id="ecology_simulation" style="border: none;" width="1920" height="1080"></canvas>
<!-- <canvas id="ecology_simulation" style="border: none;" width="200" height="200"></canvas> -->
<!-- <canvas id="ecology_simulation" style="border: none;" width="800" height="800"></canvas> -->
<!-- <canvas id="ecology_simulation" style="border: none;" width="1920" height="1080"></canvas> -->
<br>
<div id="log_microphone">
</div>
</body>
</html>