dacha 0.13.0

package/build/contrib/systems/webgl-render-system/index.js

@@ -0,0 +1,405 @@
+import { RemoveActor } from '../../../engine/events';
+import { System } from '../../../engine/system';
+import { ActorCollection } from '../../../engine/actor';
+import { Renderable } from '../../components/renderable';
+import { Transform } from '../../components/transform';
+import { Camera } from '../../components/camera';
+import { ResourceLoader } from '../../../engine/resource-loader';
+import { CameraService } from '../camera-system';
+import { Rectangle } from './geometry/rectangle';
+import { Color } from './color';
+import { textureHandlers } from './texture-handlers';
+import { ShaderBuilder, VERTEX_SHADER, FRAGMENT_SHADER, ShaderProvider, } from './shader-builder';
+import { MatrixTransformer } from './matrix-transformer';
+import { composeSort, createSortByLayer, sortByYAxis, sortByXAxis, sortByZAxis, sortByFit, } from '../sprite-renderer/sort';
+import { splitToBatch } from './utils';
+import { MAX_COLOR_NUMBER, DRAW_OFFSET, DRAW_COUNT, STD_SCREEN_SIZE, VECTOR_2_SIZE, BYTES_PER_VECTOR_2, VERTEX_STRIDE, VERTEX_DATA_STRIDE, BUFFER_SIZE, } from './consts';
+export class RenderSystem extends System {
+    textureAtlasSrc;
+    textureAtlasDescriptorSrc;
+    textureAtlas;
+    textureAtlasSize;
+    textureAtlasDescriptor;
+    textureHandlers;
+    _matrixTransformer;
+    _backgroundColor;
+    _view;
+    _viewWidth;
+    _viewHeight;
+    _windowDidResize;
+    _onWindowResizeBind;
+    _shaders;
+    shaderProvider;
+    _actorCollection;
+    _scaleSensitivity;
+    _screenScale;
+    _vaoExt;
+    _buffer;
+    _vao;
+    _geometry;
+    _viewMatrixStats;
+    _vertexData;
+    gl;
+    program;
+    textures;
+    _variables;
+    sortFn;
+    resourceLoader;
+    cameraService;
+    constructor(options) {
+        super();
+        const { windowNodeId, textureAtlas, textureAtlasDescriptor, backgroundColor, sortingLayers, scaleSensitivity, scene, } = options;
+        const window = document.getElementById(windowNodeId);
+        if (!window) {
+            throw new Error('Unable to load RenderSystem. Root canvas node not found');
+        }
+        this.textureAtlasSrc = textureAtlas;
+        this.textureAtlasDescriptorSrc = textureAtlasDescriptor;
+        this.textureAtlasDescriptor = {};
+        this.textureAtlasSize = {
+            width: 0,
+            height: 0,
+        };
+        this.textureHandlers = Object
+            .keys(textureHandlers)
+            .reduce((storage, key) => {
+            const TextureHandlerClass = textureHandlers[key];
+            storage[key] = new TextureHandlerClass();
+            return storage;
+        }, {});
+        this._matrixTransformer = new MatrixTransformer();
+        this._backgroundColor = new Color(backgroundColor);
+        this._view = window;
+        this._viewWidth = 0;
+        this._viewHeight = 0;
+        this._windowDidResize = true;
+        this._onWindowResizeBind = this._onWindowResize.bind(this);
+        this.gl = null;
+        this.program = null;
+        this.textures = null;
+        this._shaders = [];
+        this._variables = {};
+        this.sortFn = composeSort([
+            createSortByLayer(sortingLayers),
+            sortByYAxis,
+            sortByXAxis,
+            sortByZAxis,
+            sortByFit,
+        ]);
+        this._actorCollection = new ActorCollection(scene, {
+            components: [
+                Renderable,
+                Transform,
+            ],
+        });
+        this.shaderProvider = new ShaderProvider(this._actorCollection);
+        this._scaleSensitivity = Math.min(Math.max(scaleSensitivity, 0), 100) / 100;
+        this._screenScale = 1;
+        this._vaoExt = null;
+        this._buffer = null;
+        this._vao = null;
+        this._geometry = {};
+        this._viewMatrixStats = {};
+        this._vertexData = new Float32Array(VERTEX_DATA_STRIDE);
+        this.resourceLoader = new ResourceLoader();
+        this.cameraService = scene.getService(CameraService);
+    }
+    mount() {
+        window.addEventListener('resize', this._onWindowResizeBind);
+        this._actorCollection.addEventListener(RemoveActor, this.handleActorRemove);
+        this.gl = this._initGraphicContext();
+        this._initExtensions();
+        this._initScreen();
+        this.program = this._initShaders();
+        this._initProgramInfo();
+        this.textures = this._initTextures();
+    }
+    unmount() {
+        window.removeEventListener('resize', this._onWindowResizeBind);
+        this._actorCollection.removeEventListener(RemoveActor, this.handleActorRemove);
+        this._shaders.forEach((shader) => {
+            if (this.program) {
+                this.gl?.detachShader(this.program, shader);
+            }
+            this.gl?.deleteShader(shader);
+        });
+        this.gl?.deleteProgram(this.program);
+        this.gl?.deleteTexture(this.textures);
+        // eslint-disable-next-line no-bitwise
+        this.gl?.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+        this._buffer = null;
+        this._shaders = [];
+        this.program = null;
+        this.textures = null;
+        this.gl = null;
+        this._vao = null;
+        this._vaoExt = null;
+        this._geometry = {};
+        this._viewMatrixStats = {};
+    }
+    async load() {
+        const resources = [this.textureAtlasSrc, this.textureAtlasDescriptorSrc];
+        const [textureAtlas, textureAtlasDescriptor] = await Promise.all(resources.map((resource) => this.resourceLoader.load(resource)));
+        this.textureAtlas = textureAtlas;
+        this.textureAtlasDescriptor = textureAtlasDescriptor;
+        this.textureAtlasSize.width = this.textureAtlas.width;
+        this.textureAtlasSize.height = this.textureAtlas.height;
+    }
+    handleActorRemove = (event) => {
+        this._geometry[event.actor.id] = null;
+    };
+    _onWindowResize() {
+        this._windowDidResize = true;
+    }
+    _initGraphicContext() {
+        let graphicContext = null;
+        try {
+            graphicContext = this._view.getContext('webgl')
+                || this._view.getContext('experimental-webgl');
+        }
+        catch (e) {
+            throw new Error('Unable to get graphic context.');
+        }
+        if (!graphicContext) {
+            throw new Error('Unable to initialize WebGL. Your browser may not support it.');
+        }
+        return graphicContext;
+    }
+    _initExtensions() {
+        if (!this.gl) {
+            throw new Error('Unable to initialize extension. The graphic context is not initialized');
+        }
+        const vaoExt = this.gl.getExtension('OES_vertex_array_object');
+        if (!vaoExt) {
+            throw new Error('Unable to initialize extension.');
+        }
+        this._vaoExt = vaoExt;
+    }
+    _initScreen() {
+        if (!this.gl) {
+            throw new Error('Unable to initialize screen. The graphic context is not initialized.');
+        }
+        this.gl.clearColor(this._backgroundColor.red() / MAX_COLOR_NUMBER, this._backgroundColor.green() / MAX_COLOR_NUMBER, this._backgroundColor.blue() / MAX_COLOR_NUMBER, 1.0);
+        this.gl.enable(this.gl.DEPTH_TEST);
+        this.gl.enable(this.gl.BLEND);
+        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+        this.gl.depthFunc(this.gl.LEQUAL);
+        // eslint-disable-next-line no-bitwise
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+    }
+    _initShaders() {
+        if (!this.gl) {
+            throw new Error('Unable to initialize shaders. The graphic context is not initialized');
+        }
+        const shaderBuilder = new ShaderBuilder(this.gl);
+        const vertexShader = shaderBuilder.create(VERTEX_SHADER);
+        const fragmentShader = shaderBuilder.create(FRAGMENT_SHADER);
+        const shaderProgram = this.gl.createProgram();
+        if (!shaderProgram) {
+            throw new Error('Can\'t create shader program');
+        }
+        this.gl.attachShader(shaderProgram, vertexShader);
+        this.gl.attachShader(shaderProgram, fragmentShader);
+        this.gl.linkProgram(shaderProgram);
+        if (!this.gl.getProgramParameter(shaderProgram, this.gl.LINK_STATUS)) {
+            throw new Error('Unable to initialize the shader program.');
+        }
+        this._shaders.push(vertexShader, fragmentShader);
+        return shaderProgram;
+    }
+    _initProgramInfo() {
+        if (!this.gl) {
+            throw new Error('Unable to activate program. The graphic context is not initialized');
+        }
+        if (!this.program) {
+            throw new Error('Unable to activate program. The program is not initialized');
+        }
+        this.gl.useProgram(this.program);
+        this._variables = {
+            aPosition: this.gl.getAttribLocation(this.program, 'a_position'),
+            aTexCoord: this.gl.getAttribLocation(this.program, 'a_texCoord'),
+            uViewMatrix: this.gl.getUniformLocation(this.program, 'u_viewMatrix'),
+            uTexAtlasSize: this.gl.getUniformLocation(this.program, 'u_texAtlasSize'),
+            uModelViewMatrix: this.gl.getUniformLocation(this.program, 'u_modelViewMatrix'),
+            uTexSize: this.gl.getUniformLocation(this.program, 'u_texSize'),
+            uTexTranslate: this.gl.getUniformLocation(this.program, 'u_texTranslate'),
+            uActorSize: this.gl.getUniformLocation(this.program, 'u_actorSize'),
+        };
+        this._buffer = this.gl.createBuffer();
+        this._vao = this._createVAO();
+        this._setUpGlobalUniforms();
+    }
+    _createVAO() {
+        if (!this.gl) {
+            throw new Error('Unable to create Vertex Array Object. The graphic context is not initialized');
+        }
+        if (!this._vaoExt) {
+            throw new Error('Unable to create Vertex Array Object. VAO extension is not available');
+        }
+        const vao = this._vaoExt.createVertexArrayOES();
+        this._vaoExt.bindVertexArrayOES(vao);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this._buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, BUFFER_SIZE, this.gl.DYNAMIC_DRAW);
+        const attrs = [
+            this._variables.aPosition,
+            this._variables.aTexCoord,
+        ];
+        const stride = attrs.length * BYTES_PER_VECTOR_2;
+        let offset = 0;
+        for (let i = 0; i < attrs.length; i += 1) {
+            this.gl.enableVertexAttribArray(attrs[i]);
+            this.gl.vertexAttribPointer(attrs[i], VECTOR_2_SIZE, this.gl.FLOAT, false, stride, offset);
+            offset += BYTES_PER_VECTOR_2;
+        }
+        this._vaoExt.bindVertexArrayOES(null);
+        return vao;
+    }
+    _setUpGlobalUniforms() {
+        if (!this.gl) {
+            throw new Error('Unable to set up global uniforms. The graphic context is not initialized');
+        }
+        this.gl.uniform2fv(this._variables.uTexAtlasSize, [this.textureAtlasSize.width, this.textureAtlasSize.height]);
+    }
+    _initTextures() {
+        if (!this.gl) {
+            throw new Error('Unable to initialize textures. The graphic context is not initialized');
+        }
+        if (!this.textureAtlas) {
+            throw new Error('Unable to initialize textures. The texture atlas is undefined');
+        }
+        const texture = this.gl.createTexture();
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.textureAtlas);
+        return texture;
+    }
+    _getModelViewMatrix(renderable, x, y, rotation, scaleX, scaleY) {
+        const matrixTransformer = this._matrixTransformer;
+        const matrix = matrixTransformer.getIdentityMatrix();
+        matrixTransformer.translate(matrix, -renderable.width / 2, -renderable.height / 2);
+        matrixTransformer.scale(matrix, scaleX, scaleY);
+        if (renderable.flipX) {
+            matrixTransformer.flipX(matrix);
+        }
+        if (renderable.flipY) {
+            matrixTransformer.flipY(matrix);
+        }
+        matrixTransformer.rotate(matrix, (renderable.rotation + rotation) % 360);
+        matrixTransformer.translate(matrix, x, y);
+        return matrix;
+    }
+    resizeCanvas(canvas) {
+        if (!this._windowDidResize) {
+            return;
+        }
+        const gl = this.gl;
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        this._viewWidth = this._view.clientWidth;
+        this._viewHeight = this._view.clientHeight;
+        const canvasWidth = this._viewWidth * devicePixelRatio;
+        const canvasHeight = this._viewHeight * devicePixelRatio;
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        const screenSize = Math.sqrt(Math.pow(canvas.clientWidth, 2) + Math.pow(canvas.clientHeight, 2));
+        const avaragingValue = 1 - this._scaleSensitivity;
+        const normalizedSize = screenSize - ((screenSize - STD_SCREEN_SIZE) * avaragingValue);
+        this._screenScale = normalizedSize / STD_SCREEN_SIZE;
+        gl.viewport(0, 0, canvasWidth, canvasHeight);
+        this._windowDidResize = false;
+    }
+    updateViewMatrix() {
+        const gl = this.gl;
+        const currentCamera = this.cameraService.getCurrentCamera();
+        const transform = currentCamera?.getComponent(Transform);
+        const camera = currentCamera?.getComponent(Camera);
+        const cameraOffsetX = transform?.offsetX ?? 0;
+        const cameraOffsetY = transform?.offsetY ?? 0;
+        const zoom = camera?.zoom ?? 1;
+        const scale = zoom * this._screenScale;
+        const prevStats = this._viewMatrixStats;
+        if (prevStats.x === cameraOffsetX
+            && prevStats.y === cameraOffsetY
+            && prevStats.width === this._viewWidth
+            && prevStats.height === this._viewHeight
+            && prevStats.scale === scale) {
+            return;
+        }
+        const matrixTransformer = this._matrixTransformer;
+        const viewMatrix = matrixTransformer.getIdentityMatrix();
+        matrixTransformer.translate(viewMatrix, -cameraOffsetX, -cameraOffsetY);
+        matrixTransformer.scale(viewMatrix, scale, scale);
+        matrixTransformer.project(viewMatrix, this._viewWidth, this._viewHeight);
+        gl.uniformMatrix3fv(this._variables.uViewMatrix, false, viewMatrix);
+        this._viewMatrixStats.width = this._viewWidth;
+        this._viewMatrixStats.height = this._viewHeight;
+        this._viewMatrixStats.x = cameraOffsetX;
+        this._viewMatrixStats.y = cameraOffsetY;
+        this._viewMatrixStats.scale = scale;
+    }
+    setUpBuffers() {
+        const vaoExt = this._vaoExt;
+        const gl = this.gl;
+        const vertexData = this._vertexData;
+        vaoExt.bindVertexArrayOES(this._vao);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertexData);
+    }
+    setUpVertexData(actor) {
+        const vertexData = this._vertexData;
+        const renderable = actor.getComponent(Renderable);
+        // TODO: Filter hidden object while frustum culling step and remove that
+        if (renderable.disabled) {
+            for (let i = 0; i < VERTEX_DATA_STRIDE; i += 1) {
+                vertexData[i] = 0;
+            }
+            return;
+        }
+        const texture = this.textureAtlasDescriptor[renderable.src];
+        const textureInfo = this.textureHandlers[renderable.type].handle(texture, renderable);
+        const geometry = this._geometry[actor.id] || {
+            position: new Rectangle(renderable.width, renderable.height).toArray(),
+            texCoord: new Rectangle(textureInfo.width, textureInfo.height).toArray(),
+        };
+        this._geometry[actor.id] = geometry;
+        const { position, texCoord } = geometry;
+        for (let i = 0, j = 0; i < position.length; i += 2, j += VERTEX_STRIDE) {
+            vertexData[j] = position[i];
+            vertexData[j + 1] = position[i + 1];
+            vertexData[j + 2] = texCoord[i];
+            vertexData[j + 3] = texCoord[i + 1];
+        }
+    }
+    setUpUniforms(actor) {
+        const gl = this.gl;
+        const renderable = actor.getComponent(Renderable);
+        const transform = actor.getComponent(Transform);
+        const texture = this.textureAtlasDescriptor[renderable.src];
+        const textureInfo = this.textureHandlers[renderable.type].handle(texture, renderable);
+        const modelViewMatrix = this._getModelViewMatrix(renderable, transform.offsetX, transform.offsetY, transform.rotation, transform.scaleX, transform.scaleY);
+        gl.uniformMatrix3fv(this._variables.uModelViewMatrix, false, modelViewMatrix);
+        gl.uniform2fv(this._variables.uTexSize, [textureInfo.width, textureInfo.height]);
+        gl.uniform2fv(this._variables.uTexTranslate, [textureInfo.x, textureInfo.y]);
+        gl.uniform2fv(this._variables.uActorSize, [renderable.width, renderable.height]);
+    }
+    update() {
+        const gl = this.gl;
+        const { canvas } = gl;
+        this.resizeCanvas(canvas);
+        // eslint-disable-next-line no-bitwise
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        this.updateViewMatrix();
+        this._actorCollection.sort(this.sortFn);
+        const batches = splitToBatch(this._actorCollection, this.shaderProvider);
+        batches.forEach((batch) => {
+            batch.forEach((actor) => {
+                this.setUpUniforms(actor);
+                this.setUpVertexData(actor);
+                this.setUpBuffers();
+                gl.drawArrays(gl.TRIANGLES, DRAW_OFFSET, DRAW_COUNT);
+            });
+        });
+    }
+}
+RenderSystem.systemName = 'RenderSystem';

