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 proj = new Mat4()
        const d = proj.data

        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) 

        return proj
    }
}