ris-framework 0.1.0-dev.4

package/src/core/renderer/enums.ts

@@ -0,0 +1,20 @@
+
+/**
+ * The culling mode.
+ */
+export enum Culling {
+    /**
+     * The culling is disabled. Both front and back faces will be rendered.
+     */
+    None,
+
+    /**
+     * The back faces will be culled. Only front faces will be rendered.
+     */
+    Back,
+
+    /**
+     * The front faces will be culled. Only back faces will be rendered.
+     */
+    Front
+}

package/src/core/renderer/renderer-interface.ts

@@ -0,0 +1,92 @@
+import { vec2 } from "gl-matrix";
+import { TextureSamplerFilteringPreset } from "../rendering/enums";
+import type {RenderingLimits} from "./rendering-limits.ts";
+import type {Color, IGraphicsDevice, IRenderer} from "ris-framework-api";
+import type {TextureFormat} from "ris-framework-api";
+
+export const RenderConfigurationSymbol = Symbol("RenderConfiguration");
+
+/**
+ * The configuration for the renderer. This is used to initialize the renderer.
+ */
+export class RenderConfiguration {
+
+    /**
+     * The size of the main frame buffer. This is used to initialize the main render target.
+     */
+    backBufferSize: vec2 = vec2.fromValues(800, 600);
+
+    /**
+     * The preset for texture sampler filtering.
+     *  This is used to configure the default texture sampler in the graphics device. 
+     * The default texture sampler is used when a texture is sampled without a specific sampler being bound.
+     */
+    textureFiltering = TextureSamplerFilteringPreset.BILINEAR;
+}
+
+/**
+ * The interface for renderers.
+ */
+export interface ITempRenderer extends IRenderer {
+
+    /**
+     * The clear color used by the renderer.
+     */
+    clearColor: Color
+
+    /**
+     * The rendering limits of the renderer.
+     */
+    limits: RenderingLimits | null;
+
+    /**
+     * The graphics device used by the renderer. 
+     * This is used to create resources and manage the rendering context.
+     */
+    readonly graphicsDevice: IGraphicsDevice;
+
+    /**
+     * The preferred texture format for the renderer.
+     * @returns The preferred texture format for the renderer.
+     */
+    get preferredTextureFormat(): TextureFormat;
+
+    /**
+     * The preferred depth stencil format for the renderer.
+     * @returns The preferred depth stencil format for the renderer.
+     */
+    get preferredDepthStencilFormat(): TextureFormat;
+
+    /**
+     * The size of the back buffer.
+     */
+    backBufferSize: vec2;
+
+    /**
+     * Whether the back buffer size matches the swap chain size.
+     * If <code>true</code>, the renderer will assume that the back buffer size matches the swap chain size,
+     * overriding the <code>backBufferSize</code> property.
+     */
+    backBufferMatchesSwapChain: boolean;
+
+    /**
+     * Initializes the renderer.
+     */
+    initialize(): void;
+
+    /**
+     * Performs any additional initialization steps after the main initialization is complete.
+     * This can be used to set up resources that depend on the graphics device or swap chain being initialized.
+     */
+    afterInitialize(): void;
+
+    /**
+     * Begins a new render pass.
+     */
+    beginRenderPass(): void;
+
+    /**
+     * Ends the current render pass.
+     */
+    endRenderPass(): void;
+}

package/src/core/renderer/rendering-limits.ts

@@ -0,0 +1,20 @@
+export class RenderingLimits {
+
+    /**
+     * The constructor.
+     * @param _maximumAnisotropyLevel The maximum anisotropic filtering level.
+     */
+    constructor(private _maximumAnisotropyLevel: number) {
+
+    }
+
+    /**
+     * The maximum anisotropy level supported by the renderer.
+     * This value is typically determined by the graphics hardware and driver capabilities.
+     * It indicates the highest level of anisotropic filtering that can be applied to textures,
+     * which can improve the visual quality of textures when viewed at oblique angles.
+     */
+    public get maximumAnisotropyLevel() : number {
+        return this._maximumAnisotropyLevel;
+    }
+}

package/src/core/rendering/AGraphicsDevice.ts

