ris-framework 0.1.0-dev.4

package/src/geometry/GeometryFormat.ts

@@ -0,0 +1,37 @@
+/**
+ * The geometry format.
+ */
+export enum GeometryFormat {
+  /**
+   * Geometry format where:
+   * First 3 floats are reserved for vertex position.Following 4 floats are reserved for vertex color.
+   */
+  POS3_COLOR4 = 0,
+
+  /**
+   * Geometry format where:
+   * First 3 floats are reserved for vertex position.Following 4 floats are reserved for vertex color.Following 2 floats are reserved for vertex texture coordinates.
+   */
+  POS3_COLOR4_TEXTURECOORDS2 = 1,
+
+  /**
+   * Geometry format where:
+   * First 3 floats are reserved for vertex position.Following 4 floats are reserved for vertex color.Following 2 floats are reserved for vertex texture coordinates.
+   * When aligned, the vertex format is aligned to 4 floats.
+   * Meaning:
+   * First 4 floats are reserved for vertex position, but only 3 are used.Following 4 floats are reserved for vertex color.Following 4 floats are reserved for vertex texture coordinates, but only 2 are used.
+   */
+  POS3_COLOR4_TEXTURECOORDS2_ALIGNED = 2,
+
+  /**
+   * Geometry format where:
+   * First 3 floats are reserved for vertex position.Following 4 floats are reserved for vertex color.Following 2 floats are reserved for vertex texture coordinates.Following 3 floats are reserved for vertex normal.
+   */
+  POS3_COLOR4_TEXTURECOORDS2_NORMAL3 = 3,
+
+  /**
+   * Geometry format where:
+   * First 3 floats are reserved for vertex position.Following 2 floats are reserved for texture coordinates.
+   */
+  POS3_TEXTURECOORDS2 = 4
+}

package/src/main.ts

