Added texture rendering

shaders/shaded_fragment.fs

@@ -1,7 +1,10 @@
 precision mediump float;
 
-varying vec4 v_colour;
+uniform sampler2D u_texture;
+
+varying vec2 v_texcoord;
 
 void main() {
-  gl_FragColor = v_colour;
+  //gl_FragColor = v_colour;
+  gl_FragColor = texture2D(u_texture, v_texcoord);
 }

shaders/shaded_vertex.vs

@@ -2,20 +2,22 @@ uniform vec3 u_lightWorldPos;
 uniform mat4 u_worldViewProjection;
 uniform mat4 u_worldInverseTranspose;
 
+
 attribute vec4 position;
 //attribute vec3 colour;
+attribute vec2 texcoord;
 attribute vec3 normal;
 
-varying vec4 v_colour;
+//varying float v_lighting;
+varying vec2 v_texcoord;
 
 void main() {
   vec4 a_position = u_worldViewProjection * vec4(position.xyz, 1.0);
   
-  vec3 v_normal = (u_worldInverseTranspose * vec4(normal, 0.0)).xyz;
-  vec3 v_lightDir = normalize(u_lightWorldPos);
+  //vec3 v_normal = (u_worldInverseTranspose * vec4(normal, 0.0)).xyz;
+  //vec3 v_lightDir = normalize(u_lightWorldPos);
 
-  float lighting = abs(dot(v_normal, v_lightDir));
-  
+  //float lighting = abs(dot(v_normal, v_lightDir));
   //v_colour = vec4(abs(normal) * lighting, 1.0);
   //v_colour = vec4(vec3(lighting), 1.0);
   /*
@@ -25,10 +27,15 @@ void main() {
   normal_.z = (normal.z + 1.0) / 2.0;
   */
 
-  lighting = (clamp(lighting, 0.0, 1.0) * 0.66) + 0.33;
+  v_texcoord = texcoord;
+
+  //lighting = (clamp(lighting, 0.0, 1.0) * 0.66) + 0.33;
+  //v_lighting = lighting;
 
   //vec3 normal_ = (normal + 1.0) / 2.0;
-  v_colour = vec4(vec3(lighting), 1.0);
+  //vec3 diffuse = texture2D(u_texture, texcoord).rgb;
+  //v_colour = vec4(diffuse * lighting, 1.0);
+  //v_colour = vec4(vec3(lighting), 1.0);
   //v_colour = vec4(normal_ * lighting, 1.0);
   //v_colour = vec4(normal_, 1.0);
 

src/buffer.js

@@ -171,7 +171,7 @@ class BottomlessBuffer {
         }
 
         this._maxIndex = 0;
-        this._sanityCheck = false;
+        this._sanityCheck = true;
 
         this._getNewBuffer();
     }

src/client.js

@@ -14,8 +14,9 @@ const canvas = document.querySelector("#c");
 
 let loadedMesh = null;
 
-const mesh = new Mesh("./resources/mix.obj");
+const mesh = new Mesh(renderer._gl, "./resources/mix.obj");
 renderer.registerMesh(mesh);