@@ -0,0 +1,119 @@
+import {BlendStateDescriptor} from "./blending/blend-state-descriptor";
+import {TextureSamplerFilteringPreset} from "./enums";
+import type {PrimitiveStateDescriptor} from "./primitive/PrimitiveStateDescriptor.ts";
+import type {IRenderPass} from "./render-pass/render-pass-interface";
+import {SamplerDescriptor} from "./sampler/sampler-descriptor";
+import {
+    type IGPUInfo,
+    type IGraphicsDeviceFeatures,
+    type ISampler,
+    type IBlendState,
+    type IPrimitiveState,
+    type IGraphicsDevice, SwapChainDescriptor, type RenderPassDescriptor, SamplerFilter, MipMapSamplerFilter,
+    type ISwapChain
+} from "ris-framework-api";
+
+/**
+ * The descriptor for the graphics device. This is used to configure the graphics device during initialization.
+ */
+export class GraphicsDeviceDescriptor {
+
+    /**
+     * Defines the preset for texture sampler filtering.
+     * This is used to configure the default texture sampler in the graphics device.
+     *  The default texture sampler is used when a texture is sampled without a specific sampler being bound.
+     */
+    public samplerFilteringPreset = TextureSamplerFilteringPreset.BILINEAR;
+}
+
+/**
+ * The abstract base class for graphics devices.
+ */
+export abstract class AGraphicsDevice implements IGraphicsDevice {
+
+    protected readonly _descriptor: GraphicsDeviceDescriptor;
+    protected _defaultTextureSampler: ISampler = null!;
+    protected _defaultBlendState: IBlendState = null!;
+    protected _defaultPrimitiveState: IPrimitiveState = null!;
+
+    /**
+     * The constructor.
+     * @param descriptor The descriptor for the graphics device. This is used to configure the graphics device during initialization.
+     */
+    protected constructor(descriptor: GraphicsDeviceDescriptor) {
+        this._descriptor = descriptor;
+    }
+
+    /** @inheritdoc */
+    abstract readonly features : IGraphicsDeviceFeatures;
+
+    /** @inheritdoc */
+    abstract readonly gpuInfo: IGPUInfo;
+
+    /** @inheritdoc */
+    public get defaultTextureSampler(): ISampler {
+        return this._defaultTextureSampler;
+    }
+
+    /** @inheritdoc */
+    public get defaultBlendState(): IBlendState {
+        return this._defaultBlendState;
+    }
+
+    /** @inheritdoc */
+    public get defaultPrimitiveState(): IPrimitiveState {
+        return this._defaultPrimitiveState;
+    }
+
+    /**
+     * Configures and creates the default texture sampler based on the sampler filtering preset specified in the graphics device descriptor. The method creates a new sampler descriptor, sets its properties according to the selected filtering preset, and then creates and returns a new sampler using the configured descriptor.
+     * @returns The default texture sampler configured according to the sampler filtering preset specified in the graphics device descriptor.
+     */
+    protected configureAndCreateDefaultSampler(): ISampler {
+        var samplerDescriptor = new SamplerDescriptor();
+        samplerDescriptor.minFilter = this._descriptor.samplerFilteringPreset == TextureSamplerFilteringPreset.POINT ? SamplerFilter.NEAREST : SamplerFilter.LINEAR;
+        samplerDescriptor.magFilter = this._descriptor.samplerFilteringPreset == TextureSamplerFilteringPreset.POINT ? SamplerFilter.NEAREST : SamplerFilter.LINEAR;
+        samplerDescriptor.mipMapFilter = this._descriptor.samplerFilteringPreset == TextureSamplerFilteringPreset.TRILINEAR ? MipMapSamplerFilter.LINEAR : MipMapSamplerFilter.NONE;
+        return this.createSampler(samplerDescriptor);
+    }
+
+    /** @inheritdoc */
+    public initialize(): void {
+        this._defaultTextureSampler = this.configureAndCreateDefaultSampler();
+        this._defaultBlendState = this.createBlendState(new BlendStateDescriptor());
+        this._defaultPrimitiveState = this.createPrimitiveState();
+    }
+
+    /** @inheritdoc */
+    public abstract createSwapChain(canvas: HTMLCanvasElement, swapChainDescriptor: SwapChainDescriptor): ISwapChain;
+
+    /** @inheritdoc */
+    public abstract createSampler(descriptor?: SamplerDescriptor): ISampler;
+
+    /** @inheritdoc */
+    public abstract createRenderPass(descriptor: RenderPassDescriptor): IRenderPass;
+
+    /** @inheritdoc */
+    public abstract createBlendState(descriptor: BlendStateDescriptor): IBlendState;
+
+    /** @inheritdoc */
+    public abstract createPrimitiveState(descriptor?: PrimitiveStateDescriptor ): IPrimitiveState;
+
+    /** @inheritDoc */
+    public abstract setupDebugCallback(): void;
+
+    /** @inheritDoc */
+    public abstract frameEnd(): void;
+
+    /** @inheritDoc */
+    public abstract pushDebugGroup(groupName: string): void;
+
+    /** @inheritDoc */
+    public abstract popDebugGroup(): void;
+
+    /** @inheritDoc */
+    public dispose(): void {
+        this._defaultTextureSampler.dispose();
+        this._defaultBlendState.dispose();
+    }
+}

