ris-framework 0.1.0-dev.4

package/shaders/glsl/sprite_fs.glsl

@@ -0,0 +1,14 @@
+#version 300 es
+precision mediump float;
+
+in vec4 v_color;
+in vec2 v_texCoords;
+
+layout(location = 0) out vec4 o_outputColor;
+
+uniform sampler2D u_texture;
+
+void main()
+{
+    o_outputColor = texture(u_texture, v_texCoords) * v_color;
+}

package/shaders/glsl/sprite_vs.glsl

@@ -0,0 +1,20 @@
+#version 300 es
+
+layout(location = 0) in vec3 a_position;
+layout(location = 1) in vec4 a_color;
+layout(location = 2) in vec2 a_texCoord;
+
+out vec4 v_color;
+out vec2 v_texCoords;
+
+layout(std140) uniform CameraBuffer
+{
+	mat4 u_projectionView;
+};
+
+void main()
+{
+	gl_Position = u_projectionView * vec4(a_position, 1.0);
+	v_color = a_color;
+	v_texCoords = a_texCoord;
+}

package/shaders/glsl/unlit_material_fs.glsl

@@ -0,0 +1,19 @@
+#version 300 es
+precision mediump float;
+
+in vec4 v_color;
+in vec2 v_texCoords;
+
+layout(location = 0) out vec4 o_outputColor;
+
+layout(std140) uniform MaterialBuffer
+ {
+    vec4 diffuseColor;
+};
+
+uniform sampler2D u_texture;
+
+void main()
+{
+    o_outputColor = texture(u_texture, v_texCoords) * v_color * diffuseColor;
+}

package/shaders/glsl/unlit_material_vs.glsl

@@ -0,0 +1,25 @@
+#version 300 es
+
+layout(location = 0) in vec3 a_position;
+layout(location = 1) in vec4 a_color;
+layout(location = 2) in vec2 a_texCoord;
+
+out vec4 v_color;
+out vec2 v_texCoords;
+
+layout(std140) uniform CameraBuffer
+{
+	mat4 projectionView;
+};
+
+layout(std140) uniform ModelBuffer
+{
+    mat4 model;
+};
+
+void main()
+{
+	gl_Position = projectionView * model * vec4(a_position, 1.0);
+	v_color = a_color;
+	v_texCoords = a_texCoord;
+}

package/src/VertexFormat.ts

@@ -0,0 +1,17 @@
+/**
+ * The vertex format. Used to describe the format of a vertex attribute.
+ */
+export enum VertexFormat {
+  FLOAT_32 = 0,
+
+  FLOAT_32X2 = 1,
+
+  FLOAT_32X3 = 2,
+
+  FLOAT_32X4 = 3,
+
+  /**
+   * The format of a 32-bit float with 16 components. Used for matrix attributes.
+   */
+  FLOAT_32X16 = 4
+}

package/src/common/sampler-enums.ts

@@ -0,0 +1,21 @@
+
+
+/**
+ * The compare function to use when sampling a texture. This is used for depth textures and determines how the sampled depth value is compared to the reference value.
+ */
+export enum SamplerCompareFunction {
+
+    /**
+     * The sampled depth value is never less than the reference value. 
+     * This means that the comparison will always fail, and the texture will not contribute to the final image.
+     */
+    Never,
+
+    /**
+     * The sampled depth value is less than the reference value. 
+     * This means that the comparison will pass if the sampled depth value is less than the reference value, and the texture will contribute to the final image.
+     */
+    LessEqual,
+
+
+}

package/src/common/vertex-step-mode.ts

@@ -0,0 +1,12 @@
+export enum VertexStepMode {
+
+    /**
+     * The vertex buffer is stepped through once per vertex. This is the default step mode.
+     */
+    Vertex = 0,
+
+    /**
+     * The vertex buffer is stepped through once per instance. This is used for instanced rendering.
+     */
+    Instance = 1,
+}

package/src/content/ShaderModuleContent.ts

