ris-framework 0.1.0-dev.9 → 0.2.0-dev.11

package/src/api/meshes/MeshFactory.ts

@@ -1,11 +1,13 @@
+import type {Scene} from "../scene/Scene.ts";
 import type { IMeshFactory } from "./IMeshFactory.ts";
 import type { IGeometry } from "../geometry/IGeometry.ts";
-import {GeometryFormat} from "../geometry/GeometryFormat.ts";
 import type { IMesh } from "./IMesh.ts";
 import {QuadMesh} from "./QuadMesh.ts";
 import type { IFramework } from "../IFramework.ts";
 import {Mesh} from "./Mesh.ts";
 import {vec2} from "gl-matrix";
+import type { IMaterial } from "../material/IMaterial.ts";
+import type { SubMeshDescriptor } from "./IMeshFactory.ts";
 
 /**
  * The implementation of the mesh factory interface.
@@ -20,17 +22,39 @@ export class MeshFactory implements IMeshFactory {
     }
 
     /** @inheritDoc */
-    public create(geometry: IGeometry, geometryFormat: GeometryFormat): IMesh {
-        const mesh = new Mesh(this._framework);
-        mesh.setGeometry(geometry, geometryFormat);
+    public create(scene: Scene, geometry: IGeometry, material: IMaterial): IMesh {
+        const mesh = new Mesh(this._framework, scene, material);
+        mesh.setGeometry(geometry);
         return mesh;
     }
 
     /** @inheritDoc */
-    public createQuadMesh(isUpdatable: boolean, scale?: vec2): QuadMesh {
-        const quadMesh = new QuadMesh(this._framework, isUpdatable, scale);
+    public createWithSubMeshes(scene: Scene, geometry: IGeometry, subMeshes: SubMeshDescriptor[]): IMesh {
+        if (subMeshes.length == 0) {
+            throw new Error("createWithSubMeshes needs at least one submesh.");
+        }
+        const format = subMeshes[0].material.geometryFormat;
+        if (subMeshes.some(s => s.material.geometryFormat != format)) {
+            throw new Error("All submesh materials must use the same geometry format, as they share one vertex buffer.");
+        }
+
+        const mesh = new Mesh(this._framework, scene);
+        mesh.setGeometry(geometry, format);
+        for (const subMesh of subMeshes) {
+            mesh.addSubMesh(subMesh.material, subMesh.indexStart, subMesh.indexCount);
+        }
+        return mesh;
+    }
+
+    /** @inheritDoc */
+    public createQuadMesh(_isUpdatable: boolean, _scale?: vec2): QuadMesh {
+
+        throw new Error("Meshes not implemented.");
+        /*  const quadMesh = new QuadMesh(this._framework, isUpdatable, scale);
         quadMesh.initialize();
         return quadMesh;
+
+       */
     }
 
 }

package/src/api/meshes/QuadMesh.ts

@@ -3,6 +3,8 @@ import {Rect} from "../data/Rect.ts";
 import type { IFramework } from "../IFramework.ts";
 import {vec2} from "gl-matrix";
 import {BufferUsage} from "../rendering/buffers/BufferUsage.ts";
+import type {IMaterial} from "../material/IMaterial.ts";
+import type {Scene} from "../scene/Scene.ts";
 
 /**
  * The mesh of a quad.
@@ -16,11 +18,13 @@ export class QuadMesh extends Mesh {
     /**
      * The constructor.
      * @param framework The framework.
+     * @param scene The scene the quad adds itself to.
+     * @param material The material.
      * @param _isUpdatable Makes mesh updatable.
      * @param scale The scale factor for geometry. If not set, it is set to (1,1).
      */
-    public constructor(framework: IFramework, private _isUpdatable: boolean, scale?: vec2) {
-    super(framework);
+    public constructor(framework: IFramework, scene: Scene, material: IMaterial, private _isUpdatable: boolean, scale?: vec2) {
+    super(framework, scene, material);
         if(_isUpdatable) {
             this._bufferUsage = BufferUsage.VERTEX | BufferUsage.COPY_DST;
         }

package/src/api/meshes/SubMesh.ts

@@ -0,0 +1,71 @@
+import type { mat4, vec3 } from "gl-matrix";
+import type { IMesh } from "./IMesh.ts";
+import type { Mesh } from "./Mesh.ts";
+import type { IUniformBuffer } from "../rendering/buffers/IUniformBuffer.ts";
+import type { IMaterial } from "../material/IMaterial.ts";
+import type { IVertexBuffer } from "../rendering/buffers/IVertexBuffer.ts";
+import type { IIndexBuffer } from "../rendering/buffers/IIndexBuffer.ts";
+
+/**
+ * A part of a mesh drawn with its own material.
+ * It shares the parent's vertex and index buffers and draws only its index range.
+ */
+export class SubMesh implements IMesh {
+
+    /**
+     * The constructor.
+     * @param parent The mesh that owns the buffers.
+     * @param material The material of this submesh.
+     * @param indexStart The first index of the range.
+     * @param indexCount The number of indices in the range.
+     */
+    public constructor(
+        public readonly parent: Mesh,
+        public material: IMaterial,
+        public readonly indexStart: number,
+        public readonly indexCount: number) {
+    }
+
+    /** The parent's vertex buffer. */
+    public get vertexBuffer(): IVertexBuffer | undefined {
+        return this.parent.vertexBuffer;
+    }
+
+    /** The parent's index buffer. */
+    public get indexBuffer(): IIndexBuffer | undefined {
+        return this.parent.indexBuffer;
+    }
+
+    /** The parent's position; setting it sets the parent's. */
+    public get position(): vec3 { return this.parent.position; }
+    public set position(value: vec3) { this.parent.position = value; }
+
+    /** The parent's rotation; setting it sets the parent's. */
+    public get rotation(): vec3 { return this.parent.rotation; }
+    public set rotation(value: vec3) { this.parent.rotation = value; }
+
+    /** The parent's scale; setting it sets the parent's. */
+    public get scale(): vec3 { return this.parent.scale; }
+    public set scale(value: vec3) { this.parent.scale = value; }
+
+    /** The parent's model matrix. */
+    public get modelMatrix(): mat4 {
+        return this.parent.modelMatrix;
+    }
+
+    /** The parent's model buffer. */
+    public get modelBuffer(): IUniformBuffer {
+        return this.parent.modelBuffer;
+    }
+
+    /** Draws this submesh with its material, using the parent's transform (model buffer). */
+    public render(): void {
+        this.parent.__assignModelBuffer(this.material);
+        this.material.beforeRender();
+        this.material.renderMesh(this);
+    }
+
+    /** Does nothing: the buffers belong to the parent and the material to the caller. */
+    public dispose(): void {
+    }
+}

package/src/api/meshes/_export.ts

@@ -1,6 +1,7 @@
 export * from "./IMeshFactory.ts";
 export * from "./IMesh.ts"
 export * from "./Mesh.ts"
+export * from "./SubMesh.ts"
 export * from "./QuadMesh.ts";
 export * from "./MeshParameters.ts"
 export * from "./MeshFactory.ts";

package/src/api/rendering/render-pipelines/IForwardBlinnPhongRenderPipeline.ts

@@ -0,0 +1,66 @@
+import type { ITexture2D } from "../texture/ITexture2D.ts";
+import type { ISampler } from "../sampler/ISampler.ts";
+import type { IRenderPipeline } from "./IRenderPipeline.ts";
+import type { IUniformBuffer } from "../buffers/IUniformBuffer.ts";
+
+/**
+ * The Blinn-Phong render pipeline with forward lighting.
+ */
+export interface IForwardBlinnPhongRenderPipeline extends IRenderPipeline {
+
+    /**
+     * The diffuse texture.
+     */
+    diffuseTexture: ITexture2D;
+
+    /**
+     * The texture sampler.
+     */
+    diffuseTextureSampler?: ISampler;
+
+    /**
+     * The projection view uniform buffer.
+     * Contains a single matrix representing the projection view matrix.
+     */
+    projectionViewBuffer: IUniformBuffer;
+
+    /**
+     * The world matrix uniform buffer.
+     * Contains a single matrix representing the world matrix.
+     */
+    modelBuffer: IUniformBuffer;
+
+    /**
+     * The material buffer that contains the material properties.
+     * - vec3 ambientColor
+     * - vec3 diffuseColor
+     * - vec3 specularColor
+     * - float shininess
+     */
+    materialBuffer: IUniformBuffer;
+
+    /** The camera position buffer: std140 `vec3` world-space eye, e.g. `camera.positionBuffer`. */
+    cameraPositionBuffer: IUniformBuffer;
+
+    /**
+     * The lights buffer, `LightsBuffer.buffer`, bound to the shader's `LightsBuffer` block.
+     * - vec3 ambientLight
+     * - DirectionalLight[DIRECTIONAL_LIGHTS_COUNT] { vec3 light; vec3 direction; }
+     * - PointLight[POINT_LIGHTS_COUNT] { vec3 light; float constant; vec3 position; float linear; float quadratic; }
+     */
+    lightsBuffer: IUniformBuffer;
+
+    /** The directional light slots the shader was compiled with. */
+    readonly maxDirectionalLights: number;
+
+    /** The point light slots the shader was compiled with. */
+    readonly maxPointLights: number;
+
+    /**
+     * Sets the light slot counts. They must match the lights buffer (`LightsBuffer.maxDirectionalLights`/`maxPointLights`).
+     * When they change after initialization the shader variant for the new counts is loaded.
+     * @param maxDirectionalLights The directional light slots.
+     * @param maxPointLights The point light slots.
+     */
+    setLightCounts(maxDirectionalLights: number, maxPointLights: number): void;
+}

package/src/api/rendering/render-pipelines/IRenderPipeline.ts

@@ -4,6 +4,7 @@ import type { IPrimitiveState } from "../primitive/IPrimitiveState.ts";
 import type { IVertexBufferLayout } from "../buffers/IVertexBufferLayout.ts";
 import type { IIndexBuffer } from "../buffers/IIndexBuffer.ts";
 import type { IVertexBuffer } from "../buffers/IVertexBuffer.ts";
+import type { GeometryFormat } from "../../geometry/GeometryFormat.ts";
 
 /**
  * The render pipeline interface.
@@ -27,6 +28,9 @@ export interface IRenderPipeline extends IDisposable {
      */
     readonly vertexBufferLayouts: IVertexBufferLayout[];
 
+    /** The geometry format required by the render pipeline. */
+    readonly geometryFormat: GeometryFormat;
+
     /**
      * Initializes the render pipeline.
      *     This method is called by the renderer when the pipeline is added to the renderer.

package/src/api/rendering/render-pipelines/IRenderPipelineFactory.ts

@@ -5,6 +5,38 @@ import type { ISpriteRenderPipeline } from "./ISpriteRenderPipeline.ts";
 import type { IInspectTextureMipsRenderPipeline } from "./IInspectTextureMipsRenderPipeline.ts";
 import type { IUnlitRenderPipeline } from "./IUnlitRenderPipeline.ts";
 import type { IPrimitiveState } from "../primitive/IPrimitiveState.ts";
+import type { IForwardBlinnPhongRenderPipeline } from "./IForwardBlinnPhongRenderPipeline.ts";
+
+/** The descriptor for the forward Blinn-Phong render pipeline. */
+export interface ForwardBlinnPhongRenderPipelineDescriptor {
+
+    /** The projection view buffer, e.g. `camera.projectionViewBuffer`. */
+    projectionViewBuffer: IUniformBuffer;
+
+    /** The world buffer. */
+    modelBuffer: IUniformBuffer;
+
+    /** The camera position buffer, e.g. `camera.positionBuffer`: std140 `vec3` world-space eye. */
+    cameraPositionBuffer: IUniformBuffer;
+
+    /** The material buffer (ambient and diffuse color). */
+    materialBuffer: IUniformBuffer;
+
+    /**
+     * The lights buffer, e.g. `lightsBuffer.buffer`.
+     * Optional: it can be set later through `pipeline.lightsBuffer`.
+     */
+    lightsBuffer?: IUniformBuffer;
+
+    /** Directional light slots to compile the shader with; must match the lights buffer. Defaults to `DEFAULT_DIRECTIONAL_LIGHTS_COUNT`. */
+    maxDirectionalLights?: number;
+
+    /** Point light slots to compile the shader with; must match the lights buffer. Defaults to `DEFAULT_POINT_LIGHTS_COUNT`. */
+    maxPointLights?: number;
+
+    /** The primitive state. */
+    primitiveState?: IPrimitiveState;
+}
 
 /**
  * The pipeline factory.
@@ -49,4 +81,11 @@ export interface IRenderPipelineFactory {
                               primitiveState?: IPrimitiveState
                               ): IUnlitRenderPipeline;
 
+    /**
+     * Creates the forward Blinn-Phong render pipeline.
+     * @param descriptor - The buffers and primitive state for the pipeline.
+     * @returns The forward Blinn-Phong render pipeline.
+     */
+    createForwardBlinnPhongRenderPipeline(descriptor: ForwardBlinnPhongRenderPipelineDescriptor): IForwardBlinnPhongRenderPipeline;
+
 }

package/src/api/rendering/render-pipelines/_export-render-pipelines.ts

@@ -3,4 +3,5 @@ export * from "./IMainRenderTargetRenderPipeline.ts";
 export * from "./IRenderPipelineFactory.ts";
 export * from "./IRenderPipeline.ts";
 export * from "./IInspectTextureMipsRenderPipeline.ts"
-export * from "./IUnlitRenderPipeline.ts"
+export * from "./IUnlitRenderPipeline.ts"
+export * from "./IForwardBlinnPhongRenderPipeline.ts"

package/src/api/scene/Scene.ts

@@ -0,0 +1,264 @@
+import {AmbientLight} from "../lights/AmbientLight.ts";
+import {DirectionalLight} from "../lights/DirectionalLight.ts";
+import {PointLight} from "../lights/PointLight.ts";
+import type {IDisposable} from "../core/IDisposable.ts";
+import type {LightsBuffer} from "../lights/LightsBuffer.ts";
+import type {IFramework} from "../IFramework.ts";
+import type {IMesh} from "../meshes/IMesh.ts";
+import type {GameTime} from "../time/GameTime.ts";
+import type {ICamera} from "../camera/ICamera.ts";
+import type {IMaterial} from "../material/IMaterial.ts";
+
+/** Anything a scene can hold: a mesh, a light (ambient, directional, point) or a camera. */
+export type SceneItem = IMesh | AmbientLight | DirectionalLight | PointLight | ICamera;
+
+/**
+ * The scene. Meshes, lights and cameras given a scene in their constructor add themselves through {@link add};
+ * meshes remove themselves when disposed. Call {@link update} once per frame and {@link render} in the render listener.
+ */
+export class Scene implements IDisposable {
+
+    private readonly _meshes: IMesh[] = [];
+    private _activeAmbientLight: AmbientLight;
+    private _disposed = false;
+    private _activeCamera?: ICamera;
+
+    /**
+     * The camera the scene renders with; undefined until one is set or added.
+     * Setting it assigns it to the materials of every mesh (and submesh) whose camera differs;
+     * {@link update} also assigns it to meshes and submeshes added later.
+     */
+    public get camera(): ICamera | undefined {
+        return this._activeCamera;
+    }
+
+    public set camera(value: ICamera | undefined) {
+        this._activeCamera = value;
+        if (!value) {
+            return;
+        }
+        for (const mesh of this._meshes) {
+            Scene._assignCameraToMesh(mesh, value);
+        }
+    }
+
+    /** The ambient lights registered with this scene. */
+    public readonly ambientLights: AmbientLight[] = [];
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     */
+    public constructor(framework: IFramework) {
+
+        // Assigned through add() by the ambient light constructor; set here for the type checker.
+        this._activeAmbientLight = framework.lightsFactory.createAmbientLight(undefined, this);
+
+        this.__forwardLightsBuffer = framework.lightsFactory.__createLightsBuffer({
+            ambientLight: this._activeAmbientLight,
+            maxDirectionalLights: 3,
+            maxPointLights: 5
+        });
+
+    }
+
+    /**
+     * The lights buffer used for forward shading.
+     * @internal
+     */
+    __forwardLightsBuffer: LightsBuffer;
+
+    /** The meshes in this scene, in the order they were added. */
+    public get meshes(): readonly IMesh[] {
+        return this._meshes;
+    }
+
+    /** The directional lights in this scene. */
+    public get directionalLights(): readonly DirectionalLight[] {
+        return this.__forwardLightsBuffer.directionalLights;
+    }
+
+    /** The point lights in this scene. */
+    public get pointLights(): readonly PointLight[] {
+        return this.__forwardLightsBuffer.pointLights;
+    }
+
+    /**
+     * Gets the active ambient light.
+     */
+    public get activeAmbientLight(): AmbientLight {
+        return this._activeAmbientLight;
+    }
+
+    /** Sets the active ambient light; it is added to {@link ambientLights} if needed. */
+    public set activeAmbientLight(value: AmbientLight) {
+        this._addAmbientLight(value);
+        this._activeAmbientLight = value;
+        this.__forwardLightsBuffer.ambientLight = value;
+    }
+
+    /**
+     * Adds a mesh, a light or a camera. Adding an item that is already in the scene does nothing.
+     * - Mesh: drawn by {@link render}; gets the scene camera.
+     * - Ambient light: added to {@link ambientLights} (use {@link activeAmbientLight} to make it the lit one).
+     * - Directional / point light: added to the lights buffer.
+     * - Camera: becomes the scene {@link camera}.
+     * Constructors given a scene (meshes, lights, the perspective camera) call this themselves.
+     * @param item The item to add.
+     * @throws Error when all slots for a light kind are in use (3 directional, 5 point), or for an unsupported item.
+     */
+    public add(item: SceneItem): void {
+        if (item instanceof AmbientLight) {
+            this._addAmbientLight(item);
+        } else if (item instanceof DirectionalLight || item instanceof PointLight) {
+            this.__forwardLightsBuffer.add(item);
+        } else if (Scene._isCamera(item)) {
+            this.camera = item;
+        } else if (Scene._isMesh(item)) {
+            if (!this._meshes.includes(item)) {
+                this._meshes.push(item);
+                if (this._activeCamera) {
+                    Scene._assignCameraToMesh(item, this._activeCamera);
+                }
+            }
+        } else {
+            throw new Error("Scene.add: expected a mesh, an AmbientLight, DirectionalLight, PointLight or a camera.");
+        }
+    }
+
+    /**
+     * Removes a mesh, a light or a camera. The mesh is not disposed.
+     * Removing the active camera clears {@link camera}.
+     * @param item The item to remove.
+     * @returns True when the item was in the scene (for a camera: was the active camera).
+     * @throws Error when removing the active ambient light (set another {@link activeAmbientLight} first), or for an unsupported item.
+     */
+    public remove(item: SceneItem): boolean {
+        if (item instanceof AmbientLight) {
+            if (item === this._activeAmbientLight) {
+                throw new Error("Scene.remove: cannot remove the active ambient light; set scene.activeAmbientLight to another light first.");
+            }
+            return Scene._removeFrom(this.ambientLights, item);
+        }
+        if (item instanceof DirectionalLight || item instanceof PointLight) {
+            return this.__forwardLightsBuffer.remove(item);
+        }
+        if (Scene._isCamera(item)) {
+            if (item !== this._activeCamera) {
+                return false;
+            }
+            this._activeCamera = undefined;
+            return true;
+        }
+        if (Scene._isMesh(item)) {
+            return Scene._removeFrom(this._meshes, item);
+        }
+        throw new Error("Scene.remove: expected a mesh, an AmbientLight, DirectionalLight, PointLight or a camera.");
+    }
+
+    /**
+     * Adds a directional or point light.
+     * @deprecated Use {@link add}.
+     * @throws Error when all slots for that kind are in use (3 directional, 5 point).
+     */
+    public addLight(light: DirectionalLight | PointLight): void {
+        this.add(light);
+    }
+
+    /**
+     * Removes a directional or point light.
+     * @deprecated Use {@link remove}.
+     * @returns True when the light was in the scene.
+     */
+    public removeLight(light: DirectionalLight | PointLight): boolean {
+        return this.remove(light);
+    }
+
+    private _addAmbientLight(ambientLight: AmbientLight): void {
+        if (!this.ambientLights.includes(ambientLight)) {
+            this.ambientLights.push(ambientLight);
+        }
+    }
+
+    private static _removeFrom<T>(list: T[], item: T): boolean {
+        const index = list.indexOf(item);
+        if (index < 0) {
+            return false;
+        }
+        list.splice(index, 1);
+        return true;
+    }
+
+    /** Cameras have the camera buffers and updateBuffers(); meshes and lights do not. */
+    private static _isCamera(item: unknown): item is ICamera {
+        const camera = item as Partial<ICamera> | null;
+        return typeof camera === "object" && camera !== null
+            && "projectionViewBuffer" in camera && "viewMatrix" in camera && typeof camera.updateBuffers === "function";
+    }
+
+    /** Meshes have render() and a material slot or submeshes. */
+    private static _isMesh(item: unknown): item is IMesh {
+        const mesh = item as Partial<IMesh> | null;
+        return typeof mesh === "object" && mesh !== null && typeof mesh.render === "function"
+            && ("material" in mesh || "subMeshes" in mesh);
+    }
+
+    /**
+     * Updates the scene: assigns {@link camera} to the mesh materials that don't have it yet, and uploads changed lights.
+     * @param _time The game time.
+     * @public
+     */
+    update(_time: GameTime): void {
+        // Also covers meshes whose submeshes were added after the mesh registered itself.
+        if (this._activeCamera) {
+            for (const mesh of this._meshes) {
+                Scene._assignCameraToMesh(mesh, this._activeCamera);
+            }
+        }
+        this.__forwardLightsBuffer.update();
+    }
+
+    private static _assignCameraToMesh(mesh: IMesh, camera: ICamera): void {
+        Scene._assignCamera(mesh.material, camera);
+        for (const subMesh of mesh.subMeshes ?? []) {
+            Scene._assignCamera(subMesh.material, camera);
+        }
+    }
+
+    private static _assignCamera(material: IMaterial | undefined, camera: ICamera): void {
+        // Only materials that have a camera property; the setter rebinds buffers, so skip when unchanged.
+        // A camera that is not initialized yet (e.g. added from its constructor) has no buffers;
+        // it is assigned by the next update() once initialize() created them.
+        if (!camera.projectionViewBuffer || !camera.positionBuffer) {
+            return;
+        }
+        if (material && "camera" in material && material.camera !== camera) {
+            material.camera = camera;
+        }
+    }
+
+    /**
+     * Renders the meshes.
+     */
+    render(): void {
+
+        for (const mesh of this._meshes) {
+            mesh.render();
+        }
+
+    }
+
+    /** Disposes the meshes still in the scene and the lights buffer. Calling it twice does nothing. */
+    public dispose(): void {
+        if (this._disposed) {
+            return;
+        }
+        this._disposed = true;
+        // Each mesh removes itself, so iterate a copy.
+        for (const mesh of this._meshes.slice()) {
+            mesh.dispose();
+        }
+        this._meshes.length = 0;
+        this.__forwardLightsBuffer.dispose();
+    }
+}

package/src/api/shader/IShaderModuleLoader.ts

@@ -8,8 +8,9 @@ export interface IShaderModuleLoader {
 /**
  * Loads a shader module.
  * @param shaderModuleId - The shader module id.
+ * @param keyValueDictionary - If present, tries to find key in shader such that it replaced ##DIRECTIONAL_LIGHT_COUNT## by given value for key DIRECTIONAL_LIGHST_COUNT.
  * @returns The shader module.
  */
-  load(shaderModuleId: string): IShaderModule;
+  load(shaderModuleId: string, keyValueDictionary?: {[id:string]: number}): IShaderModule;
 
 }

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();
     }
 }