webgl/public/gl/core/Renderer.js

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

        this.FOV = 90
        this.FAR = 1000
        this.NEAR = .1
    }

    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 aspect = canvas.width / canvas.height
        const f = 1.0 / Math.tan((this.FOV * (Math.PI/180)) / 2)
        const fa = f / aspect
        const nf = 1.0 / (this.NEAR - this.FAR)

        const c1 = (this.NEAR + this.FAR) * nf
        const c2 = this.NEAR * this.FAR * nf * 2

        return new Mat4().set(
            fa,  0,  0,  0,
            0,  f,  0,  0,
            0,  0,  c1, c2,
            0,  0,  -1,  0
        )
    }
}