@@ -0,0 +1,47 @@
+import mainRenderTargetFlipYVS from "../../shaders/glsl/main_render_target_flip_y_vs.glsl?raw";
+import mainRenderTargetFlipYFS from "../../shaders/glsl/main_render_target_flip_y_fs.glsl?raw";
+import spriteVS from "../../shaders/glsl/sprite_vs.glsl?raw";
+import spriteFS from "../../shaders/glsl/sprite_fs.glsl?raw";
+import inspectTextureMipsVS from "../../shaders/glsl/inspect_texture_mips_vs.glsl?raw";
+import inspectTextureMipsFS from "../../shaders/glsl/inspect_texture_mips_fs.glsl?raw";
+import unlitMaterialVS from "../../shaders/glsl/unlit_material_vs.glsl?raw";
+import unlitMaterialFS from "../../shaders/glsl/unlit_material_fs.glsl?raw";
+
+/**
+ * The api should look something like this for internal ones.
+ * export const ShaderContent = {
+ *     "example_shader": {
+ *         "shader": "{combined_shader}", // WebGPU
+ *         "vertex": "{some_vertex_code}", // WebGL
+ *         "fragment": "{some_fragment_code}", // WebGL
+ *         "reflection": "{reflection_object}", // Both
+ *     }
+ */
+
+
+export const ShaderModuleContent : {[id: string]: any} = {
+
+    "main_render_target_flip_y": {
+        "vertex": mainRenderTargetFlipYVS,
+        "fragment": mainRenderTargetFlipYFS,
+        "reflection": {}
+    },
+
+    "sprite": {
+        "vertex": spriteVS,
+        "fragment": spriteFS,
+        "reflection": {}
+    },
+
+    "inspect_texture_mips": {
+        "vertex": inspectTextureMipsVS,
+        "fragment": inspectTextureMipsFS,
+        "reflection": {}
+    },
+
+    "unlit_material": {
+        "vertex": unlitMaterialVS,
+        "fragment": unlitMaterialFS,
+        "reflection": {}
+    }
+}

package/src/core/Framework.ts

