2023-01-19 03:43:02 +00:00
|
|
|
import { Mat4 } from '../math/Mat4.js'
|
|
|
|
|
|
|
|
export var gl
|
|
|
|
export var ext
|
|
|
|
export var canvas
|
|
|
|
|
|
|
|
export class Renderer {
|
|
|
|
constructor() {
|
|
|
|
canvas = document.createElement("canvas")
|
|
|
|
canvas.id = "canvas"
|
|
|
|
canvas.width = window.innerWidth
|
|
|
|
canvas.height = window.innerHeight
|
|
|
|
canvas.style = "display: block;"
|
|
|
|
document.body.appendChild(canvas)
|
|
|
|
document.body.style.margin = 0
|
|
|
|
|
|
|
|
gl = canvas.getContext('webgl')
|
|
|
|
|
|
|
|
if(!gl) {
|
|
|
|
console.log("Your browser does not support webgl")
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
ext = gl.getExtension('OES_vertex_array_object');
|
|
|
|
if(!ext) {
|
|
|
|
console.log("Your browser does not support webgl 2")
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
window.onresize = (event) => {
|
|
|
|
canvas.width = window.innerWidth
|
|
|
|
canvas.height = window.innerHeight
|
|
|
|
gl.viewport(0, 0, canvas.width, canvas.height)
|
|
|
|
}
|
2023-01-19 04:44:45 +00:00
|
|
|
|
|
|
|
this.FOV = 90
|
|
|
|
this.FAR = 1000
|
|
|
|
this.NEAR = .1
|
2023-01-19 03:43:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
draw(scene, camera) {
|
|
|
|
for (const material_id in scene.map) {
|
|
|
|
const material = scene.materials[material_id]
|
|
|
|
gl.enable(gl.DEPTH_TEST);
|
|
|
|
gl.enable(gl.CULL_FACE);
|
2023-01-20 02:21:17 +00:00
|
|
|
gl.cullFace(gl.FRONT);
|
2023-01-19 03:43:02 +00:00
|
|
|
material.bind()
|
|
|
|
material.shader.loadMat4("proj", this.proj())
|
|
|
|
material.shader.loadMat4("view", camera.view())
|
|
|
|
scene.map[material_id].forEach((entity_id) => {
|
|
|
|
const entity = scene.entities[entity_id]
|
|
|
|
material.shader.loadMat4("tran", entity.tran())
|
|
|
|
entity.mesh.bind()
|
|
|
|
entity.mesh.draw()
|
|
|
|
entity.mesh.unbind()
|
|
|
|
})
|
|
|
|
material.unbind()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
proj() {
|
2023-01-19 18:39:40 +00:00
|
|
|
const proj = new Mat4()
|
|
|
|
const d = proj.data
|
2023-01-19 03:43:02 +00:00
|
|
|
|
2023-01-20 02:21:17 +00:00
|
|
|
const tanHalfFovy = Math.tan((this.FOV * (Math.PI/180)) / 2.0);
|
2023-01-19 03:43:02 +00:00
|
|
|
const aspect = canvas.width / canvas.height
|
|
|
|
|
2023-01-19 19:58:43 +00:00
|
|
|
d[0] = 1.0 / (aspect * tanHalfFovy)
|
2023-01-19 18:39:40 +00:00
|
|
|
d[5] = 1.0 / tanHalfFovy
|
|
|
|
d[10] = this.FAR / (this.FAR - this.NEAR)
|
|
|
|
d[11] = 1.0
|
2023-01-20 02:21:17 +00:00
|
|
|
d[14] = -(this.FAR * this.NEAR) / (this.FAR - this.NEAR)
|
2023-01-19 03:43:02 +00:00
|
|
|
|
2023-01-19 18:39:40 +00:00
|
|
|
return proj
|
2023-01-19 03:43:02 +00:00
|
|
|
}
|
|
|
|
}
|