changes

public/gl/core/Shader.js

@@ -47,7 +47,7 @@ export class Shader {
         this.#uniforms = {} 
 
         vertexCode.split('\n').forEach((line) => {
-            const tokens = line.split(" ")
+            const tokens = line.trim().split(" ")
             if (tokens.length != 3) return
             if (tokens[0] === "attribute") {
                 this.#attributes.push(tokens[2].replace(/\s+/g, '').split(';')[0])
@@ -88,8 +88,8 @@ export class Shader {
     }
 
     loadMat4(name, m) {
-        // console.log(name, m.get())
+        if(this.#uniforms[name] == undefined) return;
-        gl.uniformMatrix4fv(this.#uniforms[name], gl.FALSE, m.get())
+        gl.uniformMatrix4fv(this.#uniforms[name], gl.FALSE, m.data)
     }
 
     loadBool(name, bool) {

public/gl/gl.js

@@ -1,4 +1,3 @@
-export { SimpleController } from './controller/SimpleController.js'
 export { Camera } from './core/Camera.js'
 export { Entity } from './core/Entity.js'
 export { Material } from './core/Material.js'
@@ -6,12 +5,19 @@ 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 { File } from './io/File.js'
+
-export { Input } from './io/Input.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 { 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 }
 

public/gl/math/Mat4.js

@@ -27,21 +27,10 @@ export class Mat4 {
 
     set(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m32, m33) {
         const d = this.data
-        d[0] = m00; d[1] = m01; d[2] = m02; d[3] = m03;
+        d[0] = m00; d[4] = m01; d[8] = m02; d[12] = m03;
-        d[4] = m10; d[5] = m11; d[6] = m12; d[7] = m13;
+        d[1] = m10; d[5] = m11; d[9] = m12; d[13] = m13;
-        d[8] = m20; d[9] = m21; d[10] = m22; d[11] = m23;
+        d[2] = m20; d[6] = m21; d[10] = m22; d[14] = m23;
-        d[12] = m30; d[13] = m31; d[14] = m32; d[15] = m33;
+        d[3] = m30; d[7] = m31; d[11] = m32; d[15] = m33;
-        return this
-    }
-
-    clone() {
-        return new Mat4().arr(this.da)
-    }
-
-    arr(arr, offset = 0) {
-        for(let i = 0; i < 16; i++) {
-            this.data[i] = arr[i + offset]
-        }
         return this
     }
 
@@ -54,88 +43,5 @@ export class Mat4 {
         )
         return this
     }
-
+    
-    copy(m) {
-        const d = this.data
-        const o = m.data
-        d[0] = o[0]; d[1] = o[1]; d[2] = o[2]; d[3] = o[3];
-        d[4] = o[4]; d[5] = o[5]; d[6] = o[6]; d[7] = o[7];
-        d[8] = o[8]; d[9] = o[9]; d[10] = o[10]; d[11] = o[11];
-        d[12] = o[12]; d[13] = o[13]; d[14] = o[14]; d[15] = o[15];
-        return this
-    }
-
-    pos(v) {
-        const d = this.data
-
-        const m30 = d[0] * v.x + d[4] * v.y + d[8] * v.z;
-        const m31 = d[1] * v.x + d[5] * v.y + d[9] * v.z;
-        const m32 = d[2] * v.x + d[6] * v.y + d[10] * v.z;
-        const m33 = d[3] * v.x + d[7] * v.y + d[11] * v.z; 
-
-		d[3] += m30;
-        d[7] += m31;
-        d[11] += m32;
-        d[15] += m33;
-		return this;
-	}
-
-    rot(v) {
-        this.rotX(v.x)
-        this.rotY(v.y)
-        this.rotZ(v.z)
-
-        return this
-    }
-
-    rotX(a) {
-        const s = Math.sin(a), c = cosFromSin(s, a);
-        const d = this.data;
-
-        d[5] = c
-        d[6] = s
-        d[9] = -s
-        d[10] = c
-
-        return this
-    }
-
-    rotY(a) {
-        const s = Math.sin(a), c = cosFromSin(s, a);
-        const d = this.data;
-        
-        d[0] = c
-        d[3] = -s
-        d[8] = c
-        d[10] = c
-
-        return this
-    }
-
-    rotZ(a) {
-        const s = Math.sin(a), c = cosFromSin(s, a);
-        const d = this.data;
-        
-        d[0] = c
-        d[1] = s
-        d[4] = -s
-        d[5] = c
-
-        return this
-    }
-
-    scale(v) {
-		const d = this.data;
-
-		d[0] *= v.x; d[1] *= v.y; d[2] *= v.z;
-		d[4] *= v.x; d[5] *= v.y; d[6] *= v.z;
-		d[8] *= v.x; d[9] *= v.y; d[10] *= v.z;
-		d[12] *= v.x; d[13] *= v.y; d[14] *= v.z;
-
-		return this;
-	}
-
-    get() {
-        return new Float32Array(this.data)
-    }
 }

public/gl/model/Cube.js

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

@@ -0,0 +1,34 @@
+import { Shader } from '../core/Shader.js'
+
+export const SimpleShader = () => {
+
+    const VertexCode = `
+        precision mediump float;
+
+        attribute vec3 position;
+        attribute vec3 color;
+        
+        uniform mat4 proj;
+        uniform mat4 view;
+        uniform mat4 tran;
+        
+        varying vec3 color_pass;
+        
+        void main() {
+            color_pass = color;
+            gl_Position = proj * view * tran * vec4(position, 1.0); 
+        }
+    `
+
+    const FragmentCode = `
+        precision mediump float;
+
+        varying vec3 color_pass;
+
+        void main() {
+            gl_FragColor = vec4(color_pass, 1.0);
+        }
+    `
+    return new Shader(VertexCode, FragmentCode)
+
+}

public/test.js

@@ -1,31 +1,26 @@
 import * as GL from '/gl/gl.js'
 
-const main = async () => {
+const main = () => {
     
     var Renderer = new GL.Renderer()
     var Scene = new GL.Scene()
     var Camera = new GL.Camera()
     var SimpleController = new GL.SimpleController(Camera)
     
-    var Shader = new GL.Shader(
+    var Shader = GL.SimpleShader()
-        await GL.File.readFileAsync("shader/simple.vert"), 
-        await GL.File.readFileAsync("shader/simple.frag")
-    )
 
     var Material = new GL.Material(Shader)
 
-    var Mesh = new GL.Cube().mesh
+    var Mesh = GL.Cube()
 
     var Cube = new GL.Entity(Mesh)
     Cube.position.z = 3;
 
     Scene.add(Material, Cube)
-
-    const a = new GL.Vec3(1,1,1)
 		
     GL.Loop(() => {
         Renderer.draw(Scene, Camera)
-        Cube.rotation.add(a)
+        Cube.rotation.add(new GL.Vec3(1,1,1))
         SimpleController.update(GL.DT)
     });
 }