+//console.log(renderer._materialBuffers);
 
 function showToastWithText(text, style) {
     $("#toast").removeClass("bg-success");

src/geometry.js

@@ -31,6 +31,11 @@ class GeometryTemplates {
                     b.x, b.y, b.z,
                     c.x, c.y, c.z,
                 ],
+                texcoord: [].concat(
+                    triangle.uv0,
+                    triangle.uv1,
+                    triangle.uv2
+                ),
                 normal: [
                     n.x, n.y, n.z,
                     n.x, n.y, n.z,

src/mesh.js

@@ -1,5 +1,7 @@
+const twgl = require('twgl.js');
 const fs = require('fs');
-const wavefrontObjParser = require('wavefront-obj-parser');
+
+//const wavefrontObjParser = require('wavefront-obj-parser');
 const expandVertexData = require('expand-vertex-data');
 
 const { Triangle } = require('./triangle.js');
@@ -10,7 +12,9 @@ var vertexInfoNameMap = {v: 'vertexPositions', vt: 'vertexUVs', vn: 'vertexNorma
 
 class Mesh {
 
-    constructor(obj_path) {
+    constructor(gl, obj_path) {
+        this._gl = gl;
+
         const mtl_path = obj_path.substring(0, obj_path.length - 3) + "mtl";
 
         // Parse .obj
@@ -24,7 +28,7 @@ class Mesh {
         const expanded = expandVertexData(parsedJSON, {facesToTriangles: true});
         this._data = {
             position: expanded.positions,
-            normal: expanded.normals,
+            //normal: expanded.normals,
             texcoord: expanded.uvs,
             indices: expanded.positionIndices,
             materials: parsedJSON.vertexMaterial
@@ -42,7 +46,7 @@ class Mesh {
         }
 
         this._getTriangles();
-        console.log(this.triangles);
+        this._loadTextures();
     }
 
     _parseMaterial(materialString) {
@@ -160,17 +164,33 @@ class Mesh {
                 const v1 = this._data.position.slice(3 * i1, 3 * i1 + 3);
                 const v2 = this._data.position.slice(3 * i2, 3 * i2 + 3);
 
+                const uv0 = this._data.texcoord.slice(2 * i0, 2 * i0 + 2);
+                const uv1 = this._data.texcoord.slice(2 * i1, 2 * i1 + 2);
+                const uv2 = this._data.texcoord.slice(2 * i2, 2 * i2 + 2);
+
                 const v0_ = new Vector3(v0[0], v0[1], v0[2]);
                 const v1_ = new Vector3(v1[0], v1[1], v1[2]);
                 const v2_ = new Vector3(v2[0], v2[1], v2[2]);
 
-                triangles.push(new Triangle(v0_, v1_, v2_));
+                triangles.push(new Triangle(v0_, v1_, v2_, uv0, uv1, uv2));
             }
 
             this.materialTriangles[material] = triangles;
         }
     }
 
+    _loadTextures() {
+        for (const material in this._materials) {
+            const texturePath = this._materials[material].diffuseTexturePath;
+            if (texturePath) {
+                this._materials[material].texture = twgl.createTexture(this._gl, {
+                    src: texturePath,
+                    mag: this._gl.NEAREST
+                });
+            }
+        }
+    }
+
 }
 
 module.exports.Mesh = Mesh;

src/renderer.js

@@ -24,6 +24,7 @@ class Renderer {
         this._compiled = false;
 
         this._blockTexture = twgl.createTexture(this._gl, { src: "resources/blocks/stone.png", mag: this._gl.NEAREST });
+        this._materialBuffers = [];
     }
 
     
@@ -77,20 +78,28 @@ class Renderer {
 
     registerTriangle(triangle) {
         const data = GeometryTemplates.getTriangleBufferData(triangle, this._debug);
-
-        //const colour = triangle.colour;
-        //data.colour = [].concat(colour, colour, colour);
-        //console.log(data.colour);
-
         this._registerData(data);
     }
 
-    registerMesh(mesh) {
+    registerMesh(mesh) { 
         for (const material in mesh.materialTriangles) {
+            const materialBuffer = new BottomlessBuffer([
+                {name: 'position', numComponents: 3},
+                {name: 'texcoord', numComponents: 2},
+                {name: 'normal', numComponents: 3}
+            ]);
             mesh.materialTriangles[material].forEach((triangle) => {
-                this.registerTriangle(triangle);
+                const data = GeometryTemplates.getTriangleBufferData(triangle, false);
+
+                console.log(data);
+                materialBuffer.add(data);
+            });
+            this._materialBuffers.push({
+                buffer: materialBuffer,
+                texture: mesh._materials[material].texture
             });
         }
+        console.log("MATERIAL BUFFERS:", this._materialBuffers);
     }
 
     registerVoxelMesh(voxelManager) {
@@ -125,7 +134,13 @@ class Renderer {
     compile() {
         this._registerDebug.compile(this._gl);
         this._registerVoxels.compile(this._gl);
-        this._registerDefault.compile(this._gl);
+        //this._registerDefault.compile(this._gl);
+
+        this._materialBuffers.forEach((materialBuffer) => {
+            materialBuffer.buffer.compile(this._gl);
+        });
+
+
         this._compiled = true;
     }
 
@@ -149,12 +164,24 @@ class Renderer {
             u_voxelSize: voxelSize
         });
         
+        /*
         // Draw default register
         this._drawRegister(this._registerDefault, this._gl.TRIANGLES, shaderManager.shadedProgram, {
             u_lightWorldPos: this._camera.getCameraPosition(0.0, 0.0),
             u_worldViewProjection: this._camera.getWorldViewProjection(),
             u_worldInverseTranspose: this._camera.getWorldInverseTranspose()
         });
+        */
+
+        // Draw material registers
+        this._materialBuffers.forEach((materialBuffer) => {
+            this._drawRegister(materialBuffer.buffer, this._gl.TRIANGLES, shaderManager.shadedProgram, {
+                u_lightWorldPos: this._camera.getCameraPosition(0.0, 0.0),
+                u_worldViewProjection: this._camera.getWorldViewProjection(),
+                u_worldInverseTranspose: this._camera.getWorldInverseTranspose(),
+                u_texture: materialBuffer.texture
+            });
+        });
     }
 
     _drawRegister(register, drawMode, shaderProgram, uniforms) {

src/triangle.js

@@ -4,11 +4,15 @@ const { xAxis, yAxis, zAxis, fastCrossXAxis, fastCrossYAxis, fastCrossZAxis } =
 
 class Triangle {
 
-    constructor(v0, v1, v2) {
+    constructor(v0, v1, v2, uv0, uv1, uv2) {
         this.v0 = v0;
         this.v1 = v1;
         this.v2 = v2;
 
+        this.uv0 = uv0;
+        this.uv1 = uv1;
+        this.uv2 = uv2;
+
         const f0 = Vector3.sub(v1, v0);
         const f1 = Vector3.sub(v0, v2);
         this.normal = Vector3.cross(f0, f1).normalise();