obj fix proj

This commit is contained in:
Tyler Murphy 2023-01-19 21:21:17 -05:00
parent 50c88908b6
commit a58decb971
10 changed files with 2633 additions and 90 deletions

View file

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

View file

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

View file

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

View file

@ -43,9 +43,7 @@ export class Renderer {
const material = scene.materials[material_id] const material = scene.materials[material_id]
gl.enable(gl.DEPTH_TEST); gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE); 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.bind()
material.shader.loadMat4("proj", this.proj()) material.shader.loadMat4("proj", this.proj())
material.shader.loadMat4("view", camera.view()) material.shader.loadMat4("view", camera.view())
@ -71,7 +69,7 @@ export class Renderer {
d[5] = 1.0 / tanHalfFovy d[5] = 1.0 / tanHalfFovy
d[10] = this.FAR / (this.FAR - this.NEAR) d[10] = this.FAR / (this.FAR - this.NEAR)
d[11] = 1.0 d[11] = 1.0
d[14] = -(this.FAR * this.NEAR) / (this.FAR) d[14] = -(this.FAR * this.NEAR) / (this.FAR - this.NEAR)
return proj return proj
} }

View file

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

47
public/gl/geometry/OBJ.js Normal file
View file

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

2497
public/gl/geometry/Sphere.js Normal file

File diff suppressed because it is too large Load diff

View file

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

View file

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

View file

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