ris-framework 0.1.0 → 0.2.0-dev.12

package/src/webgl/lights/WebGlLightsBuffer.ts

@@ -0,0 +1,225 @@
+import {
+    AmbientLight,
+    BufferUsage,
+    DirectionalLight,
+    PointLight,
+    type Color,
+    DEFAULT_POINT_LIGHTS_COUNT,
+    type IFramework,
+    type IUniformBuffer,
+    type LightsBuffer,
+    type LightsBufferDescriptor,
+    DEFAULT_DIRECTIONAL_LIGHTS_COUNT,
+} from "../../api/index.ts";
+
+/**
+ * The WebGL lights buffer. Owns a std140 uniform buffer for the `LightsBuffer` block.
+ * See {@link LightsBuffer} for the layout.
+ */
+export class WebGlLightsBuffer implements LightsBuffer {
+
+    /** Floats for the ambient light: vec3 padded to 16 bytes. */
+    public static readonly AMBIENT_FLOAT_COUNT = 4;
+
+    /** Floats per directional light: two vec3, each padded to 16 bytes. */
+    public static readonly DIRECTIONAL_LIGHT_FLOAT_COUNT = 8;
+
+    /** Floats per point light: vec3 light + float constant, vec3 position + float linear, float quadratic, padded to 48 bytes. */
+    public static readonly POINT_LIGHT_FLOAT_COUNT = 12;
+
+    private _ambientLight!: AmbientLight;
+    private readonly _buffer: IUniformBuffer;
+    private readonly _data: number[];
+    private readonly _uploaded: number[];
+    private _directionalLights: DirectionalLight[] = [];
+    private _pointLights: PointLight[] = [];
+    private _disposed = false;
+
+    /**
+     * The constructor.
+     * @param framework The framework, used to create the uniform buffer.
+     * @param descriptor The optional initial lights and directional light count.
+     */
+    public constructor(framework: IFramework, descriptor?: LightsBufferDescriptor) {
+        this.ambientLight = descriptor?.ambientLight ?? new AmbientLight();
+        this.maxDirectionalLights = descriptor?.maxDirectionalLights ?? DEFAULT_DIRECTIONAL_LIGHTS_COUNT;
+        this.maxPointLights = descriptor?.maxPointLights ?? DEFAULT_POINT_LIGHTS_COUNT;
+        for (const light of descriptor?.directionalLights ?? []) {
+            this.add(light);
+        }
+        for (const light of descriptor?.pointLights ?? []) {
+            this.add(light);
+        }
+
+        const floatCount = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT
+            + this.maxDirectionalLights * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT
+            + this.maxPointLights * WebGlLightsBuffer.POINT_LIGHT_FLOAT_COUNT;
+        this._data = new Array<number>(floatCount).fill(0);
+        this._writeData();
+        this._uploaded = [...this._data];
+        this._buffer = framework.bufferFactory.createUniformBuffer(this._data, BufferUsage.UNIFORM | BufferUsage.COPY_DST);
+    }
+
+    /** @inheritDoc */
+    public get ambientLight(): AmbientLight {
+        return this._ambientLight;
+    }
+
+    /** @inheritDoc */
+    public set ambientLight(ambientLight: AmbientLight) {
+        this._ambientLight = ambientLight;
+    }
+
+    /** @inheritDoc */
+    public get directionalLights(): DirectionalLight[] {
+        return this._directionalLights;
+    }
+
+    /** @inheritDoc */
+    public set directionalLights(lights: DirectionalLight[]) {
+        this._directionalLights = lights;
+    }
+
+    /** @inheritDoc */
+    public readonly maxDirectionalLights: number;
+
+    /** @inheritDoc */
+    public get pointLights(): PointLight[] {
+        return this._pointLights;
+    }
+
+    /** @inheritDoc */
+    public set pointLights(lights: PointLight[]) {
+        this._pointLights = lights;
+    }
+
+    /** @inheritDoc */
+    public add(light: DirectionalLight | PointLight): void {
+        const [list, max, kind] = this._listFor(light);
+        if (list.includes(light)) {
+            return;
+        }
+        if (list.length >= max) {
+            throw new Error(`LightsBuffer: cannot add ${kind} light ${light.id}; all ${max} ${kind} light slots are in use (max${kind === "directional" ? "Directional" : "Point"}Lights = ${max}).`);
+        }
+        list.push(light);
+    }
+
+    /** @inheritDoc */
+    public remove(light: DirectionalLight | PointLight): boolean {
+        const [list] = this._listFor(light);
+        const index = list.indexOf(light);
+        if (index < 0) {
+            return false;
+        }
+        list.splice(index, 1);
+        return true;
+    }
+
+    /** @inheritDoc */
+    public readonly maxPointLights: number;
+
+    /** @inheritDoc */
+    public get buffer(): IUniformBuffer {
+        return this._buffer;
+    }
+
+    /** @inheritDoc */
+    public update(): void {
+
+        // The ambient light (also a newly assigned one) is written with the rest; only changed data is uploaded.
+        this._writeData();
+        if (!this._hasChanged()) {
+            return;
+        }
+
+        this._buffer.update(this._data);
+        for (let i = 0; i < this._data.length; i++) {
+            this._uploaded[i] = this._data[i];
+        }
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        if (this._disposed) {
+            return;
+        }
+        this._disposed = true;
+        this._buffer.dispose();
+    }
+
+    private _writeAmbientLight() {
+        this._writeColor(0, this.ambientLight.color, this.ambientLight.intensity);
+        this._data[3] = 0; // std140 padding for vec3.
+    }
+
+    private _listFor(light: DirectionalLight | PointLight): [(DirectionalLight | PointLight)[], number, string] {
+        if (light instanceof DirectionalLight) {
+            return [this._directionalLights, this.maxDirectionalLights, "directional"];
+        }
+        if (light instanceof PointLight) {
+            return [this._pointLights, this.maxPointLights, "point"];
+        }
+        throw new Error("LightsBuffer: expected a DirectionalLight or PointLight instance.");
+    }
+
+    /** Writes color * intensity as vec3 at offset (the fourth float is left to the caller). */
+    private _writeColor(offset: number, color: Color | undefined, intensity: number): void {
+        this._data[offset] = color ? color.r * intensity : 0;
+        this._data[offset + 1] = color ? color.g * intensity : 0;
+        this._data[offset + 2] = color ? color.b * intensity : 0;
+    }
+
+    private _hasChanged(): boolean {
+        for (let i = 0; i < this._data.length; i++) {
+            if (this._data[i] !== this._uploaded[i]) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private _writeData(): void {
+        // Written every time, so in-place colour and intensity edits are detected by _hasChanged().
+        this._writeAmbientLight();
+
+        for (let i = 0; i < this.maxDirectionalLights; i++) {
+            const offset = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT + i * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT;
+            const light = this._directionalLights[i];
+
+            // vec3 light (colour * intensity)
+            this._writeColor(offset, light?.color, light?.intensity ?? 0);
+            this._data[offset + 3] = 0;
+
+            // vec3 direction
+            this._data[offset + 4] = light ? light.direction[0] : 0;
+            this._data[offset + 5] = light ? light.direction[1] : 0;
+            this._data[offset + 6] = light ? light.direction[2] : 0;
+            this._data[offset + 7] = 0;
+        }
+
+        const pointLightsStart = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT
+            + this.maxDirectionalLights * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT;
+        for (let i = 0; i < this.maxPointLights; i++) {
+            const offset = pointLightsStart + i * WebGlLightsBuffer.POINT_LIGHT_FLOAT_COUNT;
+            const light = this._pointLights[i];
+
+            // vec3 light (colour * intensity), float constant
+            this._writeColor(offset, light?.color, light?.intensity ?? 0);
+            // An empty slot keeps constant at 1 so the shader never divides by zero.
+            this._data[offset + 3] = light ? light.constant : 1;
+
+            // vec3 position, float linear
+            this._data[offset + 4] = light ? light.position[0] : 0;
+            this._data[offset + 5] = light ? light.position[1] : 0;
+            this._data[offset + 6] = light ? light.position[2] : 0;
+            this._data[offset + 7] = light ? light.linear : 0;
+
+            // float quadratic, then padding to the 16-byte struct size
+            this._data[offset + 8] = light ? light.quadratic : 0;
+            this._data[offset + 9] = 0;
+            this._data[offset + 10] = 0;
+            this._data[offset + 11] = 0;
+        }
+    }
+}

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

@@ -1,4 +1,7 @@
-import type {IBlendState, IFramework, IIndexBuffer, IPrimitiveState, IRenderPipeline, IVertexBuffer} from "../../api/index.ts";
+import {
+    GeometryFormat,
+    type IBlendState, type IFramework, type IIndexBuffer, type IPrimitiveState, type IRenderPipeline, type IVertexBuffer
+} from "../../api/index.ts";
 import type {VertexBufferLayout} from '../../core/rendering/vertex-buffer-layout';
 import type {WebGlBlendState} from '../blending/webgl-blend-state';
 import type {WebGlPrimitiveState} from '../primitive/WebGlPrimitiveState.ts';
@@ -35,6 +38,9 @@ export abstract class AWebGlRenderPipeline implements IRenderPipeline {
         this.primitiveState = (primitiveState ?? graphicsDevice.defaultPrimitiveState) as WebGlPrimitiveState;
     }
 
+    /** @inheritDoc */
+    public abstract readonly geometryFormat: GeometryFormat;
+
     /** @inheritDoc */
     public get blendState(): IBlendState {
         return this._blendState;

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

@@ -6,7 +6,13 @@ 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 "../../api/index.ts";
+import {
+    BufferUsage,
+    type IFramework,
+    type IMainRenderTargetRenderPipeline,
+    type ITexture2D,
+    TextureFormat
+} from "../../api/index.ts";
 
 /**
  * The WebGL implementation of the main render target render pipeline.
@@ -17,6 +23,9 @@ export class WebGlMainRenderTargetRenderPipeline extends AWebGlRenderPipeline im
     private _indexBuffer: WebGLIndexBuffer = null!;
     private _mainRenderTarget: WebGlTexture2D = null!;
 
+    private _colorConversionUniformLocation: WebGLUniformLocation = null!;
+    private _colorSpaceValue = 0;
+
     /**
      * The constructor.
      * @param framework The framework.
@@ -25,8 +34,15 @@ export class WebGlMainRenderTargetRenderPipeline extends AWebGlRenderPipeline im
     public constructor(framework: IFramework, mainRenderTarget: ITexture2D) {
         super(framework);
         this._mainRenderTarget = mainRenderTarget as WebGlTexture2D;
+
+        if(framework.renderer.preferredTextureFormat == TextureFormat.RGBA_8_UNORM_SRGB) {
+            this._colorSpaceValue = 1;
+        }
     }
 
+    /** @inheritDoc */
+    public readonly geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
+
     /** @inheritdoc */
     protected _provideBuffers(): WebGLBuffer[] {
         return [this._vertexBuffer.buffer!];
@@ -52,6 +68,8 @@ export class WebGlMainRenderTargetRenderPipeline extends AWebGlRenderPipeline im
         this._createResources();
         this.vertexBufferLayouts = [VertexBufferLayout.createFloat3Float2Layout()];
         super.initialize();
+
+        this._colorConversionUniformLocation = this._gl.getUniformLocation(this._program, "u_colorConversion")!;
     }
 
     private _createResources(): void {
@@ -90,6 +108,8 @@ export class WebGlMainRenderTargetRenderPipeline extends AWebGlRenderPipeline im
         this._gl.bindTexture(this._gl.TEXTURE_2D, this._mainRenderTarget.glTexture);
         this._gl.bindSampler(0, this._defaultTextureSampler.glSampler);
 
+        this._gl.uniform1i(this._colorConversionUniformLocation, this._colorSpaceValue)
+
         this._gl.drawElements(this._gl.TRIANGLES, this._indexBuffer.indicesCount, this._gl.UNSIGNED_SHORT, 0);
     }
 

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

@@ -6,10 +6,13 @@ import type {
     IMainRenderTargetRenderPipeline, IPrimitiveState, IRenderPipelineFactory,
     ISpriteRenderPipeline, ITexture2D,
     IUniformBuffer,
-    IUnlitRenderPipeline
-} from "../../api/index.ts";
+    IUnlitRenderPipeline,
+    IForwardBlinnPhongRenderPipeline,
+    ForwardBlinnPhongRenderPipelineDescriptor,
+} from "../../api";
 import {WebGlInspectTextureMipsRenderPipeline} from "./inspect/WebGlInspectTextureMipsRenderPipeline.ts";
 import {WebGlUnlitRenderPipeline} from "./material/WebGlUnlitRenderPipeline.ts";
+import {WebGlForwardBlinnPhongRenderPipeline} from "./material/WebGlBlinnPhongRenderPipeline.ts";
 
 /**
  * The WebGL implementation of the IRenderPipelineFactory interface.
@@ -37,6 +40,25 @@ export class WebGlRenderPipelineFactory implements IRenderPipelineFactory {
         return pipeline;
     }
 
+    /** @inheritDoc */
+    public createForwardBlinnPhongRenderPipeline(descriptor: ForwardBlinnPhongRenderPipelineDescriptor): IForwardBlinnPhongRenderPipeline {
+        const pipeline = new WebGlForwardBlinnPhongRenderPipeline(this._framework,
+            descriptor.projectionViewBuffer,
+            descriptor.modelBuffer,
+            descriptor.materialBuffer,
+            descriptor.lightsBuffer,
+            descriptor.cameraPositionBuffer,
+            descriptor.primitiveState
+            );
+        if (descriptor.maxDirectionalLights !== undefined || descriptor.maxPointLights !== undefined) {
+            pipeline.setLightCounts(
+                descriptor.maxDirectionalLights ?? pipeline.maxDirectionalLights,
+                descriptor.maxPointLights ?? pipeline.maxPointLights);
+        }
+        pipeline.initialize();
+        return pipeline;
+    }
+
     /** @inheritDoc */
     public createMainFrameBufferPipeline(mainFrameBuffer: ITexture2D): IMainRenderTargetRenderPipeline {
         const renderPipeline = new WebGlMainRenderTargetRenderPipeline(this._framework, mainFrameBuffer);

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

@@ -1,9 +1,10 @@
-import type {
-    IFramework, IPrimitiveState,
-    ISampler,
-    ITexture2D,
-    IUniformBuffer,
-    IVertexBuffer
+import {
+    GeometryFormat,
+    type IFramework, type IPrimitiveState,
+    type ISampler,
+    type ITexture2D,
+    type IUniformBuffer,
+    type IVertexBuffer
 } from "../../../api/index.ts";
 import {VertexBufferLayout} from "../../../core/rendering/vertex-buffer-layout";
 import type {WebGlUniformBuffer} from "../../buffers/WebGlUniformBuffer.ts";
@@ -52,12 +53,18 @@ export class WebGlInspectTextureMipsRenderPipeline extends AWebGlRenderPipeline
                 textureConstantsBuffer: IUniformBuffer,
                 primitiveState? : IPrimitiveState
                 ) {
+        // Validated before super(), which touches WebGL.
+        if (!modelBuffer) {
+            throw new Error("WebGlInspectTextureMipsRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+        }
         super(framework, primitiveState);
         this._projectionViewBuffer = projectionViewBuffer as WebGlUniformBuffer;
         this._modelBuffer = modelBuffer as WebGlUniformBuffer;
         this._textureConstantsBuffer = textureConstantsBuffer as WebGlUniformBuffer;
     }
 
+    /** @inheritDoc */
+    public readonly geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
 
     /** @inheritdoc */
     public get projectionViewBuffer(): IUniformBuffer {
@@ -76,6 +83,9 @@ export class WebGlInspectTextureMipsRenderPipeline extends AWebGlRenderPipeline
 
     /** @inheritdoc */
     public set modelBuffer(value: IUniformBuffer) {
+        if (!value) {
+            throw new Error("WebGlInspectTextureMipsRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+        }
         this._modelBuffer = asWebGLUniformBuffer(value);
     }
 

package/src/webgl/render-pipelines/material/WebGlBlinnPhongRenderPipeline.ts

@@ -0,0 +1,300 @@
+import {
+    GeometryFormat,
+    type IFramework, type IPrimitiveState,
+    type ISampler,
+    type ITexture2D,
+    type IUniformBuffer,
+    type IVertexBuffer
+} from "../../../api";
+import {VertexBufferLayout} from "../../../core/rendering/vertex-buffer-layout";
+import type {WebGlUniformBuffer} from "../../buffers/WebGlUniformBuffer.ts";
+import {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,
+    DEFAULT_DIRECTIONAL_LIGHTS_COUNT,
+    DEFAULT_POINT_LIGHTS_COUNT
+} from "../../../api";
+import type {WebGlSampler} from "../../sampler/webgl-sampler.ts";
+import type {
+    IForwardBlinnPhongRenderPipeline
+} from "../../../api/rendering/render-pipelines/IForwardBlinnPhongRenderPipeline.ts";
+
+/**
+ * The WebGL implementation of Blinn-Phong with forward calculated lighting.
+ * @internal
+ **/
+export class WebGlForwardBlinnPhongRenderPipeline extends AWebGlRenderPipeline implements IForwardBlinnPhongRenderPipeline {
+
+    private static readonly CAMERA_BINDING_POINT = 0;
+    private static readonly MODEL_BINDING_POINT = 1;
+    private static readonly MATERIAL_BINDING_POINT = 2;
+    private static readonly LIGHTS_BINDING_POINT = 3;
+    private static readonly CAMERA_POSITION_BINDING_POINT = 4;
+
+    private _texture: WebGlTexture2D = null!;
+    private _sampler?: WebGlSampler;
+    private _projectionViewBuffer: WebGlUniformBuffer;
+    private _modelBuffer: WebGlUniformBuffer;
+    private _materialBuffer: WebGlUniformBuffer;
+    private _lightsBuffer: WebGlUniformBuffer;
+    private _cameraBlockIndex = -1;
+    private _modelBlockIndex = -1;
+    private _materialBlockIndex = -1;
+    private _lightsBlockIndex = -1;
+    private _cameraPositionBuffer: WebGlUniformBuffer;
+    private _cameraPositionBlockIndex = -1;
+    private _maxDirectionalLights = DEFAULT_DIRECTIONAL_LIGHTS_COUNT;
+    private _maxPointLights = DEFAULT_POINT_LIGHTS_COUNT;
+    private _initialized = false;
+    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 materialBuffer The material buffer.
+     * @param lightsBuffer The lights buffer (`LightsBuffer.buffer`). May be set later.
+     * @param cameraPositionBuffer The camera position buffer (world-space eye).
+     * @param primitiveState The primitive state.
+     */
+    public constructor(framework: IFramework,
+                       projectionViewBuffer: IUniformBuffer,
+                       modelBuffer: IUniformBuffer,
+                       materialBuffer: IUniformBuffer,
+                       lightsBuffer: IUniformBuffer | undefined,
+                       cameraPositionBuffer: IUniformBuffer,
+                       primitiveState?: IPrimitiveState,
+    ) {
+        // Validated before super(), which touches WebGL.
+        if (!modelBuffer) {
+            throw new Error("WebGlForwardBlinnPhongRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+        }
+        super(framework, primitiveState);
+        this._projectionViewBuffer = projectionViewBuffer as WebGlUniformBuffer;
+        this._modelBuffer = modelBuffer as WebGlUniformBuffer;
+        this._materialBuffer = materialBuffer as WebGlUniformBuffer;
+        this._lightsBuffer = lightsBuffer as WebGlUniformBuffer;
+        this._cameraPositionBuffer = cameraPositionBuffer as WebGlUniformBuffer;
+    }
+
+    /** @inheritDoc */
+    public readonly geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3;
+
+    /** @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) {
+        if (!value) {
+            throw new Error("WebGlForwardBlinnPhongRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+        }
+        this._modelBuffer = asWebGLUniformBuffer(value);
+    }
+
+    /** @inheritdoc */
+    public get materialBuffer(): IUniformBuffer {
+        return this._materialBuffer;
+    }
+
+    /** @inheritdoc */
+    public set materialBuffer(value: IUniformBuffer) {
+        this._materialBuffer = asWebGLUniformBuffer(value);
+    }
+
+    /** @inheritdoc */
+    public get lightsBuffer(): IUniformBuffer {
+        return this._lightsBuffer;
+    }
+
+    /** @inheritdoc */
+    public set lightsBuffer(value: IUniformBuffer) {
+        this._lightsBuffer = asWebGLUniformBuffer(value);
+    }
+
+    /** @inheritdoc */
+    public get maxDirectionalLights(): number {
+        return this._maxDirectionalLights;
+    }
+
+    /** @inheritdoc */
+    public get maxPointLights(): number {
+        return this._maxPointLights;
+    }
+
+    /** @inheritdoc */
+    public setLightCounts(maxDirectionalLights: number, maxPointLights: number): void {
+        if (maxDirectionalLights === this._maxDirectionalLights && maxPointLights === this._maxPointLights) {
+            return;
+        }
+        this._maxDirectionalLights = maxDirectionalLights;
+        this._maxPointLights = maxPointLights;
+        if (this._initialized) {
+            // The vertex array object only depends on the vertex layout, so only the program and block bindings change.
+            this._loadProgram();
+        }
+    }
+
+    /** @inheritdoc */
+    public get cameraPositionBuffer(): IUniformBuffer {
+        return this._cameraPositionBuffer;
+    }
+
+    /** @inheritdoc */
+    public set cameraPositionBuffer(value: IUniformBuffer) {
+        this._cameraPositionBuffer = asWebGLUniformBuffer(value);
+    }
+
+    /** @inheritdoc */
+    public get diffuseTexture(): ITexture2D {
+        return this._texture;
+    }
+
+    /** @inheritdoc */
+    public set diffuseTexture(value: ITexture2D) {
+        this._texture = value as WebGlTexture2D;
+    }
+
+    /** @inheritdoc */
+    public get diffuseTextureSampler(): ISampler | undefined {
+        return this._sampler;
+    }
+
+    public set diffuseTextureSampler(value: ISampler | undefined) {
+        this._sampler = value as WebGlSampler | undefined;
+    }
+
+    /** @inheritdoc */
+    public override initialize(): void {
+
+        this._loadProgram();
+        this.vertexBufferLayouts = [VertexBufferLayout.createFloat3Float4Float2Float3Layout()];
+        super.initialize();
+        this._initialized = true;
+    }
+
+    /** Loads the shader variant for the current light counts (cached per counts by the shader loader). */
+    private _loadProgram(): void {
+        const module = this._framework.content.loadShaderModule("forward_blinn_phong_material", {
+            "DIRECTIONAL_LIGHTS_COUNT": this._maxDirectionalLights,
+            "POINT_LIGHTS_COUNT": this._maxPointLights,
+        }) as WebGlShaderModule;
+        this._program = module.program!;
+        this._createResources();
+    }
+
+    private _createResources(): void {
+        {
+            this._texture = WebGlTexture2D.getOrCreateDefault(this._framework);
+
+            this._cameraBlockIndex = this._gl.getUniformBlockIndex(this._program, "CameraBuffer");
+            this._gl.uniformBlockBinding(this._program, this._cameraBlockIndex, WebGlForwardBlinnPhongRenderPipeline.CAMERA_BINDING_POINT);
+
+            this._modelBlockIndex = this._gl.getUniformBlockIndex(this._program, "ModelBuffer");
+            this._gl.uniformBlockBinding(this._program, this._modelBlockIndex, WebGlForwardBlinnPhongRenderPipeline.MODEL_BINDING_POINT);
+
+            this._materialBlockIndex = this._gl.getUniformBlockIndex(this._program, "MaterialBuffer");
+            this._gl.uniformBlockBinding(this._program, this._materialBlockIndex, WebGlForwardBlinnPhongRenderPipeline.MATERIAL_BINDING_POINT);
+
+            this._lightsBlockIndex = this._gl.getUniformBlockIndex(this._program, "LightsBuffer");
+            this._gl.uniformBlockBinding(this._program, this._lightsBlockIndex, WebGlForwardBlinnPhongRenderPipeline.LIGHTS_BINDING_POINT);
+
+            this._cameraPositionBlockIndex = this._gl.getUniformBlockIndex(this._program, "CameraPositionBuffer");
+            this._gl.uniformBlockBinding(this._program, this._cameraPositionBlockIndex, WebGlForwardBlinnPhongRenderPipeline.CAMERA_POSITION_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,
+            WebGlForwardBlinnPhongRenderPipeline.CAMERA_BINDING_POINT,
+            this._projectionViewBuffer.glBuffer!);
+        this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+            WebGlForwardBlinnPhongRenderPipeline.MODEL_BINDING_POINT,
+            this._modelBuffer.glBuffer!);
+
+        if (this.materialBuffer) {
+            this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+                WebGlForwardBlinnPhongRenderPipeline.MATERIAL_BINDING_POINT,
+                this._materialBuffer.glBuffer!);
+        }
+        if (this._lightsBuffer) {
+            this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+                WebGlForwardBlinnPhongRenderPipeline.LIGHTS_BINDING_POINT,
+                this._lightsBuffer.glBuffer!);
+        }
+        this._gl.bindBufferBase(this._gl.UNIFORM_BUFFER,
+            WebGlForwardBlinnPhongRenderPipeline.CAMERA_POSITION_BINDING_POINT,
+            this._cameraPositionBuffer.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);
+    }
+
+}