@@ -0,0 +1,240 @@
+import {container, type DependencyContainer} from "tsyringe";
+import {WindowManager} from "./window/window-manager.ts";
+import {FrameworkConfig} from "./FrameworkConfig.ts";
+import {IFrameworkSymbol} from "./dependency-injection/register-services-interface.ts";
+import { RenderConfiguration, RenderConfigurationSymbol} from "./renderer/renderer-interface.ts";
+import {GeometryBuilder} from "../geometry/GeometryBuilder.ts";
+import {ContentManager} from "./content/ContentManager.ts";
+import {WebGlRenderer} from "../webgl/WebGlRenderer.ts";
+import {WebGlBuffersFactory} from "../webgl/buffers/WebGlBuffersFactory.ts";
+import {
+    CameraFactory, CpuImageProcessor, GameTime,
+    type IBufferFactory, type IGeometryBuilder, type IGraphicsDevice, type IImageProcessor, type IInputManager,
+    ImageLoader,
+    type IMeshFactory, type ISpriteBatch, type ITextureFactory, type ITimeManager, RenderingBackend, TimeManager
+} from "ris-framework-api";
+import {WebGlShaderModuleLoader} from "../webgl/shader/WebGlShaderModuleLoader.ts";
+import {TextureSamplerFilteringPreset} from "./rendering/enums.ts";
+import {SpriteBatch} from "./sprite-batch/SpriteBatch.ts";
+import type {ICameraFactory, IContentManager, IFramework, IImageLoader,
+    IRenderer,
+    IWindowManager
+} from "ris-framework-api";
+import {WebGlTextureFactory} from "../webgl/texture/WebGlTextureFactory.ts";
+import {WebGlRenderPipelineFactory} from "../webgl/render-pipelines/WebGlRenderPipelineFactory.ts";
+import type {IRenderPipelineFactory} from "ris-framework-api";
+import {MeshFactory, type IMaterialFactory, MaterialFactory} from "ris-framework-api";
+import {InputManager} from "./input/InputManager.ts";
+import {Ktx2Factory} from "ris-ktx2";
+import type {IKtx2Factory} from "ris-ktx2-api";
+
+export class Framework implements IFramework {
+
+    private readonly _onLoadContentListeners: (() => void)[] = [];
+    private readonly _onInitializeListeners: (() => void)[] = [];
+    private readonly _onUpdateListeners: ((gameTime: GameTime) => void)[] = [];
+    private readonly _onRenderListeners: (() => void)[] = [];
+
+    private readonly _container: DependencyContainer;
+    private readonly _textureFactory: ITextureFactory;
+    private readonly _buffersFactory: IBufferFactory;
+    private readonly _contentManager: IContentManager;
+    private readonly _geometryBuilder: IGeometryBuilder;
+    private readonly _meshFactory: IMeshFactory;
+
+    /**
+     * The constructor for the Framework class.
+     * @param options The optional options for them framework.
+     */
+    constructor(options: FrameworkConfig | null = null) {
+        options = options ?? new FrameworkConfig();
+
+        this._container = container.createChildContainer();
+        this.windowManager = new WindowManager(options.canvas);
+
+        // Setup container.
+        this._container.registerInstance(IFrameworkSymbol, this);
+        const rendererConfig = new RenderConfiguration();
+        rendererConfig.backBufferSize = options.backBufferSize;
+        rendererConfig.textureFiltering = options.textureFiltering ?? TextureSamplerFilteringPreset.BILINEAR;
+        this._container.registerInstance(RenderConfigurationSymbol, rendererConfig);
+        this.renderer = new WebGlRenderer(this, rendererConfig);
+        this.renderingBackend = RenderingBackend.WEB_GL;
+        this._textureFactory = new WebGlTextureFactory(this);
+        this._geometryBuilder = new GeometryBuilder();
+        this.renderPipelineFactory = new WebGlRenderPipelineFactory(this);
+        this._contentManager = new ContentManager(this, new WebGlShaderModuleLoader(this));
+        this._meshFactory = new MeshFactory(this);
+        this.materialFactory = new MaterialFactory(this);
+
+        this._buffersFactory = new WebGlBuffersFactory(this);
+        this.spriteBatch = new SpriteBatch(this);
+        this.cameraFactory = new CameraFactory(this);
+        this.timeManager = new TimeManager();
+        this.input = new InputManager(this);
+        this.imageProcessor = new CpuImageProcessor();
+        this.imageLoader = new ImageLoader(this);
+
+        if(options.useKtx2){
+            this.ktx2Factory = new Ktx2Factory();
+        }
+    }
+
+    /** @inheritDoc */
+    public readonly imageLoader: IImageLoader;
+
+    renderingBackend: RenderingBackend;
+
+    /** @inheritDoc */
+    public readonly imageProcessor :IImageProcessor;
+
+    /** @inheritDoc */
+    public readonly renderer : IRenderer;
+
+    /** @inheritDoc */
+    public readonly spriteBatch: ISpriteBatch;
+
+    /** @inheritDoc */
+    public cameraFactory: ICameraFactory;
+
+    /** @inheritDoc */
+    public ktx2Factory?: IKtx2Factory;
+
+    /** @inheritDoc */
+    public addOnInitializedListener(event: () => void): void {
+        this._onInitializeListeners.push(event);
+    }
+
+    /** @inheritDoc */
+    public removeOnInitializedListener(event: () => void): void {
+        this._onInitializeListeners.splice(this._onInitializeListeners.indexOf(event), 1);
+    }
+
+    /** @inheritdoc */
+    public addOnLoadContentListener(event: () => void): void {
+        this._onLoadContentListeners.push(event);
+    }
+
+    /** @inheritdoc */
+    public removeOnLoadContentListener(event: () => void): void {
+        this._onLoadContentListeners.splice(this._onLoadContentListeners.indexOf(event), 1);
+    }
+
+    /** @inheritdoc */
+    public addOnUpdateListener(event: (gameTime: GameTime) => void): void {
+        this._onUpdateListeners.push(event);
+    }
+
+    /** @inheritdoc */
+    public removeOnUpdateListener(event: (gameTime: GameTime) => void): void {
+        this._onUpdateListeners.splice(this._onUpdateListeners.indexOf(event), 1);
+    }
+
+    /** @inheritdoc */
+    public addOnRenderListener(event: () => void): void {
+        this._onRenderListeners.push(event);
+    }
+
+    /** @inheritdoc */
+    public removeOnRenderListener(event: () => void): void {
+        this._onRenderListeners.splice(this._onRenderListeners.indexOf(event), 1);
+    }
+
+    /** @inheritdoc */
+    public get graphicsDevice(): IGraphicsDevice {
+        return this.renderer.graphicsDevice;
+    }
+
+    /** @inheritdoc */
+    public renderPipelineFactory: IRenderPipelineFactory;
+
+    /** @inheritdoc */
+    get geometryBuilder(): IGeometryBuilder {
+        return this._geometryBuilder;
+    }
+
+    /** @inheritdoc */
+    public readonly windowManager: IWindowManager;
+
+    /** @inheritdoc */
+    public get textureFactory(): ITextureFactory {
+        return this._textureFactory;
+    }
+
+    /** @inheritdoc */
+    public get bufferFactory(): IBufferFactory {
+        return this._buffersFactory;
+    }
+
+    /** @inheritdoc */
+    public get content(): IContentManager {
+        return this._contentManager;
+    }
+
+    /** @inheritdoc */
+    public get meshFactory(): IMeshFactory {
+        return this._meshFactory;
+    }
+
+    /** @inheritDoc */
+    public readonly materialFactory: IMaterialFactory;
+
+    /** @inheritDoc */
+    public readonly timeManager: ITimeManager;
+
+    /** @inheritDoc */
+    public readonly input: IInputManager;
+
+    /** @inheritdoc */
+    public initialize(): void {
+
+        this.ktx2Factory?.initializeAsync();
+        (this.renderer as WebGlRenderer).initialize();
+        this.spriteBatch.initialize();
+        this.input.initialize();
+
+        this.timeManager.prepareStart();
+
+        // Load content events.
+        for(const listener of this._onLoadContentListeners){
+            listener();
+        }
+
+        for(const listener of this._onInitializeListeners){
+            listener();
+        }
+
+        this.renderer.afterInitialize();
+
+        this.windowManager.addUpdateListener(() => {
+            // Update logic here
+            this.timeManager.frameStart();
+            this.input.update();
+
+            for(const listener of this._onUpdateListeners){
+                listener(this.timeManager.time);
+            }
+
+            this.input.afterUpdate();
+        });
+        this.windowManager.addRenderListener(() => {
+            this.renderer.beginRenderPass();
+
+            // Invoke render listeners.
+            for (const listener of this._onRenderListeners) {
+                listener();
+            }
+
+            this.spriteBatch.frameEnd();
+            this.renderer.endRenderPass();
+        });
+        this.windowManager.runEventLoop();
+    }
+
+    /** @inheritDoc */
+    public dispose() {
+       //  this.windowManager.dispose();
+
+        // TODO: dispose of other resources
+    }
+}

