ris-framework 0.1.0 → 0.2.0-dev.12

package/src/api/sprites/SpriteBatchDrawable.ts

@@ -1,12 +1,12 @@
 import type {
     IFramework,
-    ISpriteRenderPipeline,
     ITexture2D,
     IUniformBuffer,
     Color,
     IDisposable, ISampler
 } from "../index.ts";
 import {SpriteBatchMesh} from "./SpriteBatchMesh.ts";
+import type {SpriteMaterial} from "../material/SpriteMaterial.ts";
 import type {vec2, vec3} from "gl-matrix";
 
 /**
@@ -19,7 +19,7 @@ export class SpriteBatchDrawable implements IDisposable {
     private readonly _sampler: ISampler;
     private _maxBatchSize: number;
     private _drawingMesh: SpriteBatchMesh = null!;
-    private _renderPipeline: ISpriteRenderPipeline = null!;
+    private _material: SpriteMaterial = null!;
 
     private _needsResize = false;
 
@@ -54,13 +54,13 @@ export class SpriteBatchDrawable implements IDisposable {
 
     /** Initialize the drawable */
     public initialize(): void {
-        this._renderPipeline = this._framework
-            .renderPipelineFactory
-            .createSpriteRenderPipeline(this.projectionViewBuffer);
-        this._renderPipeline.spriteTexture = this._texture;
-        this._renderPipeline.textureSampler = this._sampler;
+        this._material = this._framework.materialFactory.createSpriteMaterial({
+            projectionViewBuffer: this.projectionViewBuffer,
+            texture: this._texture,
+            sampler: this._sampler,
+        });
 
-        this._drawingMesh = new SpriteBatchMesh(this._framework, this._maxBatchSize);
+        this._drawingMesh = new SpriteBatchMesh(this._framework, this._material, this._maxBatchSize);
         this._drawingMesh.initialize();
     }
 
@@ -115,14 +115,10 @@ export class SpriteBatchDrawable implements IDisposable {
         }
 
         // Draw mesh.
-        const indicesOffset = this._fromInstance * 6;
-        const indicesCount = this._toInstance * 6 - indicesOffset;
+        this._drawingMesh.indicesOffset = this._fromInstance * 6;
+        this._drawingMesh.indicesCount = this._toInstance * 6 - this._drawingMesh.indicesOffset;
         this._drawingMesh.applyChanges();
-        this._renderPipeline.render(
-            this._drawingMesh.vertexBuffer!,
-            this._drawingMesh.indexBuffer!,
-            indicesCount,
-            indicesOffset);
+        this._drawingMesh.draw();
         this._fromInstance = this._toInstance;
     }
 
@@ -140,7 +136,7 @@ export class SpriteBatchDrawable implements IDisposable {
 
     /** @inheritDoc */
     public dispose(): void {
-        this._renderPipeline.dispose();
+        this._material.dispose();
         this._drawingMesh.dispose();
     }
 }

package/src/api/sprites/SpriteBatchMesh.ts

@@ -1,5 +1,6 @@
 import type {vec2, vec3} from "gl-matrix";
 import {BufferUsage, type Color, type IFramework, Mesh} from "../index.ts";
+import type {SpriteMaterial} from "../material/SpriteMaterial.ts";
 
 /**
  * The sprite batch mesh.
@@ -15,14 +16,26 @@ export class SpriteBatchMesh extends Mesh {
     /** The total number of floats in a sprite. 4 for each vertex * 9 floats per vertex (xyz rgba uv). */
     static readonly TOTAL_FLOATS_IN_SPRITE = 4 * this.TOTAL_FLOATS_PER_VERTEX;
 
+    private readonly _spriteMaterial: SpriteMaterial;
     private _maxInstances = 0;
     private _lastIndex = -1;
 
+    /** The offset of the first index to draw. Defaults to 0. */
+    public indicesOffset = 0;
+
+    /** The number of indices to draw. If -1 draws all indices. */
+    public indicesCount = -1;
+
     /**
      * The constructor for the batch sprite mesh.
+     * @param framework - The framework.
+     * @param material - The material.
+     * @param numberOfInstances - The number of instances.
      */
