ris-framework 0.1.0-dev.4

package/src/webgl/render-pipelines/material/WebGlUnlitRenderPipeline.ts

@@ -0,0 +1,197 @@
+import type {
+    IFramework, IPrimitiveState,
+    ISampler,
+    ITexture2D,
+    IUniformBuffer, IUnlitRenderPipeline,
+    IVertexBuffer
+} from "ris-framework-api";
+import {VertexBufferLayout} from "../../../core/rendering/vertex-buffer-layout";
+import type {WebGlUniformBuffer} from "../../buffers/WebGlUniformBuffer.ts";
+import { asWebGLUniformBuffer} from "../../cast/cast";
+import WebGlShaderModule from "../../shader/WebGlShaderModule.ts";
+import {WebGlTexture2D} from "../../texture/WebGlTexture2D.ts";
+import {WebGlVertexBuffer} from '../../buffers/WebGlVertexBuffer.ts';
+import {AWebGlRenderPipeline} from "../AWebGlRenderPipeline.ts";
+import type {WebGLIndexBuffer} from "../../buffers/webgl-index-buffer";
+import {type IIndexBuffer, IndexBufferType} from "ris-framework-api";
+import type {WebGlSampler} from "../../sampler/webgl-sampler.ts";
+
+/**
+ * The WebGL implementation of the sprite render pipeline.
+ */
+export class WebGlUnlitRenderPipeline extends AWebGlRenderPipeline implements IUnlitRenderPipeline {
+
+    private static readonly CAMERA_BINDING_POINT = 0;
+    private static readonly  MODEL_BINDING_POINT = 1;
+    private static readonly MATERIAL_BINDING_POINT = 2;
+
+    private _texture: WebGlTexture2D = null!;
+    private _sampler?: WebGlSampler;
+    private _projectionViewBuffer: WebGlUniformBuffer;
+    private _modelBuffer: WebGlUniformBuffer;
+    private _materialBuffer: WebGlUniformBuffer;
+    private _cameraBlockIndex: number = -1;
+    private _modelBlockIndex: number = -1;
+    private  _materialBlockIndex : number = -1;
+    private _buffersArray: WebGLBuffer[] = [null!];
+    private _lastVertexBuffer: WebGlVertexBuffer | null = null;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param projectionViewBuffer The projection view buffer.
+     * @param modelBuffer The model buffer.
+     * @param materialBuffer The material buffer.
+     * @param primitiveState The primitive state.
+     */
+    constructor(framework: IFramework,
+                projectionViewBuffer: IUniformBuffer,
+                modelBuffer: IUniformBuffer,
+                materialBuffer: IUniformBuffer,
+                primitiveState?: IPrimitiveState,
+    ) {
+        super(framework, primitiveState);
+        this._projectionViewBuffer = projectionViewBuffer as WebGlUniformBuffer;
+        this._modelBuffer = modelBuffer as WebGlUniformBuffer;
+        this._materialBuffer = materialBuffer as WebGlUniformBuffer;
+    }
+
+
+    /** @inheritdoc */
+    public get projectionViewBuffer(): IUniformBuffer {
+        return this._projectionViewBuffer;
+    }
+
+    /** @inheritdoc */
+    public set projectionViewBuffer(value: IUniformBuffer) {
+        this._projectionViewBuffer = asWebGLUniformBuffer(value);
+    }
+
+    /** @inheritdoc */
+    public get modelBuffer(): IUniformBuffer {
+        return this._modelBuffer;
+    }
+
+    /** @inheritdoc */
+    public set modelBuffer(value: IUniformBuffer) {
+        this._modelBuffer = asWebGLUniformBuffer(value);
+    }
+
+    /** @inheritdoc */
+    public get materialBuffer(): IUniformBuffer {
+        return this._materialBuffer;
+    }
+
+    /** @inheritdoc */
+    public set materialBuffer(value: IUniformBuffer) {
+        this._materialBuffer = asWebGLUniformBuffer(value);
+    }
+
+    /** @inheritdoc */
+    public get diffuseTexture(): ITexture2D  {
+        return this._texture;
+    }
+
+    /** @inheritdoc */
+    public set diffuseTexture(value: ITexture2D ) {
+        this._texture = value as WebGlTexture2D;
+    }
+
+    /** @inheritdoc */
+    public get diffuseTextureSampler(): ISampler | undefined {
+        return this._sampler;
+    }
+
+    public set diffuseTextureSampler(value: ISampler | undefined) {
+        this._sampler = value as WebGlSampler | undefined;
+    }
+
+    /** @inheritdoc */
+    public override initialize(): void {
+
+        const module = this._framework.content.loadShaderModule("unlit_material") as WebGlShaderModule;
+        this._program = module.program!;
+        this._createResources();
+        this.vertexBufferLayouts = [VertexBufferLayout.createFloat3Float4Float2Layout()];
+        super.initialize();
+    }
+
+    private _createResources(): void {
+        {
+            this._texture = WebGlTexture2D.getOrCreateDefault(this._framework);
+
+            this._cameraBlockIndex = this._gl.getUniformBlockIndex(this._program, "CameraBuffer");
+            this._gl.uniformBlockBinding(this._program, this._cameraBlockIndex, WebGlUnlitRenderPipeline.CAMERA_BINDING_POINT);
+
+            this._modelBlockIndex = this._gl.getUniformBlockIndex(this._program, "ModelBuffer");
+            this._gl.uniformBlockBinding(this._program, this._modelBlockIndex, WebGlUnlitRenderPipeline.MODEL_BINDING_POINT);
+
+            this._materialBlockIndex = this._gl.getUniformBlockIndex(this._program, "MaterialBuffer");
+            this._gl.uniformBlockBinding(this._program, this._materialBlockIndex, WebGlUnlitRenderPipeline.MATERIAL_BINDING_POINT);
+        }
+    }
+
+
+    /** @inheritdoc */
+    protected _provideBuffers(): WebGLBuffer[] | undefined | null {
+        if (this._lastVertexBuffer === null) {
+            return null;
+        }
+
+        this._buffersArray[0] = this._lastVertexBuffer.buffer!;
+        return this._buffersArray;
+    }
+
+    /** @inheritdoc */
+    public render(vertexBuffer: IVertexBuffer, indexBuffer: IIndexBuffer, indicesCount: number = -1, indicesOffset: number = 0): void {
+
+        if (indicesCount == 0) {
+            return;
+        }
+
+        const webGlVertexBuffer = vertexBuffer as WebGlVertexBuffer;
+        const webGlIndexBuffer = indexBuffer as WebGLIndexBuffer;
+        const webGlSampler = this._sampler ?? this._defaultTextureSampler;
+
+        this.primitiveState.apply(this._gl);
+        this._blendState.apply(this._gl);
+
+        // if it was changed, we need to create a new vao.
+        if (this._lastVertexBuffer != webGlVertexBuffer) {
+            // Create a new VAO. Internally deletes the old one.
+            this._lastVertexBuffer = webGlVertexBuffer;
+            this._createVertexArrayObject();
+        }
+
+        this._gl.useProgram(this._program);
+        // Bind the vao. It contains all the information about the vertex buffer layout ( vertices + instances)
+        this._gl.bindVertexArray(this._vertexArrayObject);
+        this._gl.bindBuffer(this._gl.ELEMENT_ARRAY_BUFFER, webGlIndexBuffer.buffer);
+        this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+            WebGlUnlitRenderPipeline.CAMERA_BINDING_POINT,
+            this._projectionViewBuffer.glBuffer!);
+        this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+            WebGlUnlitRenderPipeline.MODEL_BINDING_POINT,
+            this._modelBuffer.glBuffer!);
+        this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+            WebGlUnlitRenderPipeline.MATERIAL_BINDING_POINT,
+            this._materialBuffer.glBuffer!);
+        this._gl.activeTexture(this._gl.TEXTURE0);
+        this._gl.bindTexture(this._gl.TEXTURE_2D, this._texture!.glTexture);
+        this._gl.bindSampler(0, webGlSampler.glSampler);
+
+        // We can only really use two types uint16 and uint32. Boolean check to see which one to use.
+        const type = indexBuffer.type == IndexBufferType.UINT_16
+            ? this._gl.UNSIGNED_SHORT
+            : this._gl.UNSIGNED_INT;
+
+        // api.PolygonMode(GLEnum.FrontAndBack, GLEnum.Line);
+
+        // Either draw all indices or a specific amount. If indicesCount is -1, draw all as defined by the index buffer.
+        const toIndices = indicesCount > 0 ? indicesCount : indexBuffer.indicesCount;
+        const fromIndices = indicesOffset * indexBuffer.elementByteSize;
+
+        this._gl.drawElements(this.primitiveState.glPrimitiveType, toIndices, type, fromIndices);
+    }
+
+}