package/src/core/FrameworkConfig.ts

@@ -0,0 +1,31 @@
+import { TextureSamplerFilteringPreset } from "./rendering/enums.ts";
+import {vec2} from "gl-matrix";
+import {IFrameworkConfig} from "ris-framework-api";
+
+/**
+ * The options for configuring the Framework.
+ */
+export class FrameworkConfig  implements IFrameworkConfig {
+
+    constructor() {}
+
+    /** @inheritDoc */
+    useKtx2 = false;
+
+    /** 
+     * The HTMLCanvasElement to use for rendering. 
+     * If null, a new canvas will be created and added to the document body.
+     */
+    canvas: HTMLCanvasElement|null = null;
+
+    /**
+     * The size of a back buffer.
+     */
+    backBufferSize: vec2 = vec2.fromValues(800,600);
+
+    /**
+     * The texture filtering preset to use for textures created by the framework. 
+     * By default, it is set to BILINEAR, which provides a good balance between performance and quality.
+     */
+    textureFiltering? = TextureSamplerFilteringPreset.BILINEAR;
+}

package/src/core/content/ContentManager.ts

@@ -0,0 +1,86 @@
+import {
+    type IShaderModule,
+    type IContentManager,
+    type IShaderModuleLoader,
+    type ITexture2D,
+    type IFramework, TextureDescriptor, TextureFormat, ContentConfig, TextureUsage
+} from "ris-framework-api";
+import {Ktx2Factory} from "ris-ktx2";
+import type {IKtx2Texture} from "ris-ktx2-api";
+
+
+/**
+ * The content manager.
+ * The content manager is responsible for managing the content modules and loading the content with the given asset file path or identifier.
+ */
+export class ContentManager implements IContentManager {
+
+    private readonly _ktx2Factory = new Ktx2Factory();
+    private readonly _ktx2TextureCache: {[key: string]: IKtx2Texture} = {};
+
+    /**
+     * The constructor.
+     * @param shaderModuleLoader The shader module loader.
+     */
+    public constructor(private readonly _framework: IFramework, public readonly shaderModuleLoader: IShaderModuleLoader) {
+    }
+
+    /** @inheritDoc */
+    public async loadKtx2Async(path: string, contentConfig?: ContentConfig): Promise<IKtx2Texture> {
+
+        let ktx2Texture = this._ktx2TextureCache[path];
+        if(ktx2Texture) {
+            return ktx2Texture;
+        }
+
+        ktx2Texture = await this._ktx2Factory.loadAsync(path);
+        if(contentConfig?.keepDataCached == true){
+            this._ktx2TextureCache[path] = ktx2Texture;
+        }
+        return ktx2Texture;
+    }
+
+    /** @inheritDoc */
+    public loadShaderModule(shaderModuleId: string): IShaderModule {
+        return this.shaderModuleLoader.load(shaderModuleId);
+    }
+
+    /** @inheritDoc */
+    public async loadTexture2DAsync(path: string,
+                                    textureDescriptor?: TextureDescriptor,
+                                    contentConfig?: ContentConfig,
+                                    ): Promise<ITexture2D> {
+
+        if(path.endsWith(".ktx2")) {
+            const ktx2Texture = await this.loadKtx2Async(path);
+            textureDescriptor = textureDescriptor ?? new TextureDescriptor();
+            return this._framework.textureFactory.createFromKtx2(ktx2Texture, textureDescriptor);
+        }
+
+        let format =  this._framework.renderer.preferredTextureFormat;
+
+        if(textureDescriptor && textureDescriptor.textureFormat != TextureFormat.UNDEFINED) {
+            format = textureDescriptor.textureFormat;
+        }
+
+        // TODO: pass texture descriptor
+        const imageLoader = this._framework.imageLoader;
+        const data = await imageLoader.loadAsync(path, contentConfig?.keepDataCached);
+        return this._framework.textureFactory.create(
+            data.baseWidth, data.baseHeight,
+            data.getData(0) as Uint8Array,
+            data.channels,
+            undefined,
+            TextureUsage.TEXTURE_BINDING | TextureUsage.COPY_SRC,
+            format,
+            textureDescriptor?.generateMipmaps
+            );
+    }
+
+    /** @inheritDoc */
+    public loadTexture2DFromPixels(width: number, height: number, pixels: ArrayBuffer): ITexture2D {
+        const view = new Uint8Array(pixels);
+        return this._framework.textureFactory.create(width, height, view);
+    }
+
+}

