Start using the sdf-2d library

This commit is contained in:
schmelczerandras 2020-09-21 09:42:00 +02:00
commit 1b7dee4be0
56 changed files with 314 additions and 2119 deletions

24
frontend/custom.d.ts vendored
View file

@ -1,24 +0,0 @@
declare module '*.glsl' {
const content: string;
export default content;
}
/*
declare module '*.png' {
import { ResponsiveImage } from 'src/framework/model/misc';
const content: ResponsiveImage;
export default content;
}
declare module '*.jpg' {
import { ResponsiveImage } from 'src/framework/model/misc';
const content: ResponsiveImage;
export default content;
}
declare module '*.jpeg' {
import { ResponsiveImage } from 'src/framework/model/misc';
const content: ResponsiveImage;
export default content;
}
*/

View file

@ -7,10 +7,10 @@
"scripts": {
"start": "webpack-dev-server --mode development",
"lint": "npx eslint --fix \"src/**/*.ts\" && npx prettier --write \"src/**/*.ts\"",
"build": "webpack && find dist -type f -not -name '*.html' | xargs rm"
"build": "webpack --mode production && find dist -type f -not -name '*.html' | xargs rm"
},
"keywords": [],
"author": "András Schmelczer",
"author": "András Schmelczer <andras@schmelczer.dev> (https://schmelczer.dev/)",
"postcss": {
"plugins": {
"autoprefixer": {}
@ -22,9 +22,6 @@
"sideEffects": [
"*.scss"
],
"optimization": {
"usedExports": true
},
"devDependencies": {
"@types/gl-matrix": "^2.4.5",
"@types/uuid": "^8.0.0",
@ -35,6 +32,7 @@
"css-loader": "^3.5.2",
"cssnano": "^4.1.10",
"eslint": "^7.2.0",
"sdf-2d": "^0.1.0-alpha",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-prettier": "^3.1.4",

View file

@ -1,13 +1,27 @@
import { glMatrix, vec2 } from 'gl-matrix';
import { glMatrix } from 'gl-matrix';
import { Game } from './scripts/game';
import { applyArrayPlugins } from './scripts/helper/array';
import { Random } from './scripts/helper/random';
import TunnelShape from './scripts/shapes/types/tunnel-shape';
import './styles/main.scss';
glMatrix.setMatrixArrayType(Array);
applyArrayPlugins();
glMatrix.setMatrixArrayType(
Array
); /*
}
}
zeroes.forEach((z) => {
const blueIndex = z.y * (width * 4) + z.x * 4 + 2;
imageData.data[blueIndex] = 255;
imageData.data[blueIndex - 1] = 255;
imageData.data[blueIndex - 2] = 255;
});
console.log(errors);
ctx.putImageData(imageData, 0, 0);
};*/ //testSDF(); // extract as new image (data-uri)
/*
const testSDF = () => {
Random.seed = 44;
@ -24,19 +38,32 @@ const testSDF = () => {
res = -Math.log2(res) / k;
return -res;
*/
/*let min = 1000;
*/ /*let min = 1000;
for (const t of objects) {
min = Math.min(min, t.distance(position));
}
if (min < 0) {
// min = Math.min(min, vec2.distance(position, vec2.fromValues(40, 80 - 31.62)) - 31.62);
}
return -min;*/
return -min;*/ /*
const tree = new BoundingBoxTree([
new BoundingBox(300, 550, 150, 550, 'A'),
new BoundingBox(400, 800, 50, 200, 'B'),
new BoundingBox(450, 500, 175, 185, 'C'),
new BoundingBox(100, 200, 100, 500, 'D'),
new BoundingBox(750, 950, 450, 600, 'E'),
new BoundingBox(940, 1000, -2, 180, 'F'),
new BoundingBox(960, 1050, 50, 190, 'G'),
new BoundingBox(150, 900, 0, 575, 'H'),
new BoundingBox(-10000, 10000, -10000, 10000, 'I'),
]);
tree.print();
console.log(tree.findIntersecting(new BoundingBox(960, 1050, 50, 190, 'G')));
*/ /*
return -vec2.distance(position, vec2.fromValues(40, 40)) + 30;
};
/*
const width = 80;
const height = 100;
@ -92,43 +119,7 @@ const testSDF = () => {
/*if (zeroes.find((z) => vec2.distance(z, position) < dist) !== undefined) {
const blueIndex = y * (width * 4) + x * 4 + 2;
imageData.data[blueIndex] = 255;
}*/
}
}
zeroes.forEach((z) => {
const blueIndex = z.y * (width * 4) + z.x * 4 + 2;
imageData.data[blueIndex] = 255;
imageData.data[blueIndex - 1] = 255;
imageData.data[blueIndex - 2] = 255;
});
console.log(errors);
ctx.putImageData(imageData, 0, 0);
};
//testSDF();
// extract as new image (data-uri)
/*
const tree = new BoundingBoxTree([
new BoundingBox(300, 550, 150, 550, 'A'),
new BoundingBox(400, 800, 50, 200, 'B'),
new BoundingBox(450, 500, 175, 185, 'C'),
new BoundingBox(100, 200, 100, 500, 'D'),
new BoundingBox(750, 950, 450, 600, 'E'),
new BoundingBox(940, 1000, -2, 180, 'F'),
new BoundingBox(960, 1050, 50, 190, 'G'),
new BoundingBox(150, 900, 0, 575, 'H'),
new BoundingBox(-10000, 10000, -10000, 10000, 'I'),
]);
tree.print();
console.log(tree.findIntersecting(new BoundingBox(960, 1050, 50, 190, 'G')));
*/
const main = async () => {
}*/ const main = async () => {
try {
Random.seed = 42;
await new Game().start();

View file

@ -1,9 +1,8 @@
import { vec3 } from 'gl-matrix';
import { CircleLight, compile, Flashlight, Renderer } from 'sdf-2d';
import { CommandBroadcaster } from './commands/command-broadcaster';
import { BeforeRenderCommand } from './graphics/commands/before-render';
import { RenderCommand } from './graphics/commands/render';
import { IRenderer } from './graphics/i-renderer';
import { WebGl2Renderer } from './graphics/rendering/webgl2-renderer';
import { timeIt } from './helper/timing';
import { prettyPrint } from './helper/pretty-print';
import { IGame } from './i-game';
import { KeyboardListener } from './input/keyboard-listener';
import { MouseListener } from './input/mouse-listener';
@ -12,13 +11,14 @@ import { GameObject } from './objects/game-object';
import { Objects } from './objects/objects';
import { Camera } from './objects/types/camera';
import { Character } from './objects/types/character';
import { InfoText } from './objects/types/info-text';
import { createDungeon } from './objects/world/create-dungeon';
import { MoveToCommand } from './physics/commands/move-to';
import { StepCommand } from './physics/commands/step';
import { TeleportToCommand } from './physics/commands/teleport-to';
import { Physics } from './physics/physics';
import { BoundingBoxBase } from './shapes/bounding-box-base';
import { CircleShape } from './shapes/types/circle-shape';
import { TunnelShape } from './shapes/types/tunnel-shape';
export class Game implements IGame {
public readonly objects = new Objects();
@ -26,14 +26,13 @@ export class Game implements IGame {
public readonly camera = new Camera();
private previousTime?: DOMHighResTimeStamp = null;
private previousFpsValues: Array<number> = [];
private infoText = new InfoText();
private character: Character;
private renderer: IRenderer;
private initializeRendererPromise: Promise<void>;
private renderer: Renderer;
private rendererPromise: Promise<Renderer>;
private overlay: HTMLElement = document.querySelector('#overlay');
constructor() {
const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
const overlay: HTMLElement = document.querySelector('#overlay');
document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
@ -46,14 +45,31 @@ export class Game implements IGame {
[this.objects]
);
this.renderer = new WebGl2Renderer(canvas, overlay);
this.initializeRendererPromise = this.renderer.initialize();
this.rendererPromise = compile(
canvas,
[
CircleShape.descriptor,
TunnelShape.descriptor,
Flashlight.descriptor,
CircleLight.descriptor,
],
[
vec3.fromValues(0, 0, 0),
vec3.fromValues(224 / 255, 96 / 255, 126 / 255),
vec3.fromValues(119 / 255, 173 / 255, 120 / 255),
]
);
this.initializeScene();
this.physics.start();
}
public async start(): Promise<void> {
await this.initializeRendererPromise;
this.renderer = await this.rendererPromise;
this.renderer.setRuntimeSettings({
isWorldInverted: true,
ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
shadowLength: 300,
});
requestAnimationFrame(this.gameLoop.bind(this));
}
@ -70,8 +86,6 @@ export class Game implements IGame {
}
private initializeScene() {
this.objects.addObject(this.infoText);
const start = createDungeon(this.objects, this.physics);
createDungeon(this.objects, this.physics);
@ -90,7 +104,6 @@ export class Game implements IGame {
}
}
@timeIt()
private gameLoop(time: DOMHighResTimeStamp) {
if (this.previousTime === null) {
this.previousTime = time;
@ -98,44 +111,26 @@ export class Game implements IGame {
const deltaTime = time - this.previousTime;
this.previousTime = time;
this.calculateFps(deltaTime);
this.objects.sendCommand(new StepCommand(deltaTime));
this.camera.sendCommand(new MoveToCommand(this.character.position));
this.renderer.startFrame(deltaTime);
this.camera.sendCommand(new BeforeRenderCommand(this.renderer));
this.camera.sendCommand(new RenderCommand(this.renderer));
const shouldBeDrawn = this.physics
.findIntersecting(this.camera.viewArea)
.map((b) => b.shape?.gameObject);
for (const object of shouldBeDrawn) {
object?.sendCommand(new BeforeRenderCommand(this.renderer));
object?.sendCommand(new RenderCommand(this.renderer));
}
this.character.sendCommand(new RenderCommand(this.renderer));
this.infoText.sendCommand(new RenderCommand(this.renderer));
this.renderer.finishFrame();
this.renderer.renderDrawables();
this.overlay.innerText = prettyPrint(this.renderer.insights);
localStorage.setItem('character-position', JSON.stringify(this.character.position));
window.requestAnimationFrame(this.gameLoop.bind(this));
}
private calculateFps(deltaTime: number) {
this.previousFpsValues.push(1000 / deltaTime);
if (this.previousFpsValues.length > 30) {
this.previousFpsValues.sort();
const min = this.previousFpsValues[0];
const median = this.previousFpsValues[
Math.floor(this.previousFpsValues.length / 2)
];
InfoText.modifyRecord('FPS', { min, median });
this.previousFpsValues = [];
}
requestAnimationFrame(this.gameLoop.bind(this));
}
}

View file

@ -1,12 +0,0 @@
import { Command } from '../../commands/command';
import { IRenderer } from '../i-renderer';
export class BeforeRenderCommand extends Command {
public constructor(public readonly renderer?: IRenderer) {
super();
}
public get type(): string {
return 'BeforeRenderCommand';
}
}

View file

@ -1,8 +1,8 @@
import { Renderer } from 'sdf-2d';
import { Command } from '../../commands/command';
import { IRenderer } from '../../graphics/i-renderer';
export class RenderCommand extends Command {
public constructor(public readonly renderer?: IRenderer) {
public constructor(public readonly renderer?: Renderer) {
super();
}

View file

@ -1,32 +0,0 @@
import { mat2d, vec2 } from 'gl-matrix';
import { Blob } from '../../shapes/types/blob';
import { settings } from '../settings';
import { IDrawable } from './i-drawable';
import { IDrawableDescriptor } from './i-drawable-descriptor';
export class DrawableBlob extends Blob implements IDrawable {
public static descriptor: IDrawableDescriptor = {
uniformName: 'blobs',
countMacroName: 'blobCount',
shaderCombinationSteps: settings.shaderCombinations.blobSteps,
empty: new DrawableBlob(vec2.fromValues(0, 0)),
};
public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
const { uniformName } = DrawableBlob.descriptor;
if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
uniforms[uniformName] = [];
}
uniforms[uniformName].push({
headCenter: vec2.transformMat2d(vec2.create(), this.head.center, transform),
leftFootCenter: vec2.transformMat2d(vec2.create(), this.leftFoot.center, transform),
rightFootCenter: vec2.transformMat2d(
vec2.create(),
this.rightFoot.center,
transform
),
headRadius: this.headRadius * scale,
footRadius: this.footRadius * scale,
});
}
}

View file

@ -1,28 +0,0 @@
import { mat2d, vec2 } from 'gl-matrix';
import TunnelShape from '../../shapes/types/tunnel-shape';
import { settings } from '../settings';
import { IDrawable } from './i-drawable';
import { IDrawableDescriptor } from './i-drawable-descriptor';
export class DrawableTunnel extends TunnelShape implements IDrawable {
public static descriptor: IDrawableDescriptor = {
uniformName: 'lines',
countMacroName: 'lineCount',
shaderCombinationSteps: settings.shaderCombinations.lineSteps,
empty: new DrawableTunnel(vec2.fromValues(0, 0), vec2.fromValues(0, 0), 0, 0),
};
public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
const { uniformName } = DrawableTunnel.descriptor;
if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
uniforms[uniformName] = [];
}
uniforms[uniformName].push({
from: vec2.transformMat2d(vec2.create(), this.from, transform),
toFromDelta: vec2.scale(vec2.create(), this.toFromDelta, scale),
fromRadius: this.fromRadius * scale,
toRadius: this.toRadius * scale,
});
}
}

View file

@ -1,8 +0,0 @@
import { IDrawable } from './i-drawable';
export interface IDrawableDescriptor {
uniformName: string;
countMacroName: string;
shaderCombinationSteps: Array<number>;
readonly empty: IDrawable;
}

View file

@ -1,6 +0,0 @@
import { vec2, mat2d } from 'gl-matrix';
export interface IDrawable {
distance(target: vec2): number;
serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void;
}

View file

@ -1,46 +0,0 @@
import { mat2d, vec2, vec3 } from 'gl-matrix';
import { settings } from '../../settings';
import { IDrawableDescriptor } from '../i-drawable-descriptor';
import { ILight } from './i-light';
export class CircleLight implements ILight {
public static descriptor: IDrawableDescriptor = {
uniformName: 'circleLights',
countMacroName: 'circleLightCount',
shaderCombinationSteps: settings.shaderCombinations.circleLightSteps,
empty: new CircleLight(vec2.fromValues(0, 0), 0, vec3.fromValues(0, 0, 0), 0),
};
constructor(
public center: vec2,
public lightDrop: number,
public color: vec3,
public lightness: number
) {}
public distance(_: vec2): number {
return 0;
}
public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
const { uniformName } = CircleLight.descriptor;
if (!Object.prototype.hasOwnProperty.call(uniforms, uniformName)) {
uniforms[uniformName] = [];
}
uniforms[uniformName].push({
center: vec2.transformMat2d(vec2.create(), this.center, transform),
lightDrop: this.lightDrop,
value: this.value,
});
}
public get value(): vec3 {
return vec3.scale(
vec3.create(),
vec3.normalize(this.color, this.color),
this.lightness
);
}
}

View file

@ -1,50 +0,0 @@
import { mat2d, vec2, vec3 } from 'gl-matrix';
import { settings } from '../../settings';
import { IDrawableDescriptor } from '../i-drawable-descriptor';
import { ILight } from './i-light';
export class Flashlight implements ILight {
public static descriptor: IDrawableDescriptor = {
uniformName: 'flashlights',
countMacroName: 'flashlightCount',
shaderCombinationSteps: settings.shaderCombinations.flashlightSteps,
empty: new Flashlight(
vec2.fromValues(0, 0),
vec2.fromValues(0, 0),
0,
vec3.fromValues(0, 0, 0),
0
),
};
public constructor(
public center: vec2,
public direction: vec2,
public lightDrop: number,
public color: vec3,
public lightness: number
) {}
public distance(_: vec2): number {
return 0;
}
public serializeToUniforms(uniforms: any, scale: number, transform: mat2d): void {
const listName = Flashlight.descriptor.uniformName;
if (!Object.prototype.hasOwnProperty.call(uniforms, listName)) {
uniforms[listName] = [];
}
uniforms[listName].push({
center: vec2.transformMat2d(vec2.create(), this.center, transform),
direction: this.direction,
lightDrop: this.lightDrop,
value: this.value,
});
}
public get value(): vec3 {
return vec3.scale(vec3.create(), this.color, this.lightness);
}
}

View file

@ -1,3 +0,0 @@
import { IDrawable } from '../i-drawable';
export type ILight = IDrawable;

View file

@ -1,13 +0,0 @@
import { checkShader } from './check-shader';
export const checkProgram = (gl: WebGL2RenderingContext, program: WebGLProgram) => {
const success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!success) {
gl.getAttachedShaders(program).forEach((s) => {
checkShader(gl, s);
});
throw new Error(gl.getProgramInfoLog(program));
}
};

View file

@ -1,7 +0,0 @@
export const checkShader = (gl: WebGL2RenderingContext, shader: WebGLShader) => {
const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!success) {
throw new Error(gl.getShaderInfoLog(shader));
}
};

