104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
import { Drawer } from './drawer';
|
|
import { Vec2 } from '../math/vec2';
|
|
import { createProgram } from './graphics-library/create-program';
|
|
import { prepareScreenQuad } from './graphics-library/prepare-screen-quad';
|
|
|
|
export class WebGl2Renderer implements Drawer {
|
|
private gl: WebGL2RenderingContext;
|
|
private program: WebGLProgram;
|
|
private vao: WebGLVertexArrayObject;
|
|
|
|
public enableHighDpiRendering = false;
|
|
public renderScale = 0.33;
|
|
|
|
private cameraPosition: Vec2;
|
|
private viewBoxSize: Vec2;
|
|
|
|
constructor(
|
|
private canvas: HTMLCanvasElement,
|
|
private overlay: HTMLElement,
|
|
shaderSources: [string, string]
|
|
) {
|
|
this.gl = this.canvas.getContext('webgl2');
|
|
if (!this.gl) {
|
|
throw new Error('WebGl2 is not supported');
|
|
}
|
|
|
|
this.program = createProgram(this.gl, ...shaderSources);
|
|
this.vao = prepareScreenQuad(this.gl, this.program, 'a_position');
|
|
}
|
|
|
|
private handleResize() {
|
|
const realToCssPixels = window.devicePixelRatio * this.renderScale;
|
|
|
|
const displayWidth = Math.floor(this.canvas.clientWidth * realToCssPixels);
|
|
const displayHeight = Math.floor(
|
|
this.canvas.clientHeight * realToCssPixels
|
|
);
|
|
|
|
if (
|
|
this.canvas.width !== displayWidth ||
|
|
this.canvas.height !== displayHeight
|
|
) {
|
|
this.canvas.width = displayWidth;
|
|
this.canvas.height = displayHeight;
|
|
}
|
|
|
|
this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
|
|
public startFrame() {
|
|
this.handleResize();
|
|
this.gl.clearColor(0, 0, 0, 0);
|
|
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
|
|
this.gl.useProgram(this.program);
|
|
this.gl.bindVertexArray(this.vao);
|
|
}
|
|
|
|
finishFrame() {
|
|
const resolutionUniformLocation = this.gl.getUniformLocation(
|
|
this.program,
|
|
'resolution'
|
|
);
|
|
this.gl.uniform2f(
|
|
resolutionUniformLocation,
|
|
this.canvas.width,
|
|
this.canvas.height
|
|
);
|
|
|
|
const viewBoxSizeUniformLocation = this.gl.getUniformLocation(
|
|
this.program,
|
|
'viewBoxSize'
|
|
);
|
|
this.gl.uniform2f(viewBoxSizeUniformLocation, ...this.viewBoxSize.list);
|
|
|
|
const cameraPositionUniformLocation = this.gl.getUniformLocation(
|
|
this.program,
|
|
'cameraPosition'
|
|
);
|
|
this.gl.uniform2f(
|
|
cameraPositionUniformLocation,
|
|
...this.cameraPosition.list
|
|
);
|
|
|
|
this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
|
|
}
|
|
|
|
setCameraPosition(position: Vec2) {
|
|
this.cameraPosition = position;
|
|
}
|
|
|
|
setInViewWidth(size: number): Vec2 {
|
|
const canvasAspectRatio =
|
|
this.canvas.clientHeight / this.canvas.clientWidth;
|
|
|
|
this.viewBoxSize = new Vec2(size, size * canvasAspectRatio);
|
|
return this.viewBoxSize;
|
|
}
|
|
|
|
drawInfoText(text: string) {
|
|
if (this.overlay.innerText != text) {
|
|
this.overlay.innerText = text;
|
|
}
|
|
}
|
|
}
|