Render Cube

index.js

/// <reference path="typings/webgl/webgl.d.ts" />


var canvas = document.body.appendChild(document.createElement('canvas'))
var clear = require('gl-clear')({
    color: [0, 0, 0, 1]
})
var gl = require('gl-context')(canvas)
var createBuffer = require('gl-buffer')
var mat4 = require('gl-mat4')
var glslify = require('glslify')
var shell = require("game-shell")()

var shader = glslify({
    frag: './shader.frag',
    vert: './shader.vert'
})(gl)

var triangleMatrix = mat4.create()
var squareMatrix = mat4.create()
var projectionMatrix = mat4.create()

// var matrix = mat4.create()

var l = 1.0
var cubeBuffer = createBuffer(gl, new Float32Array([
// Front
+l, +l, +l,
-l, +l, +l,
+l, -l, +l,

+l, -l, +l,
-l, +l, +l,
-l, -l, +l,

// Back
+l, +l, -l,
-l, +l, -l,
+l, -l, -l,

+l, -l, -l,
-l, +l, -l,
-l, -l, -l,

// Bottom
+l, -l, -l,
-l, -l, -l,
+l, -l, +l,

+l, -l, +l,
-l, -l, -l,
-l, -l, +l,

// Top
+l, +l, -l,
-l, +l, -l,
+l, +l, +l,

+l, +l, +l,
-l, +l, -l,
-l, +l, +l,

// Left
-l, +l, +l,
-l, +l, -l,
-l, -l, +l,

-l, -l, +l,
-l, +l, -l,
-l, -l, -l,

// Right
+l, +l, +l,
+l, +l, -l,
+l, -l, +l,

+l, -l, +l,
+l, +l, -l,
+l, -l, -l
]))

cubeBuffer.length = 35


var rotate = 0;

// Draw A quad
var q = l + 0.25
var p = l - 0.25
var cubeOutlineArray = createBuffer(gl, new Float32Array([
  // Front
  +q, +q, +q,
  -q, +q, +q,
  +q, +p, +q,

  +q, +p, +q,
  -q, +q, +q,
  -q, +p, +q
  ]))

cubeOutlineArray.length = 5


function cube(x, y, z) {
    var matrix = mat4.create()
    mat4.identity(matrix, matrix)
    mat4.translate(matrix, matrix, [x, y, z])
    mat4.rotateX(matrix, matrix, rotate)
    // mat4.rotateY(matrix, matrix, rotate)
    // mat4.rotateZ(matrix, matrix, rotate)
    rotate += 0.001

    cubeBuffer.bind()
    shader.attributes.aPosition.pointer()

    shader.uniforms.uModelView = matrix
    shader.uniforms.color = [0, 1, 0]
    gl.drawArrays(gl.TRIANGLES, 0, cubeBuffer.length)

    cubeOutlineArray.bind()
    shader.attributes.aPosition.pointer()

    shader.uniforms.color = [1, 0, 0]
    gl.drawArrays(gl.TRIANGLES, 0, cubeOutlineArray.length)
}



shell.on("init", function() {
    // Setup WebGL Context
    var width = gl.drawingBufferWidth
    var height = gl.drawingBufferHeight

    clear(gl)
    gl.viewport(0, 0, width, height)

    mat4.perspective(projectionMatrix, Math.PI / 4, width / height, 0.1, 100)


    // Bind the shader
    shader.bind()
    shader.uniforms.uProjection = projectionMatrix


    // Enable attribute pointer

})

shell.on("tick", function() {

})

shell.on("render", function(frame_time) {
    cube(0, 0, -7)

})

shell.on("resize", function() {

})


// Resize the canvas to fit the screen
window.addEventListener('resize', require('canvas-fit')(canvas), false)

function drawQuad(a, b, c, d){
  var array = new Float32Array([
    // Triangle 1
    a.x, a.y, a.z,
    b.x, b.y, b.z,
    c.x, c.y, c.z,

    // Triangle 2
    c.x, c.y, c.z,
    b.x, b.y, b.z,
    d.x, d.y, d.z
    ])
}