package/src/webgl/render-pipelines/sprite/WebGlSpriteRenderPipeline.ts

@@ -0,0 +1,148 @@
+import type {
+    IFramework,
+    ISampler,
+    ISpriteRenderPipeline,
+    ITexture2D,
+    IUniformBuffer,
+    IVertexBuffer
+} from "ris-framework-api";
+import {VertexBufferLayout} from "../../../core/rendering/vertex-buffer-layout";
+import type {WebGlUniformBuffer} from "../../buffers/WebGlUniformBuffer.ts";
+import {asWebGLTexture2D, asWebGLUniformBuffer} from "../../cast/cast";
+import WebGlShaderModule from "../../shader/WebGlShaderModule.ts";
+import {WebGlTexture2D} from "../../texture/WebGlTexture2D.ts";
+import {WebGlVertexBuffer} from '../../buffers/WebGlVertexBuffer.ts';
+import {AWebGlRenderPipeline} from "../AWebGlRenderPipeline.ts";
+import type {WebGLIndexBuffer} from "../../buffers/webgl-index-buffer";
+import {type IIndexBuffer, IndexBufferType} from "ris-framework-api";
+import type {WebGlSampler} from "../../sampler/webgl-sampler.ts";
+
+/**
+ * The WebGL implementation of the sprite render pipeline.
+ */
+export class WebGlSpriteRenderPipeline extends AWebGlRenderPipeline implements ISpriteRenderPipeline {
+
+    private static readonly CAMERA_BINDING_POINT: number = 0;
+
+    private _texture: WebGlTexture2D = null!;
+    private _sampler?: WebGlSampler;
+    private _projectionViewBuffer: WebGlUniformBuffer;
+    private _cameraBlockIndex: number = -1;
+    private _buffersArray: WebGLBuffer[] = [null!];
+    private _lastVertexBuffer: WebGlVertexBuffer | null = null;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param projectionViewBuffer The projection view buffer.
+     */
+    constructor(framework: IFramework, projectionViewBuffer: IUniformBuffer) {
+        super(framework);
+        this._projectionViewBuffer = asWebGLUniformBuffer(projectionViewBuffer);
+    }
+
+    /** @inheritdoc */
+    public get projectionViewBuffer(): IUniformBuffer {
+        return this._projectionViewBuffer;
+    }
+
+    /** @inheritdoc */
+    public set projectionViewBuffer(value: IUniformBuffer) {
+        this._projectionViewBuffer = asWebGLUniformBuffer(value);
+    }
+
+    /** @inheritdoc */
+    public get spriteTexture(): ITexture2D  {
+        return this._texture;
+    }
+
+    /** @inheritdoc */
+    public set spriteTexture(value: ITexture2D ) {
+        this._texture = asWebGLTexture2D(value!);
+    }
+
+    /** @inheritdoc */
+    public get textureSampler(): ISampler | undefined {
+        return this._sampler;
+    }
+
+    public set textureSampler(value: ISampler | undefined) {
+        this._sampler = value as WebGlSampler | undefined;
+    }
+
+    /** @inheritdoc */
+    public override initialize(): void {
+
+        const module = this._framework.content.loadShaderModule("sprite") as WebGlShaderModule;
+        this._program = module.program!;
+        this._createResources();
+        this.vertexBufferLayouts = [VertexBufferLayout.createFloat3Float4Float2Layout()];
+        super.initialize();
+    }
+
+    private _createResources(): void {
+        {
+            this._texture = WebGlTexture2D.getOrCreateDefault(this._framework);
+
+            this._cameraBlockIndex = this._gl.getUniformBlockIndex(this._program, "CameraBuffer");
+            this._gl.uniformBlockBinding(this._program, this._cameraBlockIndex, WebGlSpriteRenderPipeline.CAMERA_BINDING_POINT);
+        }
+    }
+
+
+    /** @inheritdoc */
+    protected _provideBuffers(): WebGLBuffer[] | undefined | null {
+        if (this._lastVertexBuffer === null) {
+            return null;
+        }
+
+        this._buffersArray[0] = this._lastVertexBuffer.buffer!;
+        return this._buffersArray;
+    }
+
+    /** @inheritdoc */
+    public render(vertexBuffer: IVertexBuffer, indexBuffer: IIndexBuffer, indicesCount: number = -1, indicesOffset: number = 0): void {
+
+        if (indicesCount == 0) {
+            return;
+        }
+
+        const webGlVertexBuffer = vertexBuffer as WebGlVertexBuffer;
+        const webGlIndexBuffer = indexBuffer as WebGLIndexBuffer;
+        const webGlSampler = this._sampler ?? this._defaultTextureSampler;
+
+
+        // this.primitiveState.apply(this._gl);
+        //  this._blendState.apply(this._gl);
+
+        // if it was changed, we need to create a new vao.
+        if (this._lastVertexBuffer != webGlVertexBuffer) {
+            // Create a new VAO. Internally deletes the old one.
+            this._lastVertexBuffer = webGlVertexBuffer;
+            this._createVertexArrayObject();
+        }
+
+        this._gl.useProgram(this._program);
+        // Bind the vao. It contains all the information about the vertex buffer layout ( vertices + instances)
+        this._gl.bindVertexArray(this._vertexArrayObject);
+        this._gl.bindBuffer(this._gl.ELEMENT_ARRAY_BUFFER, webGlIndexBuffer.buffer);
+        this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER, WebGlSpriteRenderPipeline.CAMERA_BINDING_POINT, this._projectionViewBuffer.glBuffer!);
+        this._gl.activeTexture(this._gl.TEXTURE0);
+        this._gl.bindTexture(this._gl.TEXTURE_2D, this._texture!.glTexture);
+        this._gl.bindSampler(0, webGlSampler.glSampler);
+
+        // We can only really use two types uint16 and uint32. Boolean check to see which one to use.
+        const type = indexBuffer.type == IndexBufferType.UINT_16
+            ? this._gl.UNSIGNED_SHORT
+            : this._gl.UNSIGNED_INT;
+
+        // api.PolygonMode(GLEnum.FrontAndBack, GLEnum.Line);
+
+        // Either draw all indices or a specific amount. If indicesCount is -1, draw all as defined by the index buffer.
+        const toIndices = indicesCount > 0 ? indicesCount : indexBuffer.indicesCount;
+        const fromIndices = indicesOffset * indexBuffer.elementByteSize;
+
+        this._gl.drawElements(this.primitiveState.glPrimitiveType, toIndices, type, fromIndices);
+    }
+
+}

