ris-framework 0.1.0-dev.4

package/src/webgl/utilities/WebGlSamplerUtilities.ts

@@ -0,0 +1,81 @@
+import { SamplerCompareFunction } from '../../common/sampler-enums';
+import { SpectorJSUtilities } from './spector-js-utilities';
+import { WebGlConverter } from './WebGlConverter.ts';
+import {MipMapSamplerFilter, SamplerAddressMode, SamplerFilter} from "ris-framework-api";
+
+/**
+ * The utility class for working with WebGLSampler object.
+ */
+export class WebGlSamplerUtilities {
+      
+    /**
+     * Creates a WebGLSampler with the specified parameters.
+     * @param gl The WebGL2RenderingContext.
+     * @param minFilter The minification filter of the sampler.
+     * @param magFilter The magnification filter of the sampler.
+     * @param mipMapFilter The mipmap filter of the sampler.
+     * @param addressModeU The address mode of the sampler for the U coordinate.
+     * @param addressModeV The address mode of the sampler for the V coordinate.
+     * @param addressModeW The address mode of the sampler for the W coordinate.
+     * @param compareFunction The compare function of the sampler. This is used for shadow samplers.
+     * @param _anisotropy The anisotropy level of the sampler. This is used for anisotropic filtering. The default value is 1, which means no anisotropic filtering.
+     * @param label The label of the sampler. This is used for debugging purposes and can be viewed in graphics debuggers like SpectorJS.
+     * @returns
+     */
+    public create(gl: WebGL2RenderingContext,
+                  minFilter: SamplerFilter = SamplerFilter.LINEAR,
+                  magFilter: SamplerFilter = SamplerFilter.LINEAR,
+                  mipMapFilter: MipMapSamplerFilter = MipMapSamplerFilter.NONE,
+                  addressModeU: SamplerAddressMode = SamplerAddressMode.CLAMP_TO_EDGE,
+                  addressModeV: SamplerAddressMode = SamplerAddressMode.CLAMP_TO_EDGE,
+                  addressModeW: SamplerAddressMode = SamplerAddressMode.CLAMP_TO_EDGE,
+                  compareFunction: SamplerCompareFunction = SamplerCompareFunction.Never,
+                  _anisotropy: number = 1,
+        label: string = "") : WebGLSampler
+    {
+        const sampler = gl.createSampler();
+
+        const glMinFilter = WebGlConverter.convertMinFIlter(gl, minFilter, mipMapFilter);
+        const glMagFilter = WebGlConverter.convertMagFilter(gl, magFilter);
+        const glAddressModeU = WebGlConverter.convertAddressMode(gl, addressModeU);
+        const glAddressModeV = WebGlConverter.convertAddressMode(gl, addressModeV);
+        const glAddressModeW = WebGlConverter.convertAddressMode(gl, addressModeW);
+        
+
+        gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, glMinFilter);
+        gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, glMagFilter);
+        gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, glAddressModeU);
+        gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, glAddressModeV);
+        gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_R, glAddressModeW);
+        if (compareFunction != SamplerCompareFunction.Never)
+        {
+            // gl.samplerParameteri(sampler, gl.TEXTURE_COMPARE_FUNC, WebGLConverter.convertCompareFunction(gl, compareFunction));
+            gl.samplerParameteri(sampler, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE);
+        }
+        else
+        {
+            gl.samplerParameteri(sampler, gl.TEXTURE_COMPARE_MODE, gl.NONE);
+        }
+
+        if(label && label.length > 0)
+        {
+            SpectorJSUtilities.setLabel(sampler, label);
+        }
+
+        //if (anisotropy > 1)
+        //{
+        //    // Check if anisotropic filtering is supported
+        //    if (gl.Extensions.Contains("GL_EXT_texture_filter_anisotropic"))
+        //    {
+        //        float maxAnisotropy = gl.GetFloat(GLEnum.MaxTextureMaxAnisotropyExt);
+        //        float anisotropyLevel = Math.Min(anisotropy, maxAnisotropy);
+        //        gl.SamplerParameter(sampler, GLEnum.TextureMaxAnisotropyExt, anisotropyLevel);
+        //    }
+        //    else
+        //    {
+        //        Console.WriteLine("Anisotropic filtering is not supported on this device.");
+        //    }
+        //}
+        return sampler;
+    }
+}