package/build/contrib/systems/webgl-render-system/matrix-transformer/index.d.ts

@@ -0,0 +1,20 @@
+export type Matrix3x3 = [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+export declare class MatrixTransformer {
+    getIdentityMatrix(): Matrix3x3;
+    project(matrix: Matrix3x3, width: number, height: number): void;
+    translate(matrix: Matrix3x3, tx: number, ty: number): void;
+    flipX(matrix: Matrix3x3): void;
+    flipY(matrix: Matrix3x3): void;
+    scale(matrix: Matrix3x3, scaleX: number, scaleY: number): void;
+    rotate(matrix: Matrix3x3, angle: number): void;
+}

package/build/contrib/systems/webgl-render-system/matrix-transformer/index.js

@@ -0,0 +1,55 @@
+export class MatrixTransformer {
+    getIdentityMatrix() {
+        return [
+            1, 0, 0,
+            0, 1, 0,
+            0, 0, 1,
+        ];
+    }
+    project(matrix, width, height) {
+        const projectedWidth = 2 / width;
+        const projectedHeight = 2 / height;
+        matrix[0] *= projectedWidth;
+        matrix[1] = -matrix[1] * projectedHeight;
+        matrix[3] *= projectedWidth;
+        matrix[4] = -matrix[4] * projectedHeight;
+        matrix[6] *= projectedWidth;
+        matrix[7] = -matrix[7] * projectedHeight;
+    }
+    translate(matrix, tx, ty) {
+        matrix[0] += matrix[2] * tx;
+        matrix[1] += matrix[2] * ty;
+        matrix[3] += matrix[5] * tx;
+        matrix[4] += matrix[5] * ty;
+        matrix[6] += matrix[8] * tx;
+        matrix[7] += matrix[8] * ty;
+    }
+    flipX(matrix) {
+        this.scale(matrix, -1, 1);
+    }
+    flipY(matrix) {
+        this.scale(matrix, 1, -1);
+    }
+    scale(matrix, scaleX, scaleY) {
+        matrix[0] *= scaleX;
+        matrix[1] *= scaleY;
+        matrix[3] *= scaleX;
+        matrix[4] *= scaleY;
+        matrix[6] *= scaleX;
+        matrix[7] *= scaleY;
+    }
+    rotate(matrix, angle) {
+        angle = (angle * Math.PI) / 180;
+        const cos = Math.cos(angle);
+        const sin = -Math.sin(angle);
+        const matrix0 = matrix[0];
+        const matrix3 = matrix[3];
+        const matrix6 = matrix[6];
+        matrix[0] = (matrix0 * cos) + (matrix[1] * sin);
+        matrix[1] = (matrix[1] * cos) - (matrix0 * sin);
+        matrix[3] = (matrix3 * cos) + (matrix[4] * sin);
+        matrix[4] = (matrix[4] * cos) - (matrix3 * sin);
+        matrix[6] = (matrix6 * cos) + (matrix[7] * sin);
+        matrix[7] = (matrix[7] * cos) - (matrix6 * sin);
+    }
+}

package/build/contrib/systems/webgl-render-system/shader-builder/fragment-shader.d.ts

@@ -0,0 +1 @@
+export declare const fragmentShader = "\nprecision highp float;\n\nuniform sampler2D u_image;\nuniform vec2 u_texAtlasSize;\nuniform vec2 u_texSize;\nuniform vec2 u_texTranslate;\nuniform vec2 u_actorSize;\n\nvarying vec2 v_texCoord;\n\nfloat calculateCoord(float actorSize, float texSize, float texTranslate, float texCoord) {\n  if (actorSize > texSize) {\n    float repeat = actorSize / texSize;\n    return mod(texCoord * repeat, texSize) + texTranslate;\n  } else {\n    return texCoord + texTranslate;\n  }\n}\n\nvoid main() {\n  vec2 texCoord = vec2(\n    calculateCoord(u_actorSize.x, u_texSize.x, u_texTranslate.x, v_texCoord.x),\n    calculateCoord(u_actorSize.y, u_texSize.y, u_texTranslate.y, v_texCoord.y)\n  );\n\n  gl_FragColor = texture2D(u_image, texCoord / u_texAtlasSize);\n}\n";

package/build/contrib/systems/webgl-render-system/shader-builder/fragment-shader.js

@@ -0,0 +1,29 @@
+export const fragmentShader = `
+precision highp float;
+
+uniform sampler2D u_image;
+uniform vec2 u_texAtlasSize;
+uniform vec2 u_texSize;
+uniform vec2 u_texTranslate;
+uniform vec2 u_actorSize;
+
+varying vec2 v_texCoord;
+
+float calculateCoord(float actorSize, float texSize, float texTranslate, float texCoord) {
+  if (actorSize > texSize) {
+    float repeat = actorSize / texSize;
+    return mod(texCoord * repeat, texSize) + texTranslate;
+  } else {
+    return texCoord + texTranslate;
+  }
+}
+
+void main() {
+  vec2 texCoord = vec2(
+    calculateCoord(u_actorSize.x, u_texSize.x, u_texTranslate.x, v_texCoord.x),
+    calculateCoord(u_actorSize.y, u_texSize.y, u_texTranslate.y, v_texCoord.y)
+  );
+
+  gl_FragColor = texture2D(u_image, texCoord / u_texAtlasSize);
+}
+`;

package/build/contrib/systems/webgl-render-system/shader-builder/index.d.ts

@@ -0,0 +1,11 @@
+export declare const FRAGMENT_SHADER = "FRAGMENT_SHADER";
+export declare const VERTEX_SHADER = "VERTEX_SHADER";
+export { ShaderProvider } from './shader-provider';
+export declare class ShaderBuilder {
+    private graphicContext;
+    private creators;
+    constructor(graphicContext: WebGL2RenderingContext);
+    _createFragmentShader(): WebGLShader | null;
+    _createVertexShader(): WebGLShader | null;
+    create(type: 'FRAGMENT_SHADER' | 'VERTEX_SHADER'): WebGLShader;
+}

package/build/contrib/systems/webgl-render-system/shader-builder/index.js

@@ -0,0 +1,39 @@
+import { fragmentShader } from './fragment-shader';
+import { vertexShader } from './vertex-shader';
+export const FRAGMENT_SHADER = 'FRAGMENT_SHADER';
+export const VERTEX_SHADER = 'VERTEX_SHADER';
+export { ShaderProvider } from './shader-provider';
+const shaders = {
+    [FRAGMENT_SHADER]: fragmentShader,
+    [VERTEX_SHADER]: vertexShader,
+};
+export class ShaderBuilder {
+    graphicContext;
+    creators;
+    constructor(graphicContext) {
+        this.graphicContext = graphicContext;
+        this.creators = {
+            [FRAGMENT_SHADER]: this._createFragmentShader.bind(this),
+            [VERTEX_SHADER]: this._createVertexShader.bind(this),
+        };
+    }
+    _createFragmentShader() {
+        return this.graphicContext.createShader(this.graphicContext.FRAGMENT_SHADER);
+    }
+    _createVertexShader() {
+        return this.graphicContext.createShader(this.graphicContext.VERTEX_SHADER);
+    }
+    create(type) {
+        const shader = this.creators[type]();
+        if (!shader) {
+            throw new Error(`Can't create shader with same type: ${type}`);
+        }
+        this.graphicContext.shaderSource(shader, shaders[type]);
+        this.graphicContext.compileShader(shader);
+        if (!this.graphicContext.getShaderParameter(shader, this.graphicContext.COMPILE_STATUS)) {
+            const errorLog = this.graphicContext.getShaderInfoLog(shader);
+            throw new Error(`An error occurred compiling the shaders${errorLog ? `: ${errorLog}` : ''}`);
+        }
+        return shader;
+    }
+}

package/build/contrib/systems/webgl-render-system/shader-builder/shader-provider.d.ts

@@ -0,0 +1,10 @@
+import type { ActorCollection } from '../../../../engine/actor';
+export declare class ShaderProvider {
+    private actorCollection;
+    private shadingIdMap;
+    constructor(actorCollection: ActorCollection);
+    getShadingId(actorId: string): string;
+    private handleActorAdd;
+    private handleActorRemove;
+    private calculateShadingId;
+}

package/build/contrib/systems/webgl-render-system/shader-builder/shader-provider.js

@@ -0,0 +1,34 @@
+import { AddActor, RemoveActor } from '../../../../engine/events';
+import { Renderable } from '../../../components/renderable';
+export class ShaderProvider {
+    actorCollection;
+    shadingIdMap;
+    constructor(actorCollection) {
+        this.actorCollection = actorCollection;
+        this.shadingIdMap = {};
+        // TODO: Remove listeners on system unmount
+        this.actorCollection.addEventListener(AddActor, this.handleActorAdd);
+        this.actorCollection.addEventListener(RemoveActor, this.handleActorRemove);
+    }
+    getShadingId(actorId) {
+        return this.shadingIdMap[actorId];
+    }
+    handleActorAdd = (event) => {
+        const { actor } = event;
+        this.shadingIdMap[actor.id] = this.calculateShadingId(actor);
+    };
+    handleActorRemove = (event) => {
+        const { actor } = event;
+        this.shadingIdMap = Object.keys(this.shadingIdMap)
+            .reduce((acc, key) => {
+            if (key !== actor.id) {
+                acc[key] = this.shadingIdMap[key];
+            }
+            return acc;
+        }, {});
+    };
+    calculateShadingId(actor) {
+        const renderable = actor.getComponent(Renderable);
+        return `${renderable.fit}`;
+    }
+}

package/build/contrib/systems/webgl-render-system/shader-builder/vertex-shader.d.ts

@@ -0,0 +1 @@
+export declare const vertexShader = "\nattribute vec2 a_position;\nattribute vec2 a_texCoord;\n\nuniform mat3 u_modelViewMatrix;\nuniform mat3 u_viewMatrix;\n\nvarying vec2 v_texCoord;\n\nvoid main() {\n  mat3 matrix = u_viewMatrix * u_modelViewMatrix;\n  gl_Position = vec4((matrix * vec3(a_position, 1)).xy, 0, 1);\n\n  v_texCoord = a_texCoord;\n}\n";

package/build/contrib/systems/webgl-render-system/shader-builder/vertex-shader.js

@@ -0,0 +1,16 @@
+export const vertexShader = `
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+
+uniform mat3 u_modelViewMatrix;
+uniform mat3 u_viewMatrix;
+
+varying vec2 v_texCoord;
+
+void main() {
+  mat3 matrix = u_viewMatrix * u_modelViewMatrix;
+  gl_Position = vec4((matrix * vec3(a_position, 1)).xy, 0, 1);
+
+  v_texCoord = a_texCoord;
+}
+`;

package/build/contrib/systems/webgl-render-system/texture-handlers/index.d.ts

@@ -0,0 +1,7 @@
+import { StaticTextureHandler } from './static-texture-handler';
+import { SpriteTextureHandler } from './sprite-texture-handler';
+export { TextureDescriptor, TextureHandler } from './texture-handler';
+export declare const textureHandlers: {
+    static: typeof StaticTextureHandler;
+    sprite: typeof SpriteTextureHandler;
+};

package/build/contrib/systems/webgl-render-system/texture-handlers/index.js

@@ -0,0 +1,6 @@
+import { StaticTextureHandler } from './static-texture-handler';
+import { SpriteTextureHandler } from './sprite-texture-handler';
+export const textureHandlers = {
+    static: StaticTextureHandler,
+    sprite: SpriteTextureHandler,
+};

package/build/contrib/systems/webgl-render-system/texture-handlers/sprite-texture-handler.d.ts

@@ -0,0 +1,10 @@
+import { Renderable } from '../../../components/renderable';
+import { TextureHandler, TextureDescriptor } from './texture-handler';
+export declare class SpriteTextureHandler implements TextureHandler {
+    handle(textureDescriptor: TextureDescriptor, renderable: Renderable): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}

package/build/contrib/systems/webgl-render-system/texture-handlers/sprite-texture-handler.js

@@ -0,0 +1,16 @@
+export class SpriteTextureHandler {
+    handle(textureDescriptor, renderable) {
+        const { x, y, width, height, } = textureDescriptor;
+        const { spacing, extruding, slice = 0, currentFrame = 0, } = renderable;
+        const padding = 2 * extruding;
+        const frameWidth = ((width - ((slice - 1) * spacing)) / slice) - padding;
+        const frameHeight = height - padding;
+        const step = frameWidth + spacing + padding;
+        return {
+            x: x + (step * currentFrame) + extruding,
+            y: y + extruding,
+            width: frameWidth,
+            height: frameHeight,
+        };
+    }
+}