freya/webgl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

changes

Browse source
This commit is contained in:
Tyler Murphy 2023-01-19 14:32:58 -05:00
parent 76446f179d
commit f70007d58b
6 changed files with 112 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/gl/core/Shader.js
View file

@ -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) {

12
public/gl/gl.js
View file

@ -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 }

102
public/gl/math/Mat4.js
View file

@ -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
}
@ -55,87 +44,4 @@ 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)
}
}

115
public/gl/model/Cube.js
View file

@ -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,
];
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
];
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()
}

34
public/gl/shader/SimpleShader.js Normal file
View file

@ -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)
}

13
public/test.js
View file

@ -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)
});
}