package/src/webgl/utilities/WebGlShaderUtilities.ts

@@ -0,0 +1,48 @@
+
+/**
+ * This module provides utility functions for working with WebGL shaders, including shader creation and compilation.
+ */
+export class WebGlShaderUtilities {
+
+    /**
+     * Creates a WebGL shader of the specified type using the provided shader source code.
+     * @param gl The WebGL2 rendering context.
+     * @param shaderSource The source code of the shader.
+     * @param shaderType The type of the shader (e.g., gl.VERTEX_SHADER or gl.FRAGMENT_SHADER).
+     * @returns The compiled WebGLShader object.
+     */
+    public create(gl: WebGL2RenderingContext, shaderSource: string ,shaderType : GLenum): WebGLShader {
+        const shader = gl.createShader(shaderType);
+        if (!shader) {
+            throw new Error("Failed to create shader.");
+        }
+        gl.shaderSource(shader, shaderSource);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            const infoLog = gl.getShaderInfoLog(shader);
+            gl.deleteShader(shader);
+            throw new Error(`Failed to compile shader: ${infoLog}`);
+        }
+        return shader;
+    }
+
+    /**
+     * Creates a vertex shader using the provided shader source code.
+     * @param gl The WebGL2 rendering context.
+     * @param shaderSource The source code of the vertex shader.
+     * @returns The compiled WebGLShader object representing the vertex shader.
+     */
+    public createVertexShader(gl: WebGL2RenderingContext, shaderSource: string): WebGLShader {
+       return this.create(gl, shaderSource, gl.VERTEX_SHADER);
+    }
+
+    /**
+     * Creates a fragment shader using the provided shader source code.
+     * @param gl The WebGL2 rendering context.
+     * @param shaderSource The source code of the fragment shader.
+     * @returns The compiled WebGLShader object representing the fragment shader.
+     */
+    public createFragmentShader(gl: WebGL2RenderingContext, shaderSource: string): WebGLShader {
+        return this.create(gl, shaderSource, gl.FRAGMENT_SHADER);
+    }
+}

package/src/webgl/utilities/WebGlTextureUtilities.ts

