diff --git a/public/gl/core/Shader.js b/public/gl/core/Shader.js index 0e7e528..dad7e4f 100644 --- a/public/gl/core/Shader.js +++ b/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()) - gl.uniformMatrix4fv(this.#uniforms[name], gl.FALSE, m.get()) + if(this.#uniforms[name] == undefined) return; + gl.uniformMatrix4fv(this.#uniforms[name], gl.FALSE, m.data) } loadBool(name, bool) { diff --git a/public/gl/gl.js b/public/gl/gl.js index 88e4973..7aca9c9 100644 --- a/public/gl/gl.js +++ b/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 } diff --git a/public/gl/math/Mat4.js b/public/gl/math/Mat4.js index 3481440..26996c5 100644 --- a/public/gl/math/Mat4.js +++ b/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[4] = m10; d[5] = m11; d[6] = m12; d[7] = m13; - d[8] = m20; d[9] = m21; d[10] = m22; d[11] = m23; - d[12] = m30; d[13] = m31; d[14] = 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] - } + d[0] = m00; d[4] = m01; d[8] = m02; d[12] = m03; + d[1] = m10; d[5] = m11; d[9] = m12; d[13] = m13; + d[2] = m20; d[6] = m21; d[10] = m22; d[14] = m23; + d[3] = m30; d[7] = m31; d[11] = m32; d[15] = m33; 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) - } + } \ No newline at end of file diff --git a/public/gl/model/Cube.js b/public/gl/model/Cube.js index 824984b..8583afb 100644 --- a/public/gl/model/Cube.js +++ b/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 = [ - -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.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 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() + } \ No newline at end of file diff --git a/public/gl/shader/SimpleShader.js b/public/gl/shader/SimpleShader.js new file mode 100644 index 0000000..715aa60 --- /dev/null +++ b/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) + +} \ No newline at end of file diff --git a/public/test.js b/public/test.js index 3622a15..631591d 100644 --- a/public/test.js +++ b/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( - await GL.File.readFileAsync("shader/simple.vert"), - await GL.File.readFileAsync("shader/simple.frag") - ) + var Shader = GL.SimpleShader() 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) }); }