ris-framework 0.1.0-dev.4

package/src/webgl/render-pipelines/AWebGlRenderPipeline.ts

@@ -0,0 +1,129 @@
+import type {IBlendState, IFramework, IIndexBuffer, IPrimitiveState, IRenderPipeline, IVertexBuffer} from "ris-framework-api";
+import type {VertexBufferLayout} from '../../core/rendering/vertex-buffer-layout';
+import type {WebGlBlendState} from '../blending/webgl-blend-state';
+import type {WebGlPrimitiveState} from '../primitive/WebGlPrimitiveState.ts';
+import type {WebGlSampler} from '../sampler/webgl-sampler';
+import {WebGlConverter} from '../utilities/WebGlConverter.ts';
+import type {WebGlGraphicsDevice} from "../WebGlGraphicsDevice.ts";
+
+/**
+ * The base class for WebGL render pipelines. This class provides common functionality for all WebGL render pipelines.
+ */
+export abstract class AWebGlRenderPipeline implements IRenderPipeline {
+
+    /** The framework instance. */
+    protected readonly _framework: IFramework;
+    protected readonly _gl: WebGL2RenderingContext;
+    protected readonly _defaultTextureSampler: WebGlSampler;
+    protected readonly _blendState: WebGlBlendState;
+    protected _vertexArrayObject: WebGLVertexArrayObject | null = null;
+
+
+    protected _program: WebGLProgram = null!;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param primitiveState The primitive state.
+     */
+    public constructor(framework: IFramework, primitiveState?: IPrimitiveState) {
+        this._framework = framework;
+        const graphicsDevice = framework.renderer.graphicsDevice as WebGlGraphicsDevice;
+        this._gl = graphicsDevice.gl;
+        this._blendState = graphicsDevice.defaultBlendState as WebGlBlendState;
+        this._defaultTextureSampler = graphicsDevice.defaultTextureSampler as WebGlSampler;
+        this.primitiveState = (primitiveState ?? graphicsDevice.defaultPrimitiveState) as WebGlPrimitiveState;
+    }
+
+    /** @inheritDoc */
+    public get blendState(): IBlendState {
+        return this._blendState;
+    }
+
+    /** @inheritDoc */
+    public readonly primitiveState: WebGlPrimitiveState;
+
+    /** @inheritDoc */
+    public render(
+        _vertexBuffer: IVertexBuffer,
+        _indexBuffer: IIndexBuffer,
+        _indicesCount = -1,
+        _indicesOffset = 0
+    ): void {
+        void _vertexBuffer;
+        void _indexBuffer;
+        void _indicesCount;
+        void _indicesOffset;
+    }
+
+
+    /** @inheritDoc */
+    public vertexBufferLayouts: VertexBufferLayout[] = null!;
+
+    /**
+     * Provide WebGL buffers for the render pipeline.
+     * This method should be implemented by subclasses to provide the necessary buffers
+     * for creatine the vertex array object.
+     * @returns An array of WebGLBuffer objects to be used in the vertex array object.
+     */
+    protected abstract _provideBuffers(): WebGLBuffer[] | null | undefined;
+
+    /**
+     * Creates the vertex array object for the render pipeline.
+     *  This method binds the provided buffers and sets up the vertex attribute pointers based on the vertex buffer layouts.
+     */
+    protected _createVertexArrayObject(): void {
+        this._vertexArrayObject = this._gl.createVertexArray();
+        const buffers = this._provideBuffers();
+
+        if (!buffers || buffers.length === 0) {
+            return;
+        }
+
+        for (let i = 0; i < this.vertexBufferLayouts.length; i++) {
+            const layout = this.vertexBufferLayouts[i];
+            const buffer = buffers[i];
+
+            this._gl.bindVertexArray(this._vertexArrayObject);
+            this._gl.bindBuffer(this._gl.ARRAY_BUFFER, buffer);
+
+            const stride = layout.arrayStride;
+            for (const attribute of layout.attributes) {
+
+                const size = WebGlConverter.convertVertexFormat(attribute.format);
+                const index = attribute.shaderLocation;
+                const offset = attribute.offset;
+
+                this._gl.enableVertexAttribArray(index);
+                this._gl.vertexAttribPointer(index, size, this._gl.FLOAT, false, stride, offset);
+            }
+        }
+    }
+
+    /**
+     * Set up the pipeline state.
+     *  This method should be called before rendering to set up the necessary pipeline state, such as blending, depth testing, etc.
+     */
+    protected _setupPipeline(): void {
+        this._blendState.apply(this._gl);
+    }
+
+    /** @inheritDoc */
+    public initialize(): void {
+
+        if (!this.vertexBufferLayouts || this.vertexBufferLayouts.length === 0) {
+            throw new Error('At least one vertex buffer layout must be provided for the render pipeline.');
+        }
+
+        this._createVertexArrayObject();
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        if (this._vertexArrayObject) {
+            this._gl.deleteVertexArray(this._vertexArrayObject);
+            this._vertexArrayObject = null;
+        }
+    }
+
+}

