|
<!doctype html>
<html>
<head>
<title>.trixl</title>
<meta charset="utf-8" />
<style>
#stage {
position: absolute;
top: 0;
left: 0;
}
#debug {
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<canvas id="stage">
sorry. your browser is from the dark ages. please initiate
temporal leap to a minimally brighter future where browsers can
investigate the third dimension.
</canvas>
<span id="debug"></span>
<script type="gl/vertex-shader">
attribute vec3 pos;
varying vec3 world_pos;
uniform mat4 transform;
void main() {
world_pos = pos;
gl_Position = vec4(transform * vec4(pos, 1));
}
</script>
<script type="gl/fragment-shader">
precision mediump float;
uniform vec4 color;
varying vec3 world_pos;
void main() {
if (color.x >= 0.0 && color.x <= 1.0) {
gl_FragColor = color;
} else {
gl_FragColor = vec4(world_pos.x, world_pos.y, world_pos.z, 1);
}
}
</script>
<script src="gl.js"></script>
<script src="geometry.js"></script>
<script src="matrix.js"></script>
<script src="glmatrix.js"></script>
<script>
mat4.multiplyMany = function() {
var m = arguments[0];
for(var i = 1; i < arguments.length; i++) {
m = mat4.multiply([], arguments[i], m);
}
return m;
}
var range = function(lo, hi) {
var both = hi !== undefined,
l = both ? lo : 0,
h = both ? hi : lo;
return Array.apply(null, Array(h - l)).map(function(_, i) {
return l + i;
});
}
var rgbFromCss = function(color) {
var el = document.createElement('div');
el.style.color = color;
var style = getComputedStyle(el);
var rgb = style.getPropertyCSSValue('color').getRGBColorValue();
var f = function(val) {
return val.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
}
return [f(rgb.red), f(rgb.green), f(rgb.blue), f(rgb.alpha)];
}
</script>
<script>
window.trixl = {};
trixl.stage = document.querySelector("#stage");
trixl.window = {w: window.innerWidth, h: window.innerHeight};
trixl.stage.width = trixl.window.w;
trixl.stage.height = trixl.window.h;
trixl.debug = document.querySelector("#debug");
trixl.debug_pos = function(pos) {
var coord_html = function(coord) {
var s = (coord.toString() + " ").slice(0, 6);
if (coord < -1.0 || coord > 1.0) {
return '<span style="color: red">' + s + '</span>';
} else {
return '<span>' + s + '</span>';
}
return s;
}
return coord_html(pos[0]) + ", " + coord_html(pos[1]) + ", " + coord_html(pos[2]);
}
var gl = trixl.gl = trixl.stage.getContext("webgl");
//gl.enable(gl.CULL_FACE);
gl.enable(gl.DEPTH_TEST);
trixl.camera = { pos: [0, 0, 5], focus: [0, 0, 10], up: [0, 1, 0] };
trixl.camera.front = function() {
var front = vec3.subtract([], trixl.camera.focus, trixl.camera.pos);
return vec3.normalize(front, front);
}
trixl.camera.strafe = function(front) {
var strafe = vec3.cross([], front || trixl.camera.front(), trixl.camera.up);
return vec3.normalize(strafe, strafe);
}
trixl.camera.forward = function(scale) {
var front = trixl.camera.front();
vec3.scale(front, front, scale);
vec3.add(trixl.camera.pos, trixl.camera.pos, front);
vec3.add(trixl.camera.focus, trixl.camera.focus, front);
}
trixl.camera.sideways = function(scale) {
var front = trixl.camera.front();
var strafe = trixl.camera.strafe(front);
vec3.scale(strafe, strafe, scale);
vec3.add(trixl.camera.pos, trixl.camera.pos, strafe);
vec3.add(trixl.camera.focus, trixl.camera.focus, strafe);
}
trixl.camera.rotate = function(dx, dy) {
var front = trixl.camera.front();
var strafe = trixl.camera.strafe(front);
trixl.camera.rotateAround(-dx, trixl.camera.up);
trixl.camera.rotateAround(-dy, strafe);
}
trixl.camera.rotateAround = function(angle, axis) {
var front = trixl.camera.front();
var q = quat.setAxisAngle([], axis, angle);
vec3.transformQuat(front, front, q);
vec3.add(trixl.camera.focus, trixl.camera.pos, front);
}
var vertexPosBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geometry.cube()), gl.STATIC_DRAW);
var vs = document.querySelector("script[type='gl/vertex-shader']").textContent;
var fs = document.querySelector("script[type='gl/fragment-shader']").textContent;
var program = createProgram(vs, fs);
gl.useProgram(program);
program.vertexPosAttrib = gl.getAttribLocation(program, 'pos');
gl.enableVertexAttribArray(program.vertexPosAttrib);
gl.vertexAttribPointer(program.vertexPosBuffer, 3, gl.FLOAT, false, 0, 0);
program.color = gl.getUniformLocation(program, 'color');
gl.uniform4f(program.color, -1, -1, -1, -1);
trixl.color = [0, 0, 0, 1];
trixl.world = new Map([
[[0, 0, 2], {color: [0.7, 0, 0, 1]}],
[[-3.0, +0.0, 2], {color: [0.5, 0.5, 0.5, 1]}],
[[+3.0, +0.0, 2], {color: [0.5, 0.5, 0.5, 1]}],
[[+0.0, -3.0, 2], {color: [0.5, 0.5, 0.5, 1]}],
[[+0.0, +3.0, 2], {color: [0.5, 0.5, 0.5, 1]}]
]);
trixl.world.remove = function(pos) {
var key = null;
for(var k of trixl.world.keys()) {
if (k[0] === pos[0] && k[1] === pos[1] && k[2] === pos[2]) {
key = k;
break;
}
}
return trixl.world.delete(key);
}
trixl.generate = {};
trixl.generate.random = function(lo, hi, color) {
var x = lo + Math.round(Math.random() * (hi - lo)),
y = lo + Math.round(Math.random() * (hi - lo)),
z = lo + Math.round(Math.random() * (hi - lo)),
color = color || [Math.random(), Math.random(), Math.random(), 1];
trixl.world.set([x, y, z], {color: color || trixl.color});
}
trixl.generate.many = function(n, lo, hi, color) {
Array.apply(null, Array(n)).map(function() { trixl.generate.random(lo, hi, color) });
}
trixl.generate.fun = function() {
trixl.generate.many(10, -3, 3);
trixl.generate.many(100, -25, 25);
trixl.generate.many(1000, -100, 100);
}
trixl.geometry = {};
trixl.geometry.circle = function(pos, radius, color) {
range(0, 2 * radius).map(function(i) {
trixl.world.set([
pos[0] + radius * Math.sin(i * Math.PI / radius),
pos[1] + radius * Math.cos(i * Math.PI / radius),
pos[2]
], {color: color || trixl.color});
});
}
trixl.geometry.sphere = function(pos, radius, color) {
for (var i = 0; i < 2 * Math.PI; i += Math.PI / radius) {
for (var j = 0; j < Math.PI; j += Math.PI / radius) {
var x = pos[0] + radius * Math.cos(i) * Math.sin(j),
y = pos[1] + radius * Math.sin(i) * Math.sin(j),
z = pos[2] + radius * Math.cos(j);
trixl.world.set([x, y, z], {color: color});
}
}
}
var angle = {x: 0, y: 0, z: 0};
var offset = {x: 0, y: 0, z: 0};
program.transform = gl.getUniformLocation(program, 'transform');
trixl.redraw = function() {
var view = mat4.lookAt([], trixl.camera.pos, trixl.camera.focus, trixl.camera.up);
var aspect = trixl.window.w / trixl.window.h;
var transform = function(pos) {
return mat4.multiplyMany(
matrix.translate(-0.5, -0.5, -0.5),
matrix.rotateZ(angle.z / 10),
//matrix.rotateY(angle.y / 10),
matrix.rotateX(angle.x / 10),
matrix.translate(pos[0] + offset.x, pos[1] + offset.y, pos[2] + offset.z),
view,
matrix.perspective(Math.PI / 3, aspect)
);
}
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
for (var pair of trixl.world) {
var pos = pair[0], data = pair[1];
gl.uniform4fv(program.color, data ? data.color || trixl.color : trixl.color);
gl.uniformMatrix4fv(program.transform, false, transform(pos));
gl.drawArrays(gl.TRIANGLES, 0, 6 * 6);
}
gl.uniform4f(program.color, -1, -1, -1, 0);
//angle.x += Math.PI / 10;
//angle.y += Math.PI / 10;
//angle.z += Math.PI / 10;
//offset.x = Math.sin(angle.x * 0.1);
//offset.y = Math.sin(angle.y * 0.1);
//offset.z = Math.cos(angle.z * 0.1) * 2;
}
trixl.step = function() {
trixl.redraw();
trixl.step.reqId = requestAnimationFrame(trixl.step);
}
trixl.start = function() {
trixl.step.reqId = requestAnimationFrame(trixl.step);
}
trixl.stop = function() {
cancelAnimationFrame(trixl.step.reqId);
trixl.step.reqId = null;
}
trixl.start();
trixl.speed = { move: 0.1, turn: 0.01 }
trixl.input = {};
trixl.input.keys = new Set();
document.addEventListener("keydown", function(ev) {
trixl.input.keys.add(ev.keyCode);
var isPressed = function(keyCode) {
return trixl.input.keys.has(keyCode);
}
if (isPressed(32)) { // space
if (trixl.step.reqId == null) {
trixl.start();
} else {
trixl.stop();
}
}
if (isPressed(37) || isPressed(65)) { // left || a
trixl.camera.sideways(-trixl.speed.move);
}
if (isPressed(38) || isPressed(87)) { // up || w
trixl.camera.forward(-trixl.speed.move);
}
if (isPressed(39) || isPressed(68)) { // right || d
trixl.camera.sideways(trixl.speed.move);
}
if (isPressed(40) || isPressed(83)) { // down || s
trixl.camera.forward(trixl.speed.move);
}
});
document.addEventListener("keyup", function(ev) {
trixl.input.keys.delete(ev.keyCode);
});
trixl.input.mouse = {last: null};
trixl.stage.addEventListener("mousemove", function(ev) {
var mouse = trixl.input.mouse;
if (mouse.last === null) {
mouse.last = {x: ev.clientX, y: ev.clientY};
}
var diff = { x: mouse.last.x - ev.clientX, y: mouse.last.y - ev.clientY };
trixl.camera.rotate(diff.x * trixl.speed.turn, diff.y * trixl.speed.turn);
mouse.last = {x: ev.clientX, y: ev.clientY};
});
window.onresize = function() {
trixl.window.w = window.innerWidth;
trixl.window.h = window.innerHeight;
trixl.stage.width = trixl.window.w;
trixl.stage.height = trixl.window.h;
gl.viewport(0, 0, trixl.window.w, trixl.window.h);
trixl.redraw();
}
trixl.importPixls = function(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url || 'http://pixl.papill0n.org/world');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var world = JSON.parse(xhr.responseText);
var keys = Object.keys(world);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var coords = key.split(',').map(function(n) { return parseInt(n); });
var color = rgbFromCss(world[key].color)
trixl.world.set([-coords[0], -coords[1], 0],
{color: [color[0] / 255.0, color[1] / 255, color[2] / 255, color[3]]});
}
}
}
xhr.send();
}
</script>
</body>
</html>
|