package/src/core/rendering/ARenderer.ts

@@ -0,0 +1,247 @@
+import type { ITempRenderer } from "../renderer/renderer-interface.ts";
+import type { IRenderPass } from "./render-pass/render-pass-interface.ts";
+import type { vec2 } from "gl-matrix";
+import type { RenderingLimits } from "../renderer/rendering-limits.ts";
+import {
+    type IFramework, type IGraphicsDevice, type IMainRenderTargetRenderPipeline, type ISwapChain,
+    type ITexture2D, type IWindowManager,
+    RenderingBackend,
+    RenderPassColorAttachment, RenderPassDepthStencilAttachment,
+    RenderPassDescriptor, SwapChainDescriptor,
+    TextureUsage
+} from "ris-framework-api";
+import {TextureFormat, Color} from "ris-framework-api";
+
+export abstract class ARenderer implements ITempRenderer {
+
+    protected readonly _framework: IFramework;
+
+    /**
+     * The resize listeners.
+     */
+    protected _resizeListeners: ((sender: any, size: vec2) => void)[] = [];
+
+    private readonly _windowManager: IWindowManager;
+    private _graphicsDevice: IGraphicsDevice = null!;
+    private _preferredTextureFormat: TextureFormat = TextureFormat.RGBA_8_UNORM;
+    private _preferredDepthStencilFormat: TextureFormat = TextureFormat.DEPTH_24_STENCIL_8;
+    private readonly _currentBackBufferSize: vec2 = [0, 0];
+    private _swapChainRequiresResize: boolean = false;
+    private _mainRenderPassDirty = true;
+    private _clearColor: Color = Color.lightPink();
+
+    protected _mainRenderTargetRequiresResize: boolean = false;
+    protected _swapChain: ISwapChain = null!;
+    protected _mainRenderTarget: ITexture2D = null!;
+    protected _depthStencilBuffer: ITexture2D = null!;
+    protected _swapChainRenderPass: IRenderPass = null!;
+    protected _mainRenderTargetRenderPass?: IRenderPass;
+    protected _mainRenderTargetPipeline?: IMainRenderTargetRenderPipeline;
+
+    /** @inheritdoc */
+    public get graphicsDevice(): IGraphicsDevice {
+        return this._graphicsDevice;
+    }
+
+    /** @inheritdoc */
+    public get clearColor(): Color {
+        return this._clearColor;
+    }
+
+    /** @inheritdoc */
+    public set clearColor(color: Color) {
+        this._clearColor = color;
+        this._mainRenderPassDirty = true;
+    }
+
+    public get limits(): RenderingLimits | null {
+        throw new Error("Method not implemented.");
+    }
+
+    /** @inheritdoc */
+    public get preferredTextureFormat(): TextureFormat {
+        return this._preferredTextureFormat;
+    }
+
+    /** @inheritdoc */
+    public get preferredDepthStencilFormat(): TextureFormat {
+        return this._preferredDepthStencilFormat;
+    }
+
+    /** @inheritdoc */
+    public get backBufferSize(): vec2 {
+        return this._currentBackBufferSize;
+    }
+
+    /** @inheritdoc */
+    public set backBufferSize(size: vec2) {
+        if (this.backBufferMatchesSwapChain) {
+            console.warn(`Attempting to set back buffer size to ${size[0]}x${size[1]}, but back buffer is currently matching the swap chain.
+                 To set the back buffer size, either set backBufferMatchesSwapChain to false, or resize the swap chain using the setSize method on the swap chain.`);
+        } else {
+            this._currentBackBufferSize[0] = size[0];
+            this._currentBackBufferSize[1] = size[1];
+            this._mainRenderTargetRequiresResize = true;
+
+            // TODO: should we resize swapchain as well?
+            this._swapChainRequiresResize = true;
+        }
+    }
+
+    /** @inheritdoc */
+    public backBufferMatchesSwapChain: boolean = false;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     */
+    constructor(framework: IFramework) {
+        this._framework = framework;
+        this._windowManager = framework.windowManager;
+        this._currentBackBufferSize[0] = this._windowManager.canvas.width;
+        this._currentBackBufferSize[1] = this._windowManager.canvas.height;
+    }
+
+     backend: RenderingBackend = RenderingBackend.WEB_GL;
+
+    /** @inheritDoc */
+    public addOnResizedListener(event: (sender: any, e: vec2) => void): void {
+        this._resizeListeners.push(event);
+    }
+
+    /** @inheritDoc */
+    public removeOnResizedListener(event: (sender: any, e: vec2) => void): void {
+        const index = this._resizeListeners.indexOf(event);
+        if (index >= 0) {
+            this._resizeListeners.splice(index, 1);
+        }
+    }
+    beginComputePass(): void {
+        throw new Error("Method not implemented.");
+    }
+    endComputePass(): void {
+        throw new Error("Method not implemented.");
+    }
+
+    /**
+     * Creates the graphics device for the renderer.
+     *  This is an abstract method that must be implemented by subclasses to provide the specific graphics device implementation for the renderer.
+     * @returns The graphics device for the renderer.
+     */
+    protected abstract createGraphicsDevice(): IGraphicsDevice;
+
+    /** @inheritdoc */
+    public initialize(): void {
+        this._graphicsDevice = this.createGraphicsDevice();
+        this._graphicsDevice.initialize();
+        this._swapChain = this._graphicsDevice.createSwapChain(
+            this._windowManager.canvas,
+            new SwapChainDescriptor());
+        this._preferredTextureFormat = this._swapChain.textureFormat
+
+        // TODO: RESIZE EVENT
+
+    }
+
+    /** @inheritdoc */
+    public afterInitialize(): void {
+
+        let colorAttachment = new RenderPassColorAttachment();
+        colorAttachment.swapChain = this._swapChain;
+        this._swapChainRenderPass = this._graphicsDevice.createRenderPass({
+            colorAttachments: [colorAttachment],
+        });
+
+        this._setupMainRenderPass();
+    }
+
+    private _setupMainRenderPass(): void {
+
+        this._mainRenderTargetPipeline?.dispose();
+        this._depthStencilBuffer?.dispose();
+        this._mainRenderTarget?.dispose();
+
+        // Create a main frame buffer.
+        this._mainRenderTarget = this._framework.textureFactory.createEmpty(
+            this.backBufferSize[0], this.backBufferSize[1],
+            undefined,
+            TextureUsage.TEXTURE_BINDING | TextureUsage.RENDER_ATTACHMENT,
+            this.preferredTextureFormat
+        );
+
+        this._depthStencilBuffer = this._framework.textureFactory.createEmpty(
+            this.backBufferSize[0], this.backBufferSize[1],
+            undefined,
+            TextureUsage.RENDER_ATTACHMENT,
+            this.preferredDepthStencilFormat);
+
+        // Create main frame buffer pipeline.
+        this._mainRenderTargetPipeline = this._framework
+            .renderPipelineFactory
+            .createMainFrameBufferPipeline(this._mainRenderTarget);
+
+        this._createMainRenderPass();
+        this._mainRenderTargetRequiresResize = false;
+    }
+
+    private _createMainRenderPass(): void {
+        this._mainRenderTargetRenderPass?.dispose();
+        const renderPassDesc = new RenderPassDescriptor();
+        const colorAttachment = new RenderPassColorAttachment();
+        colorAttachment.texture = this._mainRenderTarget;
+        colorAttachment.clearColor = this._clearColor;
+        renderPassDesc.colorAttachments = [colorAttachment];
+        renderPassDesc.depthStencilAttachment = new RenderPassDepthStencilAttachment();
+        renderPassDesc.depthStencilAttachment.texture = this._depthStencilBuffer;
+        this._mainRenderTargetRenderPass = this._graphicsDevice.createRenderPass(renderPassDesc);
+        this._mainRenderPassDirty = false;
+    }
+
+    private _handleResizing(): void {
+        // If back buffer size is set to match swap chain size, then main render target needs
+        // to be resized whenever swap chain needs to be resized.
+        // If back buffer size is not set to match swap chain size,
+        // then main render target only needs to be resized when back buffer size is changed.
+        if ((this.backBufferMatchesSwapChain && this._swapChainRequiresResize) || this._mainRenderTargetRequiresResize) {
+            this._setupMainRenderPass();
+
+            for(const listener of this._resizeListeners){
+                listener(this, this.backBufferSize);
+            }
+        }
+
+        if (!this._swapChainRequiresResize) {
+            return;
+        }
+
+        // Note: surface texture and surface texture view must be released before trying to resize.
+        this._swapChain.resize(this.backBufferSize[0], this.backBufferSize[1]);
+
+        // ConfigureDepthStencil();
+        this._swapChainRequiresResize = false;
+    }
+
+    /** @inheritdoc */
+    public beginRenderPass(): void {
+        this._mainRenderTargetRenderPass!.beginPass();
+    }
+
+    /** @inheritdoc */
+    public endRenderPass(): void {
+        this._mainRenderTargetRenderPass!.endPass();
+
+        this._handleResizing();
+
+        this._swapChainRenderPass!.beginPass();
+        this._mainRenderTargetPipeline!.render();
+        this._swapChainRenderPass!.endPass();
+
+        this._swapChain.present();
+
+        // For example, clear color change.
+        if(this._mainRenderPassDirty) {
+            this._createMainRenderPass();
+        }
+    }
+
+}