package/src/webgl/rendering/webgl-vertex-attribute.ts

@@ -0,0 +1,16 @@
+
+/**
+ * The WebGL implementation of a vertex attribute.
+ */
+export class WebGLVertexAttribute {
+    constructor(
+        public gl: WebGL2RenderingContext,
+    ) {
+
+    }
+
+    /** @inheritdoc */
+    initialize(): void {
+        // No initialization is needed for WebGL vertex attributes.
+    }
+}

package/src/webgl/rendering/webgl-vertex-buffer-layout.ts

@@ -0,0 +1,64 @@
+/**
+ * The WebGL implementation of a vertex buffer layout.
+ */
+export class WebGLVertexBufferLayout {
+
+    private readonly _gl: WebGL2RenderingContext;
+    private _bufferTarget: number = 0;
+
+    /**
+     * The constructor for the WebGLVertexBufferLayout class.
+     * @param gl The WebGL2 rendering context.
+     * @param buffer The WebGL buffer that is used to store the vertex data. This is used to determine the buffer target for the vertex buffer layout.
+     * @param bufferTarget The buffer target for the vertex buffer layout. This is used to determine how the vertex buffer is bound to the WebGL context. This is typically either gl.ARRAY_BUFFER or gl.ELEMENT_ARRAY_BUFFER.
+     */
+    constructor(
+        gl: WebGL2RenderingContext,
+        buffer: WebGLBuffer,
+        bufferTarget: number
+    ) {
+        this._gl = gl;
+        this.buffer = buffer;
+        this._bufferTarget = bufferTarget;
+    }
+
+    /**
+     * The WebGL buffer that is used to store the vertex data.
+     */
+    public buffer: WebGLBuffer | null = null;
+
+    /**
+     * Binds the vertex buffer to the WebGL context using the buffer target specified in the constructor.
+     */
+    public bindBuffer(): void {
+        this._gl.bindBuffer(this._bufferTarget, this.buffer);
+    }
+
+    /**
+     * Initializes the vertex buffer layout. This method should be called after the buffer has been created and bound.
+     */
+    public initialize(): void {
+        this._gl.bindBuffer(this._bufferTarget, this.buffer);
+
+        /*
+        for (const attribute of this.attributes) {
+
+            const index = attribute.shaderLocation;
+            const size = WebGLConverter.convertVertexFormat(attribute.vertexFormat);
+            const stride = this.arrayStride;
+            const offset = attribute.offset;
+
+            this._gl.enableVertexAttribArray(index);
+            this._gl.vertexAttribPointer(
+                index,
+                size,
+                this._gl.FLOAT, // Assuming all vertex formats are float for simplicity. In a complete implementation, this should be determined based on the vertex format.
+                false,
+                stride,
+                offset
+            );
+        }
+
+         */
+    }
+}