package/src/webgl/render-pipelines/WebGlMainRenderTargetRenderPipeline.ts

@@ -0,0 +1,95 @@
+import {vec2} from "gl-matrix";
+import type {WebGlVertexBuffer} from "../buffers/WebGlVertexBuffer.ts";
+import {GeometryFormat} from "../../geometry/GeometryFormat.ts";
+import type {WebGLIndexBuffer} from "../buffers/webgl-index-buffer";
+import {VertexBufferLayout} from "../../core/rendering/vertex-buffer-layout";
+import type {WebGlTexture2D} from "../texture/WebGlTexture2D.ts";
+import WebGlShaderModule from "../shader/WebGlShaderModule.ts";
+import {AWebGlRenderPipeline} from "./AWebGlRenderPipeline.ts";
+import {BufferUsage, type IFramework, type IMainRenderTargetRenderPipeline, type ITexture2D} from "ris-framework-api";
+
+/**
+ * The WebGL implementation of the main render target render pipeline.
+ */
+export class WebGlMainRenderTargetRenderPipeline extends AWebGlRenderPipeline implements IMainRenderTargetRenderPipeline {
+
+    private _vertexBuffer: WebGlVertexBuffer = null!;
+    private _indexBuffer: WebGLIndexBuffer = null!;
+    private _mainRenderTarget: WebGlTexture2D = null!;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param mainRenderTarget The main render target texture. This is the texture that will be rendered to by this render pipeline. It should be the same texture as the one used in the swap chain's render pass descriptor for the main render target.
+     */
+    public constructor(framework: IFramework, mainRenderTarget: ITexture2D) {
+        super(framework);
+        this._mainRenderTarget = mainRenderTarget as WebGlTexture2D;
+    }
+
+    /** @inheritdoc */
+    protected _provideBuffers(): WebGLBuffer[] {
+        return [this._vertexBuffer.buffer!];
+    }
+
+    /** @inheritdoc */
+    public get mainRenderTarget(): ITexture2D {
+        if (!this._mainRenderTarget) {
+            throw new Error("Render target is not set.");
+        }
+        return this._mainRenderTarget;
+    }
+
+    /** @inheritdoc */
+    public set mainRenderTarget(value: ITexture2D) {
+        this._mainRenderTarget = value as WebGlTexture2D;
+    }
+
+    /** @inheritdoc */
+    public initialize(): void {
+        const shaderModule = this._framework.content.loadShaderModule("main_render_target_flip_y") as WebGlShaderModule;
+        this._program = shaderModule.program!;
+        this._createResources();
+        this.vertexBufferLayouts = [VertexBufferLayout.createFloat3Float2Layout()];
+        super.initialize();
+    }
+
+    private _createResources(): void {
+
+        // By default, quad is from [-0.5, 0.5] space. We want to move it to
+        // [-1, 1] space to cover the whole screen.
+        const geometry = this._framework.geometryBuilder.quadGeometry(vec2.fromValues(2, 2));
+        const data = geometry.toInterleaved(GeometryFormat.POS3_TEXTURECOORDS2);
+
+        this._vertexBuffer = this._framework.bufferFactory.createVertexBuffer(
+            data,
+            (3 + 2) * Float32Array.BYTES_PER_ELEMENT,
+            BufferUsage.VERTEX,
+            "Main Frame Buffer Render Pipeline Vertex Buffer"
+        ) as WebGlVertexBuffer;
+
+        this._indexBuffer = this._framework.bufferFactory.createIndexBuffer(
+            geometry.indices!, "Main Frame Buffer Render Pipeline Index Buffer",
+        ) as WebGLIndexBuffer;
+    }
+
+    /** @inheritdoc */
+    public render(): void {
+
+        if (this._program == null) {
+            return;
+        }
+
+        this._setupPipeline();
+
+        this._gl.useProgram(this._program);
+        this._gl.bindVertexArray(this._vertexArrayObject);
+        this._gl.bindBuffer(this._gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer.buffer);
+
+        this._gl.activeTexture(this._gl.TEXTURE0);
+        this._gl.bindTexture(this._gl.TEXTURE_2D, this._mainRenderTarget.glTexture);
+        this._gl.bindSampler(0, this._defaultTextureSampler.glSampler);
+
+        this._gl.drawElements(this._gl.TRIANGLES, this._indexBuffer.indicesCount, this._gl.UNSIGNED_SHORT, 0);
+    }
+}