package/src/core/rendering/blending/blend-component-descriptor.ts

@@ -0,0 +1,33 @@
+import { BlendFactor, BlendOperation } from "./enums";
+
+/**
+ * Descriptor for a blend component, which defines how source and destination colors are blended together.
+ */
+export class BlendComponentDescriptor {
+
+    /**
+     * Multiplier for the source color/alpha which is the output of the fragment shader.
+     */
+    public srcFactor: BlendFactor = BlendFactor.ONE;
+
+    /**
+     * Multiplier for the destination color/alpha which is the color/alpha already in the framebuffer.
+     */
+    public dstFactor: BlendFactor = BlendFactor.ONE_MINUS_SRC_ALPHA;
+
+    /**
+     * The operation to perform on the source and destination colors, multiplied by their respective factors.
+     */
+    public operation: BlendOperation = BlendOperation.ADD;
+
+    /**
+     * Compares this blend component descriptor with another for equality.
+     * @param other The other blend component descriptor to compare with.
+     * @returns True if the two descriptors are equal, false otherwise.
+     */
+    public equal(other: BlendComponentDescriptor): boolean {
+        return this.srcFactor === other.srcFactor &&
+            this.dstFactor === other.dstFactor &&
+            this.operation === other.operation;
+    }
+}

package/src/core/rendering/blending/blend-state-descriptor.ts