@@ -0,0 +1,162 @@
+import {WebGlConverter} from "./WebGlConverter.ts";
+import {TextureFormat} from "ris-framework-api";
+import {vec2} from "gl-matrix";
+
+/**
+ * The utilities for working with WebGL textures.
+ */
+export class WebGlTextureUtilities {
+
+    /**
+     * Creates a 2D texture.
+     * @param gl The WebGL rendering context.
+     * @param width The width of the texture.
+     * @param height The height of the texture.
+     * @param data The texture data. If null, an uninitialized texture will be created.
+     * @param textureFormat The format of the texture. If not specified, BGRA_8_UNORM will be used.
+     * @param useMipMaps True to generate mipmaps for the texture, false otherwise. By default, it is false.
+     * @param anisotropy The level of anisotropic filtering to use when sampling the texture. A value of 1 means no anisotropic filtering, while higher values (e.g., 4, 8, 16) indicate increasing levels of anisotropic filtering. By default, it is 1 (no anisotropic filtering).
+     * @param label The label for the texture. This can be used for debugging purposes to identify the texture in graphics debuggers.
+     * @returns The created WebGL texture.
+     */
+    public createTexture2D(
+        gl: WebGL2RenderingContext,
+        width: number, height: number,
+        data: Uint8Array[] | HTMLImageElement[] | null = null,
+        textureFormat = TextureFormat.RGBA_8_UNORM,
+        useMipMaps = false,
+        anisotropy = 1.0,
+        label: string | null = null
+    ): WebGLTexture {
+
+        const texture = gl.createTexture();
+
+        if (label != null) {
+            (texture as any).__SPECTOR_Metadata = {
+                name: label,
+            };
+        }
+
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+
+        const internalFormat = WebGlConverter.convertInternalFormat(gl, textureFormat);
+        const format = WebGlConverter.convertToPixelFormat(gl, textureFormat);
+
+        let mipLevels = data?.length ?? 1;
+        // We can generate only if mip levels are not provided.
+        const generateMipMaps = useMipMaps && mipLevels <= 1;
+        if (generateMipMaps) {
+            mipLevels = Math.floor(Math.log2(Math.max(width, height))) + 1;
+        }
+
+        gl.texStorage2D(gl.TEXTURE_2D, mipLevels, internalFormat, width, height);
+
+        if(data) {
+            for (let i = 0; i < mipLevels; i++) {
+
+                const mipLevelData = data[i];
+                const levelWidth = width >> i;
+                const levelHeight = height >> i;
+
+                if (mipLevelData instanceof HTMLImageElement) {
+                    gl.texSubImage2D(gl.TEXTURE_2D, i, 0, 0, levelWidth, levelHeight, format, gl.UNSIGNED_BYTE, mipLevelData);
+                } else if (mipLevelData instanceof Uint8Array) {
+                    gl.texSubImage2D(gl.TEXTURE_2D, i, 0, 0, levelWidth, levelHeight, format, gl.UNSIGNED_BYTE, mipLevelData);
+                } else if (mipLevelData) {
+                    gl.texSubImage2D(gl.TEXTURE_2D, i, 0, 0, levelWidth, levelHeight, format, gl.UNSIGNED_BYTE, mipLevelData);
+                }
+                else if(!mipLevelData) {
+                    // If not must be empty array, so we can safely ignore it.
+                }
+                else {
+                    throw new Error("unsupported data type");
+                }
+            }
+        }
+
+        // Generate mipmaps.
+        if (generateMipMaps) {
+            gl.generateMipmap(gl.TEXTURE_2D);
+        }
+
+        // Set anisotropy.
+        if (anisotropy > 1.0) {
+            throw new Error("Not implemented yet.");
+            //OpenGLESUtilities.Anisotropy.SetAnisotropy(gl, texture, anisotropy);
+        }
+
+        return texture;
+    }
+
+    /**
+     * Creates a compressed 2D texture.
+     * @param gl The WebGL rendering context.
+     * @param dimension The dimensions of the texture.
+     * @param blockSize The block size of a compressed format.
+     * @param data The texture data. If null, an uninitialized texture will be created.
+     * @param textureFormat The format of the texture. If not specified, BGRA_8_UNORM will be used.
+     * @param anisotropy The level of anisotropic filtering to use when sampling the texture. A value of 1 means no anisotropic filtering, while higher values (e.g., 4, 8, 16) indicate increasing levels of anisotropic filtering. By default, it is 1 (no anisotropic filtering).
+     * @param label The label for the texture. This can be used for debugging purposes to identify the texture in graphics debuggers.
+     * @returns The created WebGL texture.
+     */
+    public createCompressedTexture2D(
+        gl: WebGL2RenderingContext,
+        dimension: vec2, _blockSize: vec2,
+        data: Uint8Array[] | null = null,
+        label: string | null = null,
+        textureFormat = TextureFormat.RGBA_8_UNORM,
+        anisotropy = 1.0,
+    ): WebGLTexture {
+
+        const baseWidth = dimension[0];
+        const baseHeight = dimension[1];
+        const mipLevels = data?.length ?? 1;
+
+        const texture = gl.createTexture();
+
+        if (label != null) {
+            (texture as any).__SPECTOR_Metadata = {
+                name: label,
+            };
+        }
+
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+
+        const internalFormat = WebGlConverter.convertInternalFormat(gl, textureFormat);
+
+        gl.texStorage2D(gl.TEXTURE_2D, mipLevels, internalFormat, baseWidth, baseHeight);
+
+        if(data && data.length > 0) {
+
+            let width = baseWidth;
+            let height = baseHeight;
+
+            for (let i = 0; i < mipLevels; i++) {
+
+                const mipLevelData = data[i];
+
+                if (mipLevelData instanceof Uint8Array) {
+                    gl.compressedTexSubImage2D(gl.TEXTURE_2D, i,  0, 0, width, height, internalFormat, mipLevelData, 0);
+                } else {
+                    throw new Error("unsupported data type");
+                }
+
+                width /= 2;
+                height /= 2;
+            }
+        }
+
+        // Generate mipmaps.
+        if (mipLevels > 1) {
+            gl.generateMipmap(gl.TEXTURE_2D);
+        }
+
+        // Set anisotropy.
+        if (anisotropy > 1.0) {
+            throw new Error("Not implemented yet.");
+            //OpenGLESUtilities.Anisotropy.SetAnisotropy(gl, texture, anisotropy);
+        }
+
+        return texture;
+    }
+}