View file

@ -1,44 +0,0 @@
import { waitWhileFalse } from '../../../helper/wait-while-false';
import { tryEnableExtension } from '../helper/enable-extension';
import { checkProgram } from './check-program';
import { createShader } from './create-shader';
export const createProgram = async (
gl: WebGL2RenderingContext,
vertexShaderSource: string,
fragmentShaderSource: string,
substitutions: { [name: string]: string }
): Promise<WebGLProgram> => {
const program = gl.createProgram();
const extension = tryEnableExtension(gl, 'KHR_parallel_shader_compile');
const vertexShader = createShader(
gl,
gl.VERTEX_SHADER,
vertexShaderSource,
substitutions
);
gl.attachShader(program, vertexShader);
const fragmentShader = createShader(
gl,
gl.FRAGMENT_SHADER,
fragmentShaderSource,
substitutions
);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (extension) {
const checkCompileStatus = () =>
gl.getProgramParameter(program, extension.COMPLETION_STATUS_KHR);
await waitWhileFalse(checkCompileStatus);
}
checkProgram(gl, program);
return program;
};

View file

@ -1,17 +0,0 @@
export const createShader = (
gl: WebGL2RenderingContext,
type: GLenum,
source: string,
substitutions: { [name: string]: string }
): WebGLShader => {
source = source.replace(/{(.+)}/gm, (_, name: string): string => {
const value = substitutions[name];
return Number.isInteger(value) ? `${value}.0` : value;
});
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
};

