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

obj fix proj

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
public/cube.js
View file

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

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

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

25
public/gl/core/Mesh.js
View file

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

8
public/gl/core/Renderer.js
View file

@ -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.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.clearColor(0, 0, 0, 1);
gl.cullFace(gl.FRONT);
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
}

40
public/gl/geometry/Cube.js Normal file
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
View file

File diff suppressed because it is too large Load diff

13
public/gl/gl.js
View file

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

65
public/gl/model/Cube.js
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()
}

15
public/gl/shader/SimpleShader.js
View file

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