package/src/webgl/render-pipelines/WebGlRenderPipelineFactory.ts

@@ -0,0 +1,75 @@
+import { WebGlMainRenderTargetRenderPipeline } from "./WebGlMainRenderTargetRenderPipeline.ts";
+import { WebGlSpriteRenderPipeline } from "./sprite/WebGlSpriteRenderPipeline.ts";
+import type {
+    IFramework,
+    IInspectTextureMipsRenderPipeline,
+    IMainRenderTargetRenderPipeline, IPrimitiveState, IRenderPipelineFactory,
+    ISpriteRenderPipeline, ITexture2D,
+    IUniformBuffer,
+    IUnlitRenderPipeline
+} from "ris-framework-api";
+import {WebGlInspectTextureMipsRenderPipeline} from "./inspect/WebGlInspectTextureMipsRenderPipeline.ts";
+import {WebGlUnlitRenderPipeline} from "./material/WebGlUnlitRenderPipeline.ts";
+
+/**
+ * The WebGL implementation of the IRenderPipelineFactory interface.
+ * This factory is responsible for creating render pipelines for WebGL rendering.
+ */
+export class WebGlRenderPipelineFactory implements IRenderPipelineFactory {
+
+    /**
+     * The constructor for the WebGLRenderPipelineFactory class.
+     * @param _framework The framework instance.
+     */
+    constructor(private readonly _framework: IFramework) {
+    }
+
+    /** @inheritDoc */
+    public createUnlitRenderPipeline(projectionViewBuffer: IUniformBuffer,
+                                     modelBuffer: IUniformBuffer,
+                                     materialBuffer: IUniformBuffer,
+                                     primitiveState?: IPrimitiveState
+                                     ): IUnlitRenderPipeline {
+        const pipeline = new WebGlUnlitRenderPipeline(this._framework,
+            projectionViewBuffer, modelBuffer, materialBuffer, primitiveState
+            );
+        pipeline.initialize();
+        return pipeline;
+    }
+
+    /** @inheritDoc */
+    public createMainFrameBufferPipeline(mainFrameBuffer: ITexture2D): IMainRenderTargetRenderPipeline {
+        const renderPipeline = new WebGlMainRenderTargetRenderPipeline(this._framework, mainFrameBuffer);
+        renderPipeline.initialize();
+        return renderPipeline;
+    }
+
+    /** @inheritDoc */
+    public createInspectTextureMipsRenderPipeline(
+        projectionViewBuffer: IUniformBuffer,
+        modelBuffer: IUniformBuffer,
+        textureConstantsBuffer: IUniformBuffer,
+        primitiveState?: IPrimitiveState,
+        ): IInspectTextureMipsRenderPipeline {
+        const pipeline = new WebGlInspectTextureMipsRenderPipeline(
+            this._framework, projectionViewBuffer, modelBuffer, textureConstantsBuffer, primitiveState
+        );
+        pipeline.initialize();
+        return pipeline;
+    }
+
+    /** @inheritdoc */
+    public createSpriteRenderPipeline(projectionViewBuffer: IUniformBuffer): ISpriteRenderPipeline {
+        const renderPipeline = new WebGlSpriteRenderPipeline(this._framework, projectionViewBuffer);
+        renderPipeline.initialize();
+        return renderPipeline;
+    }
+
+    /** @inheritdoc */
+    public createMainRenderTargetRenderPipeline(renderTarget: ITexture2D): IMainRenderTargetRenderPipeline {
+        const renderPipeline = new WebGlMainRenderTargetRenderPipeline(this._framework, renderTarget);
+        renderPipeline.initialize();
+        return renderPipeline;
+
+    }
+}