-    public constructor(framework: IFramework, numberOfInstances: number) {
+    public constructor(framework: IFramework, material: SpriteMaterial, numberOfInstances: number) {
+        // Drawn by the sprite batch, not by a scene.
         super(framework);
+        this._spriteMaterial = material;
         this._maxInstances = numberOfInstances;
 
         this._vertexData = new Array(this.maxInstances * SpriteBatchMesh.TOTAL_FLOATS_IN_SPRITE);
@@ -48,6 +61,13 @@ export class SpriteBatchMesh extends Mesh {
         this._indices = indices;
     }
 
+    /**
+     * Draws the mesh with its sprite material, using {@link indicesCount} and {@link indicesOffset}.
+     */
+    public draw(): void {
+        this._spriteMaterial.render(this._vertexBuffer!, this._indexBuffer!, this.indicesCount, this.indicesOffset);
+    }
+
     /** The maximum number of instances that can be batched. */
     public get maxInstances() {
         return this._maxInstances;
@@ -233,8 +253,7 @@ export class SpriteBatchMesh extends Mesh {
     /** @inheritDoc */
     public override applyChanges(): void {
 
-        if(this._lastIndex <= 0)
-        {
+        if (this._lastIndex <= 0) {
             return;
         }
 

package/src/api/utilities/AlignUtilities.ts

@@ -11,7 +11,8 @@ export class AlignUtilities {
      * @returns The aligned value.
      */
     public static align(value: number, alignment: number): number {
-        return (value + alignment - 1) & ~(alignment - 1);
+        const remainder = value % alignment;
+        return remainder == 0 ? value : value + alignment - remainder;
     }
 
     /**

package/src/api/utilities/GeometryUtilities.ts

@@ -13,6 +13,8 @@ export class GeometryUtilities {
         switch (geometryFormat) {
             case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2:
                 return (3 + 4 + 2) * Float32Array.BYTES_PER_ELEMENT;
+            case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3:
+                return (3 + 4 + 2 + 3) * Float32Array.BYTES_PER_ELEMENT;
             default:
                 throw new Error("Unknown geometryFormat");
         }

package/src/api/window/WindowManager.ts

@@ -1,4 +1,4 @@
-import type { vec2 } from "gl-matrix";
+/**/import type { vec2 } from "gl-matrix";
 import {WindowBounds, type IWindowManager} from "../index.ts";
 
 /**
@@ -8,6 +8,9 @@ export class WindowManager implements IWindowManager {
   private readonly _canvas: HTMLCanvasElement;
   private readonly _updateCallbacks: Array<() => void> = [];
   private readonly _renderCallbacks: Array<() => void> = [];
+  private readonly _ownsCanvas: boolean;
+  private _animationFrame: number | null = null;
+  private _disposed = false;
 
   /**
    * The constructor for the WindowManager class.
@@ -15,6 +18,7 @@ export class WindowManager implements IWindowManager {
    */
   public constructor(canvas: HTMLCanvasElement | null = null) {
     this._canvas = canvas ?? document.createElement("canvas");
+    this._ownsCanvas = !canvas;
     if (!canvas) {
       document.body.appendChild(this._canvas);
     }
@@ -53,12 +57,28 @@ export class WindowManager implements IWindowManager {
     initializeForWebGl(): void {
         throw new Error("Method not implemented.");
     }
+    /** Stops the event loop, drops all callbacks and removes the canvas when this manager created it. */
     dispose(): void {
-        throw new Error("Method not implemented.");
+        if (this._disposed) {
+            return;
+        }
+        this._disposed = true;
+        if (this._animationFrame !== null) {
+            cancelAnimationFrame(this._animationFrame);
+            this._animationFrame = null;
+        }
+        this._updateCallbacks.length = 0;
+        this._renderCallbacks.length = 0;
+        if (this._ownsCanvas) {
+            this._canvas.remove();
+        }
     }
 
   /** @inheritdoc */
   runEventLoop(): void {
+    if (this._disposed) {
+      return;
+    }
     for (const callback of this._updateCallbacks) {
       callback();
     }
@@ -66,7 +86,7 @@ export class WindowManager implements IWindowManager {
       callback();
     }
 
-    requestAnimationFrame(() => this.runEventLoop());
+    this._animationFrame = requestAnimationFrame(() => this.runEventLoop());
   }
 
   /** @inheritdoc */

package/src/core/rendering/ARenderer.ts

@@ -1,15 +1,24 @@
-import type { ITempRenderer } from "../../api/rendering/renderer-interface.ts";
-import type { vec2 } from "gl-matrix";
-import type { RenderingLimits } from "../../api/rendering/rendering-limits.ts";
+import type {ITempRenderer} from "../../api/rendering/renderer-interface.ts";
+import type {vec2} from "gl-matrix";
+import type {RenderingLimits} from "../../api/rendering/rendering-limits.ts";
 import {
-    type IFramework, type IGraphicsDevice, type IMainRenderTargetRenderPipeline, type IRenderPass, type ISwapChain,
-    type ITexture2D, type IWindowManager,
+    Color,
+    type IFramework,
+    type IGraphicsDevice,
+    type IMainRenderTargetRenderPipeline, type IRendererConfiguration,
+    type IRenderPass,
+    type ISwapChain,
+    type ITexture2D,
+    type IWindowManager,
     RenderingBackend,
-    RenderPassColorAttachment, RenderPassDepthStencilAttachment,
-    RenderPassDescriptor, SwapChainDescriptor,
+    RenderPassColorAttachment,
+    RenderPassDepthStencilAttachment,
+    RenderPassDescriptor,
+    SwapChainDescriptor,
+    TextureFormat,
     TextureUsage
 } from "../../api/index.ts";
-import {TextureFormat, Color} from "../../api/index.ts";
+import {TextureColorSpace} from "../../api/rendering/enums.ts";
 
 export abstract class ARenderer implements ITempRenderer {
 
@@ -22,7 +31,6 @@ export abstract class ARenderer implements ITempRenderer {
 
     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;
@@ -36,6 +44,7 @@ export abstract class ARenderer implements ITempRenderer {
     protected _swapChainRenderPass: IRenderPass = null!;
     protected _mainRenderTargetRenderPass?: IRenderPass;
     protected _mainRenderTargetPipeline?: IMainRenderTargetRenderPipeline;
+    protected _renderConfiguration: IRendererConfiguration;
 
     /** @inheritdoc */
     public get graphicsDevice(): IGraphicsDevice {
@@ -58,9 +67,7 @@ export abstract class ARenderer implements ITempRenderer {
     }
 
     /** @inheritdoc */
-    public get preferredTextureFormat(): TextureFormat {
-        return this._preferredTextureFormat;
-    }
+    public readonly preferredTextureFormat: TextureFormat;
 
     /** @inheritdoc */
     public get preferredDepthStencilFormat(): TextureFormat {
@@ -93,12 +100,16 @@ export abstract class ARenderer implements ITempRenderer {
     /**
      * The constructor.
      * @param framework The framework.
+     * @param configuration The renderer configuration.
      */
-    constructor(framework: IFramework) {
+    protected constructor(framework: IFramework, configuration: IRendererConfiguration) {
         this._framework = framework;
+        this._renderConfiguration = configuration;
         this._windowManager = framework.windowManager;
         this._currentBackBufferSize[0] = this._windowManager.canvas.width;
         this._currentBackBufferSize[1] = this._windowManager.canvas.height;
+        this.preferredTextureFormat = configuration.textureColorSpace == TextureColorSpace.SRGB
+            ? TextureFormat.RGBA_8_UNORM_SRGB : TextureFormat.RGBA_8_UNORM;
     }
 
      backend: RenderingBackend = RenderingBackend.WEB_GL;
@@ -136,8 +147,6 @@ export abstract class ARenderer implements ITempRenderer {
         this._swapChain = this._graphicsDevice.createSwapChain(
             this._windowManager.canvas,
             new SwapChainDescriptor());
-        this._preferredTextureFormat = this._swapChain.textureFormat
-
         // TODO: RESIZE EVENT
 
     }

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

@@ -80,4 +80,35 @@ export class VertexBufferLayout implements IVertexBufferLayout {
             ]
         );
     }
-}
+
+    static createFloat3Float4Float2Float3Layout(): VertexBufferLayout {
+        const floatSize = 4;
+
+        return new VertexBufferLayout(
+            (3 + 4 + 2 + 3) * floatSize,
+            VertexStepMode.VERTEX,
+            [
+                {
+                    format: VertexFormat.FLOAT_32X3,
+                    offset: 0,
+                    shaderLocation: 0,
+                },
+                {
+                    format: VertexFormat.FLOAT_32X4,
+                    offset: 3 * floatSize,
+                    shaderLocation: 1,
+                },
+                {
+                    format: VertexFormat.FLOAT_32X2,
+                    offset: (3 + 4) * floatSize,
+                    shaderLocation: 2,
+                },
+                {
+                    format: VertexFormat.FLOAT_32X3,
+                    offset: (3 + 4 + 2) * floatSize,
+                    shaderLocation: 3,
+                },
+            ]
+        );
+    }
+}

package/src/index.ts

@@ -1,4 +1,3 @@
 export {Framework} from "./Framework.ts";
-export {FrameworkConfiguration} from "./api/FrameworkConfiguration.ts";
 export {TextureSamplerFilteringPreset} from "./core/rendering/enums.ts";
 export * from "./api/index.ts";

package/src/main.ts

@@ -1,14 +1,12 @@
 import './style.css'
-import "reflect-metadata";
 
 import typescriptLogo from './typescript.svg'
 import viteLogo from '/vite.svg'
 import {Framework} from './Framework.ts';
-import {FrameworkConfiguration} from "./api/FrameworkConfiguration.ts";
 import {TextureSamplerFilteringPreset} from "./core/rendering/enums.ts";
 import {
   Color,
-  type IFramework,
+  type IFramework, IFrameworkConfiguration,
   type ISampler,
   type ITexture2D,
   Rect,
@@ -32,7 +30,7 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
 `
 
 
-const frameworkConfig = new FrameworkConfiguration();
+const frameworkConfig: IFrameworkConfiguration = {} ;
 frameworkConfig.canvas = document.getElementById("game-canvas") as HTMLCanvasElement;
 frameworkConfig.textureFiltering = TextureSamplerFilteringPreset.BILINEAR;
 const framework : IFramework = new Framework(frameworkConfig);

package/src/webgl/WebGLGraphicsDeviceFeatures.ts

@@ -14,13 +14,17 @@ export class WebGLGraphicsDeviceFeatures implements IGraphicsDeviceFeatures {
         this.supportsTextureCompressionASTC = !!this.astcExtension;
 
         this.bptcExtension = webgl.getExtension("EXT_texture_compression_bptc") as EXT_texture_compression_bptc;
-        this.supportsTextureCompressionS3TC = !!this.bptcExtension;
+        // BPTC holds BC6H/BC7 (linear and sRGB).
+        this.supportsTextureCompressionBC = !!this.bptcExtension;
 
         this.etcExtension = webgl.getExtension("WEBGL_compressed_texture_etc") as WEBGL_compressed_texture_etc;
         this.supportsTextureCompressionETC2 = !!this.etcExtension;
 
         this.s3tcExtension = webgl.getExtension("WEBGL_compressed_texture_s3tc") as WEBGL_compressed_texture_s3tc;
-        this.supportsTextureCompressionBC = !!this.s3tcExtension;
+        this.supportsTextureCompressionS3TC = !!this.s3tcExtension;
+
+        this.s3tcSrgbExtension = webgl.getExtension("WEBGL_compressed_texture_s3tc_srgb") as WEBGL_compressed_texture_s3tc_srgb;
+        this.supportsTextureCompressionS3TCSrgb = !!this.s3tcSrgbExtension;
 
         this.pvrtcExtension = webgl.getExtension("WEBGL_compressed_texture_pvrtc") as WEBGL_compressed_texture_pvrtc;
         this.supportsTextureCompressionPVRTC = !!this.pvrtcExtension;
@@ -54,4 +58,10 @@ export class WebGLGraphicsDeviceFeatures implements IGraphicsDeviceFeatures {
 
     /** @inheritdoc */
     readonly supportsTextureCompressionS3TC: boolean;
+
+    /** The WEBGL_compressed_texture_s3tc_srgb extension. */
+    readonly s3tcSrgbExtension?: WEBGL_compressed_texture_s3tc_srgb;
+
+    /** @inheritdoc */
+    readonly supportsTextureCompressionS3TCSrgb: boolean;
 }

package/src/webgl/WebGlGpuInfo.ts

@@ -34,7 +34,7 @@ export class WebGlGpuInfo implements IGPUInfo {
         const supportedCompressedTextureFormats = [];
 
         if(graphicsDevice.features.supportsTextureCompressionASTC){
-            supportedCompressedTextureFormats.push(TextureFormat.ASTC_4X4_RGBA)
+            supportedCompressedTextureFormats.push(TextureFormat.ASTC_4X4_RGBA_UNORM)
         }
 
         if(graphicsDevice.features.supportsTextureCompressionS3TC) {

package/src/webgl/WebGlGraphicsDevice.ts

@@ -82,7 +82,6 @@ export class WebGlGraphicsDevice extends AGraphicsDevice {
 
         this._canvas = this._windowManager.canvas;
 
-        debugger;
         const contextOptions: WebGLContextAttributes = {
             antialias: false,
             alpha: this._descriptor.alpha,

package/src/webgl/WebGlRenderer.ts

@@ -1,14 +1,12 @@
-import { type IRendererConfiguration } from "../api/rendering/renderer-interface.ts";
 import { ARenderer } from "../core/rendering/ARenderer.ts";
 import { WebGlGraphicsDevice } from "./WebGlGraphicsDevice.ts";
-import type {IFramework, IGraphicsDevice} from "../api/index.ts";
+import type {IFramework, IGraphicsDevice, IRendererConfiguration} from "../api/index.ts";
 
 /**
  * The WebGL implementation of the IRenderer interface.
  */
 export class WebGlRenderer extends ARenderer {
 
-  private _renderConfiguration: IRendererConfiguration;
 
   /**
    * The constructor.
@@ -18,8 +16,7 @@ export class WebGlRenderer extends ARenderer {
   constructor(
      framework: IFramework,
      renderConfiguration: IRendererConfiguration) {
-    super(framework);
-    this._renderConfiguration = renderConfiguration;
+    super(framework, renderConfiguration);
   }
 
   /** @inheritdoc */

package/src/webgl/lights/WebGlAmbientLightFactory.ts

@@ -0,0 +1,35 @@
+import {
+    AmbientLight,
+    Color,
+    type AmbientLightDescriptor,
+    type AmbientLightFactory,
+    type IFramework,
+    type LightsBuffer,
+    type LightsBufferDescriptor,
+    type Scene,
+} from "../../api/index.ts";
+import {WebGlLightsBuffer} from "./WebGlLightsBuffer.ts";
+
+/** The WebGL implementation of the light factory. */
+export class WebGlAmbientLightFactory implements AmbientLightFactory {
+
+    /** The colour used when no descriptor is given. */
+    public static readonly DEFAULT_COLOR = new Color(0.1, 0.1, 0.1);
+
+    /**
+     * The constructor.
+     * @param _framework The framework.
+     */
+    public constructor(private readonly _framework: IFramework) {
+    }
+
+    /** @inheritDoc */
+    public createAmbientLight(desc?: AmbientLightDescriptor, scene?: Scene): AmbientLight {
+        return new AmbientLight({...desc, color: desc?.color ?? WebGlAmbientLightFactory.DEFAULT_COLOR}, scene);
+    }
+
+    /** @inheritDoc */
+    public __createLightsBuffer(desc?: LightsBufferDescriptor): LightsBuffer {
+        return new WebGlLightsBuffer(this._framework, desc);
+    }
+}