package/src/webgl/utilities/WebGlUtilities.ts

@@ -0,0 +1,71 @@
+import { WebGLBlendingUtilities } from "./webgl-blending-utilities";
+import { WebGlBufferUtilities } from "./WebGlBufferUtilities.ts";
+import { WebGLCullingUtilities } from "./webgl-culling-utilities";
+import { WebGLFilterAnisotropicUtilities } from "./webgl-filter-anisotropic-utilities";
+import { WebGlFrameBufferUtilities } from "./WebGlFrameBufferUtilities.ts";
+import { WebGLProgramUtilities } from "./webgl-program-utilities";
+import { WebGLRenderbufferUtilities } from "./webgl-renderbuffer-utilities";
+import { WebGlSamplerUtilities } from "./WebGlSamplerUtilities.ts";
+import { WebGlShaderUtilities } from "./WebGlShaderUtilities.ts";
+import { WebGlTextureUtilities } from "./WebGlTextureUtilities.ts";
+
+/**
+ * The utility class for WebGL operations.
+ */
+export class WebGlUtilities {
+
+    /**
+     * The WebGL blending utilities.
+     */
+    public static readonly blending = new WebGLBlendingUtilities();
+
+    /**
+     * The WebGL anisotropic filtering utilities.
+     */
+    public static readonly anisotropy = new WebGLFilterAnisotropicUtilities();
+
+    /**
+     * The WebGL culling utilities.
+     */
+    public static readonly culling = new WebGLCullingUtilities();
+
+    /**
+     * The WebGL texture utilities.
+     */
+    public static readonly texture = new WebGlTextureUtilities();
+
+    /**
+     * The WebGL framebuffer utilities.
+     */
+    public static readonly framebuffer = new WebGlFrameBufferUtilities();
+
+    /**
+     * The WebGL render buffer utilities.
+     */
+    public static readonly renderbuffer = new WebGLRenderbufferUtilities();
+
+    /**
+     * The WebGL buffer utilities.
+     */
+    public static readonly buffer = new WebGlBufferUtilities();
+
+    /**
+     * The WebGL render buffer utilities.
+     */
+    public static readonly renderBuffer = new WebGLRenderbufferUtilities();
+
+    /**
+     * The WebGL sampler utilities.
+     */
+    public static readonly sampler = new WebGlSamplerUtilities();
+
+    /**
+     * The WebGL shader utilities.
+     */
+    public static readonly shader = new WebGlShaderUtilities();
+
+    /**
+     * The WebGL program utilities.
+     */
+    public static readonly program = new WebGLProgramUtilities();
+}

package/src/webgl/utilities/spector-js-utilities.ts

@@ -0,0 +1,13 @@
+export class SpectorJSUtilities {
+
+    /**
+     * Sets the label for a WebGL object to be used by Spector.js.
+     * @param target The WebGL object to set the label for (e.g., WebGLBuffer, WebGLTexture, WebGLFramebuffer, etc.).
+     * @param label The label to set for the WebGL object. This will be displayed in Spector.js for easier identification.
+     */
+    public static setLabel(target: any, label: string): void {
+        if (target) {
+            (target as any).__SPECTOR_Metadata = { name: label };
+        }
+    }
+}

package/src/webgl/utilities/webgl-blending-utilities.ts

