andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Add glMatrix

Browse source
This commit is contained in:
schmelczerandras 2020-07-22 20:00:57 +02:00
parent 582979d3ed
commit e88b4589d2
26 changed files with 211 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/scripts/drawing/drawer.ts
View file

@ -1,12 +1,12 @@
import { Vec2 } from '../math/vec2';
import { Rectangle } from '../math/rectangle';
import { vec2 } from 'gl-matrix';
export interface Drawer {
startFrame(): void;
finishFrame(): void;
giveUniforms(uniforms: any): void;
setCameraPosition(position: Vec2): void;
setInViewArea(size: number): Vec2;
setCameraPosition(position: vec2): void;
setCursorPosition(position: vec2): void;
setInViewArea(size: number): vec2;
drawInfoText(text: string): void;
isOnScreen(position: Vec2): boolean;
isOnScreen(position: vec2): boolean;
}

8
frontend/src/scripts/drawing/graphics-library/frame-buffer.ts
View file

@ -1,11 +1,11 @@
import { Vec2 } from '../../math/vec2';
import { FragmentShaderOnlyProgram } from './fragment-shader-only-program';
import { vec2 } from 'gl-matrix';
export abstract class FrameBuffer {
public renderScale = 1;
public enableHighDpiRendering = false;
protected size: Vec2;
protected size: vec2;
protected frameBuffer: WebGLFramebuffer;
constructor(
@ -39,10 +39,10 @@ export abstract class FrameBuffer {
const displayWidth = Math.floor(canvasWidth * realToCssPixels);
const displayHeight = Math.floor(canvasHeight * realToCssPixels);
this.size = new Vec2(displayWidth, displayHeight);
this.size = vec2.fromValues(displayWidth, displayHeight);
}
public getSize(): Vec2 {
public getSize(): vec2 {
return this.size;
}
}

21
frontend/src/scripts/drawing/graphics-library/load-uniform.ts
View file

@ -1,5 +1,6 @@
import { Vec2 } from '../../math/vec2';
import { Mat3 } from '../../math/mat3';
import { mat3, vec2 } from 'gl-matrix';
const loaderMat3 = mat3.create();
export const loadUniform = (
gl: WebGL2RenderingContext,
@ -22,23 +23,23 @@ export const loadUniform = (
converters.set(
WebGL2RenderingContext.FLOAT_VEC2,
(gl, v: Vec2 | Array<Vec2>, l) => {
if (v instanceof Array) {
(gl, v: vec2 | Array<vec2>, l) => {
if (v[0] instanceof Array) {
const result = new Float32Array(v.length * 2);
for (let i = 0; i < v.length; i++) {
result[2 * i] = v[i].x;
result[2 * i + 1] = v[i].y;
result[2 * i] = (v[i] as Array<number>).x;
result[2 * i + 1] = (v[i] as Array<number>).y;
}
gl.uniform2fv(l, new Float32Array(result));
} else {
gl.uniform2fv(l, new Float32Array(v.list));
gl.uniform2fv(l, v as vec2);
}
}
);
converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v: Mat3, l) =>
gl.uniformMatrix3fv(l, false, new Float32Array(v.transposedFlat))
);
converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v, l) => {
gl.uniformMatrix3fv(l, true, mat3.fromMat2d(loaderMat3, v));
});
converters.set(WebGL2RenderingContext.BOOL, (gl, v, l) =>
gl.uniform1i(l, v)

49
frontend/src/scripts/drawing/webgl2-renderer.ts
View file

@ -1,6 +1,5 @@
import { Drawer } from './drawer';
import { Vec2 } from '../math/vec2';
import { Mat3 } from '../math/mat3';
import { mat2d, vec2, mat2, mat3 } from 'gl-matrix';
import { FragmentShaderOnlyProgram } from './graphics-library/fragment-shader-only-program';
import { WebGlStopwatch } from './graphics-library/stopwatch';
import { Rectangle } from '../math/rectangle';
@ -14,6 +13,7 @@ export class WebGl2Renderer implements Drawer {
private viewBox: Rectangle = new Rectangle();
private nextFrameUniforms: any;
private cursorPosition = vec2.create();
private frameBuffers: Array<FrameBuffer> = [];
constructor(
@ -38,7 +38,7 @@ export class WebGl2Renderer implements Drawer {
])
);
this.frameBuffers[0].renderScale = 0.2;
this.frameBuffers[0].renderScale = 1;
this.frameBuffers[1].renderScale = 1;
try {
@ -53,19 +53,30 @@ export class WebGl2Renderer implements Drawer {
}
public finishFrame() {
const resolution = new Vec2(this.canvas.width, this.canvas.height);
const resolution = vec2.fromValues(this.canvas.width, this.canvas.height);
this.nextFrameUniforms.transform = Mat3.translateMatrix(new Vec2(0.5, 0.5))
.times(
Mat3.scaleMatrix(
this.viewBox.size.divide(this.frameBuffers[0].getSize())
)
const transform = mat2d.fromTranslation(
mat2d.create(),
this.viewBox.topLeft
);
mat2d.scale(
transform,
transform,
vec2.divide(
vec2.create(),
this.viewBox.size,
this.frameBuffers[0].getSize()
)
.times(Mat3.translateMatrix(this.viewBox.topLeft));
);
mat2d.translate(transform, transform, vec2.fromValues(0.5, 0.5));
this.nextFrameUniforms.transform = transform;
this.nextFrameUniforms.transformUV = Mat3.translateMatrix(
new Vec2(0.5, 0.5)
).times(Mat3.scaleMatrix(new Vec2(1).divide(resolution)));
const transformUV = mat2d.fromScaling(
mat2d.create(),
vec2.divide(vec2.create(), vec2.fromValues(1, 1), resolution)
);
mat2d.translate(transformUV, transformUV, vec2.fromValues(0.5, 0.5));
this.nextFrameUniforms.transformUV = transformUV;
this.frameBuffers[0].render(this.nextFrameUniforms);
this.frameBuffers[1].render(
@ -76,19 +87,23 @@ export class WebGl2Renderer implements Drawer {
this.stopwatch?.stop();
}
public setCameraPosition(position: Vec2) {
public setCameraPosition(position: vec2) {
this.viewBox.topLeft = position;
}
public setCursorPosition(position: vec2): void {
this.cursorPosition = position;
}
public giveUniforms(uniforms: any): void {
this.nextFrameUniforms = { ...this.nextFrameUniforms, ...uniforms };
}
public setInViewArea(size: number): Vec2 {
public setInViewArea(size: number): vec2 {
const canvasAspectRatio =
this.canvas.clientWidth / this.canvas.clientHeight;
this.viewBox.size = new Vec2(
this.viewBox.size = vec2.fromValues(
Math.sqrt(size * canvasAspectRatio),
Math.sqrt(size / canvasAspectRatio)
);
@ -101,7 +116,7 @@ export class WebGl2Renderer implements Drawer {
}
}
isOnScreen(position: Vec2): boolean {
isOnScreen(position: vec2): boolean {
return this.viewBox.isInside(position);
}
}