package/src/webgl/render-pipelines/inspect/WebGlInspectTextureMipsRenderPipeline.ts

@@ -0,0 +1,200 @@
+import type {
+    IFramework, IPrimitiveState,
+    ISampler,
+    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";
+import type {
+    IInspectTextureMipsRenderPipeline
+} from "ris-framework-api";
+
+/**
+ * The WebGL implementation of the sprite render pipeline.
+ */
+export class WebGlInspectTextureMipsRenderPipeline extends AWebGlRenderPipeline implements IInspectTextureMipsRenderPipeline {
+
+    private static readonly CAMERA_BINDING_POINT = 0;
+    private static readonly  MODEL_BINDING_POINT = 1;
+    private static readonly TEXTURE_CONSTANTS_BINDING_POINT = 2;
+
+    private _texture: WebGlTexture2D = null!;
+    private _sampler?: WebGlSampler;
+    private _projectionViewBuffer: WebGlUniformBuffer;
+    private _modelBuffer: WebGlUniformBuffer;
+    private _textureConstantsBuffer: WebGlUniformBuffer;
+    private _cameraBlockIndex: number = -1;
+    private _modelBlockIndex: number = -1;
+    private  _textureConstantsBlockIndex : 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 textureConstantsBuffer The texture constants buffer.
+     */
+    constructor(framework: IFramework,
+                projectionViewBuffer: IUniformBuffer,
+                modelBuffer: IUniformBuffer,
+                textureConstantsBuffer: IUniformBuffer,
+                primitiveState? : IPrimitiveState
+                ) {
+        super(framework, primitiveState);
+        this._projectionViewBuffer = projectionViewBuffer as WebGlUniformBuffer;
+        this._modelBuffer = modelBuffer as WebGlUniformBuffer;
+        this._textureConstantsBuffer = textureConstantsBuffer 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 textureConstantsBuffer(): IUniformBuffer {
+        return this._textureConstantsBuffer;
+    }
+
+    /** @inheritdoc */
+    public set textureConstantsBuffer(value: IUniformBuffer) {
+        this._textureConstantsBuffer = 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("inspect_texture_mips") 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, WebGlInspectTextureMipsRenderPipeline.CAMERA_BINDING_POINT);
+
+            this._modelBlockIndex = this._gl.getUniformBlockIndex(this._program, "ModelBuffer");
+            this._gl.uniformBlockBinding(this._program, this._modelBlockIndex, WebGlInspectTextureMipsRenderPipeline.MODEL_BINDING_POINT);
+
+            this._textureConstantsBlockIndex = this._gl.getUniformBlockIndex(this._program, "TextureConstantsBuffer");
+            this._gl.uniformBlockBinding(this._program, this._textureConstantsBlockIndex, WebGlInspectTextureMipsRenderPipeline.TEXTURE_CONSTANTS_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,
+            WebGlInspectTextureMipsRenderPipeline.CAMERA_BINDING_POINT,
+            this._projectionViewBuffer.glBuffer!);
+        this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+            WebGlInspectTextureMipsRenderPipeline.MODEL_BINDING_POINT,
+            this._modelBuffer.glBuffer!);
+        this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+            WebGlInspectTextureMipsRenderPipeline.TEXTURE_CONSTANTS_BINDING_POINT,
+            this._textureConstantsBuffer.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);
+    }
+
+}