bg2e-js 2.1.2 → 2.2.1

package/src/render/webgl/MaterialRenderer.ts

@@ -0,0 +1,113 @@
+import Texture, { TextureChannel, TextureTargetName } from "../../base/Texture";
+import Material from "../../base/Material";
+import MaterialRenderer from "../MaterialRenderer";
+import WebGLTextureRenderer from "./TextureRenderer";
+import TextureMerger from "../TextureMergerRenderer";
+import ShaderProgram from "./ShaderProgram";
+import Renderer from "../Renderer";
+import { whiteTexture, createWhiteTexture, blackTexture, createBlackTexture } from "../../tools/TextureResourceDatabase";
+
+export default class WebGLMaterialRenderer extends MaterialRenderer {
+    protected _whiteTexture: WebGLTextureRenderer;
+    protected _blackTexture: WebGLTextureRenderer;
+    protected _textureMerger: TextureMerger;
+
+    static async InitResources(renderer: Renderer) {
+        await createWhiteTexture(renderer);
+        await createBlackTexture(renderer);
+    }
+
+    constructor(renderer: Renderer, material: Material) {
+        super(renderer, material);
+        if (material.renderer) {
+            throw new Error("Duplicate material renderer set to material. Please, use the Renderer factory to get material renderer instance.");
+        }
+        // Link this material renderer to the material. This property is internal but should be accessed from the renderer
+        // The use of 'as any' is to provide access to the internal property like a friend class in C++
+        (material as any)._renderer = this;
+
+        this._whiteTexture = renderer.factory.texture(whiteTexture(renderer)) as WebGLTextureRenderer;
+        this._blackTexture = renderer.factory.texture(blackTexture(renderer)) as WebGLTextureRenderer;
+        this._textureMerger = renderer.factory.textureMerger();
+    }
+
+    mergeTextures() {
+        if (this.material.dirty) {
+            const getTexture = (att: keyof Material, fallbackTexture = this._whiteTexture) => {
+                if (this.material[att] instanceof Texture) {
+                    return this.material[att];
+                }
+                else {
+                    return fallbackTexture.texture;
+                }
+            }
+
+            this._textureMerger.setTexture(getTexture('metalnessTexture'), TextureChannel.R, TextureChannel.R + this.material.metalnessChannel);
+            this._textureMerger.setTexture(getTexture('roughnessTexture'), TextureChannel.G, TextureChannel.R + this.material.roughnessChannel);
+            this._textureMerger.setTexture(getTexture('lightEmission', this._blackTexture), TextureChannel.B, TextureChannel.R + this.material.lightEmissionChannel);
+            this._textureMerger.setTexture(getTexture('ambientOcclussion'), TextureChannel.A, TextureChannel.R + this.material.ambientOcclussionChannel);
+            this._textureMerger.update();
+            this.material.dirty = false;
+        }
+    }
+
+    get metalnessRoughnessHeightAOTexture() {
+        return this._textureMerger.mergedTexture;
+    }
+
+    destroy() {
+        console.log("Destroy material renderer");
+        if (this.material) {
+            // The use of 'as any' is to provide access to the internal property like a friend class in C++
+            (this.material as any)._renderer = null;
+        }
+    }
+
+    // Bind the metalness, roughness, height and ambient occlussion combined texture
+    bindMetalnessRoughnessHeightAOTexture(shaderProgram: ShaderProgram, uniformName: string, textureUnit: number): boolean {
+        const texRenderer = this.renderer.factory.texture(this.metalnessRoughnessHeightAOTexture) as WebGLTextureRenderer;
+        shaderProgram.bindTexture(uniformName, texRenderer, textureUnit);
+        return true;
+    }
+
+    // Binds the property to the uniformName  uniform of the shader program, if the
+    // material property ies a texture. If not, it binds the fallbackTexture. If the fallbackTexture
+    // value is null, it binds a 2x2 px white texture
+    bindTexture(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, textureUnit: number, fallbackTexture: Texture | null = null) {
+        if (this.material[property] instanceof Texture) {
+            shaderProgram.bindTexture(uniformName, this.getTextureRenderer(property) as WebGLTextureRenderer, textureUnit);
+            return true;
+        }
+        else if (fallbackTexture instanceof Texture) {
+            const texRenderer = this.renderer.factory.texture(fallbackTexture) as WebGLTextureRenderer;
+            shaderProgram.bindTexture(uniformName, texRenderer, textureUnit);
+            return false;
+        }
+        else {
+            shaderProgram.bindTexture(uniformName, this._whiteTexture, textureUnit);
+            return false;
+        }
+    }
+
+    // Bind the property to the uniformName uniform of the shader program, if the
+    // material property is a color. If not, it binds the fallbackColor vector
+    bindColor(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, fallbackColor = [1, 1, 1, 1]) {
+        if (this.material[property].length>=4) {
+            shaderProgram.uniform4fv(uniformName, this.material[property]);
+        }
+        else {
+            shaderProgram.uniform4fv(uniformName, fallbackColor);
+        }
+    }
+
+    // Bind the property to the uniformName uniform of the shader program, if the
+    // material property is a number. If not, it binds the fallbackValue value
+    bindValue(shaderProgram: ShaderProgram, property: keyof Material, uniformName: string, fallbackValue = 1) {
+        if (typeof(this.material[property]) === "number") {
+            shaderProgram.uniform1f(uniformName, this.material[property]);
+        }
+        else {
+            shaderProgram.uniform1f(uniformName, fallbackValue);
+        }
+    }
+}

