bg2e-js 2.0.0 → 2.0.2

package/render/webgl/RenderBuffer.js

@@ -1,244 +0,0 @@
-
-import { TextureRenderTargetAttachment, TextureTargetName } from "../../base/Texture";
-import Vec from "../../math/Vec";
-import RenderBuffer, { RenderBufferType, CubeMapFace } from "../RenderBuffer";
-
-function glEnumToString(gl, value) {
-    for(var key in gl) {
-      if (gl[key] === value) {
-        return key;
-      }
-    }
-    return "0x" + value.toString(16);
-  }
-
-function getAttachmentPoint(gl,att) {
-    switch (Number(att)) {
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_0:
-        return gl.COLOR_ATTACHMENT0;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_1:
-        return gl.COLOR_ATTACHMENT1;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_2:
-        return gl.COLOR_ATTACHMENT2;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_3:
-        return gl.COLOR_ATTACHMENT3;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_4:
-        return gl.COLOR_ATTACHMENT4;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_5:
-        return gl.COLOR_ATTACHMENT5;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_6:
-        return gl.COLOR_ATTACHMENT6;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_7:
-        return gl.COLOR_ATTACHMENT7;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_8:
-        return gl.COLOR_ATTACHMENT8;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_9:
-        return gl.COLOR_ATTACHMENT9;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_10:
-        return gl.COLOR_ATTACHMENT10;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_11:
-        return gl.COLOR_ATTACHMENT11;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_12:
-        return gl.COLOR_ATTACHMENT12;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_13:
-        return gl.COLOR_ATTACHMENT13;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_14:
-        return gl.COLOR_ATTACHMENT14;
-    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_15:
-        return gl.COLOR_ATTACHMENT15;
-    case TextureRenderTargetAttachment.DEPTH_ATTACHMENT:
-        return gl.DEPTH_ATTACHMENT;
-    case TextureRenderTargetAttachment.STENCIL_ATTACHMENT:
-        return gl.STENCIL_ATTACHMET;
-    default:
-        throw new Error(`RenderBuffer.beginUpdate() Error creating render buffer. Invalid attachment ${att}`);
-    }
-}
-
-function getTextureTarget(gl,texture) {
-    return gl[TextureTargetName[texture.target]];
-}
-
-function beginUpdateTexture() {
-    const { gl } = this.renderer;
-
-    if (this.dirty) {
-        if (this._framebuffer) {
-            gl.deleteFramebuffer(this._framebuffer);
-        }
-        this._framebuffer = gl.createFramebuffer();
-        gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebuffer);
-
-        let depthBufferPresent = false;
-        for (const attachment in this.attachments) {
-            const textureRenderer = this.attachments[attachment];
-            const textureApi = textureRenderer.getApiObject();
-            const attachmentPoint = getAttachmentPoint(gl,attachment);
-            const textureTarget = getTextureTarget(gl,textureRenderer.texture);
-            const level = 0;
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, textureTarget, textureApi, level);
-            depthBufferPresent = depthBufferPresent || Number(attachment) === TextureRenderTargetAttachment.DEPTH_ATTACHMENT;
-        }
-
-        if (!depthBufferPresent) {
-            this._depthBuffer = gl.createRenderbuffer();
-            gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthBuffer);
-
-            gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, this.size.width, this.size.height);
-            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this._depthBuffer);
-        }
-
-        this.setUpdated(true);
-
-        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
-            throw new Error("Error initializing render buffer: the framebuffer is not complete");
-        }
-    }
-
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebuffer);
-
-    this._screenViewport = this.renderer.state.viewport;
-    this.renderer.state.viewport = this.size;
-}
-
-function endUpdateTexture() {
-    const { gl } = this.renderer;
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    this.renderer.state.viewport = this._screenViewport;
-}
-
-function beginUpdateCubemap(face) {
-    const { gl } = this.renderer;
-    const textureRenderer = this.attachments[0];
-    const textureApi = textureRenderer?.getApiObject();
-    const texture = textureRenderer?.texture;
-
-    if (this.dirty) {
-        // Cubemap render only supports ONE texture target
-        // to COLOR_ATTACHMENT_0, check this and throw an exception
-        // if there are more attachments
-        if (Object.keys(this.attachments).length !== 1) {
-            throw new Error(`Unexpected number of texture attachments rendering cube map. The cube map renderer supports only one color attachment.`);
-        }
-
-        this.destroy();
-        this._framebuffers = [];
-        this._depthBuffers = [];
-
-        
-        const { width, height } = texture.size;
-        for (let i = 0; i < 6; ++i) {
-            const fb = gl.createFramebuffer();
-            gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
-            this._framebuffers.push(fb);
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, textureApi, 0);
-
-            const rb = gl.createRenderbuffer();
-            this._depthBuffers.push(rb);
-            gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
-            gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
-            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, rb);   
-        }
-
-        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
-            const statusCode = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
-            throw new Error(`Cubemap frame buffer not complete in cube side #${i}: ${glEnumToString(gl, statusCode)}`);
-        }
-
-        this.setUpdated(true);
-    }
-
-    // bind face
-    // CubeMapFace.POSITIVE_X === 1, see CubeMapFace definition at render/RenderBuffer.js
-    const faceIndex = face - 1;
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebuffers[faceIndex]);
-
-    this._screenViewport = this.renderer.state.viewport;
-    this.renderer.state.viewport = texture.size;
-}
-
-function endUpdateCubemap() {
-    const { gl } = this.renderer;
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    this.renderer.state.viewport = this._screenViewport;
-}
-export default class WebGLRenderBuffer extends RenderBuffer {
-    constructor(renderer) {
-        super(renderer);
-    }
-
-    get frameBuffer() {
-        return this.renderer.frameBuffer;
-    }
-
-    saveVertexBufferState() {
-        const { gl } = this.renderer;
-        this._prevArrayBufferBinding = gl.getParameter(gl.ARRAY_BUFFER_BINDING);
-        this._prevElementBufferBinding = gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
-    }
-
-    restoreVertexBufferState() {
-        const { gl } = this.renderer;
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._prevArrayBufferBinding);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._prevElementBufferBinding);
-    }
-
-    beginUpdate(textureFace = CubeMapFace.NONE) {
-        if (this.type === RenderBufferType.TEXTURE) {
-            beginUpdateTexture.apply(this);
-        }
-        else if (this.type === RenderBufferType.CUBE_MAP) {
-            beginUpdateCubemap.apply(this, [textureFace]);
-        }
-        else {
-            throw new Error("The render buffer is not initialized");
-        }
-    }
-
-    endUpdate(textureFace = CubeMapFace.NONE) {
-        if (this.type === RenderBufferType.TEXTURE) {
-            endUpdateTexture.apply(this);
-        }
-        else if (this.type === RenderBufferType.CUBE_MAP) {
-            endUpdateCubemap.apply(this, [textureFace]);
-        }
-        else {
-            throw new Error("The render buffer is not initialized");
-        }
-    }
-
-    destroy() {
-        const { gl }  = this.renderer;
-        if (this.type === RenderBufferType.TEXTURE) {
-            if (this._framebuffer) {
-                gl.deleteFramebuffer(this._framebuffer);
-                this._framebuffer = null;
-            }
-            if (this._depthBuffer) {
-                gl.deleteRenderbuffer(this._depthBuffer);
-                this._depthBuffer = null;
-            }
-        }
-        else if (this.type === RenderBufferType.CUBE_MAP) {
-            if (this._framebuffers?.length) {
-                this._framebuffers.forEach(fb => gl.deleteFramebuffer(fb));
-            }
-            if (this._depthBuffers?.length) {
-                this._depthBuffers.forEach(db => gl.deleteRenderbuffer(db));
-            }
-            this._framebuffers = null;
-            this._depthBuffers = null;
-        }
-    }
-
-    readPixels(x, y, width, height) {
-        const textureRenderer = this.attachments[0];
-        const texture = textureRenderer?.texture;
-        if (texture) {
-            const { gl } = this.renderer;
-            const data = new Uint8Array(width * height * 4);
-            gl.readPixels(x, texture.size.height - y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data);
-            return data;
-        }
-    }
-}