package/src/core/dependency-injection/register-services-interface.ts

@@ -0,0 +1,15 @@
+import type { DependencyContainer } from "tsyringe";
+
+export const IFrameworkSymbol = Symbol.for("IFramework");
+
+/**
+ * The interface for registering services to the dependency injection container.
+ */
+export interface IRegisterServices {
+
+    /**
+     * Register all services to the dependency injection container in this method.
+     * @param container The dependency injection container to register services to.
+     */
+    register(container: DependencyContainer): void;
+}

package/src/core/input/InputManager.ts

@@ -0,0 +1,115 @@
+import {
+    GamePadState,
+    type IFramework,
+    type IInputManager,
+    KeyboardState,
+    MouseButton,
+    MouseState
+} from "ris-framework-api";
+import {vec2} from "gl-matrix";
+
+export class InputManager implements IInputManager {
+
+    private readonly _mouseButtonMap: { [key: number]: MouseButton } = {
+        0: MouseButton.LEFT,
+        1: MouseButton.MIDDLE,
+        2: MouseButton.RIGHT,
+    }
+
+    private readonly _mouseState: MouseState;
+    private readonly _mousePosition = vec2.create();
+    private readonly _previousMousePosition = vec2.create();
+    private readonly _mouseDelta = vec2.create();
+    private readonly _scrollWheelPosition = vec2.create();
+    private readonly _mouseButtonDown: { [key: number]: boolean } = {};
+    private readonly _mouseButtonReleased: { [key: number]: boolean } = {};
+
+    /** TODO */
+    public constructor(private readonly _framework: IFramework) {
+
+        this._mouseState = new MouseState(
+            this._mouseButtonDown, this._mouseButtonReleased,
+            this._mousePosition, this._mouseDelta, this._scrollWheelPosition
+        );
+    }
+
+
+    thumbstickDeadZone = 0.2;
+
+
+    getGamePadState(_gamePadIndex: number): GamePadState {
+        return new GamePadState(false, {}, {}, vec2.create(), vec2.create());
+    }
+
+    getKeyboardState(): KeyboardState {
+        return new KeyboardState({}, {});
+    }
+
+    /** @inheritDoc */
+    public getMouseState(): MouseState {
+        return this._mouseState;
+    }
+
+    /** @inheritDoc */
+    public initialize(): void {
+
+        const canvas = this._framework.windowManager.canvas;
+        this._handleMouseEvents(canvas)
+    }
+
+    private _handleMouseEvents(canvas: HTMLCanvasElement) {
+
+        canvas.addEventListener("mousemove", (e: MouseEvent) => {
+            this._mousePosition[0] = e.clientX;
+            this._mousePosition[1] = e.clientY;
+        });
+
+        canvas.addEventListener("mousedown", (e: MouseEvent) => {
+            const idx = e.button;
+            const btn = this._mouseButtonMap[idx] ?? MouseButton.NONE;
+            this._mouseButtonDown[btn] = true;
+        })
+
+        canvas.addEventListener("mouseup", (e: MouseEvent) => {
+            const idx = e.button;
+            const btn = this._mouseButtonMap[idx] ?? MouseButton.NONE;
+            this._mouseButtonDown[btn] = false;
+            this._mouseButtonReleased[btn] = true;
+        });
+
+        canvas.addEventListener("wheel", (e: WheelEvent) => {
+
+            let x = 0;
+            let y = 0;
+            if (e.deltaX > 0) {
+                x = 1;
+            } else if (e.deltaX < 0) {
+                x = -1;
+            }
+
+            if (e.deltaY > 0) {
+                y = 1;
+            } else if (e.deltaY < 0) {
+                y = -1;
+            }
+
+            vec2.set(this._scrollWheelPosition, x, y);
+
+            e.preventDefault();
+        })
+    }
+
+    /** @inheritDoc */
+    public update(): void {
+        vec2.sub(this._mouseDelta, this._mousePosition, this._previousMousePosition);
+        vec2.copy(this._previousMousePosition, this._mousePosition);
+    }
+
+    /** @inheritDoc */
+    public afterUpdate(): void {
+        vec2.set(this._scrollWheelPosition, 0, 0);
+
+    }
+
+
+}