cube test

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;