diff --git a/docs/index.html b/docs/index.html
index 1cb4dbf..84eb2e1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,26 +2,27 @@
<html lang="en">
<head>
- <meta charset="utf-8" />
- <title>WebGL Demo</title>
- <script id="vertex-shader-2d" type="notjs">
+ <meta charset="utf-8" />
+ <title>WebGL Demo</title>
+ <script id="vertex-shader-2d" type="notjs">
// an attribute will receive data from a buffer
attribute vec4 a_position;
varying vec4 b_position;
uniform mat4 mat_thing;
+ uniform mat4 mvp_thing;
// all shaders have a main function
void main() {
// gl_Position is a special variable a vertex shader
// is responsible for setting
- gl_Position = a_position * mat_thing;
+ gl_Position = mat_thing * mvp_thing * a_position ;
b_position = a_position;
}
</script>
- <script id="fragment-shader-2d" type="notjs">
+ <script id="fragment-shader-2d" type="notjs">
// fragment shaders don't have a default precision so we need
// to pick one. mediump is a good default
@@ -29,25 +30,33 @@
varying vec4 b_position;
uniform float size_thing;
uniform float dist_thing;
+ uniform bool is_fg;
void main() {
// gl_FragColor is a special variable a fragment shader
// is responsible for setting
+ if (is_fg) {
+ gl_FragColor = vec4(b_position.xyz,1) * 0.2 + vec4(0.3,0.3,0.3,1) * 0.8;
+ return;
+ }
float dist = (log(distance(b_position.xy,vec2(0.0))) - size_thing + dist_thing) / log(2.0) * 0.1;
gl_FragColor = vec4((mod(dist,0.1) - 0.1 + 0.1 * dist_thing) * 50.0 * vec3(1,1,1),1); // return redish-purple
}
</script>
- <script src="/js/twgl.min.js" type="module"></script>
- <script src="/js/index.js" type="module"></script>
- <link rel="stylesheet" href="main.css">
+
+ <script src="/js/cube.js"></script>
+ <script src="/js/mat.js"></script>
+ <script src="/js/twgl.min.js" type="module"></script>
+ <script src="/js/index.js" type="module"></script>
+ <link rel="stylesheet" href="main.css">
</head>
<body>
- <canvas id="c" width="640" height="480"></canvas>
- <div class='hud'>
- hud
- </div>
+ <canvas id="c" width="640" height="480"></canvas>
+ <div class='hud'>
+ hud
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/docs/js/cube.js b/docs/js/cube.js
new file mode 100644
index 0000000..edc142b
--- /dev/null
+++ b/docs/js/cube.js
@@ -0,0 +1,57 @@
+var MDN = MDN || {};
+
+MDN.createCubeData = function (a, b, c) {
+
+ var positions = [
+ // Front face
+ -1.0, -1.0, 1.0,
+ 1.0, -1.0, 1.0,
+ 1.0, 1.0, 1.0,
+ -1.0, 1.0, 1.0,
+
+ // Back face
+ -1.0, -1.0, -1.0,
+ -1.0, 1.0, -1.0,
+ 1.0, 1.0, -1.0,
+ 1.0, -1.0, -1.0,
+
+ // Top face
+ -1.0, 1.0, -1.0,
+ -1.0, 1.0, 1.0,
+ 1.0, 1.0, 1.0,
+ 1.0, 1.0, -1.0,
+
+ // Bottom face
+ -1.0, -1.0, -1.0,
+ 1.0, -1.0, -1.0,
+ 1.0, -1.0, 1.0,
+ -1.0, -1.0, 1.0,
+
+ // Right face
+ 1.0, -1.0, -1.0,
+ 1.0, 1.0, -1.0,
+ 1.0, 1.0, 1.0,
+ 1.0, -1.0, 1.0,
+
+ // Left face
+ -1.0, -1.0, -1.0,
+ -1.0, -1.0, 1.0,
+ -1.0, 1.0, 1.0,
+ -1.0, 1.0, -1.0
+ ];
+ var elements = [
+ 0, 1, 2, 0, 2, 3, // front
+ 4, 5, 6, 4, 6, 7, // back
+ 8, 9, 10, 8, 10, 11, // top
+ 12, 13, 14, 12, 14, 15, // bottom
+ 16, 17, 18, 16, 18, 19, // right
+ 20, 21, 22, 20, 22, 23 // left
+ ]
+
+ let out = [];
+ for (let i of elements) {
+ out.push(positions[i * 3] * a, positions[i * 3 + 1] * b, positions[i * 3 + 2] * c)
+ }
+
+ return out;
+}
diff --git a/docs/js/index.js b/docs/js/index.js
index bc23f7d..05980ca 100644
--- a/docs/js/index.js
+++ b/docs/js/index.js
@@ -1,7 +1,7 @@
'use strict';
var nothingness = 1, nGain = 0.01; //todo: outsource into another file
-var canvas, gl, positionAttributeLocation, positionBuffer, matBuffer, sizeBuffer, distBuffer
+var canvas, gl, positionAttributeLocation, positionBuffer, matBuffer, vpBuffer, sizeBuffer, distBuffer, fgBuffer;
function createShader(gl, type, source) {
var shader = gl.createShader(type);
@@ -46,10 +46,13 @@ function main() {
var program = createProgram(gl, vertexShader, fragmentShader);
+ //clean this msss
positionAttributeLocation = gl.getAttribLocation(program, "a_position");
matBuffer = gl.getUniformLocation(program, "mat_thing");
sizeBuffer = gl.getUniformLocation(program, "size_thing");
- distBuffer = gl.getUniformLocation(program, "dist_thing");
+ distBuffer = gl.getUniformLocation(program, "dist_thing");
+ fgBuffer = gl.getUniformLocation(program, "is_fg");
+ vpBuffer = gl.getUniformLocation(program, "mvp_thing");
positionBuffer = gl.createBuffer();
@@ -57,17 +60,9 @@ function main() {
gl.useProgram(program);
- // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
- var size = 2; // 2 components per iteration
- var type = gl.FLOAT; // the data is 32bit floats
- var normalize = false; // don't normalize the data
- var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
- var offset = 0; // start at the beginning of the buffer
- gl.vertexAttribPointer(
- positionAttributeLocation, size, type, normalize, stride, offset);
+ gl.enable(gl.DEPTH_TEST);
- // draw
- renderThing();
+ gl.depthFunc(gl.LEQUAL);
}
function renderThing() {
@@ -82,13 +77,23 @@ function renderThing() {
var ratioA = Math.max(ratio, 1);
var ratioB = ratioA / ratio;
+
+ // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
+ var size = 3; // 2 components per iteration
+ var type = gl.FLOAT; // the data is 32bit floats
+ var normalize = false; // don't normalize the data
+ var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
+ var offset = 0; // start at the beginning of the buffer
+ gl.vertexAttribPointer(
+ positionAttributeLocation, size, type, normalize, stride, offset);
+
var positions = [
- -1, -1,
- -1, 1,
- 1, 1,
- -1, -1,
- 1, -1,
- 1, 1
+ -1, -1, -1,
+ -1, 1, -1,
+ 1, 1, -1,
+ -1, -1, -1,
+ 1, -1, -1,
+ 1, 1, -1
];
gl.enableVertexAttribArray(positionAttributeLocation);
@@ -96,23 +101,39 @@ function renderThing() {
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
- gl.uniformMatrix4fv(matBuffer, false, new Float32Array([
- ratioB, 0, 0, 0,
- 0, ratioA, 0, 0,
- 0, 0, 1, 0,
+ gl.uniformMatrix4fv(vpBuffer, false, new Float32Array([
+ 256, 0, 0, 0,
+ 0, 256, 0, 0,
+ 0, 0, 256 / 4, 0,
0, 0, 0, 1
]));
+ gl.uniformMatrix4fv(matBuffer, false, new Float32Array(MDN.perspectiveMatrix(Math.PI * 100 / 180, ratio, 0.01, 1000)));
+
hud.textContent = `${Math.floor(nothingness * 100) / 100} nothings; ${Math.floor(nGain * 60 * 100) / 100} nil/sec`
gl.uniform1f(sizeBuffer, -Math.log(nothingness));
- gl.uniform1f(distBuffer, 0.1 + 3 * nGain/(nGain+nothingness));
+ gl.uniform1f(distBuffer, 0.1 + 3 * nGain / (nGain + nothingness));
+ gl.uniform1i(fgBuffer, false);
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 6;
gl.drawArrays(primitiveType, offset, count);
- requestAnimationFrame(renderThing)
+
+ positions = MDN.createCubeData(1, 1, 1);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+ let vp = MDN.rotateYMatrix(nothingness);
+ vp = MDN.multiplyMatrices(MDN.translateMatrix(0, 0, -3), vp)
+
+ gl.uniformMatrix4fv(vpBuffer, false, new Float32Array(vp));
+
+ gl.uniform1i(fgBuffer, true);
+ count = positions.length / 3;
+ gl.drawArrays(primitiveType, offset, count);
+
+ requestAnimationFrame(renderThing);
}
let hud = document.querySelector('.hud');
@@ -121,19 +142,19 @@ requestAnimationFrame(renderThing)
let clicking = false;
-setInterval(function() {
+setInterval(function () {
nothingness += nGain;
-},1000 / 60)
+}, 1000 / 60)
-document.body.onclick = async function() {
+document.body.onclick = async function () {
if (clicking) return;
clicking = true;
let oldNGain = nGain;
nGain += 0.05;
while (nGain > oldNGain) {
nGain -= 0.005;
- await new Promise((res) => setTimeout(res,1000 / 60))
+ await new Promise((res) => setTimeout(res, 1000 / 60))
}
nGain = oldNGain;
clicking = false;
diff --git a/docs/js/mat.js b/docs/js/mat.js
new file mode 100644
index 0000000..cb2a8f2
--- /dev/null
+++ b/docs/js/mat.js
@@ -0,0 +1,285 @@
+var MDN = MDN || {};
+
+MDN.matrixArrayToCssMatrix = function (array) {
+ return "matrix3d(" + array.join(',') + ")";
+}
+
+MDN.multiplyPoint = function (matrix, point) {
+
+ var x = point[0], y = point[1], z = point[2], w = point[3];
+
+ var c1r1 = matrix[ 0], c2r1 = matrix[ 1], c3r1 = matrix[ 2], c4r1 = matrix[ 3],
+ c1r2 = matrix[ 4], c2r2 = matrix[ 5], c3r2 = matrix[ 6], c4r2 = matrix[ 7],
+ c1r3 = matrix[ 8], c2r3 = matrix[ 9], c3r3 = matrix[10], c4r3 = matrix[11],
+ c1r4 = matrix[12], c2r4 = matrix[13], c3r4 = matrix[14], c4r4 = matrix[15];
+
+ return [
+ x*c1r1 + y*c1r2 + z*c1r3 + w*c1r4,
+ x*c2r1 + y*c2r2 + z*c2r3 + w*c2r4,
+ x*c3r1 + y*c3r2 + z*c3r3 + w*c3r4,
+ x*c4r1 + y*c4r2 + z*c4r3 + w*c4r4
+ ];
+}
+
+MDN.multiplyMatrices = function (a, b) {
+
+ // TODO - Simplify for explanation
+ // currently taken from https://github.com/toji/gl-matrix/blob/master/src/gl-matrix/mat4.js#L306-L337
+
+ var result = [];
+
+ var a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3],
+ a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7],
+ a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11],
+ a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
+
+ // Cache only the current line of the second matrix
+ var b0 = b[0], b1 = b[1], b2 = b[2], b3 = b[3];
+ result[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
+ result[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
+ result[2] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
+ result[3] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
+
+ b0 = b[4]; b1 = b[5]; b2 = b[6]; b3 = b[7];
+ result[4] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
+ result[5] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
+ result[6] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
+ result[7] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
+
+ b0 = b[8]; b1 = b[9]; b2 = b[10]; b3 = b[11];
+ result[8] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
+ result[9] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
+ result[10] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
+ result[11] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
+
+ b0 = b[12]; b1 = b[13]; b2 = b[14]; b3 = b[15];
+ result[12] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
+ result[13] = b0*a01 + b1*a11 + b2*a21 + b3*a31;
+ result[14] = b0*a02 + b1*a12 + b2*a22 + b3*a32;
+ result[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
+
+ return result;
+}
+
+MDN.multiplyArrayOfMatrices = function (matrices) {
+
+ var inputMatrix = matrices[0];
+
+ for(var i=1; i < matrices.length; i++) {
+ inputMatrix = MDN.multiplyMatrices(inputMatrix, matrices[i]);
+ }
+
+ return inputMatrix;
+}
+
+MDN.normalMatrix = function (matrix) {
+
+ /*
+ This function takes the inverse and then transpose of the provided
+ 4x4 matrix. The result is a 3x3 matrix. Essentially the translation
+ part of the matrix gets removed.
+
+ https://github.com/toji/gl-matrix
+ */
+
+ var a00 = matrix[0], a01 = matrix[1], a02 = matrix[2], a03 = matrix[3],
+ a10 = matrix[4], a11 = matrix[5], a12 = matrix[6], a13 = matrix[7],
+ a20 = matrix[8], a21 = matrix[9], a22 = matrix[10], a23 = matrix[11],
+ a30 = matrix[12], a31 = matrix[13], a32 = matrix[14], a33 = matrix[15],
+
+ b00 = a00 * a11 - a01 * a10,
+ b01 = a00 * a12 - a02 * a10,
+ b02 = a00 * a13 - a03 * a10,
+ b03 = a01 * a12 - a02 * a11,
+ b04 = a01 * a13 - a03 * a11,
+ b05 = a02 * a13 - a03 * a12,
+ b06 = a20 * a31 - a21 * a30,
+ b07 = a20 * a32 - a22 * a30,
+ b08 = a20 * a33 - a23 * a30,
+ b09 = a21 * a32 - a22 * a31,
+ b10 = a21 * a33 - a23 * a31,
+ b11 = a22 * a33 - a23 * a32,
+
+ // Calculate the determinant
+ det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
+
+ if (!det) {
+ return null;
+ }
+ det = 1.0 / det;
+
+ var result = []
+
+ result[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
+ result[1] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
+ result[2] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
+
+ result[3] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
+ result[4] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
+ result[5] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
+
+ result[6] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
+ result[7] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
+ result[8] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
+
+ return result;
+}
+
+MDN.rotateXMatrix = function (a) {
+
+ var cos = Math.cos;
+ var sin = Math.sin;
+
+ return [
+ 1, 0, 0, 0,
+ 0, cos(a), -sin(a), 0,
+ 0, sin(a), cos(a), 0,
+ 0, 0, 0, 1
+ ];
+}
+
+MDN.rotateYMatrix = function (a) {
+
+ var cos = Math.cos;
+ var sin = Math.sin;
+
+ return [
+ cos(a), 0, sin(a), 0,
+ 0, 1, 0, 0,
+ -sin(a), 0, cos(a), 0,
+ 0, 0, 0, 1
+ ];
+}
+
+MDN.rotateZMatrix = function (a) {
+
+ var cos = Math.cos;
+ var sin = Math.sin;
+
+ return [
+ cos(a), -sin(a), 0, 0,
+ sin(a), cos(a), 0, 0,
+ 0, 0, 1, 0,
+ 0, 0, 0, 1
+ ];
+}
+
+MDN.translateMatrix = function (x, y, z) {
+ return [
+ 1, 0, 0, 0,
+ 0, 1, 0, 0,
+ 0, 0, 1, 0,
+ x, y, z, 1
+ ];
+}
+
+MDN.scaleMatrix = function (w, h, d) {
+ return [
+ w, 0, 0, 0,
+ 0, h, 0, 0,
+ 0, 0, d, 0,
+ 0, 0, 0, 1
+ ];
+}
+
+MDN.perspectiveMatrix = function (fieldOfViewInRadians, aspectRatio, near, far) {
+
+ // Construct a perspective matrix
+
+ /*
+ Field of view - the angle in radians of what's in view along the Y axis
+ Aspect Ratio - the ratio of the canvas, typically canvas.width / canvas.height
+ Near - Anything before this point in the Z direction gets clipped (resultside of the clip space)
+ Far - Anything after this point in the Z direction gets clipped (outside of the clip space)
+ */
+
+ var f = 1.0 / Math.tan(fieldOfViewInRadians / 2);
+ var rangeInv = 1 / (near - far);
+
+ return [
+ f / aspectRatio, 0, 0, 0,
+ 0, f, 0, 0,
+ 0, 0, (near + far) * rangeInv, -1,
+ 0, 0, near * far * rangeInv * 2, 0
+ ];
+}
+
+MDN.orthographicMatrix = function(left, right, bottom, top, near, far) {
+
+ // Each of the parameters represents the plane of the bounding box
+
+ var lr = 1 / (left - right);
+ var bt = 1 / (bottom - top);
+ var nf = 1 / (near - far);
+
+ var row4col1 = (left + right) * lr;
+ var row4col2 = (top + bottom) * bt;
+ var row4col3 = (far + near) * nf;
+
+ return [
+ -2 * lr, 0, 0, 0,
+ 0, -2 * bt, 0, 0,
+ 0, 0, 2 * nf, 0,
+ row4col1, row4col2, row4col3, 1
+ ];
+}
+
+MDN.normalize = function( vector ) {
+
+ // A utility function to make a vector have a length of 1
+
+ var length = Math.sqrt(
+ vector[0] * vector[0] +
+ vector[1] * vector[1] +
+ vector[2] * vector[2]
+ )
+
+ return [
+ vector[0] / length,
+ vector[1] / length,
+ vector[2] / length
+ ]
+}
+
+MDN.invertMatrix = function( matrix ) {
+
+ // Adapted from: https://github.com/mrdoob/three.js/blob/master/src/math/Matrix4.js
+
+ // Performance note: Try not to allocate memory during a loop. This is done here
+ // for the ease of understanding the code samples.
+ var result = [];
+
+ var n11 = matrix[0], n12 = matrix[4], n13 = matrix[ 8], n14 = matrix[12];
+ var n21 = matrix[1], n22 = matrix[5], n23 = matrix[ 9], n24 = matrix[13];
+ var n31 = matrix[2], n32 = matrix[6], n33 = matrix[10], n34 = matrix[14];
+ var n41 = matrix[3], n42 = matrix[7], n43 = matrix[11], n44 = matrix[15];
+
+ result[ 0] = n23 * n34 * n42 - n24 * n33 * n42 + n24 * n32 * n43 - n22 * n34 * n43 - n23 * n32 * n44 + n22 * n33 * n44;
+ result[ 4] = n14 * n33 * n42 - n13 * n34 * n42 - n14 * n32 * n43 + n12 * n34 * n43 + n13 * n32 * n44 - n12 * n33 * n44;
+ result[ 8] = n13 * n24 * n42 - n14 * n23 * n42 + n14 * n22 * n43 - n12 * n24 * n43 - n13 * n22 * n44 + n12 * n23 * n44;
+ result[12] = n14 * n23 * n32 - n13 * n24 * n32 - n14 * n22 * n33 + n12 * n24 * n33 + n13 * n22 * n34 - n12 * n23 * n34;
+ result[ 1] = n24 * n33 * n41 - n23 * n34 * n41 - n24 * n31 * n43 + n21 * n34 * n43 + n23 * n31 * n44 - n21 * n33 * n44;
+ result[ 5] = n13 * n34 * n41 - n14 * n33 * n41 + n14 * n31 * n43 - n11 * n34 * n43 - n13 * n31 * n44 + n11 * n33 * n44;
+ result[ 9] = n14 * n23 * n41 - n13 * n24 * n41 - n14 * n21 * n43 + n11 * n24 * n43 + n13 * n21 * n44 - n11 * n23 * n44;
+ result[13] = n13 * n24 * n31 - n14 * n23 * n31 + n14 * n21 * n33 - n11 * n24 * n33 - n13 * n21 * n34 + n11 * n23 * n34;
+ result[ 2] = n22 * n34 * n41 - n24 * n32 * n41 + n24 * n31 * n42 - n21 * n34 * n42 - n22 * n31 * n44 + n21 * n32 * n44;
+ result[ 6] = n14 * n32 * n41 - n12 * n34 * n41 - n14 * n31 * n42 + n11 * n34 * n42 + n12 * n31 * n44 - n11 * n32 * n44;
+ result[10] = n12 * n24 * n41 - n14 * n22 * n41 + n14 * n21 * n42 - n11 * n24 * n42 - n12 * n21 * n44 + n11 * n22 * n44;
+ result[14] = n14 * n22 * n31 - n12 * n24 * n31 - n14 * n21 * n32 + n11 * n24 * n32 + n12 * n21 * n34 - n11 * n22 * n34;
+ result[ 3] = n23 * n32 * n41 - n22 * n33 * n41 - n23 * n31 * n42 + n21 * n33 * n42 + n22 * n31 * n43 - n21 * n32 * n43;
+ result[ 7] = n12 * n33 * n41 - n13 * n32 * n41 + n13 * n31 * n42 - n11 * n33 * n42 - n12 * n31 * n43 + n11 * n32 * n43;
+ result[11] = n13 * n22 * n41 - n12 * n23 * n41 - n13 * n21 * n42 + n11 * n23 * n42 + n12 * n21 * n43 - n11 * n22 * n43;
+ result[15] = n12 * n23 * n31 - n13 * n22 * n31 + n13 * n21 * n32 - n11 * n23 * n32 - n12 * n21 * n33 + n11 * n22 * n33;
+
+ var determinant = n11 * result[0] + n21 * result[4] + n31 * result[8] + n41 * result[12];
+
+ if ( determinant === 0 ) {
+ throw new Error("Can't invert matrix, determinant is 0");
+ }
+
+ for( var i=0; i < result.length; i++ ) {
+ result[i] /= determinant;
+ }
+
+ return result;
+}
\ No newline at end of file