View file

@ -1,19 +0,0 @@
import { FrameBuffer } from './frame-buffer';
export class DefaultFrameBuffer extends FrameBuffer {
constructor(gl: WebGL2RenderingContext) {
super(gl);
this.frameBuffer = null;
this.setSize();
}
public setSize(): boolean {
const hasChanged = super.setSize();
if (hasChanged) {
this.gl.canvas.width = this.size.x;
this.gl.canvas.height = this.size.y;
}
return hasChanged;
}
}

View file

@ -1,44 +0,0 @@
import { vec2 } from 'gl-matrix';
import { settings } from '../../settings';
export abstract class FrameBuffer {
public renderScale = 1;
public enableHighDpiRendering = settings.enableHighDpiRendering;
protected size = vec2.create();
protected frameBuffer: WebGLFramebuffer;
constructor(protected gl: WebGL2RenderingContext) {}
public bindAndClear(colorInput?: WebGLTexture) {
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
if (colorInput !== null) {
this.gl.bindTexture(this.gl.TEXTURE_2D, colorInput);
}
this.gl.viewport(0, 0, this.size.x, this.size.y);
this.gl.clearColor(0, 0, 0, 0);
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
}
public setSize(): boolean {
const realToCssPixels =
(this.enableHighDpiRendering ? window.devicePixelRatio : 1) * this.renderScale;
const canvasWidth = (this.gl.canvas as HTMLCanvasElement).clientWidth;
const canvasHeight = (this.gl.canvas as HTMLCanvasElement).clientHeight;
const displayWidth = Math.floor(canvasWidth * realToCssPixels);
const displayHeight = Math.floor(canvasHeight * realToCssPixels);
const oldSize = vec2.clone(this.getSize());
this.size = vec2.fromValues(displayWidth, displayHeight);
return this.size.x != oldSize.x || this.size.y != oldSize.y;
}
public getSize(): vec2 {
return this.size;
}
}