package/src/webgl/sampler/webgl-sampler.ts

@@ -0,0 +1,110 @@
+import { SamplerCompareFunction } from "../../common/sampler-enums";
+import { SamplerDescriptor } from "../../core/rendering/sampler/sampler-descriptor";
+import { WebGlUtilities } from "../utilities/WebGlUtilities.ts";
+import type { WebGlGraphicsDevice } from "../WebGlGraphicsDevice.ts";
+import {type ISampler, MipMapSamplerFilter, SamplerAddressMode, SamplerFilter} from "ris-framework-api";
+
+/**
+ * The WebGL implementation of the ISampler interface.
+ */
+export class WebGlSampler implements ISampler {
+
+    private static _id: number = 0;
+    private readonly _gl: WebGL2RenderingContext;
+    private _minFilter = SamplerFilter.NEAREST;
+    private _magFilter = SamplerFilter.NEAREST;
+    private _mipMapFilter = MipMapSamplerFilter.NONE;
+    private _addressModueU = SamplerAddressMode.CLAMP_TO_EDGE
+    private _addressModueV = SamplerAddressMode.CLAMP_TO_EDGE;
+    private _addressModueW = SamplerAddressMode.CLAMP_TO_EDGE;
+
+    /**
+     * Creates an instance of WebGlSampler.
+     * @param graphicsDevice The WebGL graphics device that will be used to create the sampler. The graphics device provides access to the WebGL rendering context and other resources needed for creating and managing the sampler.
+     * @param descriptor The descriptor containing configuration details for the sampler. This parameter is optional, and if not provided, default values will be used for the sampler configuration. The descriptor allows you to specify various properties of the sampler, such as filtering methods and address modes, which determine how textures are sampled in the shader.
+     */
+    constructor(graphicsDevice: WebGlGraphicsDevice, descriptor?: SamplerDescriptor) {
+
+        this._gl = graphicsDevice.gl;
+
+        descriptor = descriptor ?? new SamplerDescriptor();
+
+        this.id = WebGlSampler._id++;
+        this._minFilter = descriptor.minFilter;
+        this._magFilter = descriptor.magFilter;
+        this._mipMapFilter = descriptor.mipMapFilter;
+        this._addressModueU = descriptor.addressModeU;
+        this._addressModueV = descriptor.addressModeV;
+        this._addressModueW = descriptor.addressModeW;
+
+        this._createSampler();
+    }
+
+    /** @inheritDoc */
+    readonly id: number;
+
+    /** @inheritdoc */
+    public get minFilter() {
+        return this._minFilter;
+    }
+
+    /** @inheritdoc */
+    public get magFilter() {
+        return this._magFilter;
+    }
+
+    /** @inheritdoc */
+    public get mipmapFilter()  {
+        return this._mipMapFilter;
+    }
+
+    /** @inheritdoc */
+    public get addressModeU() {
+        return this._addressModueU;
+    }
+
+    /** @inheritdoc */
+    public get addressModeV() {
+        return this._addressModueV;
+    }
+
+    /** @inheritdoc */
+    public get addressModeW() {
+        return this._addressModueW;
+    }
+
+    /** @inheritdoc */
+    public get handle(): any {
+        return this.glSampler;
+    }
+
+    /**
+     * The handle of the sampler. 
+     * This is used to bind the sampler to the graphics pipeline.
+     */
+    public glSampler: globalThis.WebGLSampler = null!;
+
+    /** @inheritdoc */
+    public _createSampler(): void {
+
+        this.glSampler = WebGlUtilities.sampler.create(this._gl,
+            this._minFilter,
+            this._magFilter,
+            this._mipMapFilter,
+            this._addressModueU,
+            this._addressModueV,
+            this._addressModueW,
+            SamplerCompareFunction.Never,
+            1,
+        );
+    }
+
+    /** @inheritdoc */
+    public dispose(): void {
+        if (this.glSampler) {
+            this._gl.deleteSampler(this.glSampler);
+            this.glSampler = null!;
+        }
+    }
+
+}