package/render/webgl/Renderer.js

@@ -1,239 +0,0 @@
-import Renderer, { EngineFeatures } from "../Renderer";
-import MaterialRenderer from "./MaterialRenderer";
-import State from "./State";
-import PolyListRenderer from "./PolyListRenderer";
-import TextureRenderer from "./TextureRenderer";
-import RenderBuffer from "./RenderBuffer";
-import SkySphere from "./SkySphere";
-import SkyCube from "./SkyCube";
-import FrameBuffer from "./FrameBuffer";
-import Pipeline from "./Pipeline";
-import WebGLSceneRenderer from "./SceneRenderer";
-import Vec from "../../math/Vec";
-import VertexBuffer, { BufferTarget } from "./VertexBuffer";
-import ShadowRenderer from "./ShadowRenderer";
-
-function enableExtensions(gl) {
-    // Enable all available extensions
-    gl.getSupportedExtensions().forEach(ext => {
-        gl.getExtension(ext);
-    });
-}
-
-let g_uuidLast = 0;
-export default class WebGLRenderer extends Renderer {
-    constructor() {
-        super("webgl");
-        this._uuid = g_uuidLast++;
-    }
-
-    get uniqueId() {
-        return this._uuid;
-    }
-
-    get typeId() {
-        return "WebGL";
-    }
-
-    get frameBuffer() {
-        if (!this._frameBuffer) {
-            this._frameBuffer = new FrameBuffer(this);
-        }
-        return this._frameBuffer;
-    }
-
-    set viewport(vp) {
-        this.state.viewport = vp;
-    }
-
-    get viewport() {
-        return new Vec(this.gl.getParameter(this.gl.VIEWPORT));
-    }
-
-    get debugMode() {
-        return this._debugMode || false;
-    }
-
-    async init(canvas) {
-        await super.init(canvas);
-        this._canvas = canvas;
-
-        this._gl = canvas.domElement.getContext("webgl", { preserveDrawingBuffer: true });
-        this._gl._bg2e_object = this;
-        const requestDebug = new URLSearchParams(location.search).get("debug") == "true";
-        this._debugMode = requestDebug;
-        if (window.WebGLDebugUtils && requestDebug) {
-            const gl = this._gl;
-            console.warn("Using WebGLDebugUtils: this must cause an impact in performance");
-            function throwOnError(err, funcName, args) {
-                throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to: " + funcName;
-            }
-
-            const printBufferSize = (id, arrayBufferType) => {
-                const size = gl.getBufferParameter(gl[arrayBufferType], gl.BUFFER_SIZE);
-                console.log(`   ${arrayBufferType} id: ${id}, size: ${size}`);
-            }
-
-            function logGLCall(functionName, args) {
-                console.log("gl." + functionName + "(" + 
-                   WebGLDebugUtils.glFunctionArgsToString(functionName, args) + ")");
-                if (/drawElements/.test(functionName)) {
-                    const elementBuffer = VertexBuffer.CurrentBuffer(gl, BufferTarget.ELEMENT_ARRAY_BUFFER);
-                    const arrayBuffer = VertexBuffer.CurrentBuffer(gl, BufferTarget.ARRAY_BUFFER);
-                    printBufferSize(elementBuffer?.id, "ELEMENT_ARRAY_BUFFER");
-                    printBufferSize(arrayBuffer?.id, "ARRAY_BUFFER");
-                }
-                else if (/bindBuffer/.test(functionName) && args[0] === gl.ELEMENT_ARRAY_BUFFER) {
-                    console.log(`   BufferID: ${args[1]._bg2e_id_}`);
-                }
-                else if (/bindBuffer/.test(functionName) && args[0] === gl.ARRAY_BUFFER) {
-                    console.log(`   BufferID: ${args[1]._bg2e_id_}`);
-                }
-
-            } 
-
-            this._gl = WebGLDebugUtils.makeDebugContext(this._gl, throwOnError, logGLCall);
-        }
-
-        this._state = new State(this);
-
-        enableExtensions.apply(this, [this.gl]);
-
-        await this.initPresentTextureShader();
-
-        await MaterialRenderer.InitResources(this);
-    }
-
-    get gl() { return this._gl; }
-
-    get canvas() { return this._canvas; }
-
-    get state() {
-        return this._state;
-    }
-
-    postReshape(width, height) {
-
-    }
-
-    postRedisplay() {
-        
-    }
-
-    polyListFactory(plist) {
-        if (plist.renderer) {
-            return plist.renderer;
-        }
-        else{
-            const plistRenderer = new PolyListRenderer(this, plist);
-            plistRenderer.init();
-            plistRenderer.refresh();
-            return plistRenderer;
-        }
-    }
-
-    materialFactory(material) {
-        if (material.renderer) {
-            return material.renderer;
-        }
-        else {
-            return new MaterialRenderer(this, material);
-        }
-    }
-
-    textureFactory(texture) {
-        if (texture.renderer) {
-            return texture.renderer;
-        }
-        else {
-            return new TextureRenderer(this, texture);
-        }
-    }
-
-    renderBufferFactory() {
-        return new RenderBuffer(this);
-    }
-
-    skySphereFactory() {
-        return new SkySphere(this);
-    }
-
-    skyCubeFactory() {
-        return new SkyCube(this);
-    }
-
-    pipelineFactory() {
-        return new Pipeline(this);
-    }
-
-    sceneRendererFactory() {
-        return new WebGLSceneRenderer(this);
-    }
-
-    shadowRendererFactory() {
-        return new ShadowRenderer(this);
-    }
-
-    get clearColor() {
-        return this.state.clearColor;
-    }
-
-    set clearColor(c) {
-        this.state.clearColor = c;
-    }
-    
-    presentTexture(texture, { clearBuffers = true, shader = null, viewport = null } = {}) {
-        if (clearBuffers) {
-            this.state.clear();
-        }
-
-        if (!shader) {
-            shader = this.presentTextureShader;
-        }
-
-        const prevViewport = this.state.viewport;
-        if (viewport) {
-            this.state.viewport = viewport;
-        }
-
-        this.presentTextureMaterialRenderer.material.diffuse = texture;
-        this.presentTextureSurfaceRenderer.bindBuffers();
-        shader.setup(this.presentTextureSurfaceRenderer,this.presentTextureMaterialRenderer);
-        this.presentTextureSurfaceRenderer.draw();
-
-        this.state.viewport = prevViewport;
-    }
-
-     // Compatibility function
-     supportsFeatures(features) {
-        if (features & EngineFeatures.RENDER_TARGET_TEXTURES) {
-            if (!this.gl.getExtension("WEBGL_draw_buffers")) {
-                return false;
-            }
-        }
-
-        if (features & EngineFeatures.RENDER_TARGET_FLOAT) {
-            if (!this.gl.getExtension("WEBGL_color_buffer_float")) {
-                return false;
-            }
-        }
-
-        if (features & EngineFeatures.RENDER_TARGET_DEPTH) {
-            if (!this.gl.getExtension("WEBGL_depth_texture") || !this.gl.getExtension("WEBGL_draw_buffers")) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    getMaximumRenderTargets() {
-        const ext = this.gl.getExtension("WEBGL_draw_buffers");
-        if (ext) {
-            return this.gl.getParameter(ext.MAX_DRAW_BUFFERS_WEBGL);
-        }
-        else {
-            return 1;
-        }
-    }
-}

package/render/webgl/SceneRenderer.js

@@ -1,43 +0,0 @@
-import PBRLightIBLShader from "../../shaders/PBRLightIBLShader";
-import SceneRenderer from "../SceneRenderer";
-import { RenderLayer } from "../../base/PolyList";
-import Mat4 from "../../math/Mat4";
-import Camera from "../../scene/Camera";
-import Transform from "../../scene/Transform";
-
-export default class WebGLSceneRenderer extends SceneRenderer {
-    constructor(renderer) {
-        super(renderer);
-        this._shader = new PBRLightIBLShader(this.renderer);
-    }
-
-    get shader() {
-        return this._shader;
-    }
-
-    async setEnvironment(env) {
-        await super.setEnvironment(env);
-        this._shader.environment = env;
-    }
-
-    async init(params) {
-        await super.init(params);
-
-        await this.shader.load();
-
-        this.renderQueue.enableQueue(RenderLayer.OPAQUE_DEFAULT, this._shader);
-        this.renderQueue.enableQueue(RenderLayer.TRANSPARENT_DEFAULT, this._shader);
-    }
-
-    frame(sceneRoot,delta) {
-        super.frame(sceneRoot,delta);
-
-        const mainCamera = Camera.GetMain(sceneRoot);
-
-        this.shader.lights = this.renderQueue.lights.map(({light}) => light);
-        this.shader.lightTransforms = this.renderQueue.lights.map(({transform}) => transform);
-        const cameraMatrix = Transform.GetWorldMatrix(mainCamera.node);
-        const pos = Mat4.GetPosition(cameraMatrix);
-        this.shader.cameraPosition = pos;
-    }
-}