ris-framework 0.1.0-dev.4

package/src/webgl/utilities/WebGlConverter.ts

@@ -0,0 +1,391 @@
+import {Culling} from "../../core/renderer/enums";
+import {BlendFactor, BlendOperation} from "../../core/rendering/blending/enums";
+import {CullMode, FrontFace, PrimitiveTopology} from "../../core/rendering/primitive/enums";
+import {VertexFormat} from "../../VertexFormat.ts";
+import {BufferUsage, MipMapSamplerFilter, SamplerAddressMode, SamplerFilter, TextureFormat} from "ris-framework-api";
+
+export class WebGlConverter {
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants
+
+    /** BC3 */
+    private static GL_COMPRESSED_RGBA_S3TC_DXT5_EXT = 0x83F3;
+
+    /** BC7 */
+    private static GL_COMPRESSED_RGBA_BPTC_UNORM = 0x8E8C;
+
+
+    /** ETC2 */
+    private static GL_COMPRESSED_RGBA8_ETC2_EAC = 0x9278;
+
+    private static GL_COMPRESSED_RGBA_ASTC_4x4_KHR = 0x93B0;
+
+    /**
+     * Converts PrimitiveTopology to WebGL enum.
+     * @param topology The PrimitiveTopology.
+     * @returns The WebGL enum.
+     */
+    public static convertPrimitiveType(topology: PrimitiveTopology): number {
+
+        switch (topology) {
+            case PrimitiveTopology.TRIANGLE_LIST:
+                return WebGL2RenderingContext.TRIANGLES;
+            case PrimitiveTopology.LINE_LIST:
+                return WebGL2RenderingContext.LINES;
+            case PrimitiveTopology.LINE_STRIP:
+                return WebGL2RenderingContext.LINE_STRIP;
+            case PrimitiveTopology.POINT_LIST:
+                return WebGL2RenderingContext.POINTS;
+            default:
+                throw new Error("Method not implemented.");
+        }
+    }
+
+    /**
+     * Converts CullMode to WebGL enum.
+     * @param cullFace The CullMode.
+     * @return The WebGL enum.
+     */
+    public static convertCullFace(cullFace: CullMode): number {
+
+        switch (cullFace) {
+            case CullMode.NONE:
+                return WebGL2RenderingContext.NONE;
+            case CullMode.BACK:
+                return WebGL2RenderingContext.BACK;
+            case CullMode.FRONT:
+                return WebGL2RenderingContext.FRONT;
+            default: throw new Error("Method not implemented.");
+        }
+
+    }
+
+    /**
+     * Converts FrontFace to WebGL enum.
+     * @param frontFace The FrontFace.
+     * @return The WebGL enum.
+     */
+    public static convertFrontFace(frontFace: FrontFace): number {
+        switch (frontFace) {
+            case FrontFace.CW:
+                return WebGL2RenderingContext.CW;
+            case FrontFace.CCW:
+                return WebGL2RenderingContext.CCW;
+            default:
+                throw new Error("Method not implemented.");
+        }
+    }
+
+    /**
+     * Converts BufferUsage to WebGL enum.
+     * @param usage The BufferUsage.
+     * @return The WebGL enum.
+     */
+    public static convertBufferUsage(usage: BufferUsage): GLenum {
+
+        let bufferUsage: number = WebGL2RenderingContext.STATIC_DRAW;
+
+        if((usage & BufferUsage.COPY_DST) == BufferUsage.COPY_DST)
+        {
+            bufferUsage = WebGL2RenderingContext.DYNAMIC_DRAW;
+        }
+
+        return bufferUsage;
+    }
+    /**
+     * Conversts BlendOperation to WebGL enum.
+     * @parma gl The WebGL2RenderingContext.
+     * @param blendOperation The BlendOperation.
+     * @return The WebGL enum.
+     */
+    public static convertBlendOperation(
+        gl: WebGL2RenderingContext,
+        blendOperation: BlendOperation,
+    ): GLenum {
+        switch (blendOperation) {
+            case BlendOperation.ADD:
+                return gl.FUNC_ADD;
+            case BlendOperation.SUBTRACT:
+                return gl.FUNC_SUBTRACT;
+            case BlendOperation.REVERSE_SUBTRACT:
+                return gl.FUNC_REVERSE_SUBTRACT;
+            case BlendOperation.MIN:
+                return gl.MIN;
+            case BlendOperation.MAX:
+                return gl.MAX;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts BlendFactor to WebGL enum.
+     * @param gl The WebGL2RenderingContext.
+     * @param blendingFactor The BlendFactor.
+     * @returns The WebGL enum.
+     */
+    public static convertBlendFactor(
+        gl: WebGL2RenderingContext,
+        blendingFactor: BlendFactor,
+    ): number {
+        switch (blendingFactor) {
+            // case BlendFactor.ZERO:
+            //     return gl.ZERO;
+            case BlendFactor.ONE:
+                return gl.ONE;
+            // case BlendFactor.SRC_COLOR:
+            //     return gl.SRC_COLOR;
+            case BlendFactor.SRC_ALPHA:
+                return gl.SRC_ALPHA;
+            case BlendFactor.ONE_MINUS_SRC_ALPHA:
+                return gl.ONE_MINUS_SRC_ALPHA;
+            // case BlendFactor.DST_ALPHA:
+            //     return gl.DST_ALPHA;
+            // case BlendFactor.ONE_MINUS_DST_ALPHA:
+            //     return gl.ONE_MINUS_DST_ALPHA;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts Culling to WebGL enum.
+     * @param gl The WebGL2RenderingContext.
+     * @param culling The Culling.
+     * @returns The WebGL enum.
+     */
+    public static convertCulling(gl: WebGL2RenderingContext, culling: Culling): number {
+        switch (culling) {
+            case Culling.Front:
+                return gl.FRONT;
+            case Culling.Back:
+                return gl.BACK;
+            case Culling.None:
+                return gl.NONE;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts TextureFormat to WebGL internal format, format, and type.
+     * @param gl The WebGL2RenderingContext.
+     * @param textureFormat The TextureFormat.
+     * @returns The WebGL internal format.
+     */
+    public static convertInternalFormat(gl: WebGL2RenderingContext, textureFormat: TextureFormat): number {
+        switch (textureFormat) {
+            // Same format regardless.
+            case TextureFormat.RGBA_8_UNORM:
+                return gl.RGBA8;
+            case TextureFormat.RGBA_8_UNORM_SRGB:
+                return gl.SRGB8_ALPHA8;
+            case TextureFormat.DEPTH_32_FLOAT:
+                return gl.DEPTH_COMPONENT32F;
+            case TextureFormat.DEPTH_24_STENCIL_8:
+                return gl.DEPTH24_STENCIL8;
+            case TextureFormat.BC3_RGBA_UNORM:
+                return WebGlConverter.GL_COMPRESSED_RGBA_S3TC_DXT5_EXT;
+            case TextureFormat.ETC2_RGBA8_UNORM:
+                return WebGlConverter.GL_COMPRESSED_RGBA8_ETC2_EAC;
+            case TextureFormat.BC7_RGBA_UNORM:
+                return WebGlConverter.GL_COMPRESSED_RGBA_BPTC_UNORM;
+            case TextureFormat.ASTC_4X4_RGBA:
+                return WebGlConverter.GL_COMPRESSED_RGBA_ASTC_4x4_KHR;
+
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts TextureFormat to WebGL format.
+     * @param gl The WebGL2RenderingContext.
+     * @param textureFormat The TextureFormat.
+     * @returns The WebGL format.
+     */
+    public static convertToPixelFormat(gl: WebGL2RenderingContext, textureFormat: TextureFormat): number {
+        switch (textureFormat) {
+            case TextureFormat.RGBA_8_UNORM:
+            case TextureFormat.RGBA_8_UNORM_SRGB:
+                return gl.RGBA;
+            case TextureFormat.DEPTH_32_FLOAT:
+                return gl.DEPTH_COMPONENT;
+            case TextureFormat.DEPTH_24_STENCIL_8:
+                return gl.DEPTH_STENCIL;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts TextureFormat to WebGL texture type.
+     * @param gl The WebGL2RenderingContext.
+     * @param textureFormat The TextureFormat.
+     * @returns The WebGL texture type.
+     */
+    public static convertToTextureType(gl: WebGL2RenderingContext, textureFormat: TextureFormat): number {
+        switch (textureFormat) {
+            case TextureFormat.RGBA_8_UNORM:
+                return gl.UNSIGNED_BYTE;
+            case TextureFormat.DEPTH_32_FLOAT:
+                return gl.FLOAT;
+            case TextureFormat.DEPTH_24_STENCIL_8:
+                return gl.UNSIGNED_INT_24_8;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts SamplerMinFilter to WebGL enum.
+     * @param gl The WebGL2RenderingContext.
+     * @param minFilter The SamplerMinFilter.
+     * @param mipMapFilter The MipmapSamplerFilter.
+     * @returns The WebGL enum.
+     */
+    public static convertToMinFilter(gl: WebGL2RenderingContext,
+                                     minFilter: SamplerFilter,
+                                     mipMapFilter: MipMapSamplerFilter): number {
+        if (mipMapFilter == MipMapSamplerFilter.NONE) {
+            return this.convertMagFilter(gl, minFilter);
+        }
+
+        if (minFilter == SamplerFilter.NEAREST) {
+            switch (mipMapFilter) {
+                case MipMapSamplerFilter.NEAREST:
+                    return gl.NEAREST_MIPMAP_NEAREST;
+                case MipMapSamplerFilter.LINEAR:
+                    return gl.NEAREST_MIPMAP_LINEAR;
+                default:
+                    throw new Error("NotImplementedException");
+            }
+        }
+        else if (minFilter == SamplerFilter.LINEAR) {
+            switch (mipMapFilter) {
+                case MipMapSamplerFilter.NEAREST:
+                    return gl.LINEAR_MIPMAP_NEAREST;
+                case MipMapSamplerFilter.LINEAR:
+                    return gl.LINEAR_MIPMAP_LINEAR;
+                default:
+                    throw new Error("NotImplementedException");
+            }
+        }
+
+        throw new Error("NotImplementedException");
+    }
+
+    /**
+     * Converts SamplerMagFilter to WebGL enum.
+     * @param gl The WebGL2RenderingContext.
+     * @param magFilter The SamplerMagFilter.
+     * @returns The WebGL enum.
+     */
+    public static convertToMagFilter(gl: WebGL2RenderingContext, magFilter: SamplerFilter): number {
+        switch (magFilter) {
+            case SamplerFilter.NEAREST:
+                return gl.NEAREST;
+            case SamplerFilter.LINEAR:
+                return gl.LINEAR;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts VertexFormat to the number of components for WebGL vertex attribute pointer.
+     * @param vertexFormat The VertexFormat.
+     * @returns The number of components for WebGL vertex attribute pointer.
+     */
+    public static convertVertexFormat(vertexFormat: VertexFormat): number {
+        switch (vertexFormat) {
+            case VertexFormat.FLOAT_32:
+                return 1;
+            case VertexFormat.FLOAT_32X2:
+                return 2;
+            case VertexFormat.FLOAT_32X3:
+                return 3;
+            case VertexFormat.FLOAT_32X4:
+                return 4;
+            case VertexFormat.FLOAT_32X16:
+                return 16;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts SamplerFilter to WebGL enum.
+     * @param gl The WebGL2RenderingContext.
+     * @param filter The SamplerFilter.
+     * @returns The WebGL enum.
+     */
+    public static convertMagFilter(gl: WebGL2RenderingContext, filter: SamplerFilter): number {
+        switch (filter) {
+            case SamplerFilter.NEAREST:
+                return gl.NEAREST;
+            case SamplerFilter.LINEAR:
+                return gl.LINEAR;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts SamplerFilter and MipmapSamplerFilter to WebGL enum for minification filter.
+     * @param gl The WebGL2RenderingContext.
+     * @param filter The SamplerFilter.
+     * @param mipMapFilter The MipmapSamplerFilter.
+     * @returns The WebGL enum.
+     */
+    public static convertMinFIlter(gl: WebGL2RenderingContext, filter: SamplerFilter, mipMapFilter: MipMapSamplerFilter): number {
+
+        if (mipMapFilter == MipMapSamplerFilter.NONE) {
+            return this.convertMagFilter(gl, filter);
+        }
+        switch (filter) {
+            case SamplerFilter.NEAREST:
+                switch (mipMapFilter) {
+                    case MipMapSamplerFilter.NEAREST:
+                        return gl.NEAREST_MIPMAP_NEAREST;
+                    case MipMapSamplerFilter.LINEAR:
+                        return gl.NEAREST_MIPMAP_LINEAR;
+                    default:
+                        throw new Error("NotImplementedException");
+                }
+            case SamplerFilter.LINEAR:
+                switch (mipMapFilter) {
+                    case MipMapSamplerFilter.NEAREST:
+                        return gl.LINEAR_MIPMAP_NEAREST;
+                    case MipMapSamplerFilter.LINEAR:
+                        return gl.LINEAR_MIPMAP_LINEAR;
+                    default:
+                        throw new Error("NotImplementedException");
+                }
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+    /**
+     * Converts SamplerAddressMode to WebGL enum.
+     * @param gl The WebGL2RenderingContext.
+     * @param addressMode The SamplerAddressMode.
+     * @returns The WebGL enum.
+     */
+    public static convertAddressMode(gl: WebGL2RenderingContext, addressMode: SamplerAddressMode): number {
+        switch (addressMode) {
+            case SamplerAddressMode.CLAMP_TO_EDGE:
+                return gl.CLAMP_TO_EDGE;
+            case SamplerAddressMode.REPEAT:
+                return gl.REPEAT;
+            case SamplerAddressMode.MIRROR_REPEAT:
+                return gl.MIRRORED_REPEAT;
+            case SamplerAddressMode.CLAMP_TO_BORDER:
+                return gl.CLAMP_TO_EDGE;
+            default:
+                throw new Error("NotImplementedException");
+        }
+    }
+
+}

package/src/webgl/utilities/WebGlFrameBufferUtilities.ts

@@ -0,0 +1,240 @@
+import {TextureFormat} from "ris-framework-api";
+
+
+/**
+ * This file defines the WebGLFrameBufferUtilities class, which provides utility functions for working with WebGL framebuffers.
+ * The WebGLFrameBufferUtilities class includes methods for creating framebuffers with specific configurations, such as attaching textures as color and depth attachments.
+ * These utilities simplify the process of setting up framebuffers for rendering to textures, which is a common technique in graphics programming for effects like render-to-texture, post-processing, and off-screen rendering.
+ */
+export class WebGlFrameBufferUtilities {
+
+
+    /**
+     * Creates a framebuffer and attaches the provided texture(s) as color attachments. 
+     * This method is useful for setting up a framebuffer for rendering to one or more textures.
+     * @param gl The WebGL2 rendering context.
+     * @param textureIds The texture(s) to be attached as color attachments.
+     * @param framebufferLabel An optional label for the framebuffer, which can be used for debugging purposes.
+     * @returns The created framebuffer.
+     */
+    public create(gl: WebGL2RenderingContext, textureIds: WebGLTexture[] | WebGLTexture, framebufferLabel: string | null = null): WebGLFramebuffer {
+        const framebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+
+        // -- LABEL FRAMEBUFFER
+        if (framebufferLabel) {
+            // @ts-ignore
+            framebuffer.__SPECTOR_Metadata = {
+                name: framebufferLabel,
+            };
+        }
+
+        var textureIdsArray = [];
+        if (textureIds instanceof WebGLTexture) {
+            textureIdsArray.push(textureIds);
+        } else {
+            textureIdsArray = textureIds;
+        }
+
+        for (let i = 0; i < textureIdsArray.length; i++) {
+            const textureId = textureIdsArray[i];
+
+            if(textureId == null) {
+                throw new Error("Cannot bind texture to the frame buffer. Texture id not specified");
+            }
+
+            // Bind the texture to the framebuffer, so we can render to it.
+            gl.bindTexture(gl.TEXTURE_2D, textureId);
+
+            // Connect the texture to the framebuffer.
+            gl.framebufferTexture2D(gl.FRAMEBUFFER,
+                gl.COLOR_ATTACHMENT0 + i,
+                gl.TEXTURE_2D,
+                textureId,
+                0);
+        }
+
+        // Check if the framebuffer is complete.
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
+            var error = gl.getError();
+            throw new Error("Framebuffer is not complete." + " WebGL error code: " + error);
+        }
+
+        return framebuffer;
+    }
+
+    /**
+     * Creates a framebuffer with texture being attached as color attachment 0 and depth render buffer.
+     * @param gl The WebGL2 rendering context.
+     * @param textureAttachment0 The texture to be attached as color attachment 0.
+     * @param depthAttachmentType The type of the depth attachment, which can be DepthAttachment, DepthStencilAttachment or StencilAttachment.
+     * @param depthStencilRenderBuffer The render buffer to be attached as the depth/stencil attachment.
+     * @param label An optional label for the framebuffer, which can be used for debugging purposes.
+     * @return The created framebuffer.
+     */
+    public createWithRenderBufferAsDepthBuffer(gl: WebGL2RenderingContext,
+        textureAttachment0: WebGLTexture,
+        depthAttachmentType: GLenum,
+        depthStencilRenderBuffer: WebGLRenderbuffer, label: string | null | undefined): WebGLFramebuffer {
+
+        if (depthAttachmentType != gl.DEPTH_ATTACHMENT
+            && depthAttachmentType != gl.DEPTH_STENCIL_ATTACHMENT
+            && depthAttachmentType != gl.STENCIL_ATTACHMENT) {
+            const msg = "Invalid depth attachment type + " + depthAttachmentType;
+            throw new Error(msg);
+        }
+
+        const framebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+
+        // Connect the texture to the framebuffer.
+        gl.framebufferTexture2D(gl.FRAMEBUFFER,
+            gl.COLOR_ATTACHMENT0,
+            gl.TEXTURE_2D,
+            textureAttachment0,
+            0);
+
+        // Connect the render buffer to the framebuffer.
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER,
+            depthAttachmentType,
+            gl.RENDERBUFFER,
+            depthStencilRenderBuffer);
+
+        // Check if the framebuffer is complete.
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
+            const msg = "Framebuffer is not complete.";
+            throw new Error(msg);
+        }
+
+        if (label) {
+            // @ts-ignore
+            framebuffer.__SPECTOR_Metadata = {
+                name: label,
+            };
+        }
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        return framebuffer;
+    }
+
+    /**
+     * Creates a framebuffer with texture being attached as color attachment 0 and depth render buffer.
+     * @param gl The WebGL2 rendering context.
+     * @param textureAttachment0 The texture to be attached as color attachment 0.
+     * @param depthAttachmentType The type of the depth attachment, which can be DepthAttachment, DepthStencilAttachment or StencilAttachment.
+     * @param depthStencilTexture The texture to be attached as the depth/stencil attachment.
+     * @param label An optional label for the framebuffer, which can be used for debugging purposes.
+     * @returns The created framebuffer.
+     */
+    public createWithRenderTextureAsDepthBuffer(gl: WebGL2RenderingContext,
+        textureAttachment0: WebGLTexture,
+        depthAttachmentType: GLenum,
+        depthStencilTexture: WebGLTexture,
+        label?: string): WebGLFramebuffer {
+        if (depthAttachmentType != gl.DEPTH_ATTACHMENT
+            && depthAttachmentType != gl.DEPTH_STENCIL_ATTACHMENT
+            && depthAttachmentType != gl.STENCIL_ATTACHMENT) {
+            const msg = "Invalid depth attachment type.";
+            throw new Error(msg);
+        }
+
+        const framebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+
+        // Connect the texture to the framebuffer.
+        gl.framebufferTexture2D(gl.FRAMEBUFFER,
+            gl.COLOR_ATTACHMENT0,
+            gl.TEXTURE_2D,
+            textureAttachment0,
+            0);
+
+        // Connect the render buffer to the framebuffer.
+        gl.framebufferTexture2D(gl.FRAMEBUFFER,
+            depthAttachmentType,
+            gl.TEXTURE_2D,
+            depthStencilTexture,
+            0);
+
+        // Check if the framebuffer is complete.
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) {
+            const msg = "Framebuffer is not complete.";
+            throw new Error(msg);
+        }
+
+        if (label) {
+
+            // @ts-ignore
+            framebuffer.__SPECTOR_Metadata = {
+                name: label,
+            };
+        }
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        return framebuffer;
+    }
+
+    /**
+     * Attaches a depth/stencil render buffer to the framebuffer.
+     * @param gl The WebGL2 rendering context.
+     * @param frameBuffer The framebuffer to which the depth/stencil render buffer will be attached.
+     * @param depthStencilRenderBuffer The depth/stencil render buffer to be attached.
+     * @param format The format of the depth/stencil render buffer, which determines the type of attachment (depth, stencil, or depth-stencil).
+     */
+    public attachDepthStencilRenderBuffer(
+        gl: WebGL2RenderingContext,
+        frameBuffer: WebGLFramebuffer,
+        depthStencilRenderBuffer: WebGLRenderbuffer,
+        format: TextureFormat): void {
+
+        var depthStencilAttachmentType = null;
+        switch (format) {
+            case TextureFormat.DEPTH_32_FLOAT:
+                depthStencilAttachmentType = gl.DEPTH_ATTACHMENT;
+                break;
+            case TextureFormat.DEPTH_24_STENCIL_8:
+                depthStencilAttachmentType = gl.DEPTH_STENCIL_ATTACHMENT;
+                break;
+            default:
+                throw new Error(`Unsupported depth/stencil texture format.`);
+        }
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
+        // Connect the render buffer to the framebuffer.
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER,
+            depthStencilAttachmentType,
+            gl.RENDERBUFFER,
+            depthStencilRenderBuffer);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
+
+
+    /**
+     * Attaches a depth/stencil texture to the framebuffer.
+     * @param gl The WebGL2 rendering context.
+     * @param frameBuffer The framebuffer to which the depth/stencil texture will be attached.
+     * @param depthStencilTexture The depth/stencil texture to be attached.
+     * @param textureFormat The format of the depth/stencil texture, which determines the type of attachment (depth, stencil, or depth-stencil).
+     */
+    public attachDepthStencilTexture(
+        gl: WebGL2RenderingContext,
+        frameBuffer: WebGLFramebuffer,
+        depthStencilTexture: WebGLTexture,
+        textureFormat: TextureFormat): void {
+        var depthStencilAttachmentType = null;
+        switch (textureFormat) {
+            case TextureFormat.DEPTH_32_FLOAT:
+                depthStencilAttachmentType = gl.DEPTH_ATTACHMENT;
+                break;
+            case TextureFormat.DEPTH_24_STENCIL_8:
+                depthStencilAttachmentType = gl.DEPTH_STENCIL_ATTACHMENT;
+                break;
+            default:
+                throw new Error(`Unsupported depth/stencil texture format.`);
+        }
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, depthStencilAttachmentType, gl.TEXTURE_2D, depthStencilTexture, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    }
+}