package/src/render/webgl/Pipeline.ts

@@ -0,0 +1,89 @@
+
+import Pipeline, { BlendEquation, BlendFunction } from "../Pipeline";
+
+const getBlendEquation = (gl: WebGLRenderingContext, blendEquation: BlendEquation): number => {
+    switch (blendEquation) {
+    case BlendEquation.ADD:
+        return gl.FUNC_ADD; 
+    case BlendEquation.SUBTRACT:
+        return gl.FUNC_SUBTRACT; 
+    case BlendEquation.REVERSE_SUBTRACT:
+        return gl.FUNC_REVERSE_SUBTRACT; 
+    }
+    throw new Error(`Invalid blend equation specified in WebGLPipeline: ${ blendEquation }`);
+}
+
+const getBlendFunc = (gl: WebGLRenderingContext, blendFunc: BlendFunction): number | null => {
+    switch (blendFunc) {
+    case BlendFunction.NULL:
+        return null;
+    case BlendFunction.ZERO:
+        return gl.ZERO;
+    case BlendFunction.ONE:
+        return gl.ONE;
+    case BlendFunction.SRC_COLOR:
+        return gl.SRC_COLOR;
+    case BlendFunction.ONE_MINUS_SRC_COLOR:
+        return gl.ONE_MINUS_SRC_COLOR;
+    case BlendFunction.DST_COLOR:
+        return gl.DST_COLOR;
+    case BlendFunction.ONE_MINUS_DST_COLOR:
+        return gl.ONE_MINUS_DST_COLOR;
+    case BlendFunction.SRC_ALPHA:
+        return gl.SRC_ALPHA;
+    case BlendFunction.ONE_MINUS_SRC_ALPHA:
+        return gl.ONE_MINUS_SRC_ALPHA;
+    case BlendFunction.DST_ALPHA:
+        return gl.DST_ALPHA;
+    case BlendFunction.ONE_MINUS_DST_ALPHA:
+        return gl.ONE_MINUS_DST_ALPHA;
+    }
+    throw new Error(`Invalid blend function specified in WebGLPipeline: ${ blendFunc }`);
+}
+
+export default class WebGLPipeline extends Pipeline {
+    private _blendEquation!: number;
+    private _blendFuncSrcColor!: number | null;
+    private _blendFuncSrcAlpha!: number | null;
+    private _blendFuncDstColor!: number | null;
+    private _blendFuncDstAlpha!: number | null;
+    private _blendFunc!: (a: number | null, b: number | null, c?: number | null, d?: number | null) => void;
+
+    create(): void {
+        const { gl } = this.renderer;
+
+        // Set the webgl equivalent values
+        this._blendEquation = getBlendEquation(gl, this.blendState.blendEquation);
+        this._blendFuncSrcColor = getBlendFunc(gl, this.blendState.blendFuncSrc);
+        this._blendFuncSrcAlpha = getBlendFunc(gl, this.blendState.blendFuncSrcAlpha);
+        this._blendFuncDstColor = getBlendFunc(gl, this.blendState.blendFuncDst);
+        this._blendFuncDstAlpha = getBlendFunc(gl, this.blendState.blendFuncDstAlpha);
+        if ((this._blendFuncDstAlpha === null && this._blendFuncSrcAlpha !== null) ||
+            (this._blendFuncDstAlpha !== null && this._blendFuncSrcAlpha === null))
+        {
+            throw new Error("WebGLPipeline.create(): Invalid values of blendFuncDstAlpha and blendFuncSrcAlpha");
+        }
+        this._blendFunc = this._blendFuncDstAlpha !== null ? (a,b) => gl.blendFunc(a,b) : (a,b,c,d) => gl.blendFuncSeparate(a,b,c,d);
+    }
+
+    activate(): void {
+        const { gl, state } = this.renderer;
+        this.blendState.enabled ? gl.enable(gl.BLEND) : gl.disable(gl.BLEND);
+        gl.blendEquation(this._blendEquation);
+        this._blendFunc(
+            this._blendFuncSrcColor,
+            this._blendFuncDstColor,
+            this._blendFuncSrcAlpha,
+            this._blendFuncDstAlpha
+        );
+
+        state.depthTestEnabled = this.depthTest;
+
+        if (this.cullFace) {
+            gl.enable(gl.CULL_FACE);
+        }
+        else {
+            gl.disable(gl.CULL_FACE);
+        }
+    }
+}

