summaryrefslogtreecommitdiffstats
path: root/src/renderer
diff options
context:
space:
mode:
Diffstat (limited to 'src/renderer')
-rw-r--r--src/renderer/index.css10
-rw-r--r--src/renderer/index.ts13
-rw-r--r--src/renderer/view/renderer/renderer.ts31
3 files changed, 26 insertions, 28 deletions
diff --git a/src/renderer/index.css b/src/renderer/index.css
index afdf217..672c410 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -3,18 +3,10 @@ html, body, div {
height: 100%;
}
-#app {
- text-align: center;
-}
-
-canvas {
- position: relative;
- top: calc(50% - 384px);
-}
-
* {
margin: 0px;
padding: 0px;
border: 0px;
background: #223;
+ overflow: hidden;
}
diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index 039c3b6..1fa9956 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -10,12 +10,17 @@ window.onload = async () => {
return;
const canvas = document.createElement('canvas');
- canvas.width = 1024;
- canvas.height = 768;
+ const renderer = new Renderer(canvas);
- app.append(canvas);
+ const resize = () => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ renderer.resize();
+ };
+ window.addEventListener('resize', resize);
+ resize();
- const renderer = new Renderer(canvas);
+ app.append(canvas);
GameContext.load(renderer);
};
diff --git a/src/renderer/view/renderer/renderer.ts b/src/renderer/view/renderer/renderer.ts
index 93f8589..9f711d3 100644
--- a/src/renderer/view/renderer/renderer.ts
+++ b/src/renderer/view/renderer/renderer.ts
@@ -1,3 +1,4 @@
+import { nextPowerOf2 } from '../../util';
import { Shaders } from './shaders';
import { mat4, vec2 } from 'gl-matrix';
@@ -23,8 +24,6 @@ export class Renderer {
this.gl.enable(this.gl.BLEND);
this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
-
- this.setSize();
}
public createBuffer(): WebGLBuffer {
@@ -73,27 +72,29 @@ export class Renderer {
vec2.scale(out, out, 1 / this.coordScale);
}
- 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 {
+ public resize(): void {
const w = this.canvas.width;
const h = this.canvas.height;
+ const ws = nextPowerOf2(w);
+ const hs = nextPowerOf2(h);
- this.gl.viewport(0, 0, w, h);
+ this.gl.viewport((w - ws) / 2, (h - hs) / 2, ws, hs);
this.clear();
const scale = this.viewScale * this.coordScale;
mat4.identity(this.viewport);
- mat4.scale(this.viewport, this.viewport, [2 * scale / w, -2 * scale / h, 1.0]);
+ mat4.scale(this.viewport, this.viewport, [2 * scale / ws, -2 * scale / hs, 1.0]);
this.gl.uniformMatrix4fv(this.shaders.viewportLoc, false, this.viewport);
}
+
+ 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;
+ }
}