add simple skybox

src/primitives/Cube.js

@@ -0,0 +1,63 @@
+export default class Quad {
+  constructor() {
+    this.vertexData = new Float32Array([         
+      -1.0, 1.0, -1.0,
+      -1.0, -1.0, -1.0,
+      1.0, -1.0, -1.0,
+      1.0, -1.0, -1.0,
+      1.0, 1.0, -1.0,
+      -1.0, 1.0, -1.0,
+
+      -1.0, -1.0, 1.0,
+      -1.0, -1.0, -1.0,
+      -1.0, 1.0, -1.0,
+      -1.0, 1.0, -1.0,
+      -1.0, 1.0, 1.0,
+      -1.0, -1.0, 1.0,
+
+      1.0, -1.0, -1.0,
+      1.0, -1.0, 1.0,
+      1.0, 1.0, 1.0,
+      1.0, 1.0, 1.0,
+      1.0, 1.0, -1.0,
+      1.0, -1.0, -1.0,
+
+      -1.0, -1.0, 1.0,
+      -1.0, 1.0, 1.0,
+      1.0, 1.0, 1.0,
+      1.0, 1.0, 1.0,
+      1.0, -1.0, 1.0,
+      -1.0, -1.0, 1.0,
+
+      -1.0, 1.0, -1.0,
+      1.0, 1.0, -1.0,
+      1.0, 1.0, 1.0,
+      1.0, 1.0, 1.0,
+      -1.0, 1.0, 1.0,
+      -1.0, 1.0, -1.0,
+
+      -1.0, -1.0, -1.0,
+      -1.0, -1.0, 1.0,
+      1.0, -1.0, -1.0,
+      1.0, -1.0, -1.0,
+      -1.0, -1.0, 1.0,
+      1.0, -1.0, 1.0
+    ]);
+    this.vertexArray = gl.createVertexArray();
+    this.vertexBuffer = gl.createBuffer();
+    gl.bindVertexArray(this.vertexArray);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.vertexData, gl.STATIC_DRAW);
+    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+    gl.enableVertexAttribArray(0);
+
+    gl.bindVertexArray(null);
+  }
+
+  draw() {
+    gl.bindVertexArray(this.vertexArray);
+    gl.drawArrays(gl.TRIANGLES, 0, 36);
+    gl.bindVertexArray(null);
+  }
+}

src/renderers/ForwardRenderer.js

@@ -1,11 +1,17 @@
 import Renderer from './Renderer';
 import { /* vec3, vec4, quat,*/ mat4 } from 'gl-matrix';
+import Shader from '../core/Shader';
+
+import vsSkyBox from '../shaders/forward/cube-map.vs.glsl';
+import fsSkyBox from '../shaders/forward/cube-map.fs.glsl';
+
+import Cube from '../primitives/Cube';
 
 export default class ForwardRenderer extends Renderer {
   constructor(width, height) {
     super(width, height);
     gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.LESS);
+    gl.depthFunc(gl.LEQUAL);
     this.defaultSampler = gl.createSampler();
     gl.samplerParameteri(this.defaultSampler, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR);
     gl.samplerParameteri(this.defaultSampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
@@ -17,6 +23,10 @@ export default class ForwardRenderer extends Renderer {
     gl.samplerParameteri(this.defaultSampler, gl.TEXTURE_COMPARE_MODE, gl.NONE);
     gl.samplerParameteri(this.defaultSampler, gl.TEXTURE_COMPARE_FUNC, gl.LEQUAL);
     this._items = [];
+
+    this._cube = new Cube();
+    this._shaderSkybox = new Shader(vsSkyBox, fsSkyBox);
+    this._shaderSkybox.compile();
   }
 
   activeAndBindTexture(textureInfo) {
@@ -73,6 +83,18 @@ export default class ForwardRenderer extends Renderer {
 
       this._items = [];
     });
+
+    let MVP = mat4.create();
+    mat4.copy(MVP, camera.view);
+    MVP[12] = 0.0;
+    MVP[13] = 0.0;
+    MVP[14] = 0.0;
+    MVP[15] = 1.0;
+    mat4.mul(MVP, camera.projection, MVP);
+    this._shaderSkybox.use();
+    this._shaderSkybox.setMat4('uMVP', MVP);
+    this._shaderSkybox.setInt('u_environment', 14);
+    this._cube.draw();
   }
 
   //

src/shaders/forward/cube-map.fs.glsl

@@ -1,4 +1,3 @@
-#version 300 es
 precision highp float;
 precision highp int;
 

src/shaders/forward/cube-map.vs.glsl

@@ -1,16 +1,15 @@
-#version 300 es
 precision highp float;
 precision highp int;
 
-uniform mat4 u_MVP;
+uniform mat4 uMVP;
 
 layout(location = 0) in vec3 position;
 
 out vec3 texcoord;
 
 void main()
 {
-    vec4 pos = u_MVP * vec4(position, 1.0);
+    vec4 pos = uMVP * vec4(position, 1.0);
     gl_Position = pos.xyww;
     texcoord = position;
 }

src/shaders/forward/pbr.fs.glsl

@@ -103,7 +103,7 @@ vec3 getNormal()
     vec3 b = normalize(cross(ng, t));
     mat3 tbn = mat3(t, b, ng);
 #else // HAS_TANGENTS
-    mat3 tbn = v_TBN;
+    mat3 tbn = vTBN;
 #endif
 
 #ifdef HAS_NORMALMAP