@@ -0,0 +1,85 @@
+/**
+ * The utility class for WebGL blending operations.
+ */
+export class WebGLBlendingUtilities {
+    /**
+     * Enables blending with the specified parameters.
+     * @param gl The WebGL2RenderingContext context.
+     * @param colorFunc The color function. By default, it is FUNC_ADD.
+     * @param srcColorFactor The source color factor. By default, it is SRC_ALPHA.
+     * @param dstColorFactor The destination color factor. By default, it is ONE_MINUS_SRC_ALPHA.
+     * @param alphaFunc The alpha function. By default, it is FUNC_ADD.
+     * @param srcAlphaFactor The source alpha factor. By default, it is SRC_ALPHA.
+     * @param dstAlphaFactor The destination alpha factor. By default, it is ONE_MINUS_SRC_ALPHA.
+     */
+    public enableBlend(
+        gl: WebGL2RenderingContext,
+        colorFunc: number | null = null,
+        srcColorFactor: number | null = null,
+        dstColorFactor: number | null = null,
+        alphaFunc: number | null = null,
+        srcAlphaFactor: number | null = null,
+        dstAlphaFactor: number | null = null,
+    ): void {
+        colorFunc = colorFunc ?? gl.FUNC_ADD;
+        srcColorFactor = srcColorFactor ?? gl.SRC_ALPHA;
+        dstColorFactor = dstColorFactor ?? gl.ONE_MINUS_SRC_ALPHA;
+        alphaFunc = alphaFunc ?? gl.FUNC_ADD;
+        srcAlphaFactor = srcAlphaFactor ?? gl.SRC_ALPHA;
+        dstAlphaFactor = dstAlphaFactor ?? gl.ONE_MINUS_SRC_ALPHA;
+
+        gl.enable(gl.BLEND);
+        gl.blendFuncSeparate(
+            srcColorFactor,
+            dstColorFactor,
+            srcAlphaFactor,
+            dstAlphaFactor,
+        );
+        gl.blendEquationSeparate(colorFunc, alphaFunc);
+    }
+
+
+    /*
+    public setBlend(
+        gl: WebGL2RenderingContext,
+        blendState: WebGlBlendState,
+    ): void {
+        if (!blendState.blendingEnabled) {
+            gl.disable(gl.BLEND);
+            return;
+        }
+
+        const color = blendState.color;
+        const alpha = blendState.alpha;
+        const colorFunc = WebGLConverter.convertBlendOperation(gl, color.operation);
+        const alphaFunc = WebGLConverter.convertBlendOperation(gl, alpha.operation);
+        const srcAlphaFactor = WebGLConverter.convertBlendFactor(
+            gl,
+            alpha.srcFactor,
+        );
+        const dstAlphaFactor = WebGLConverter.convertBlendFactor(
+            gl,
+            alpha.dstFactor,
+        );
+        const srcColorFactor = WebGLConverter.convertBlendFactor(
+            gl,
+            color.srcFactor,
+        );
+        const dstColorFactor = WebGLConverter.convertBlendFactor(
+            gl,
+            color.dstFactor,
+        );
+
+        gl.enable(gl.BLEND);
+        gl.blendFuncSeparate(
+            srcColorFactor,
+            dstColorFactor,
+            srcAlphaFactor,
+            dstAlphaFactor,
+        );
+        gl.blendEquationSeparate(colorFunc, alphaFunc);
+    }
+
+
+     */
+}

package/src/webgl/utilities/webgl-culling-utilities.ts

@@ -0,0 +1,23 @@
+import { Culling } from "../../core/renderer/enums";
+import { WebGlConverter } from "./WebGlConverter.ts";
+
+/**
+ * The WebGL culling utilities.
+ */
+export class WebGLCullingUtilities {
+
+    /**
+     * Sets the culling mode.
+     * @param gl The WebGL2RenderingContext.
+     * @param culling The culling mode.
+     */
+    public setCulling(gl: WebGL2RenderingContext, culling: Culling) {
+        if (culling == Culling.None) {
+            gl.disable(gl.CULL_FACE);
+        }
+        else {
+            gl.enable(gl.CULL_FACE);
+            gl.cullFace(WebGlConverter.convertCulling(gl, culling));
+        }
+    }
+}

package/src/webgl/utilities/webgl-filter-anisotropic-utilities.ts