package/src/render/webgl/PolyListRenderer.ts

@@ -0,0 +1,260 @@
+
+import { DrawMode, PolyListCullFace, PolyListFrontFace } from "../../base/PolyList";
+import PolyListRenderer from "../PolyListRenderer";
+import VertexBuffer, { BufferTarget } from "./VertexBuffer";
+import type Renderer from "../Renderer";
+import WebGLRenderer from "./Renderer";
+import type PolyList from "../../base/PolyList";
+
+interface Offsets {
+    vertex: number;
+    normal: number;
+    texCoord0: number;
+    texCoord1: number;
+    texCoord2: number;
+    color: number;
+    tangent: number;
+}
+
+export default class WebGLPolyListRenderer extends PolyListRenderer {
+    private _vertexBuffer: VertexBuffer | null = null;
+    private _indexBuffer: VertexBuffer | null = null;
+    private _indexArrayFormat: number | null = null;
+    private _stride: number = 0;
+    private _offsets: Offsets = { vertex: 0, normal: 0, texCoord0: 0, texCoord1: 0, texCoord2: 0, color: 0, tangent: 0 };
+
+    constructor(renderer: Renderer, polyList: PolyList) {
+        super(renderer, polyList);
+    }
+
+    init(): void {
+        this._vertexBuffer = null;
+        this._indexBuffer = null;
+        this._indexArrayFormat = null;
+    }
+
+    get valid(): boolean {
+        return this._vertexBuffer !== null && this._indexArrayFormat !== null && this._indexBuffer !== null;
+    }
+
+    refresh(): void {
+        const gl = (this.renderer as WebGLRenderer)?.gl;
+        if (!gl) {
+            throw new Error("WebGLPolyListRenderer: refresh() called without a valid WebGL context");
+        }
+
+        const getVector = (items: number[] | null | undefined, current: number, stride: number): number[] | null => {
+            if (!items || items.length === 0) {
+                return null;
+            }
+            
+            const offset = current * stride;
+            if (stride === 2) {
+                return [items[offset], items[offset + 1]];
+            } else if (stride === 3) {
+                return [items[offset], items[offset + 1], items[offset + 2]];
+            } else {
+                return [items[offset], items[offset + 1], items[offset + 2], items[offset + 3]];
+            }
+        };
+
+        const numElements = this.polyList.vertex.length / 3;
+        const result = [];
+        for (let i = 0; i < numElements; ++i) {
+            const v = getVector(this.polyList.vertex, i, 3);
+            const n = getVector(this.polyList.normal, i, 3);
+            const t0 = getVector(this.polyList.texCoord0, i, 2);
+            const t1 = getVector(this.polyList.texCoord1, i, 2);
+            const t2 = getVector(this.polyList.texCoord2, i, 2);
+            const c = getVector(this.polyList.color, i, 4);
+            const t = getVector(this.polyList.tangent , i, 3);
+
+            if (v) {
+                result.push(...v);
+            }
+            if (n) {
+                result.push(...n);
+            }
+            if (t0) {
+                result.push(...t0);
+            }
+            if (t1) {
+                result.push(...t1);
+            }
+            if (t2) {
+                result.push(...t2);
+            }
+            if (c) {
+                result.push(...c);
+            }
+            if (t) {
+                result.push(...t);
+            }
+        }
+
+        this._stride = 3;
+        const vertex = 0;
+        const normal = 3;
+        let texCoord0 = 3;
+        let texCoord1 = 3;
+        let texCoord2 = 3;
+        let color = 3;
+        let tangent = 3;
+        if (this.hasNormal) {
+            this._stride += 3;
+            texCoord0 += 3;
+            texCoord1 += 3;
+            texCoord2 += 3;
+            color += 3;
+            tangent += 3;
+        }
+        if (this.hasTexCoord0) {
+            this._stride += 2;
+            texCoord1 += 2;
+            texCoord2 += 2;
+            color += 2;
+            tangent += 2;
+        }
+        if (this.hasTexCoord1) {
+            this._stride += 2;
+            texCoord2 += 2;
+            color += 2;
+            tangent += 2;
+        }
+        if (this.hasTexCoord2) {
+            this._stride += 2;
+            color += 2;
+            tangent += 2;
+        }
+        if (this.hasColor) {
+            this._stride += 4;
+            tangent += 4;
+        }
+        if (this.hasTangent) {
+            this._stride += 3;
+        }
+
+        this._offsets = { vertex, normal, texCoord0, texCoord1, texCoord2, color, tangent };
+        this._vertexBuffer = VertexBuffer.CreateArrayBuffer(gl, new Float32Array(result));
+        const indexArray = this.polyList.index.length < 65535 ? new Uint16Array(this.polyList.index) : new Uint32Array(this.polyList.index);
+        this._indexBuffer = VertexBuffer.CreateElementArrayBuffer(gl, indexArray);
+        this._indexArrayFormat = indexArray instanceof Uint16Array ? gl.UNSIGNED_SHORT : gl.UNSIGNED_INT;
+    }
+
+    get hasNormal(): boolean {
+        return this._polyList.normal.length > 0;
+    }
+
+    get hasTexCoord0(): boolean {
+        return this._polyList.texCoord0.length > 0;
+    }
+
+    get hasTexCoord1(): boolean {
+        return this._polyList.texCoord1.length > 0;
+    }
+
+    get hasTexCoord2(): boolean {
+        return this._polyList.texCoord2.length > 0;
+    }
+
+    get hasColor(): boolean {
+        return this._polyList.color.length > 0;
+    }
+
+    get hasTangent(): boolean {
+        return this._polyList.tangent && this._polyList.tangent?.length > 0 || false;
+    }
+
+    positionAttribParams(name: string): { name: string; stride: number; size: number; offset: number; enable: boolean } {
+        return { name, stride: this._stride, size: 3, offset: 0, enable: true }
+    }
+
+    normalAttribParams(name: string): { name: string; stride: number; size: number; offset: number; enable: boolean } {
+        return { name, stride: this._stride, size: 3, offset: this._offsets.normal, enable: true }
+    }
+
+    texCoord0AttribParams(name: string): { name: string; stride: number; size: number; offset: number; enable: boolean } {
+        return { name, stride: this._stride, size: 2, offset: this._offsets.texCoord0, enable: true }
+    }
+
+    texCoord1AttribParams(name: string): { name: string; stride: number; size: number; offset: number; enable: boolean } {
+        return { name, stride: this._stride, size: 2, offset: this._offsets.texCoord1, enable: true }
+    }
+
+    texCoord2AttribParams(name: string): { name: string; stride: number; size: number; offset: number; enable: boolean } {
+        return { name, stride: this._stride, size: 2, offset: this._offsets.texCoord2, enable: true }
+    }
+    
+    colorAttribParams(name: string): { name: string; stride: number; size: number; offset: number; enable: boolean } {
+        return { name, stride: this._stride, size: 4, offset: this._offsets.color, enable: true }
+    }
+
+    tangentAttribParams(name: string): { name: string; stride: number; size: number; offset: number; enable: boolean } {
+        return { name, stride: this._stride, size: 3, offset: this._offsets.tangent, enable: true }
+    }
+
+    bindBuffers(): void {
+        this._vertexBuffer?.bind(BufferTarget.ARRAY_BUFFER);
+        this._indexBuffer?.bind(BufferTarget.ELEMENT_ARRAY_BUFFER);        
+    }
+    
+    draw(): void {
+        const { gl, state } = this.renderer as WebGLRenderer;
+
+        state.cullFaceEnabled = this.polyList.enableCullFace;
+        
+        switch (this.polyList.frontFace) {
+        case PolyListFrontFace.CCW:
+            state.frontFace = state.CCW;
+            break;
+        case PolyListFrontFace.CW:
+            state.frontFace = state.CW;
+            break;
+        }
+
+        switch (this.polyList.cullFace) {
+        case PolyListCullFace.BACK:
+            state.cullFace = state.BACK;
+            break;
+        case PolyListCullFace.FRONT:
+            state.cullFace = state.FRONT;
+            break;
+        case PolyListCullFace.FRONT_AND_BACK:
+            state.cullFace = state.FRONT_AND_BACK;
+            break;
+        }
+
+
+        
+        let mode = 0;
+        switch (this._polyList.drawMode) {
+        case DrawMode.POINTS:
+            mode = gl.POINTS;
+            break;
+        case DrawMode.TRIANGLES:
+            mode = gl.TRIANGLES;
+            break;
+        case DrawMode.TRIANGLE_FAN:
+            mode = gl.TRIANGLE_FAN
+            break;
+        case DrawMode.TRIANGLE_STRIP:
+            mode = gl.TRIANGLE_STRIP;
+            break;
+        case DrawMode.LINES:
+            mode = gl.LINES;
+            break;
+        case DrawMode.LINE_STRIP:
+            mode = gl.LINE_STRIP;
+            break;
+        }
+
+        gl.lineWidth(this.polyList.lineWidth);
+
+        gl.drawElements(mode, this.polyList.index.length, this._indexArrayFormat || 0, 0);
+    }
+
+    destroy(): void {
+        if (this._vertexBuffer) VertexBuffer.Delete(this._vertexBuffer);
+        if (this._indexBuffer) VertexBuffer.Delete(this._indexBuffer);
+    }
+}