@@ -0,0 +1,97 @@
+import './style.css'
+import "reflect-metadata";
+
+import typescriptLogo from './typescript.svg'
+import viteLogo from '/vite.svg'
+import {setupCounter} from './counter.ts'
+import {Framework} from './core/Framework.ts';
+import {FrameworkConfig} from "./core/FrameworkConfig.ts";
+import {TextureSamplerFilteringPreset} from "./core/rendering/enums.ts";
+import {
+  Color,
+  type IFramework,
+  type ISampler,
+  type ITexture2D,
+  Rect,
+  SamplerDescriptor,
+  SamplerFilter, TextureDescriptor, TextureFormat
+} from "ris-framework-api";
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    <a href="https://vite.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>Vite + TypeScript</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite and TypeScript logos to learn more
+    </p>
+  </div>
+`
+
+setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+
+const frameworkConfig = new FrameworkConfig();
+frameworkConfig.canvas = document.getElementById("game-canvas") as HTMLCanvasElement;
+frameworkConfig.textureFiltering = TextureSamplerFilteringPreset.BILINEAR;
+const framework : IFramework = new Framework(frameworkConfig);
+
+const rect = new Rect(200, 200, 200, 200);
+const texRect = new Rect(500, 200, 200, 200);
+const texRect2 = new Rect(200, 500, 200, 200);
+const color = Color.blue();
+const whiteColor = Color.white();
+let tex: ITexture2D;
+let tex2 : ITexture2D;
+let sampler: ISampler;
+framework.addOnLoadContentListener(async () =>
+{
+
+  const texDesc = new TextureDescriptor();
+  texDesc.generateMipmaps = true;
+  texDesc.textureFormat = TextureFormat.RGBA_8_UNORM;
+
+  tex = await framework.content.loadTexture2DAsync("/assets/test.png", texDesc);
+  tex2 = await framework.content.loadTexture2DAsync("/assets/cat.jpg", texDesc);
+});
+
+framework.addOnInitializedListener(() => {
+  const desc = new SamplerDescriptor();
+  desc.minFilter = SamplerFilter.NEAREST;
+  desc.magFilter = SamplerFilter.NEAREST;
+  // desc.label = "Label";
+  sampler = framework.graphicsDevice.createSampler(desc);
+});
+
+framework.addOnRenderListener(() =>
+{
+  let spriteBatch = framework.spriteBatch;
+
+  spriteBatch.begin(undefined, sampler);
+  spriteBatch.drawRect(rect, color);
+  if(tex != null){
+    spriteBatch.draw(tex, texRect, whiteColor);
+  }
+  if(tex2 != null){
+    spriteBatch.draw(tex2, texRect2, whiteColor);
+  }
+  spriteBatch.end();
+});
+
+framework.initialize();
+framework.renderer.clearColor = Color.lightPink();
+
+
+// We need to load geometry and create vertex buffer and index buffer from it.
+// const geometry = framework.geometryBuilder.quadGeometry();
+// const vertexBuffer =
+// const indexBuffer =
+
+// Next we need to create unlit pipeline for geometry.
+

package/src/style.css

@@ -0,0 +1,96 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/src/webgl/WebGLGraphicsDeviceFeatures.ts

@@ -0,0 +1,57 @@
+import type {IGraphicsDeviceFeatures} from "ris-framework-api";
+
+/**
+ * The WebGL implementation of the IGraphicsDeviceFeatures interface.
+ */
+export class WebGLGraphicsDeviceFeatures implements IGraphicsDeviceFeatures {
+
+    /**
+     * Creates a new instance of WebGLGraphicsDeviceFeatures.
+     * @param webgl The WebGL2RenderingContext.
+     */
+    public constructor(webgl: WebGL2RenderingContext) {
+        this.astcExtension = webgl.getExtension("WEBGL_compressed_texture_astc") as WEBGL_compressed_texture_astc;
+        this.supportsTextureCompressionASTC = !!this.astcExtension;
+
+        this.bptcExtension = webgl.getExtension("EXT_texture_compression_bptc") as EXT_texture_compression_bptc;
+        this.supportsTextureCompressionS3TC = !!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.pvrtcExtension = webgl.getExtension("WEBGL_compressed_texture_pvrtc") as WEBGL_compressed_texture_pvrtc;
+        this.supportsTextureCompressionPVRTC = !!this.pvrtcExtension;
+    }
+
+    /** The WEBGL_compressed_texture_astc extension. */
+    readonly astcExtension?: WEBGL_compressed_texture_astc;
+
+    /** @inheritdoc */
+    readonly supportsTextureCompressionASTC: boolean;
+
+    /** The EXT_texture_compression_bptc extension. */
+    readonly bptcExtension?: EXT_texture_compression_bptc;
+
+    /** @inheritdoc */
+    readonly supportsTextureCompressionBC: boolean;
+
+    /** The WEBGL_compressed_texture_etc extension. */
+    readonly etcExtension: WEBGL_compressed_texture_etc;
+
+    /** @inheritdoc */
+    readonly supportsTextureCompressionETC2: boolean;
+
+    /** The WEBGL_compressed_texture_pvrtc extension. */
+    readonly pvrtcExtension?: WEBGL_compressed_texture_pvrtc;
+
+    readonly supportsTextureCompressionPVRTC: boolean;
+
+    /** The WEBGL_compressed_texture_s3tc extension. */
+    readonly s3tcExtension?: WEBGL_compressed_texture_s3tc
+
+    /** @inheritdoc */
+    readonly supportsTextureCompressionS3TC: boolean;
+}

package/src/webgl/WebGlGpuInfo.ts

@@ -0,0 +1,76 @@
+import {type IGPUInfo, RenderingBackend, TextureFormat} from "ris-framework-api";
+import type {WebGlGraphicsDevice} from "./WebGlGraphicsDevice.ts";
+
+/**
+ * The WebGL implementation of IGPUInfo
+ */
+export class WebGlGpuInfo implements IGPUInfo {
+
+    /**
+     * The constructor.
+     * @param graphicsDevice The graphics device.
+     */
+    public constructor(graphicsDevice: WebGlGraphicsDevice) {
+
+        var gl = graphicsDevice.gl;
+
+        // Get name of the graphics device.
+        const debugExt = gl.getExtension("WEBGL_debug_renderer_info");
+        if(debugExt) {
+            this.name = gl.getParameter(debugExt.UNMASKED_RENDERER_WEBGL);
+            this.vendor = gl.getParameter(debugExt.UNMASKED_VENDOR_WEBGL);
+        }
+        else {
+            this.name = gl.getParameter(gl.RENDERER);
+            this.vendor = gl.getParameter(gl.VENDOR);
+        }
+
+        this.apiVersion = gl.getParameter(gl.VERSION);
+        this.api = RenderingBackend.WEB_GL;
+
+        // This info is hidden, therefore default.
+        this.underlyingBackend = RenderingBackend.DEFAULT;
+
+        const supportedCompressedTextureFormats = [];
+
+        if(graphicsDevice.features.supportsTextureCompressionASTC){
+            supportedCompressedTextureFormats.push(TextureFormat.ASTC_4X4_RGBA)
+        }
+
+        if(graphicsDevice.features.supportsTextureCompressionS3TC) {
+            supportedCompressedTextureFormats.push(TextureFormat.BC3_RGBA_UNORM)
+        }
+
+        if(graphicsDevice.features.supportsTextureCompressionETC2) {
+            supportedCompressedTextureFormats.push(TextureFormat.ETC2_RGBA8_UNORM);
+        }
+
+        if(graphicsDevice.features.supportsTextureCompressionBC) {
+            supportedCompressedTextureFormats.push(TextureFormat.BC7_RGBA_UNORM);
+        }
+
+        // TODO: PVRC
+
+        this.supportedCompressedTextureFormats = supportedCompressedTextureFormats;
+
+    }
+
+    /** @inheritDoc */
+    readonly api: RenderingBackend;
+
+    /** @inheritDoc */
+    readonly apiVersion: string;
+
+    /** @inheritDoc */
+    readonly name: string;
+
+    /** @inheritDoc */
+    readonly supportedCompressedTextureFormats: TextureFormat[];
+
+    /** @inheritDoc */
+    readonly underlyingBackend: RenderingBackend;
+
+    /** @inheritDoc */
+    readonly vendor: string;
+
+}

package/src/webgl/WebGlGraphicsDevice.ts

@@ -0,0 +1,129 @@
+import type {IRenderPass} from "../core/rendering/render-pass/render-pass-interface";
+import {WebGlSampler} from "./sampler/webgl-sampler";
+import {WebGlRenderPass} from "./render-pass/WebGlRenderPass.ts";
+import {AGraphicsDevice, GraphicsDeviceDescriptor} from "../core/rendering/AGraphicsDevice.ts";
+import {type BlendStateDescriptor} from "../core/rendering/blending/blend-state-descriptor";
+import {WebGlBlendState} from "./blending/webgl-blend-state";
+import {WebGlPrimitiveState} from "./primitive/WebGlPrimitiveState.ts";
+import {PrimitiveStateDescriptor} from "../core/rendering/primitive/PrimitiveStateDescriptor.ts";
+import {WebGLGraphicsDeviceFeatures} from "./WebGLGraphicsDeviceFeatures.ts";
+import {WebGlSwapChain} from "./swap-chain/WebGlSwapChain.ts";
+import {WebGlGpuInfo} from "./WebGlGpuInfo.ts";
+import type {
+    IBlendState,
+    IGPUInfo, IPrimitiveState,
+    ISampler,
+    ISwapChain,
+    IWindowManager,
+    RenderPassDescriptor,
+    SwapChainDescriptor
+} from "ris-framework-api";
+import type {SamplerDescriptor} from "../core/rendering/sampler/sampler-descriptor.ts";
+
+export class WebGlGraphicsDevice extends AGraphicsDevice {
+
+
+    public setupDebugCallback(): void {
+        throw new Error("Method not implemented.");
+    }
+
+    public frameEnd(): void {
+        throw new Error("Method not implemented.");
+    }
+
+    public pushDebugGroup(_groupName: string): void {
+        throw new Error("Method not implemented.");
+    }
+
+    public popDebugGroup(): void {
+        throw new Error("Method not implemented.");
+    }
+
+
+    private readonly _windowManager: IWindowManager;
+    private _canvas: HTMLCanvasElement = null!;
+    private _gl: WebGL2RenderingContext = null!;
+    private _features: WebGLGraphicsDeviceFeatures = null!;
+    private _gpuInfo: WebGlGpuInfo = null!;
+
+    /**
+     * The constructor.
+     * @param windowManager The window manager that provides access to the canvas element and other window-related functionalities needed for initializing the graphics device and creating rendering contexts.
+     * @param descriptor The descriptor for the graphics device. This is used to configure the graphics device during initialization.
+     */
+    public constructor(windowManager: IWindowManager, descriptor: GraphicsDeviceDescriptor) {
+
+        super(descriptor);
+        this._windowManager = windowManager;
+    }
+
+    /**
+     * The WebGL rendering context.
+     */
+    public get gl(): WebGL2RenderingContext {
+        return this._gl;
+    }
+
+    /** @inheritdoc */
+    public get features() {
+        return this._features;
+    }
+
+    /** @inheritdoc */
+    public get gpuInfo(): IGPUInfo {
+        return this._gpuInfo;
+    }
+
+
+    /** @inheritdoc */
+    public initialize(): void {
+
+        this._canvas = this._windowManager.canvas;
+
+        const contextOptions: WebGLContextAttributes = {
+            antialias: false,
+            powerPreference: "high-performance", // TODO: Make configurable.
+        };
+
+        this._gl = this._canvas.getContext(
+            "webgl2",
+            contextOptions,
+        ) as WebGL2RenderingContext;
+
+        // If not supported, throw an error.
+        if (!this._gl) {
+            throw new Error("WebGL not supported.");
+        }
+
+        this._features = new WebGLGraphicsDeviceFeatures(this._gl);
+        this._gpuInfo = new WebGlGpuInfo(this);
+
+        super.initialize();
+    }
+
+    /** @inheritdoc */
+    public createSwapChain(canvas: HTMLCanvasElement, _: SwapChainDescriptor): ISwapChain {
+        return new WebGlSwapChain(canvas, this);
+    }
+
+    /** @inheritdoc */
+    public createSampler(descriptor?: SamplerDescriptor): ISampler {
+        return new WebGlSampler(this, descriptor);
+    }
+
+    /** @inheritdoc */
+    public createRenderPass(descriptor: RenderPassDescriptor): IRenderPass {
+        return new WebGlRenderPass(this, descriptor);
+    }
+
+    /** @inheritdoc */
+    public createBlendState(descriptor: BlendStateDescriptor): IBlendState {
+        return new WebGlBlendState(this, descriptor);
+    }
+
+    /** @inheritdoc */
+    public createPrimitiveState(descriptor?: PrimitiveStateDescriptor): IPrimitiveState {
+        descriptor = descriptor ?? new PrimitiveStateDescriptor();
+        return new WebGlPrimitiveState(this._gl, descriptor);
+    }
+}

package/src/webgl/WebGlRenderer.ts

@@ -0,0 +1,31 @@
+import { type RenderConfiguration } from "../core/renderer/renderer-interface";
+import { ARenderer } from "../core/rendering/ARenderer.ts";
+import { WebGlGraphicsDevice } from "./WebGlGraphicsDevice.ts";
+import type {IFramework, IGraphicsDevice} from "ris-framework-api";
+
+/**
+ * The WebGL implementation of the IRenderer interface.
+ */
+export class WebGlRenderer extends ARenderer {
+
+  private _renderConfiguration: RenderConfiguration;
+
+  /**
+   * The constructor.
+   * @param framework The framework.
+   * @param renderConfiguration The render configuration. This is used to initialize the renderer.
+   */
+  constructor(
+     framework: IFramework,
+     renderConfiguration: RenderConfiguration) {
+    super(framework);
+    this._renderConfiguration = renderConfiguration;
+  }
+
+  /** @inheritdoc */
+  protected createGraphicsDevice(): IGraphicsDevice {
+    return new WebGlGraphicsDevice(this._framework.windowManager, {
+      samplerFilteringPreset: this._renderConfiguration.textureFiltering
+    });
+  }
+}

package/src/webgl/blending/webgl-blend-state.ts

@@ -0,0 +1,59 @@
+import type { BlendStateDescriptor } from "../../core/rendering/blending/blend-state-descriptor";
+import { WebGlConverter } from "../utilities/WebGlConverter.ts";
+import type { WebGlGraphicsDevice } from "../WebGlGraphicsDevice.ts";
+import type {IBlendState} from "ris-framework-api";
+
+/**
+ * The WebGL blend state.
+ */
+export class WebGlBlendState implements IBlendState {
+
+    private readonly _gl: WebGL2RenderingContext;
+
+    private _blendEnabled: boolean;
+    private _srcColorFactor: GLenum;
+    private _dstColorFactor: GLenum;
+    private _colorBlendOperation: GLenum;
+    private _srcAlphaFactor: GLenum;
+    private _dstAlphaFactor: GLenum;
+    private _alphaBlendOperation: GLenum;
+
+    /**
+     * The constructor.
+     * @param _graphicsDevice The graphics device.
+     * @param descriptor The blend state descriptor.
+     */
+    public constructor(private readonly _graphicsDevice: WebGlGraphicsDevice, descriptor: BlendStateDescriptor) {
+        this._gl = this._graphicsDevice.gl;
+        this._blendEnabled = descriptor.blendingEnabled;
+        this._srcColorFactor = WebGlConverter.convertBlendFactor(this._gl, descriptor.color.srcFactor);
+        this._dstColorFactor = WebGlConverter.convertBlendFactor(this._gl, descriptor.color.dstFactor);
+        this._colorBlendOperation = WebGlConverter.convertBlendOperation(this._gl, descriptor.color.operation);
+        this._srcAlphaFactor = WebGlConverter.convertBlendFactor(this._gl, descriptor.alpha.srcFactor);
+        this._dstAlphaFactor = WebGlConverter.convertBlendFactor(this._gl, descriptor.alpha.dstFactor);
+        this._alphaBlendOperation = WebGlConverter.convertBlendOperation(this._gl, descriptor.alpha.operation);
+    }
+
+    /** @inheritdoc */
+    public nativePtr: any;
+
+    /**
+     * For internal use only. Applies the blend state to the WebGL context.
+     * @param gl The WebGL context to apply the blend state to.
+     */
+    public apply(gl: WebGL2RenderingContext): void {
+        if (this._blendEnabled) {
+            gl.enable(gl.BLEND);
+            gl.blendFuncSeparate(this._srcColorFactor, this._dstColorFactor, this._srcAlphaFactor, this._dstAlphaFactor);
+            gl.blendEquationSeparate(this._colorBlendOperation, this._alphaBlendOperation);
+        } else {
+            gl.disable(gl.BLEND);
+        }
+    }
+
+    /** @inheritdoc */
+    public dispose(): void {
+        // No resources to dispose for blend state in WebGL, as the state is applied directly to the WebGL context.
+    }
+
+}

package/src/webgl/buffers/WebGlBuffersFactory.ts

@@ -0,0 +1,75 @@
+import { WebGlVertexBuffer as WebGlVertexBuffer } from "./WebGlVertexBuffer.ts";
+import {WebGLIndexBuffer} from "./webgl-index-buffer.ts";
+import {
+    BufferUsage,
+    type IBufferFactory,
+    type IFramework,
+    type IIndexBuffer,
+    type IUniformBuffer,
+    type IVertexBuffer
+} from "ris-framework-api";
+import {WebGlUniformBuffer} from "./WebGlUniformBuffer.ts";
+
+export class WebGlBuffersFactory implements IBufferFactory {
+
+    /**
+     * The constructor of the WebGLBuffersFactory class.
+     * @param _framework The framework instance to use for creating buffers.
+     */
+    public constructor(private readonly _framework: IFramework) {
+    }
+
+    /** @inheritDoc */
+    public createVertexBuffer(data: ArrayLike<number>, vertexStride: number, usage: BufferUsage, label?: string): IVertexBuffer {
+        const vertexBuffer = new WebGlVertexBuffer(this._framework, data, vertexStride, usage, label );
+        vertexBuffer.initialize();
+        return vertexBuffer;
+    }
+
+    /** @inheritDoc */
+    public createUniformBuffer(data: ArrayLike<number>, usage: BufferUsage, label?: string): IUniformBuffer {
+        const uniformBuffer = new WebGlUniformBuffer(this._framework, data, usage, label);
+        uniformBuffer.initialize();
+        return uniformBuffer;
+    }
+
+    /** @inheritdoc */
+    public createIndexBuffer(data: ArrayLike<number>, label?: string): IIndexBuffer {
+        const buffer = new WebGLIndexBuffer(this._framework, label);
+        buffer.initialize(data);
+        return buffer;
+    }
+
+
+    /** @inheritdoc */
+    /*
+    public createIndexBuffer(data: Uint16Array | Uint32Array, label: string | null): IIndexBuffer {
+        const indexBuffer = new WebGlIndexBuffer(this._framework, label);
+        indexBuffer.initialize(data);
+        return indexBuffer;
+    }
+
+
+
+    public createVertexBuffer(
+        dataOrByteSize: number[] | number,
+        byteStride: number,
+        vertexCount: number,
+        bufferUsage: BufferUsage = BufferUsage.VERTEX | BufferUsage.COPYDST,
+        label: string | null = null): IVertexBuffer {
+
+        const vertexBuffer = new WebGlVertexBuffer(this._framework, label);
+        vertexBuffer.initialize(dataOrByteSize, byteStride, vertexCount, bufferUsage);
+        return vertexBuffer;
+    }
+
+    /** @inheritdoc */
+    /*
+    public createUniformBuffer(dataOrByteLength: ArrayBuffer | ArrayBufferView | number, bufferUsage: BufferUsage = BufferUsage.UNIFORM | BufferUsage.COPY_DST, label: string | null = null): IUniformBuffer {
+        const uniformBuffer = new WebGlUniformBuffer(this._graphicsDevice, bufferUsage, label ?? "");
+        uniformBuffer.initialize(dataOrByteLength);
+        return uniformBuffer;
+    }
+
+     */
+}