@@ -0,0 +1,37 @@
+/**
+ * The utility class for WebGL anisotropic filtering operations.
+ */
+export class WebGLFilterAnisotropicUtilities {
+    /**
+     * The max anisotropy extension string.
+     */
+    private MAX_ANISOTROPY_EXT: string = "EXT_texture_filter_anisotropic";
+
+    private _extension: any;
+
+    /**
+     * Gets the max anisotropy.
+     * @param gl The WebGL2 rendering context.
+     * @returns The maximum supported level of anisotropic filtering. <c>0</c> if not supported. 
+     */
+    public getMaxAnisotropy(gl: WebGL2RenderingContext): number {
+        this._extension = gl.getExtension(this.MAX_ANISOTROPY_EXT);
+
+        if (this._extension) {
+            return gl.getParameter(this._extension.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
+        }
+
+        return 0;
+    }
+
+    /**
+     * Sets the anisotropy filtering level for texture.
+     * @param gl The WebGL2 rendering context.
+     * @param texture The WebGL texture.
+     * @param anisotropy The level of anisotropic filtering
+     */
+    public setAnisotropy(gl: WebGL2RenderingContext, texture: WebGLTexture, anisotropy: number) {
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texParameterf(gl.TEXTURE_2D, this._extension.MAX_TEXTURE_MAX_ANISOTROPY_EXT, anisotropy);
+    }
+}

package/src/webgl/utilities/webgl-program-utilities.ts

@@ -0,0 +1,29 @@
+/**
+ * This module provides utility functions for working with WebGL programs, such as creating and linking shader programs.
+ */
+export class WebGLProgramUtilities {
+
+    /**
+     * Creates a WebGL program with the given vertex shader and fragment shader.
+     * @param gl The WebGL2 rendering context.
+     * @param vertexShader The vertex shader to be attached to the program.
+     * @param fragmentShader The fragment shader to be attached to the program.
+     * @returns The linked WebGLProgram object.
+     */
+    public create(gl: WebGL2RenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader): WebGLProgram {
+        const program = gl.createProgram();
+        if (!program) {
+            throw new Error("Failed to create program.");
+        }
+        gl.attachShader(program, vertexShader);
+        gl.attachShader(program, fragmentShader);
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            const infoLog = gl.getProgramInfoLog(program);
+            gl.deleteProgram(program);
+            throw new Error(`Failed to link program: ${infoLog}`);
+        }
+        return program;
+    }
+
+}

package/src/webgl/utilities/webgl-render-buffer-utilities.ts

@@ -0,0 +1,23 @@
+import type { TextureFormat } from "ris-framework-api";
+import { WebGlConverter } from "./WebGlConverter.ts";
+
+export class WebGLRenderBufferUtilities {
+
+
+    public create(gl: WebGL2RenderingContext, internalFormat: TextureFormat, width: number, height: number, label: string | null = null): WebGLRenderbuffer {
+
+        const glFormat = WebGlConverter.convertInternalFormat(gl, internalFormat);
+        const renderBuffer = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer);
+        gl.renderbufferStorage(gl.RENDERBUFFER,
+            glFormat,
+            width,
+            height);
+
+        if (label !== null && label !== undefined && label !== "") {
+            (renderBuffer as any).__SPECTOR_Metadata = { name: label };
+        }
+
+        return renderBuffer;
+    }
+}

package/src/webgl/utilities/webgl-renderbuffer-utilities.ts

@@ -0,0 +1,35 @@
+import type { TextureFormat } from "ris-framework-api";
+import { SpectorJSUtilities } from "./spector-js-utilities";
+import { WebGlConverter } from "./WebGlConverter.ts";
+
+/**
+ * The utility class for WebGL render buffer operations. It provides methods for creating render buffers with specified formats, dimensions, and labels. Render buffers are used in WebGL for off-screen rendering, particularly for depth and stencil attachments in framebuffers. This class abstracts the details of creating and configuring render buffers, making it easier to manage them in a WebGL application.
+ */
+export class WebGLRenderbufferUtilities {
+    /**
+     * Creates a render buffer with the specified internal format, width, height, and label.
+     * @param gl The WebGL2 rendering context.
+     * @param internalFormat The internal format of the render buffer, which determines the type of data stored in the buffer (e.g., depth, stencil, or depth-stencil).
+     * @param width The width of the render buffer in pixels.
+     * @param height The height of the render buffer in pixels.
+     * @param label The label of the render buffer, which can be used for debugging purposes. It is optional and can be null or undefined.
+     * @returns The created WebGLRenderbuffer object.
+     */
+    public create(gl: WebGL2RenderingContext, internalFormat: TextureFormat, width: number, height: number, label: string | null | undefined): WebGLRenderbuffer {
+        const intFormat = WebGlConverter.convertInternalFormat(gl, internalFormat);
+
+        const renderBuffer = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer);
+        gl.renderbufferStorage(gl.RENDERBUFFER,
+            intFormat,
+            width,
+            height);
+
+        if (label) {
+            SpectorJSUtilities.setLabel(renderBuffer, label);
+        }
+
+        return renderBuffer;
+    }
+
+}