obj fix proj

public/cube.js

@@ -5,6 +5,9 @@ const main = () => {
     var Renderer = new GL.Renderer()
     var Scene = new GL.Scene()
     var Camera = new GL.Camera()
+    Camera.position.y = 1
+    Camera.rotation.x = 30
+
     var SimpleController = new GL.SimpleController(Camera)
     
     var Shader = GL.SimpleShader()
@@ -14,7 +17,7 @@ const main = () => {
     var Mesh = GL.Cube()
 
     var Cube = new GL.Entity(Mesh)
-    Cube.position.z = 10
+    Cube.position.z = 2
 
     Scene.add(Material, Cube)
 
@@ -22,7 +25,7 @@ const main = () => {
 
     GL.Loop(() => {
         Renderer.draw(Scene, Camera)
-        Cube.rotation.add(new GL.Vec3(1,1,1))
+        Cube.rotation.add(new GL.Vec3(0,1,0))
         SimpleController.update(GL.DT)
     });
 }

public/gl/core/Camera.js

@@ -26,15 +26,15 @@ export class Camera {
         d[0] = u.x;
         d[1] = v.x;
         d[2] = w.x;
-        d[3] = 1
+        d[3] = 0
         d[4] = u.y;
         d[5] = v.y;
         d[6] = w.y;
-        d[7] = 1
+        d[7] = 0
         d[8] = u.z;
         d[9] = v.z;
         d[10] = w.z;
-        d[11] = 1
+        d[11] = 0
         d[12] = -u.dot(this.position)
         d[13] = -v.dot(this.position)
         d[14] = -w.dot(this.position)

public/gl/core/Mesh.js

@@ -8,6 +8,7 @@ export class Mesh {
     #vertexCount
     #count
     #id
+    #indicies
 
     constructor(vertexCount) {
         this.#id = ext.createVertexArrayOES()
@@ -15,6 +16,7 @@ export class Mesh {
         Mesh.#vaos.push(this.#id)
         this.#vertexCount = vertexCount
         this.#count = 0
+        this.#indicies = 0
     }
 
     store(data, dim) {
@@ -22,12 +24,21 @@ export class Mesh {
         Mesh.#vbos.push(id)
         gl.bindBuffer(gl.ARRAY_BUFFER, id)
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW)
-        gl.vertexAttribPointer(this.#count, dim, gl.FLOAT, false, Float32Array.BYTES_PER_ELEMENT * dim, 0)
+        gl.vertexAttribPointer(this.#count, dim, gl.FLOAT, gl.FALSE, 0, 0)
         gl.enableVertexAttribArray(this.#count)
         this.#count++;
         return this
     }
 
+    indicies(data) {
+        let id = gl.createBuffer()
+        Mesh.#vbos.push(id)
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, id)
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(data), gl.STATIC_DRAW)
+        this.#indicies = data.length
+        return this
+    }
+
     finish() {
         this.unbind()
         return this
@@ -35,14 +46,24 @@ export class Mesh {
 
     bind() {
         ext.bindVertexArrayOES(this.#id)
+        for(let i = 0; i < this.#count; i++) {
+            gl.enableVertexAttribArray(i)
+        }
     }
 
     unbind() {
         ext.bindVertexArrayOES(null)
+        for(let i = 0; i < this.#count; i++) {
+            gl.disableVertexAttribArray(i)
+        }
     }
 
     draw() {
-        gl.drawArrays(gl.TRIANGLES, 0, this.#vertexCount)
+        if(this.#indicies > 0) {
+            gl.drawElements(gl.TRIANGLES, this.#indicies, gl.UNSIGNED_SHORT, 0)
+        } else {
+            gl.drawArrays(gl.TRIANGLES, 0, this.#vertexCount)
+        }
     }
 
 }

public/gl/core/Renderer.js

@@ -43,9 +43,7 @@ export class Renderer {
             const material = scene.materials[material_id]
             gl.enable(gl.DEPTH_TEST);
             gl.enable(gl.CULL_FACE);
-            gl.cullFace(gl.BACK);
+            gl.cullFace(gl.FRONT);
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-            gl.clearColor(0, 0, 0, 1);
             material.bind()
             material.shader.loadMat4("proj", this.proj())
             material.shader.loadMat4("view", camera.view())
@@ -64,14 +62,14 @@ export class Renderer {
         const proj = new Mat4()
         const d = proj.data
 
-        const tanHalfFovy = Math.tan((this.FOV * (Math.PI/180))/ 2.0);
+        const tanHalfFovy = Math.tan((this.FOV * (Math.PI/180)) / 2.0);
         const aspect = canvas.width / canvas.height
 
         d[0] = 1.0 / (aspect * tanHalfFovy)
         d[5] = 1.0 / tanHalfFovy
         d[10] = this.FAR / (this.FAR - this.NEAR)
         d[11] = 1.0
-        d[14] = -(this.FAR * this.NEAR) / (this.FAR) 
+        d[14] = -(this.FAR * this.NEAR) / (this.FAR - this.NEAR) 
 
         return proj
     }

public/gl/geometry/Cube.js

@@ -0,0 +1,40 @@
+import { OBJ } from './OBJ.js'
+
+export const Cube = () => {
+
+    const obj = `
+        v -0.500000 -0.500000 0.500000
+        v 0.500000 -0.500000 0.500000
+        v -0.500000 0.500000 0.500000
+        v 0.500000 0.500000 0.500000
+        v -0.500000 0.500000 -0.500000
+        v 0.500000 0.500000 -0.500000
+        v -0.500000 -0.500000 -0.500000
+        v 0.500000 -0.500000 -0.500000
+        vt 0.000000 0.000000
+        vt 1.000000 0.000000
+        vt 0.000000 1.000000
+        vt 1.000000 1.000000
+        vn 0.000000 0.000000 1.000000
+        vn 0.000000 1.000000 0.000000
+        vn 0.000000 0.000000 -1.000000
+        vn 0.000000 -1.000000 0.000000
+        vn 1.000000 0.000000 0.000000
+        vn -1.000000 0.000000 0.000000
+        f 1/1/1 2/2/1 3/3/1
+        f 3/3/1 2/2/1 4/4/1
+        f 3/1/2 4/2/2 5/3/2
+        f 5/3/2 4/2/2 6/4/2
+        f 5/4/3 6/3/3 7/2/3
+        f 7/2/3 6/3/3 8/1/3
+        f 7/1/4 8/2/4 1/3/4
+        f 1/3/4 8/2/4 2/4/4
+        f 2/1/5 8/2/5 4/3/5
+        f 4/3/5 8/2/5 6/4/5
+        f 7/1/6 1/2/6 5/3/6
+        f 5/3/6 1/2/6 3/4/6
+        `
+
+    return OBJ(obj)
+
+}

public/gl/geometry/OBJ.js

@@ -0,0 +1,47 @@
+import { Mesh } from '../core/Mesh.js'
+
+export const OBJ = (obj) => {
+
+    var verticies = []
+    var indicies = []
+    var normals = []
+    var uvs = []
+
+    var indexedNormals = [];
+    var indexedUvs = [];
+
+    obj.split('\n').forEach((line) => {
+        const tokens = line.toLowerCase().trim().split(' ').filter((str) => str !== '')
+        if(tokens.length < 1) return;
+        if(tokens[0] === 'v') {
+            verticies.push(parseFloat(tokens[1]))
+            verticies.push(parseFloat(tokens[2]))
+            verticies.push(parseFloat(tokens[3]))
+        } else if(tokens[0] === 'vt') {
+            uvs.push(parseFloat(tokens[1]))
+            uvs.push(parseFloat(tokens[2]))
+        } else if(tokens[0] === 'vn') {
+            normals.push(parseFloat(tokens[1]))
+            normals.push(parseFloat(tokens[2]))
+            normals.push(parseFloat(tokens[3]))
+        } else if(tokens[0] === 'f') {
+            for (let i = 1; i < 4; i++) {
+                const index = tokens[i].split('/').filter((str) => str !== '').map((s) => parseInt(s) - 1)
+                indicies.push(index[0])
+                indexedUvs[index[0]*2] = uvs[index[1]*2]
+                indexedUvs[index[0]*2+1] = uvs[index[1]*2+1]
+                indexedNormals[index[0]*3] = normals[index[2]*3]
+                indexedNormals[index[0]*3+1] = normals[index[2]*3+1]
+                indexedNormals[index[0]*3+2] = normals[index[2]*3+2]
+            }
+        }
+    })
+    
+    return new Mesh(indicies.length)
+        .indicies(indicies)
+        .store(verticies, 3)
+        .store(indexedNormals, 3)
+        .store(indexedUvs, 2)
+        .finish()
+
+}

public/gl/gl.js

@@ -5,23 +5,22 @@ export { Mesh } from './core/Mesh.js'
 export { Renderer } from './core/Renderer.js'
 export { Scene } from './core/Scene.js'
 export { Shader } from './core/Shader.js'
-
 export { Mat4 } from './math/Mat4.js'
-export { M as Math } from './math/Math.js'
 export { Vec3 } from './math/Vec3.js'
-export { Cube } from './model/Cube.js'
+export { M as Math } from './math/Math.js'
-
+export { Cube } from './geometry/Cube.js'
+export { Sphere } from './geometry/Sphere.js'
+export { OBJ } from './geometry/OBJ.js'
 export { File } from './io/File.js'
 export { Input } from './io/Input.js'
-
 export { SimpleController } from './controller/SimpleController.js'
-
 export { SimpleShader } from './shader/SimpleShader.js'
 
 export { Loop }
 export { DT }
 
 import { Input } from './io/Input.js'
+import { gl } from './core/Renderer.js'
 
 var DT = 0;
 var last = Date.now()
@@ -31,6 +30,8 @@ const Loop = (fn) => {
         var now = Date.now()
         DT = ( now - last) / 1000
         last = now
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.clearColor(0, 0, 0, 1);
         fn()
         window.requestAnimationFrame(callback)
     }

public/gl/model/Cube.js

@@ -1,65 +0,0 @@
-import { Mesh } from '../core/Mesh.js'
-
-export const Cube = () => {
-
-    const data = [
-        -1.0, 1.0, -1.0,   0.5, 0.5, 0.5,
-        -1.0, 1.0, 1.0,    0.5, 0.5, 0.5,
-        1.0, 1.0, 1.0,     0.5, 0.5, 0.5,
-        1.0, 1.0, -1.0,    0.5, 0.5, 0.5,
-        -1.0, 1.0, 1.0,    0.75, 0.25, 0.5,
-        -1.0, -1.0, 1.0,   0.75, 0.25, 0.5,
-        -1.0, -1.0, -1.0,  0.75, 0.25, 0.5,
-        -1.0, 1.0, -1.0,   0.75, 0.25, 0.5,
-        1.0, 1.0, 1.0,    0.25, 0.25, 0.75,
-        1.0, -1.0, 1.0,   0.25, 0.25, 0.75,
-        1.0, -1.0, -1.0,  0.25, 0.25, 0.75,
-        1.0, 1.0, -1.0,   0.25, 0.25, 0.75,
-        1.0, 1.0, 1.0,    1.0, 0.0, 0.15,
-        1.0, -1.0, 1.0,    1.0, 0.0, 0.15,
-        -1.0, -1.0, 1.0,    1.0, 0.0, 0.15,
-        -1.0, 1.0, 1.0,    1.0, 0.0, 0.15,
-        1.0, 1.0, -1.0,    0.0, 1.0, 0.15,
-        1.0, -1.0, -1.0,    0.0, 1.0, 0.15,
-        -1.0, -1.0, -1.0,    0.0, 1.0, 0.15,
-        -1.0, 1.0, -1.0,    0.0, 1.0, 0.15,
-        -1.0, -1.0, -1.0,   0.5, 0.5, 1.0,
-        -1.0, -1.0, 1.0,    0.5, 0.5, 1.0,
-        1.0, -1.0, 1.0,     0.5, 0.5, 1.0,
-        1.0, -1.0, -1.0,    0.5, 0.5, 1.0,
-    ];
-
-    const indicies = [
-        0, 1, 2,
-        0, 2, 3,
-        5, 4, 6,
-        6, 4, 7,
-        8, 9, 10,
-        8, 10, 11,
-        13, 12, 14,
-        15, 14, 12,
-        16, 17, 18,
-        16, 18, 19,
-        21, 20, 22,
-        22, 20, 23
-    ];
-
-    const verticies = []
-    const colors = []
-
-    for (let x = 0; x < indicies.length; x++) {
-        var i = indicies[x]
-        verticies.push(data[i * 6 + 2])
-        verticies.push(data[i * 6 + 1])
-        verticies.push(data[i * 6 + 0])
-        colors.push(data[i * 6 + 3])
-        colors.push(data[i * 6 + 4])
-        colors.push(data[i * 6 + 5])
-    }
-
-    return new Mesh(indicies.length)
-    .store(verticies, 3)
-    .store(colors, 3)
-    .finish()
-
-}

public/gl/shader/SimpleShader.js

@@ -6,16 +6,17 @@ export const SimpleShader = () => {
         precision mediump float;
 
         attribute vec3 position;
-        attribute vec3 color;
+        attribute vec3 normal;
+        attribute vec3 uv;
 
         uniform mat4 proj;
         uniform mat4 view;
         uniform mat4 tran;
 
-        varying vec3 color_pass;
+        varying vec3 color;
         
         void main() {
-            color_pass = color;
+            color.xyz = (position.xyz + 1.0) / 2.0;
             gl_Position = proj * view * tran * vec4(position, 1.0); 
         }
     `
@@ -23,10 +24,10 @@ export const SimpleShader = () => {
     const FragmentCode = `
         precision mediump float;
 
-        varying vec3 color_pass;
+        varying vec3 color;
 
         void main() {
-            gl_FragColor = vec4(color_pass, 1.0);
+            gl_FragColor = vec4(color, 1.0);
         }
     `
     return new Shader(VertexCode, FragmentCode)