package/src/webgl/shader/WebGlShaderModule.ts

@@ -0,0 +1,110 @@
+import type {WebGlGraphicsDevice} from "../WebGlGraphicsDevice.ts";
+import {WebGlUtilities} from "../utilities/WebGlUtilities.ts";
+import {type IFramework, type IShaderModule, ShaderStage} from "ris-framework-api";
+import {ShaderModuleContent} from "../../content/ShaderModuleContent.ts";
+
+interface WebGlInternalShader {
+    vertex: string;
+    fragment: string;
+    reflection: any; // This will be type in the future.
+}
+
+/**
+ * The WebGL shader module.
+ */
+export class WebGlShaderModule implements IShaderModule {
+
+    private readonly _graphicsDevice: WebGlGraphicsDevice;
+    private readonly _gl: WebGL2RenderingContext;
+    private _program?: WebGLProgram;
+
+    /**
+     * The constructor of the WebGL shader module.
+     * @param framework The framework.
+     * @param shaderFilePath
+     */
+    public constructor(framework: IFramework, shaderFilePath: string) {
+        this._graphicsDevice = framework.renderer.graphicsDevice as WebGlGraphicsDevice;
+        this._gl = this._graphicsDevice.gl;
+        this._program = this._loadShaders(shaderFilePath);
+
+    }
+
+    /** @inheritDoc */
+    public stages: ShaderStage[] = [];
+    
+    /** @inheritDoc */
+    public nativeHandle?: any;
+
+    /**
+     * Tries to framework shader.
+     * These shaders are part of framework.
+     * @param id The id of internal shader.
+     */
+    private _tryResolveFrameworkShader(id: string): WebGlInternalShader | null {
+        if (ShaderModuleContent[id]) {
+            
+            this.stages = [ShaderStage.VERTEX, ShaderStage.FRAGMENT];
+            
+            return {
+                vertex: ShaderModuleContent[id]["vertex"],
+                fragment: ShaderModuleContent[id]["fragment"],
+                reflection: ShaderModuleContent[id]["reflection"],
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * The program of this shader module
+     */
+    public get program(): WebGLProgram | null | undefined {
+        return this._program;
+    }
+
+    private _loadShaders(shaderFilePath: string): WebGLProgram {
+
+        const internalShader = this._tryResolveFrameworkShader(shaderFilePath);
+
+        let vertexShaderSource = "";
+        let fragmentShaderSource = "";
+        if (internalShader) {
+            vertexShaderSource = internalShader.vertex;
+            fragmentShaderSource = internalShader.fragment;
+        } else {
+
+            throw new Error("Not implemented");
+
+            // TODO: THIS API SUCKS, WE NEED BETTER WAY TO LOAD SHADER
+
+            // TODO: this is not complete we need to determine how it will be loaded from files.
+            // Most likely content pipeline will be source of truth
+            // vertexShaderSource = await this._shaderLoader.load(shaderFilePath, RenderingBackend.WEB_GL, [ShaderStage.VERTEX]);
+            // fragmentShaderSource = await this._shaderLoader.load(shaderFilePath, RenderingBackend.WEB_GL, [ShaderStage.FRAGMENT]);
+        }
+
+
+        const vertexShader = WebGlUtilities.shader.createVertexShader(this._gl, vertexShaderSource);
+        const fragmentShader = WebGlUtilities.shader.createFragmentShader(this._gl, fragmentShaderSource);
+
+        const program = WebGlUtilities.program.create(this._gl, vertexShader, fragmentShader);
+
+        // Clean up shaders after linking.
+        this._gl.deleteShader(vertexShader);
+        this._gl.deleteShader(fragmentShader);
+
+        return program;
+    }
+
+    /** @inheritdoc */
+    public dispose(): void {
+
+        if (this._program) {
+            this._gl.deleteProgram(this._program);
+            this._program = undefined;
+        }
+    }
+}
+
+export default WebGlShaderModule

package/src/webgl/shader/WebGlShaderModuleLoader.ts

@@ -0,0 +1,40 @@
+import WebGlShaderModule from "./WebGlShaderModule.ts";
+import type {IFramework, IShaderModule} from "ris-framework-api";
+
+
+/**
+ * The content WebGL implementation of ShaderContentModule.
+ */
+export class WebGlShaderModuleLoader {
+    private readonly _shaderModules: Map<string, WebGlShaderModule> = new Map<string, WebGlShaderModule>();
+    private readonly _framework: IFramework;
+
+    /**
+     * The WebGL shader content module.
+     * @param framework The framework.
+     */
+    public constructor(framework: IFramework) {
+        this._framework = framework;
+    }
+
+    /**
+     * The content types provided by this content module.
+     * @param assetFilePathOrIdentifier The asset file path or identifier of the content to load.
+     */
+    public load(assetFilePathOrIdentifier: string): IShaderModule {
+
+        // Here something like 'sprite' is provided, we must resolve it.
+
+        // Is it already cached?
+        let shaderModule = this._shaderModules.get(assetFilePathOrIdentifier);
+        if (!shaderModule) {
+
+            // If it does not exist create one and set it.
+            shaderModule = new WebGlShaderModule(this._framework, assetFilePathOrIdentifier);
+            this._shaderModules.set(assetFilePathOrIdentifier, shaderModule);
+        }
+        return shaderModule;
+    }
+
+
+}