@@ -0,0 +1,51 @@
+import { BlendComponentDescriptor } from "./blend-component-descriptor";
+import { BlendFactor, BlendOperation } from "./enums";
+
+/**
+ * Describes the blend state of a render pipeline.
+ */
+export class BlendStateDescriptor {
+    
+    /**
+     * The constructor.
+     */
+    public constructor() {
+        const colorState = new BlendComponentDescriptor();
+        colorState.srcFactor = BlendFactor.SRC_ALPHA;
+        colorState.dstFactor = BlendFactor.ONE_MINUS_SRC_ALPHA;
+        colorState.operation = BlendOperation.ADD;
+        this.color = colorState
+
+        const alphaState = new BlendComponentDescriptor();
+        alphaState.srcFactor = BlendFactor.ONE;
+        alphaState.dstFactor = BlendFactor.ONE_MINUS_SRC_ALPHA;
+        alphaState.operation = BlendOperation.ADD;
+        this.alpha = alphaState;
+    }
+
+    /**
+     * Whether blending is enabled. If false, the source color is written to the render target without blending.
+     */
+    public blendingEnabled: boolean = true;
+
+    /**
+     * Color equation.
+     */
+    public color: BlendComponentDescriptor;
+
+    /**
+     * Alpha equation.
+     */
+    public alpha: BlendComponentDescriptor;
+  
+    /**
+     * Compares this blend state descriptor with another for equality.
+     * @param other The other blend state descriptor to compare with.
+     * @returns True if the two descriptors are equal, false otherwise.
+     */
+    public equal(other: BlendStateDescriptor): boolean {
+        return this.blendingEnabled === other.blendingEnabled &&
+            this.color.equal(other.color) &&
+            this.alpha.equal(other.alpha);
+    }
+}

