index.js

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 glBuffer = 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 triangle = glBuffer(gl, new Float32Array([
  +0.0, +1.0, +0.0,
  -1.0, -1.0, +0.0,
  +1.0, -1.0, +0.0
]))

var squareVerts = glBuffer(gl, new Float32Array([
  1.0, 1.0, 0.0,
  -1.0, 1.0, 0.0,
  1.0, -1.0, 0.0,
  1.0, -1.0, 0.0,
  -1.0, 1.0, 0.0,
  -1.0, -1.0, 0.0
]))




function cube(x, y, z) {
	var l = 1.0
	var cubeVerts = glBuffer(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
]))

  // cubeVerts.length = 105

  var matrix = mat4.create()
  mat4.identity(matrix, matrix)
  mat4.translate(matrix, matrix, [x, y, z])
  mat4.rotateX(matrix, matrix, 0)
  mat4.rotateY(matrix, matrix, 1)

  cubeVerts.bind()
  console.log(cubeVerts)
  shader.uniforms.uModelView = matrix
  shader.uniforms.color = [0, 1, 0]
  gl.drawArrays(gl.TRIANGLES, 0, 36)

}



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
  shader.attributes.aPosition.pointer()
  cube(0, 0, -7)


})

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

})

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

})


function square(){
  var matrix = mat4.create()
  mat4.identity(matrix, matrix)
  mat4.translate(matrix, matrix, [0, 0, -10])

  shader.uniforms.uModelView = matrix;

  squareVerts.length = 6;
  squareVerts.bind()
  gl.drawArrays(gl.TRIANGLES, 0 , squareVerts.length)
}


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

shader.vert

precision mediump float;

attribute vec3 aPosition;

uniform mat4 uModelView;
uniform mat4 uProjection;

void main() {
  gl_Position = uProjection * uModelView * vec4(aPosition, 1.0);
}