Move shader initialization out of renderer

Avoid public fields and ! overrides, make almost all fields readonly.

src/index.ts

@@ -1,7 +1,7 @@
 import MapData from './model/MapData';
 
 import {loadMap} from './view/MapLoader';
-import Renderer from './view/Renderer';
+import Renderer from './view/renderer/Renderer';
 
 window.onload = () => {
 	const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;

src/model/MapData.ts

@@ -1,18 +1,18 @@
 import {mapFromObject} from '../util';
 
 interface Input {
-	tiles: {[key: string]: string};
+	readonly tiles: {[key: string]: string};
-	collision: string[];
+	readonly collision: string[];
-	layers: string[][][];
+	readonly layers: string[][][];
 }
 
 export default class MapData {
-	public tiles: Map<string, string>;
+	public readonly tiles: Map<string, string>;
-	public collision: string[];
+	public readonly collision: string[];
-	public layers: string[][][];
+	public readonly layers: string[][][];
 
-	public width: number;
+	public readonly width: number;
-	public height: number;
+	public readonly height: number;
 
 	constructor(data: Input) {
 		this.tiles = mapFromObject(data.tiles);

src/view/MapLoader.ts

@@ -2,7 +2,7 @@ import {mapValues, mapValuesAsync, nextPowerOf2} from '../util';
 
 import MapData from '../model/MapData';
 import MapView from './MapView';
-import Renderer from './Renderer';
+import Renderer from './renderer/Renderer';
 
 function loadImage(url: string): Promise<HTMLImageElement> {
 	return new Promise((resolve, reject) => {
@@ -56,7 +56,7 @@ function mkTileTexture(gl: WebGLRenderingContext, tiles: Map<string, HTMLImageEl
 
 export async function loadMap(r: Renderer, mapData: MapData): Promise<MapView> {
 	const tiles = await loadTiles(mapData.tiles);
-	const [tileTexture, tileMap] = mkTileTexture(r.gl, tiles);
+	const [tileTexture, tileMap] = mkTileTexture(r.getContext(), tiles);
 
 	return new MapView(r, mapData, tileTexture, tileMap);
 }

src/view/MapView.ts

@@ -1,21 +1,21 @@
 import {nextPowerOf2} from '../util';
 
 import MapData from '../model/MapData';
-import Renderer from './Renderer';
+import Renderer from './renderer/Renderer';
 
 export default class MapView {
 	public static readonly tileSize: number = 32;
 
 	private redrawPending: boolean = false;
 
-	private vertexBuffer: WebGLBuffer;
+	private readonly vertexBuffer: WebGLBuffer;
-	private textureBuffer: WebGLBuffer;
+	private readonly textureBuffer: WebGLBuffer;
 
 	constructor(
-		private r: Renderer,
+		private readonly r: Renderer,
-		private map: MapData,
+		private readonly map: MapData,
-		private tileTexture: WebGLTexture,
+		private readonly tileTexture: WebGLTexture,
-		private tileMap: Map<string, number>,
+		private readonly tileMap: Map<string, number>,
 	) {
 		const vertexData: number[] = [];
 		const textureData: number[] = [];
@@ -26,29 +26,33 @@ export default class MapView {
 			for (let y = 0; y < map.height; y++)
 				this.addTile(vertexData, textureData, x, y, map.layers[0][y][x], tileCount);
 
+		const gl = r.getContext();
+
 		this.vertexBuffer = r.createBuffer();
-		r.gl.bindBuffer(r.gl.ARRAY_BUFFER, this.vertexBuffer);
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-		r.gl.bufferData(r.gl.ARRAY_BUFFER, new Float32Array(vertexData), r.gl.STATIC_DRAW);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
 
 		this.textureBuffer = r.createBuffer();
-		r.gl.bindBuffer(r.gl.ARRAY_BUFFER, this.textureBuffer);
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
-		r.gl.bufferData(r.gl.ARRAY_BUFFER, new Float32Array(textureData), r.gl.STATIC_DRAW);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureData), gl.STATIC_DRAW);
 	}
 
 	public draw(): void {
-		this.r.gl.clear(this.r.gl.COLOR_BUFFER_BIT);
+		const gl = this.r.getContext();
 
-		this.r.gl.activeTexture(this.r.gl.TEXTURE0);
+		gl.clear(gl.COLOR_BUFFER_BIT);
-		this.r.gl.bindTexture(this.r.gl.TEXTURE_2D, this.tileTexture);
-		this.r.gl.uniform1i(this.r.samplerLoc, 0);
 
-		this.r.gl.bindBuffer(this.r.gl.ARRAY_BUFFER, this.vertexBuffer);
+		gl.activeTexture(gl.TEXTURE0);
-		this.r.gl.vertexAttribPointer(this.r.vertexPosLoc, 2, this.r.gl.FLOAT, false, 0, 0);
+		gl.bindTexture(gl.TEXTURE_2D, this.tileTexture);
+		gl.uniform1i(this.r.getSamplerLoc(), 0);
 
-		this.r.gl.bindBuffer(this.r.gl.ARRAY_BUFFER, this.textureBuffer);
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-		this.r.gl.vertexAttribPointer(this.r.textureCoordLoc, 2, this.r.gl.FLOAT, false, 0, 0);
+		gl.vertexAttribPointer(this.r.getVertexPosLoc(), 2, gl.FLOAT, false, 0, 0);
 
-		this.r.gl.drawArrays(this.r.gl.TRIANGLES, 0, 6 * this.map.width * this.map.height);
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
+		gl.vertexAttribPointer(this.r.getTextureCoordLoc(), 2, gl.FLOAT, false, 0, 0);
+
+		gl.drawArrays(gl.TRIANGLES, 0, 6 * this.map.width * this.map.height);
 	}
 
 	private addTile(vertexData: number[], textureData: number[], x: number, y: number, tile: string, tileCount: number) {

src/view/renderer/Renderer.ts

@@ -0,0 +1,100 @@
+import {mat4} from 'gl-matrix';
+
+import Shaders from './Shaders';
+
+export default class Renderer {
+	private readonly gl: WebGLRenderingContext;
+	private readonly shaders: Shaders;
+	private readonly viewport: mat4 = mat4.create();
+
+	constructor(private readonly canvas: HTMLCanvasElement) {
+		this.gl = this.mkContext();
+
+		this.shaders = new Shaders(this.gl);
+
+		this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
+
+		this.setSize();
+	}
+
+	public createBuffer(): WebGLBuffer {
+		const ret = this.gl.createBuffer();
+		if (!ret)
+			throw new Error('unable to create buffer');
+
+		return ret;
+	}
+
+	public getContext(): WebGLRenderingContext {
+		return this.gl;
+	}
+
+	public getVertexPosLoc(): number {
+		return this.shaders.vertexPosLoc;
+	}
+
+	public getTextureCoordLoc(): number {
+		return this.shaders.textureCoordLoc;
+	}
+
+	public getSamplerLoc(): WebGLUniformLocation {
+		return this.shaders.samplerLoc;
+	}
+
+	private mkContext(): WebGLRenderingContext {
+		const gl = (
+			this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl')
+		);
+		if (!gl)
+			throw new Error('unable to initialize WebGL context');
+
+		return gl;
+	}
+
+	private setSize(): void {
+		const w = this.canvas.width;
+		const h = this.canvas.height;
+
+		this.gl.viewport(0, 0, w, h);
+		this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+
+		mat4.identity(this.viewport);
+		mat4.scale(this.viewport, this.viewport, [2 * 64 / w, -2 * 64 / h, 1.0]);
+		this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport);
+
+		this.gl.uniform2f(this.shaders.translateLoc, -5.0, -5.0);
+	}
+
+	private getAttribLocation(program: WebGLProgram, name: string): number {
+		const ret = this.gl.getAttribLocation(program, name);
+		if (ret < 0)
+			throw new Error("unable to get location of attribute '" + name + "'");
+
+		return ret;
+	}
+
+	private getUniformLocation(program: WebGLProgram, name: string): WebGLUniformLocation {
+		const ret = this.gl.getUniformLocation(program, name);
+		if (!ret)
+			throw new Error("unable to get location of uniform '" + name + "'");
+
+		return ret;
+	}
+
+	private compileShader(type: number, src: string): WebGLShader {
+		const shader = this.gl.createShader(type);
+		if (!shader)
+			throw new Error('Unable to create shader');
+
+		this.gl.shaderSource(shader, src);
+		this.gl.compileShader(shader);
+
+		if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+			const err = this.gl.getShaderInfoLog(shader);
+			this.gl.deleteShader(shader);
+			throw new Error('Unable to compile shader: ' + err);
+		}
+
+		return shader;
+	}
+}

src/view/renderer/Shaders.ts

@@ -1,49 +1,15 @@
-import {mat4} from 'gl-matrix';
-
 import fragmentShaderSrc from './default.fs';
 import vertexShaderSrc from './default.vs';
 
-export default class Renderer {
+export default class Shaders {
-	public gl: WebGLRenderingContext;
+	public readonly viewportLoc: WebGLUniformLocation;
+	public readonly translateLoc: WebGLUniformLocation;
 
-	public vertexPosLoc!: number;
+	public readonly vertexPosLoc: number;
-	public textureCoordLoc!: number;
+	public readonly textureCoordLoc: number;
-	public samplerLoc!: WebGLUniformLocation;
+	public readonly samplerLoc: WebGLUniformLocation;
 
-	private viewport: mat4 = mat4.create();
+	constructor(private readonly gl: WebGLRenderingContext) {
-
-	private viewportLoc!: WebGLUniformLocation;
-	private translateLoc!: WebGLUniformLocation;
-
-	constructor(private canvas: HTMLCanvasElement) {
-		this.gl = this.mkContext();
-
-		this.initShaders();
-
-		this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
-
-		this.setSize();
-	}
-
-	public createBuffer(): WebGLBuffer {
-		const ret = this.gl.createBuffer();
-		if (!ret)
-			throw new Error('unable to create buffer');
-
-		return ret;
-	}
-
-	private mkContext(): WebGLRenderingContext {
-		const gl = (
-			this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl')
-		) as WebGLRenderingContext|null;
-		if (!gl)
-			throw new Error('unable to initialize WebGL context');
-
-		return gl;
-	}
-
-	private initShaders(): void {
 		const shaderProgram = this.gl.createProgram();
 		if (!shaderProgram)
 			throw new Error('Unable to create shader program');
@@ -78,18 +44,21 @@ export default class Renderer {
 		this.samplerLoc = this.getUniformLocation(shaderProgram, 'uSampler');
 	}
 
-	private setSize(): void {
+	private compileShader(type: number, src: string): WebGLShader {
-		const w = this.canvas.width;
+		const shader = this.gl.createShader(type);
-		const h = this.canvas.height;
+		if (!shader)
+			throw new Error('Unable to create shader');
 
-		this.gl.viewport(0, 0, w, h);
+		this.gl.shaderSource(shader, src);
-		this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+		this.gl.compileShader(shader);
 
-		mat4.identity(this.viewport);
+		if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
-		mat4.scale(this.viewport, this.viewport, [2 * 64 / w, -2 * 64 / h, 1.0]);
+			const err = this.gl.getShaderInfoLog(shader);
-		this.gl.uniformMatrix4fv(this.viewportLoc, false, this.viewport);
+			this.gl.deleteShader(shader);
+			throw new Error('Unable to compile shader: ' + err);
+		}
 
-		this.gl.uniform2f(this.translateLoc, -5.0, -5.0);
+		return shader;
 	}
 
 	private getAttribLocation(program: WebGLProgram, name: string): number {
@@ -107,21 +76,4 @@ export default class Renderer {
 
 		return ret;
 	}
-
-	private compileShader(type: number, src: string): WebGLShader {
-		const shader = this.gl.createShader(type);
-		if (!shader)
-			throw new Error('Unable to create shader');
-
-		this.gl.shaderSource(shader, src);
-		this.gl.compileShader(shader);
-
-		if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
-			const err = this.gl.getShaderInfoLog(shader);
-			this.gl.deleteShader(shader);
-			throw new Error('Unable to compile shader: ' + err);
-		}
-
-		return shader;
-	}
 }