package/src/render/webgl/RenderBuffer.ts

@@ -0,0 +1,227 @@
+
+import { TextureRenderTargetAttachment, TextureTargetName } from "../../base/Texture";
+import Vec from "../../math/Vec";
+import RenderBuffer, { RenderBufferType, CubeMapFace } from "../RenderBuffer";
+import Texture from "../../base/Texture";
+
+function glEnumToString(gl: WebGLRenderingContext, value: number): string {
+    for(var key in gl) {
+      if (gl[key as keyof WebGLRenderingContext] === value) {
+        return key;
+      }
+    }
+    return "0x" + value.toString(16);
+  }
+
+function getAttachmentPoint(gl: WebGLRenderingContext, att: number | string): number {
+    switch (Number(att)) {
+    case TextureRenderTargetAttachment.COLOR_ATTACHMENT_0:
+        return gl.COLOR_ATTACHMENT0;
+    case TextureRenderTargetAttachment.DEPTH_ATTACHMENT:
+        return gl.DEPTH_ATTACHMENT;
+    case TextureRenderTargetAttachment.STENCIL_ATTACHMENT:
+        return gl.STENCIL_ATTACHMENT;
+    default:
+        throw new Error(`RenderBuffer.beginUpdate() Error creating render buffer. Invalid attachment ${att}.`);
+    }
+}
+
+function getTextureTarget(gl: WebGLRenderingContext, texture: Texture): number {
+    return gl[TextureTargetName[texture.target] as keyof WebGLRenderingContext] as number;
+}
+
+export default class WebGLRenderBuffer extends RenderBuffer {
+    private _framebuffer?: WebGLFramebuffer | null;
+    private _depthBuffer?: WebGLRenderbuffer | null;
+    private _framebuffers?: WebGLFramebuffer[] | null;
+    private _depthBuffers?: WebGLRenderbuffer[] | null;
+    private _screenViewport?: Vec;
+    private _prevArrayBufferBinding?: WebGLBuffer | null;
+    private _prevElementBufferBinding?: WebGLBuffer | null;
+    constructor(renderer: any) {
+        super(renderer);
+    }
+
+    get frameBuffer(): any {
+        return this.renderer.frameBuffer;
+    }
+
+    saveVertexBufferState(): void {
+        const { gl } = this.renderer;
+        this._prevArrayBufferBinding = gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+        this._prevElementBufferBinding = gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+    }
+
+    restoreVertexBufferState(): void {
+        const { gl } = this.renderer;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._prevArrayBufferBinding);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._prevElementBufferBinding);
+    }
+
+    beginUpdate(textureFace: CubeMapFace = CubeMapFace.NONE): void {
+        if (this.type === RenderBufferType.TEXTURE) {
+            this.beginUpdateTexture();
+        }
+        else if (this.type === RenderBufferType.CUBE_MAP) {
+            this.beginUpdateCubemap(textureFace);
+        }
+        else {
+            throw new Error("The render buffer is not initialized");
+        }
+    }
+
+    endUpdate(textureFace: CubeMapFace = CubeMapFace.NONE): void {
+        if (this.type === RenderBufferType.TEXTURE) {
+            this.endUpdateTexture();
+        }
+        else if (this.type === RenderBufferType.CUBE_MAP) {
+            this.endUpdateCubemap();
+        }
+        else {
+            throw new Error("The render buffer is not initialized");
+        }
+    }
+
+    destroy(): void {
+        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: number, y: number, width: number, height: number): Uint8Array | undefined {
+        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;
+        }
+    }
+
+
+    private beginUpdateTexture(): void {
+        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;
+    }
+
+    private endUpdateTexture(): void {
+        const { gl } = this.renderer;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        this.renderer.state.viewport = this._screenViewport;
+    }
+
+    private beginUpdateCubemap(face: CubeMapFace): void {
+        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;
+        if (!this._framebuffers || faceIndex < 0 || faceIndex >= this._framebuffers.length) {
+            throw new Error(`RenderBuffer.beginUpdateCubemap(): invalid cube map face index ${faceIndex}`);
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._framebuffers[faceIndex]);
+
+        this._screenViewport = this.renderer.state.viewport;
+        this.renderer.state.viewport = texture.size;
+    }
+
+    private endUpdateCubemap(): void {
+        const { gl } = this.renderer;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        this.renderer.state.viewport = this._screenViewport;
+    }
+}