79 lines
No EOL
2.3 KiB
JavaScript
79 lines
No EOL
2.3 KiB
JavaScript
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)
|
|
}
|
|
}
|
|
|
|
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);
|
|
gl.cullFace(gl.BACK);
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
gl.clearColor(0, 0, 0, 1);
|
|
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() {
|
|
const fov = 90
|
|
const far = 100
|
|
const near = 0.1
|
|
|
|
const aspect = canvas.width / canvas.height
|
|
const f = 1.0 / Math.tan((fov * (Math.PI/180)) / 2)
|
|
const fa = f / aspect
|
|
const nf = 1.0 / (near - far)
|
|
|
|
const c1 = (near + far) * nf
|
|
const c2 = near * far * nf * 2
|
|
|
|
return new Mat4().set(
|
|
fa, 0, 0, 0,
|
|
0, f, 0, 0,
|
|
0, 0, c1, c2,
|
|
0, 0, -1, 0
|
|
)
|
|
}
|
|
} |