summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/index.ts2
-rw-r--r--src/model/MapData.ts16
-rw-r--r--src/view/MapLoader.ts4
-rw-r--r--src/view/MapView.ts44
-rw-r--r--src/view/renderer/Renderer.ts100
-rw-r--r--src/view/renderer/Shaders.ts (renamed from src/view/Renderer.ts)86
-rw-r--r--src/view/renderer/default.fs (renamed from src/view/default.fs)0
-rw-r--r--src/view/renderer/default.vs (renamed from src/view/default.vs)0
8 files changed, 154 insertions, 98 deletions
diff --git a/src/index.ts b/src/index.ts
index 1c2035f..5d70727 100644
--- a/src/index.ts
+++ b/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;
diff --git a/src/model/MapData.ts b/src/model/MapData.ts
index dcb98b8..c8db35c 100644
--- a/src/model/MapData.ts
+++ b/src/model/MapData.ts
@@ -1,18 +1,18 @@
import {mapFromObject} from '../util';
interface Input {
- tiles: {[key: string]: string};
- collision: string[];
- layers: string[][][];
+ readonly tiles: {[key: string]: string};
+ readonly collision: string[];
+ readonly layers: string[][][];
}
export default class MapData {
- public tiles: Map<string, string>;
- public collision: string[];
- public layers: string[][][];
+ public readonly tiles: Map<string, string>;
+ public readonly collision: string[];
+ public readonly layers: string[][][];
- public width: number;
- public height: number;
+ public readonly width: number;
+ public readonly height: number;
constructor(data: Input) {
this.tiles = mapFromObject(data.tiles);
diff --git a/src/view/MapLoader.ts b/src/view/MapLoader.ts
index f178c69..31e6484 100644
--- a/src/view/MapLoader.ts
+++ b/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);
}
diff --git a/src/view/MapView.ts b/src/view/MapView.ts
index 97d5d7d..edcbfbb 100644
--- a/src/view/MapView.ts
+++ b/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 textureBuffer: WebGLBuffer;
+ private readonly vertexBuffer: WebGLBuffer;
+ private readonly textureBuffer: WebGLBuffer;
constructor(
- private r: Renderer,
- private map: MapData,
- private tileTexture: WebGLTexture,
- private tileMap: Map<string, number>,
+ private readonly r: Renderer,
+ private readonly map: MapData,
+ private readonly tileTexture: WebGLTexture,
+ 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);
- r.gl.bufferData(r.gl.ARRAY_BUFFER, new Float32Array(vertexData), r.gl.STATIC_DRAW);
+ gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
this.textureBuffer = r.createBuffer();
- r.gl.bindBuffer(r.gl.ARRAY_BUFFER, this.textureBuffer);
- r.gl.bufferData(r.gl.ARRAY_BUFFER, new Float32Array(textureData), r.gl.STATIC_DRAW);
+ gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
+ 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();
+
+ gl.clear(gl.COLOR_BUFFER_BIT);
- this.r.gl.activeTexture(this.r.gl.TEXTURE0);
- this.r.gl.bindTexture(this.r.gl.TEXTURE_2D, this.tileTexture);
- this.r.gl.uniform1i(this.r.samplerLoc, 0);
+ gl.activeTexture(gl.TEXTURE0);
+ gl.bindTexture(gl.TEXTURE_2D, this.tileTexture);
+ gl.uniform1i(this.r.getSamplerLoc(), 0);
- this.r.gl.bindBuffer(this.r.gl.ARRAY_BUFFER, this.vertexBuffer);
- this.r.gl.vertexAttribPointer(this.r.vertexPosLoc, 2, this.r.gl.FLOAT, false, 0, 0);
+ gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+ gl.vertexAttribPointer(this.r.getVertexPosLoc(), 2, gl.FLOAT, false, 0, 0);
- this.r.gl.bindBuffer(this.r.gl.ARRAY_BUFFER, this.textureBuffer);
- this.r.gl.vertexAttribPointer(this.r.textureCoordLoc, 2, this.r.gl.FLOAT, false, 0, 0);
+ gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
+ gl.vertexAttribPointer(this.r.getTextureCoordLoc(), 2, gl.FLOAT, false, 0, 0);
- this.r.gl.drawArrays(this.r.gl.TRIANGLES, 0, 6 * this.map.width * this.map.height);
+ 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) {
diff --git a/src/view/renderer/Renderer.ts b/src/view/renderer/Renderer.ts
new file mode 100644
index 0000000..6e3897d
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/view/Renderer.ts b/src/view/renderer/Shaders.ts
index ae3c6e7..da75a18 100644
--- a/src/view/Renderer.ts
+++ b/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 {
- public gl: WebGLRenderingContext;
-
- public vertexPosLoc!: number;
- public textureCoordLoc!: number;
- public samplerLoc!: WebGLUniformLocation;
-
- private viewport: mat4 = mat4.create();
-
- private viewportLoc!: WebGLUniformLocation;
- private translateLoc!: WebGLUniformLocation;
-
- constructor(private canvas: HTMLCanvasElement) {
- this.gl = this.mkContext();
-
- this.initShaders();
+export default class Shaders {
+ public readonly viewportLoc: WebGLUniformLocation;
+ public readonly translateLoc: WebGLUniformLocation;
- this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
+ public readonly vertexPosLoc: number;
+ public readonly textureCoordLoc: number;
+ public readonly samplerLoc: WebGLUniformLocation;
- 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 {
+ constructor(private readonly gl: WebGLRenderingContext) {
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 {
- const w = this.canvas.width;
- const h = this.canvas.height;
+ private compileShader(type: number, src: string): WebGLShader {
+ const shader = this.gl.createShader(type);
+ if (!shader)
+ throw new Error('Unable to create shader');
- this.gl.viewport(0, 0, w, h);
- this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+ this.gl.shaderSource(shader, src);
+ this.gl.compileShader(shader);
- mat4.identity(this.viewport);
- mat4.scale(this.viewport, this.viewport, [2 * 64 / w, -2 * 64 / h, 1.0]);
- this.gl.uniformMatrix4fv(this.viewportLoc, false, this.viewport);
+ 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);
+ }
- 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;
- }
}
diff --git a/src/view/default.fs b/src/view/renderer/default.fs
index 351fed7..351fed7 100644
--- a/src/view/default.fs
+++ b/src/view/renderer/default.fs
diff --git a/src/view/default.vs b/src/view/renderer/default.vs
index 4715a17..4715a17 100644
--- a/src/view/default.vs
+++ b/src/view/renderer/default.vs
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 20:11:57 +0100