package/src/core/rendering/blending/enums.ts

@@ -0,0 +1,50 @@
+/**
+ * The blend operation.
+ */
+export enum BlendOperation {
+    /**
+     * Add the source and destination colors together, multiplied by their respective factors.
+     */
+    ADD,
+
+    /**
+     * Subtract the destination color from the source color, multiplied by their respective factors.
+     */
+    SUBTRACT,
+
+    /**
+     * Reverse subtract the source color from the destination color, multiplied by their respective factors.
+     */
+    REVERSE_SUBTRACT,
+
+    /**
+     * Select the minimum of the source and destination colors, multiplied by their respective factors.
+     */
+    MIN,
+
+    /**
+     * Select the maximum of the source and destination colors, multiplied by their respective factors.
+     */
+    MAX,
+}
+
+/// <summary>
+/// The blend factor.
+/// </summary>
+export enum BlendFactor {
+
+    /**
+     * <c>1.0</c>
+     */
+    ONE,
+
+    /**
+     * Source.Alpha, where Source is the color being drawn.
+     */
+    SRC_ALPHA,
+
+    /**
+    * <c>1.0 - Source.Alpha</c>, where Source is the color being drawn.
+    */
+    ONE_MINUS_SRC_ALPHA,
+}

package/src/core/rendering/enums.ts

@@ -0,0 +1,22 @@
+
+/**
+ * The preset for texture sampler filtering.
+ * This is used to configure the default texture sampler in the graphics device.
+ *  The default texture sampler is used when a texture is sampled without a specific sampler being bound.
+ */
+export enum TextureSamplerFilteringPreset {
+    /**
+     * Point filtering preset. This will configure the texture sampler to use point filtering for minification and magnification, and no mipmapping.
+     */
+    POINT,
+
+    /**
+     * Bilinear filtering preset. This will configure the texture sampler to use bilinear filtering for minification and magnification, and no mipmapping.
+     */
+    BILINEAR,
+
+    /**
+     * Trilinear filtering preset. This will configure the texture sampler to use bilinear filtering for minification and magnification, and linear mipmapping.
+     */
+    TRILINEAR
+}

package/src/core/rendering/primitive/PrimitiveStateDescriptor.ts

@@ -0,0 +1,32 @@
+import { CullMode, FrontFace, PrimitiveTopology } from "./enums";
+
+/** 
+* Describes the state of a primitive.
+*/
+export class PrimitiveStateDescriptor {
+    /**
+    * The constructor.
+    */
+    public constructor() {
+        this.topology = PrimitiveTopology.TRIANGLE_LIST;
+        this.cullFace = CullMode.BACK;
+        this.frontFace = FrontFace.CCW;
+    }
+
+    /**
+    * The topology of the primitive.
+    * By default, it is set to <see cref="PrimitiveTopology.TRIANGLE_LIST"/>.
+    */
+    public topology: PrimitiveTopology;
+
+    /**
+    * The culling mode.
+    * By default, it is set to <see cref="CullMode.BACK"/>.
+    */
+    public cullFace: CullMode;
+    /** 
+    * The front face.
+    * By default, it is set to <see cref="FrontFace.CCW"/>.
+    */
+    public frontFace: FrontFace;
+}