'use strict'
const gl = require('pex-gl')(1280, 720)
const regl = require('regl')(gl)
const Mat4 = require('pex-math/Mat4')
const createCube = require('primitive-cube')
const glsl = require('glslify')

const cube = createCube()

const projectionMatrix = Mat4.perspective([], 60, 1280 / 720, 0.1, 100)
const viewMatrix = Mat4.lookAt([], [3, 3, 3], [0, 0, 0], [0, 1, 0])
const modelMatrix = Mat4.create()

const drawCube = regl({
  attributes: {
    aPosition: cube.positions,
    aNormal: cube.normals
  },
  elements: cube.cells,
  vert: glsl`
    #ifdef GL_ES
    #pragma glslify: transpose = require(glsl-transpose)
    #endif
    #pragma glslify: inverse = require(glsl-inverse)

    attribute vec3 aPosition;
    attribute vec3 aNormal;

    uniform mat4 uProjectionMatrix;
    uniform mat4 uViewMatrix;
    uniform mat4 uModelMatrix;

    varying vec3 vNormal;

    void main () {
      mat4 modelViewMatrix = uViewMatrix * uModelMatrix;
      mat3 normalMatrix = mat3(transpose(inverse(modelViewMatrix)));
      vNormal = normalMatrix * aNormal;
      gl_Position = uProjectionMatrix * modelViewMatrix * vec4(aPosition, 1.0);
    }
  `,
  frag: `
    #ifdef GL_ES
    precision highp float;
    #endif

    varying vec3 vNormal;

    void main () {
      gl_FragColor.rgb = vNormal * 0.5 + 0.5;
      gl_FragColor.a = 1.0;
    }
  `,
  uniforms: {
    uProjectionMatrix: projectionMatrix,
    uViewMatrix: viewMatrix,
    uModelMatrix: modelMatrix
  }
})

regl.frame(() => {
  regl.clear({
    color: [1, 0, 0, 1],
    depth: 1
  })
  drawCube()
})

@@ -334,15 +334,15 @@
 %5D, %5B
-3, 3, 3
+2, 2, 2
 %5D, %5B
@@ -1505,15 +1505,21 @@
 r: %5B
-1
+0.2
 , 0
+.2
 , 0
+.2
 , 1%5D

Move camera closer