View file

@ -1,89 +0,0 @@
import { enableExtension } from '../helper/enable-extension';
import { FrameBuffer } from './frame-buffer';
export class IntermediateFrameBuffer extends FrameBuffer {
private frameTexture: WebGLTexture;
private floatLinearEnabled = false;
constructor(gl: WebGL2RenderingContext) {
super(gl);
enableExtension(gl, 'EXT_color_buffer_float');
try {
enableExtension(gl, 'OES_texture_float_linear');
this.floatLinearEnabled = true;
} catch {
// it's okay
}
this.frameTexture = this.gl.createTexture();
this.configureTexture();
this.frameBuffer = this.gl.createFramebuffer();
this.configureFrameBuffer();
this.setSize();
}
public get colorTexture(): WebGLTexture {
return this.frameTexture;
}
public setSize(): boolean {
const hasChanged = super.setSize();
if (hasChanged) {
this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
this.gl.texImage2D(
this.gl.TEXTURE_2D,
0,
this.gl.RG16F,
this.size.x,
this.size.y,
0,
this.gl.RG,
this.gl.FLOAT,
null
);
}
return hasChanged;
}
private configureTexture() {
this.gl.bindTexture(this.gl.TEXTURE_2D, this.frameTexture);
this.gl.texParameteri(
this.gl.TEXTURE_2D,
this.gl.TEXTURE_MAG_FILTER,
this.floatLinearEnabled ? this.gl.LINEAR : this.gl.NEAREST
);
this.gl.texParameteri(
this.gl.TEXTURE_2D,
this.gl.TEXTURE_MIN_FILTER,
this.floatLinearEnabled ? this.gl.LINEAR : this.gl.NEAREST
);
this.gl.texParameteri(
this.gl.TEXTURE_2D,
this.gl.TEXTURE_WRAP_S,
this.gl.CLAMP_TO_EDGE
);
this.gl.texParameteri(
this.gl.TEXTURE_2D,
this.gl.TEXTURE_WRAP_T,
this.gl.CLAMP_TO_EDGE
);
}
private configureFrameBuffer() {
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.frameBuffer);
const attachmentPoint = this.gl.COLOR_ATTACHMENT0;
this.gl.framebufferTexture2D(
this.gl.FRAMEBUFFER,
attachmentPoint,
this.gl.TEXTURE_2D,
this.frameTexture,
0
);
}
}

Some files were not shown because too many files have changed in this diff Show more