From 4369cf1770188d4f550570ed45de809d17c5a2df Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Sun, 26 Jul 2020 13:35:44 +0200 Subject: [PATCH] Add dynamic shader generation --- .../src/scripts/commands/types/before-draw.ts | 4 +- frontend/src/scripts/commands/types/draw.ts | 4 +- .../default-frame-buffer.ts | 7 +- .../{ => frame-buffer}/frame-buffer.ts | 7 +- .../intermediate-frame-buffer.ts | 9 +- .../{ => helper}/create-shader.ts | 8 +- .../{ => helper}/load-uniform.ts | 0 .../{ => helper}/stopwatch.ts | 2 +- .../program/fragment-shader-only-program.ts | 52 ++++++++++++ .../graphics-library/program/i-program.ts | 5 ++ .../program.ts} | 83 +++++++------------ .../uniform-array-autoscaling-program.ts | 76 +++++++++++++++++ .../drawing/{drawer.ts => i-renderer.ts} | 3 +- .../src/scripts/drawing/webgl2-renderer.ts | 53 ++++++++---- frontend/src/scripts/game.ts | 18 +++- .../src/scripts/objects/types/circle-light.ts | 2 +- .../scripts/objects/world/create-dungeon.ts | 2 +- frontend/src/shaders/cave-distance-fs.glsl | 5 +- frontend/src/shaders/lights-shading-fs.glsl | 60 +++++++------- .../src/shaders/passthrough-distance-vs.glsl | 2 + .../src/shaders/passthrough-shading-vs.glsl | 18 ++++ frontend/src/styles/main.scss | 4 + 22 files changed, 300 insertions(+), 124 deletions(-) rename frontend/src/scripts/drawing/graphics-library/{ => frame-buffer}/default-frame-buffer.ts (70%) rename frontend/src/scripts/drawing/graphics-library/{ => frame-buffer}/frame-buffer.ts (87%) rename frontend/src/scripts/drawing/graphics-library/{ => frame-buffer}/intermediate-frame-buffer.ts (89%) rename frontend/src/scripts/drawing/graphics-library/{ => helper}/create-shader.ts (68%) rename frontend/src/scripts/drawing/graphics-library/{ => helper}/load-uniform.ts (100%) rename frontend/src/scripts/drawing/graphics-library/{ => helper}/stopwatch.ts (96%) create mode 100644 frontend/src/scripts/drawing/graphics-library/program/fragment-shader-only-program.ts create mode 100644 frontend/src/scripts/drawing/graphics-library/program/i-program.ts rename frontend/src/scripts/drawing/graphics-library/{fragment-shader-only-program.ts => program/program.ts} (57%) create mode 100644 frontend/src/scripts/drawing/graphics-library/program/uniform-array-autoscaling-program.ts rename frontend/src/scripts/drawing/{drawer.ts => i-renderer.ts} (87%) diff --git a/frontend/src/scripts/commands/types/before-draw.ts b/frontend/src/scripts/commands/types/before-draw.ts index ae3b3f4..d673cc0 100644 --- a/frontend/src/scripts/commands/types/before-draw.ts +++ b/frontend/src/scripts/commands/types/before-draw.ts @@ -1,8 +1,8 @@ -import { Drawer } from '../../drawing/drawer'; +import { IRenderer } from '../../drawing/i-renderer'; import { Command } from '../command'; export class BeforeDrawCommand extends Command { - public constructor(public readonly drawer?: Drawer) { + public constructor(public readonly drawer?: IRenderer) { super(); } } diff --git a/frontend/src/scripts/commands/types/draw.ts b/frontend/src/scripts/commands/types/draw.ts index d453aa9..e14e602 100644 --- a/frontend/src/scripts/commands/types/draw.ts +++ b/frontend/src/scripts/commands/types/draw.ts @@ -1,8 +1,8 @@ -import { Drawer } from '../../drawing/drawer'; +import { IRenderer } from '../../drawing/i-renderer'; import { Command } from '../command'; export class DrawCommand extends Command { - public constructor(public readonly drawer?: Drawer) { + public constructor(public readonly drawer?: IRenderer) { super(); } } diff --git a/frontend/src/scripts/drawing/graphics-library/default-frame-buffer.ts b/frontend/src/scripts/drawing/graphics-library/frame-buffer/default-frame-buffer.ts similarity index 70% rename from frontend/src/scripts/drawing/graphics-library/default-frame-buffer.ts rename to frontend/src/scripts/drawing/graphics-library/frame-buffer/default-frame-buffer.ts index 91792f7..d1e80ec 100644 --- a/frontend/src/scripts/drawing/graphics-library/default-frame-buffer.ts +++ b/frontend/src/scripts/drawing/graphics-library/frame-buffer/default-frame-buffer.ts @@ -1,11 +1,8 @@ -import { FragmentShaderOnlyProgram } from './fragment-shader-only-program'; +import { IProgram } from '../program/i-program'; import { FrameBuffer } from './frame-buffer'; export class DefaultFrameBuffer extends FrameBuffer { - constructor( - gl: WebGL2RenderingContext, - programs: Array - ) { + constructor(gl: WebGL2RenderingContext, programs: Array) { super(gl, programs); this.frameBuffer = null; diff --git a/frontend/src/scripts/drawing/graphics-library/frame-buffer.ts b/frontend/src/scripts/drawing/graphics-library/frame-buffer/frame-buffer.ts similarity index 87% rename from frontend/src/scripts/drawing/graphics-library/frame-buffer.ts rename to frontend/src/scripts/drawing/graphics-library/frame-buffer/frame-buffer.ts index bd449a2..d254ec7 100644 --- a/frontend/src/scripts/drawing/graphics-library/frame-buffer.ts +++ b/frontend/src/scripts/drawing/graphics-library/frame-buffer/frame-buffer.ts @@ -1,5 +1,5 @@ import { vec2 } from 'gl-matrix'; -import { FragmentShaderOnlyProgram } from './fragment-shader-only-program'; +import { IProgram } from '../program/i-program'; export abstract class FrameBuffer { public renderScale = 1; @@ -10,7 +10,7 @@ export abstract class FrameBuffer { constructor( protected gl: WebGL2RenderingContext, - protected programs: Array + protected programs: Array ) {} public render(uniforms: any, colorInput?: WebGLTexture) { @@ -25,8 +25,7 @@ export abstract class FrameBuffer { this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT); this.programs.forEach((p) => { - p.bind(); - p.setUniforms(uniforms); + p.bindAndSetUniforms(uniforms); p.draw(); }); } diff --git a/frontend/src/scripts/drawing/graphics-library/intermediate-frame-buffer.ts b/frontend/src/scripts/drawing/graphics-library/frame-buffer/intermediate-frame-buffer.ts similarity index 89% rename from frontend/src/scripts/drawing/graphics-library/intermediate-frame-buffer.ts rename to frontend/src/scripts/drawing/graphics-library/frame-buffer/intermediate-frame-buffer.ts index 0bdc00a..c586ef5 100644 --- a/frontend/src/scripts/drawing/graphics-library/intermediate-frame-buffer.ts +++ b/frontend/src/scripts/drawing/graphics-library/frame-buffer/intermediate-frame-buffer.ts @@ -1,13 +1,10 @@ -import { FragmentShaderOnlyProgram } from './fragment-shader-only-program'; +import { IProgram } from '../program/i-program'; import { FrameBuffer } from './frame-buffer'; export class IntermediateFrameBuffer extends FrameBuffer { private frameTexture: WebGLTexture; - constructor( - gl: WebGL2RenderingContext, - programs: Array - ) { + constructor(gl: WebGL2RenderingContext, programs: Array) { super(gl, programs); this.frameTexture = this.gl.createTexture(); @@ -46,7 +43,7 @@ export class IntermediateFrameBuffer extends FrameBuffer { this.gl.texParameteri( this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, - this.gl.NEAREST + this.gl.LINEAR ); this.gl.texParameteri( this.gl.TEXTURE_2D, diff --git a/frontend/src/scripts/drawing/graphics-library/create-shader.ts b/frontend/src/scripts/drawing/graphics-library/helper/create-shader.ts similarity index 68% rename from frontend/src/scripts/drawing/graphics-library/create-shader.ts rename to frontend/src/scripts/drawing/graphics-library/helper/create-shader.ts index 70cbaa5..c7c8d5e 100644 --- a/frontend/src/scripts/drawing/graphics-library/create-shader.ts +++ b/frontend/src/scripts/drawing/graphics-library/helper/create-shader.ts @@ -1,8 +1,14 @@ export const createShader = ( gl: WebGL2RenderingContext, type: GLenum, - source: string + source: string, + substitutions: { [name: string]: string } ): WebGLShader => { + source = source.replace( + /{(.+)}/gm, + (_, name: string): string => substitutions[name] + ); + const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); diff --git a/frontend/src/scripts/drawing/graphics-library/load-uniform.ts b/frontend/src/scripts/drawing/graphics-library/helper/load-uniform.ts similarity index 100% rename from frontend/src/scripts/drawing/graphics-library/load-uniform.ts rename to frontend/src/scripts/drawing/graphics-library/helper/load-uniform.ts diff --git a/frontend/src/scripts/drawing/graphics-library/stopwatch.ts b/frontend/src/scripts/drawing/graphics-library/helper/stopwatch.ts similarity index 96% rename from frontend/src/scripts/drawing/graphics-library/stopwatch.ts rename to frontend/src/scripts/drawing/graphics-library/helper/stopwatch.ts index ba5d08d..7eb3d10 100644 --- a/frontend/src/scripts/drawing/graphics-library/stopwatch.ts +++ b/frontend/src/scripts/drawing/graphics-library/helper/stopwatch.ts @@ -1,4 +1,4 @@ -import { InfoText } from '../../objects/types/info-text'; +import { InfoText } from '../../../objects/types/info-text'; // https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/ diff --git a/frontend/src/scripts/drawing/graphics-library/program/fragment-shader-only-program.ts b/frontend/src/scripts/drawing/graphics-library/program/fragment-shader-only-program.ts new file mode 100644 index 0000000..0961026 --- /dev/null +++ b/frontend/src/scripts/drawing/graphics-library/program/fragment-shader-only-program.ts @@ -0,0 +1,52 @@ +import { Program } from './program'; + +export class FragmentShaderOnlyProgram extends Program { + private vao: WebGLVertexArrayObject; + + constructor( + gl: WebGL2RenderingContext, + vertexShaderSource: string, + fragmentShaderSource: string, + substitutions: { [name: string]: string } + ) { + super(gl, vertexShaderSource, fragmentShaderSource, substitutions); + this.prepareScreenQuad('a_position'); + } + + public bind() { + super.bind(); + this.gl.bindVertexArray(this.vao); + } + + public draw() { + this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4); + } + + private prepareScreenQuad(attributeName: string) { + const positionAttributeLocation = this.gl.getAttribLocation( + this.program, + attributeName + ); + + const positionBuffer = this.gl.createBuffer(); + + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer); + this.gl.bufferData( + this.gl.ARRAY_BUFFER, + new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]), + this.gl.STATIC_DRAW + ); + this.vao = this.gl.createVertexArray(); + + this.gl.bindVertexArray(this.vao); + this.gl.enableVertexAttribArray(positionAttributeLocation); + this.gl.vertexAttribPointer( + positionAttributeLocation, + 2, + this.gl.FLOAT, + false, + 0, + 0 + ); + } +} diff --git a/frontend/src/scripts/drawing/graphics-library/program/i-program.ts b/frontend/src/scripts/drawing/graphics-library/program/i-program.ts new file mode 100644 index 0000000..f68905e --- /dev/null +++ b/frontend/src/scripts/drawing/graphics-library/program/i-program.ts @@ -0,0 +1,5 @@ +export interface IProgram { + bindAndSetUniforms(values: { [name: string]: any }): void; + draw(): void; + delete(): void; +} diff --git a/frontend/src/scripts/drawing/graphics-library/fragment-shader-only-program.ts b/frontend/src/scripts/drawing/graphics-library/program/program.ts similarity index 57% rename from frontend/src/scripts/drawing/graphics-library/fragment-shader-only-program.ts rename to frontend/src/scripts/drawing/graphics-library/program/program.ts index 56556fa..453430d 100644 --- a/frontend/src/scripts/drawing/graphics-library/fragment-shader-only-program.ts +++ b/frontend/src/scripts/drawing/graphics-library/program/program.ts @@ -1,11 +1,11 @@ -import { createShader } from './create-shader'; -import { loadUniform } from './load-uniform'; +import { createShader } from '../helper/create-shader'; +import { loadUniform } from '../helper/load-uniform'; +import { IProgram } from './i-program'; -export class FragmentShaderOnlyProgram { - program: WebGLProgram; - shaders: Array = []; +export abstract class Program implements IProgram { + protected program: WebGLProgram; + private shaders: Array = []; - private vao: WebGLVertexArrayObject; private uniforms: Array<{ name: Array; location: WebGLUniformLocation; @@ -13,25 +13,25 @@ export class FragmentShaderOnlyProgram { }> = []; constructor( - private gl: WebGL2RenderingContext, - passthroughVertexShaderSource: string, - fragmentShaderSource: string + protected gl: WebGL2RenderingContext, + vertexShaderSource: string, + fragmentShaderSource: string, + substitutions: { [name: string]: string } ) { - this.createProgram(passthroughVertexShaderSource, fragmentShaderSource); - this.prepareScreenQuad('a_position'); + this.createProgram(vertexShaderSource, fragmentShaderSource, substitutions); this.queryUniforms(); } + public bindAndSetUniforms(values: { [name: string]: any }) { + this.bind(); + this.setUniforms(values); + } + public bind() { this.gl.useProgram(this.program); - this.gl.bindVertexArray(this.vao); } - public draw() { - this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4); - } - - public setUniforms(values: any) { + public setUniforms(values: { [name: string]: any }) { this.uniforms.forEach(({ name, location, type }) => { const value = name.reduce( (prev, prop) => (prev !== null && prop in prev ? prev[prop] : null), @@ -44,6 +44,13 @@ export class FragmentShaderOnlyProgram { }); } + public delete() { + this.shaders.forEach((s) => this.gl.deleteShader(s)); + this.gl.deleteProgram(this.program); + } + + public abstract draw(): void; + private queryUniforms() { const uniformCount = this.gl.getProgramParameter( this.program, @@ -60,8 +67,6 @@ export class FragmentShaderOnlyProgram { }); } - console.log(this.uniforms); - this.uniforms.map((u1) => { const isSingle = this.uniforms.filter((u2) => u2.name.includes(u1.name[0])).length == 1; @@ -70,20 +75,20 @@ export class FragmentShaderOnlyProgram { } return u1; }); - - console.log(this.uniforms); } private createProgram( passthroughVertexShaderSource: string, - fragmentShaderSource: string + fragmentShaderSource: string, + substitutions: { [name: string]: string } ) { this.program = this.gl.createProgram(); const vertexShader = createShader( this.gl, this.gl.VERTEX_SHADER, - passthroughVertexShaderSource + passthroughVertexShaderSource, + substitutions ); this.gl.attachShader(this.program, vertexShader); this.shaders.push(vertexShader); @@ -91,7 +96,8 @@ export class FragmentShaderOnlyProgram { const fragmentShader = createShader( this.gl, this.gl.FRAGMENT_SHADER, - fragmentShaderSource + fragmentShaderSource, + substitutions ); this.gl.attachShader(this.program, fragmentShader); this.shaders.push(fragmentShader); @@ -102,36 +108,9 @@ export class FragmentShaderOnlyProgram { this.program, this.gl.LINK_STATUS ); + if (!success) { throw new Error(this.gl.getProgramInfoLog(this.program)); } } - - private prepareScreenQuad(attributeName: string) { - const positionAttributeLocation = this.gl.getAttribLocation( - this.program, - attributeName - ); - - const positionBuffer = this.gl.createBuffer(); - - this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer); - this.gl.bufferData( - this.gl.ARRAY_BUFFER, - new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]), - this.gl.STATIC_DRAW - ); - this.vao = this.gl.createVertexArray(); - - this.gl.bindVertexArray(this.vao); - this.gl.enableVertexAttribArray(positionAttributeLocation); - this.gl.vertexAttribPointer( - positionAttributeLocation, - 2, - this.gl.FLOAT, - false, - 0, - 0 - ); - } } diff --git a/frontend/src/scripts/drawing/graphics-library/program/uniform-array-autoscaling-program.ts b/frontend/src/scripts/drawing/graphics-library/program/uniform-array-autoscaling-program.ts new file mode 100644 index 0000000..acdb447 --- /dev/null +++ b/frontend/src/scripts/drawing/graphics-library/program/uniform-array-autoscaling-program.ts @@ -0,0 +1,76 @@ +import { InfoText } from '../../../objects/types/info-text'; +import { FragmentShaderOnlyProgram } from './fragment-shader-only-program'; +import { IProgram } from './i-program'; + +export class UniformArrayAutoScalingProgram implements IProgram { + private programs: Array<{ + program: FragmentShaderOnlyProgram; + value: number; + }> = []; + private current: FragmentShaderOnlyProgram; + + constructor( + private gl: WebGL2RenderingContext, + private vertexShaderSource: string, + private fragmentShaderSource: string, + private options: { + getValueFromUniforms: (values: { [name: string]: any }) => number; + uniformArraySizeName: string; + startingValue: number; + steps: number; + maximumValue: number; + } + ) { + for ( + let i = options.startingValue; + i < options.maximumValue; + i += options.steps + ) { + this.createProgram(i); + } + } + + bindAndSetUniforms(values: { [name: string]: any }): void { + let value = this.options.getValueFromUniforms(values); + value = Math.min(this.options.maximumValue, value); + + InfoText.modifyRecord(this.options.uniformArraySizeName, value.toString()); + + const closest = this.programs.find( + (p) => value < p.value && value + this.options.steps >= p.value + ); + if (closest) { + this.current = closest.program; + } else { + this.current = this.createProgram(value + this.options.steps); + } + + this.current.bindAndSetUniforms(values); + } + + draw(): void { + this.current.draw(); + } + + delete(): void { + this.programs.forEach((p) => p.program.delete()); + } + + private createProgram(arraySize: number): FragmentShaderOnlyProgram { + const program = new FragmentShaderOnlyProgram( + this.gl, + this.vertexShaderSource, + this.fragmentShaderSource, + { + [this.options.uniformArraySizeName]: Math.floor(arraySize).toString(), + } + ); + + this.programs.push({ + program, + value: arraySize, + }); + + return program; + } +} diff --git a/frontend/src/scripts/drawing/drawer.ts b/frontend/src/scripts/drawing/i-renderer.ts similarity index 87% rename from frontend/src/scripts/drawing/drawer.ts rename to frontend/src/scripts/drawing/i-renderer.ts index ce07d28..17f575e 100644 --- a/frontend/src/scripts/drawing/drawer.ts +++ b/frontend/src/scripts/drawing/i-renderer.ts @@ -1,7 +1,7 @@ import { vec2 } from 'gl-matrix'; import { Circle } from '../math/circle'; -export interface Drawer { +export interface IRenderer { startFrame(deltaTime: DOMHighResTimeStamp): void; finishFrame(): void; giveUniforms(uniforms: any): void; @@ -12,4 +12,5 @@ export interface Drawer { screenUvToWorldCoordinate(mousePosition: vec2): vec2; drawInfoText(text: string): void; isOnScreen(boundingCircle: Circle): boolean; + isPositionOnScreen(position: vec2): boolean; } diff --git a/frontend/src/scripts/drawing/webgl2-renderer.ts b/frontend/src/scripts/drawing/webgl2-renderer.ts index f080c9d..11021bc 100644 --- a/frontend/src/scripts/drawing/webgl2-renderer.ts +++ b/frontend/src/scripts/drawing/webgl2-renderer.ts @@ -3,13 +3,13 @@ import { clamp } from '../helper/clamp'; import { Circle } from '../math/circle'; import { Rectangle } from '../math/rectangle'; import { InfoText } from '../objects/types/info-text'; -import { Drawer } from './drawer'; -import { DefaultFrameBuffer } from './graphics-library/default-frame-buffer'; -import { FragmentShaderOnlyProgram } from './graphics-library/fragment-shader-only-program'; -import { IntermediateFrameBuffer } from './graphics-library/intermediate-frame-buffer'; -import { WebGlStopwatch } from './graphics-library/stopwatch'; +import { DefaultFrameBuffer } from './graphics-library/frame-buffer/default-frame-buffer'; +import { IntermediateFrameBuffer } from './graphics-library/frame-buffer/intermediate-frame-buffer'; +import { WebGlStopwatch } from './graphics-library/helper/stopwatch'; +import { UniformArrayAutoScalingProgram } from './graphics-library/program/uniform-array-autoscaling-program'; +import { IRenderer } from './i-renderer'; -export class WebGl2Renderer implements Drawer { +export class WebGl2Renderer implements IRenderer { private gl: WebGL2RenderingContext; private stopwatch?: WebGlStopwatch; @@ -22,10 +22,10 @@ export class WebGl2Renderer implements Drawer { private targetDeltaTime = (1 / 30) * 1000; private deltaTimeError = (1 / 1000) * 1000; - private additiveQualityIncrease = 0.05; - private multiplicativeQualityDecrease = 1.5; + private additiveQualityIncrease = 0.03; + private multiplicativeQualityDecrease = 1.2; private timeSinceLastAdjusment = 0; - private adjusmentRate = 500; + private adjusmentRate = 300; private maxRenderScale = 1.5; private minRenderScale = 0.2; @@ -46,7 +46,7 @@ export class WebGl2Renderer implements Drawer { this.targetDeltaTime - this.deltaTimeError ) { this.distanceFieldFrameBuffer.renderScale += - this.additiveQualityIncrease / 2; + this.additiveQualityIncrease / 4; this.lightingFrameBuffer.renderScale += this.additiveQualityIncrease; } else if ( this.exponentialDecayedDeltaTime > @@ -58,7 +58,7 @@ export class WebGl2Renderer implements Drawer { this.distanceFieldFrameBuffer.renderScale = clamp( this.distanceFieldFrameBuffer.renderScale, - this.minRenderScale, + 0.1, this.maxRenderScale ); this.lightingFrameBuffer.renderScale = clamp( @@ -92,11 +92,33 @@ export class WebGl2Renderer implements Drawer { } this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl, [ - new FragmentShaderOnlyProgram(this.gl, ...shaderSources[0]), + new UniformArrayAutoScalingProgram( + this.gl, + shaderSources[0][0], + shaderSources[0][1], + { + getValueFromUniforms: (v) => (v.lines ? v.lines.length / 2 : 0), + uniformArraySizeName: 'lineCount', + startingValue: 5, + steps: 5, + maximumValue: 100, + } + ), ]); this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl, [ - new FragmentShaderOnlyProgram(this.gl, ...shaderSources[1]), + new UniformArrayAutoScalingProgram( + this.gl, + shaderSources[1][0], + shaderSources[1][1], + { + getValueFromUniforms: (v) => (v.lights ? v.lights.length : 0), + uniformArraySizeName: 'lightCount', + startingValue: 1, + steps: 1, + maximumValue: 8, + } + ), ]); this.distanceFieldFrameBuffer.renderScale = 0.5; @@ -118,7 +140,6 @@ export class WebGl2Renderer implements Drawer { public finishFrame() { this.calculateOwnUniforms(); - this.distanceFieldFrameBuffer.render(this.uniforms); this.lightingFrameBuffer.render( this.uniforms, @@ -235,4 +256,8 @@ export class WebGl2Renderer implements Drawer { public isOnScreen(boundingCircle: Circle): boolean { return this.viewCircle.areIntersecting(boundingCircle); } + + public isPositionOnScreen(position: vec2): boolean { + return this.viewCircle.isInside(position); + } } diff --git a/frontend/src/scripts/game.ts b/frontend/src/scripts/game.ts index 050acb3..4094716 100644 --- a/frontend/src/scripts/game.ts +++ b/frontend/src/scripts/game.ts @@ -18,7 +18,7 @@ import { createCharacter } from './objects/world/create-character'; import { createDungeon } from './objects/world/create-dungeon'; export class Game { - private previousTime: DOMHighResTimeStamp = 0; + private previousTime?: DOMHighResTimeStamp = null; private objects: ObjectContainer = new ObjectContainer(); private renderer: WebGl2Renderer; private previousFpsValues: Array = []; @@ -27,6 +27,11 @@ export class Game { const canvas: HTMLCanvasElement = document.querySelector('canvas#main'); const overlay: HTMLElement = document.querySelector('#overlay'); + document.addEventListener( + 'visibilitychange', + this.handleVisibilityChange.bind(this) + ); + new CommandBroadcaster( [ new KeyboardListener(document.body), @@ -51,8 +56,18 @@ export class Game { createDungeon(this.objects); } + private handleVisibilityChange() { + if (!document.hidden) { + this.previousTime = null; + } + } + @timeIt() private gameLoop(time: DOMHighResTimeStamp) { + if (this.previousTime === null) { + this.previousTime = time; + } + const deltaTime = time - this.previousTime; this.previousTime = time; this.calculateFps(deltaTime); @@ -70,6 +85,7 @@ export class Game { private calculateFps(deltaTime: number) { this.previousFpsValues.push(1000 / deltaTime); if (this.previousFpsValues.length > 30) { + this.previousFpsValues.sort(); const text = `Min: ${this.previousFpsValues[0].toFixed( 2 )}\n\tMedian: ${this.previousFpsValues[ diff --git a/frontend/src/scripts/objects/types/circle-light.ts b/frontend/src/scripts/objects/types/circle-light.ts index 8d95cee..0578ed6 100644 --- a/frontend/src/scripts/objects/types/circle-light.ts +++ b/frontend/src/scripts/objects/types/circle-light.ts @@ -23,7 +23,7 @@ export class CircleLight extends GameObject { } private draw(c: DrawCommand) { - if (c.drawer.isOnScreen(this.boundingCircle)) { + if (c.drawer.isPositionOnScreen(this.center)) { c.drawer.appendToUniformList('lights', { center: this.center, radius: this.radius, diff --git a/frontend/src/scripts/objects/world/create-dungeon.ts b/frontend/src/scripts/objects/world/create-dungeon.ts index 84fd7e7..9ecffc7 100644 --- a/frontend/src/scripts/objects/world/create-dungeon.ts +++ b/frontend/src/scripts/objects/world/create-dungeon.ts @@ -17,7 +17,7 @@ export const createDungeon = (objects: ObjectContainer) => { new Tunnel(previousEnd, currentEnd, previousRadius, currentToRadius) ); - if (deltaHeight > 0 && Math.random() > 0.5) { + if (deltaHeight > 0 && Math.random() > 0.8) { objects.addObject( new CircleLight( currentEnd, diff --git a/frontend/src/shaders/cave-distance-fs.glsl b/frontend/src/shaders/cave-distance-fs.glsl index a93a99b..c27772a 100644 --- a/frontend/src/shaders/cave-distance-fs.glsl +++ b/frontend/src/shaders/cave-distance-fs.glsl @@ -3,7 +3,7 @@ precision mediump float; #define INFINITY 200.0 -#define LINE_COUNT 30 +#define LINE_COUNT {lineCount} #define CAVE_COLOR vec3(0.36, 0.38, 0.76) #define AIR_COLOR vec3(0.7) @@ -29,9 +29,8 @@ void main() { } float distance = -minDistance; - fragmentColor = vec4( - mix(CAVE_COLOR, AIR_COLOR, clamp(distance, 0.0, 1.0)), + mix(CAVE_COLOR, AIR_COLOR, clamp(distance, -10.0, 0.0) / 10.0 + 1.0), distance / 32.0 ); } diff --git a/frontend/src/shaders/lights-shading-fs.glsl b/frontend/src/shaders/lights-shading-fs.glsl index 4156412..65c20cc 100644 --- a/frontend/src/shaders/lights-shading-fs.glsl +++ b/frontend/src/shaders/lights-shading-fs.glsl @@ -3,9 +3,11 @@ precision mediump float; #define INFINITY 1000.0 -#define LIGHT_COUNT 8 +#define LIGHT_COUNT {lightCount} #define AMBIENT_LIGHT vec3(0.15) #define LIGHT_DROP 400.0 +#define MIN_STEP 3.0 +#define EDGE_SMOOTHING 5.0 uniform struct Light { vec2 center; @@ -16,6 +18,7 @@ uniform struct Light { uniform sampler2D distanceTexture; uniform vec2 viewBoxSize; +in vec2[LIGHT_COUNT] directions; float getDistance(in vec2 target, out vec3 color) { vec4 values = texture(distanceTexture, target); @@ -44,43 +47,40 @@ float getFractionOfLightArriving( float minDistance = getDistance(target + direction * rayLength); movingAverageMeanDistance = movingAverageMeanDistance / 2.0 + minDistance / 2.0; q = min(q, movingAverageMeanDistance / rayLength); - rayLength = min(lightDistance, rayLength + max(5.0, minDistance)); + rayLength = min(lightDistance, rayLength + max(MIN_STEP, minDistance)); } return clamp(q * (lightDistance + lightRadius) / lightRadius, 0.0, 1.0); } -vec3 getPixelColor(in vec2 worldCoordinates, in vec2 uvCoordinates) { - vec3 colorAtPosition; - float startingDistance = getDistance(uvCoordinates, colorAtPosition); - - vec3 result = colorAtPosition * AMBIENT_LIGHT; - - for (int i = 0; i < LIGHT_COUNT; i++) { - Light light = lights[i]; - - vec2 lightDelta = light.center - worldCoordinates; - float lightDistance = length(lightDelta); - vec2 lightDirection = lightDelta / lightDistance; - - float r = lightDistance / LIGHT_DROP + 1.0; - vec3 lightColorAtPosition = light.value / (r * r); - - float fractionOfLightArriving = getFractionOfLightArriving( - uvCoordinates, lightDirection, startingDistance, - lightDistance, light.radius - ); - - result += colorAtPosition * lightColorAtPosition * fractionOfLightArriving; - } - - return result; -} - in vec2 worldCoordinates; in vec2 uvCoordinates; out vec4 fragmentColor; void main() { - fragmentColor = vec4(getPixelColor(worldCoordinates, uvCoordinates), 1.0); + vec3 colorAtPosition; + float startingDistance = getDistance(uvCoordinates, colorAtPosition); + + vec3 ligthing = vec3(0.0); + + for (int i = 0; i < LIGHT_COUNT; i++) { + Light light = lights[i]; + float lightDistance = distance(light.center, worldCoordinates); + + float r = lightDistance / LIGHT_DROP + 1.0; + vec3 lightColorAtPosition = light.value / (r * r); + + float fractionOfLightArriving = getFractionOfLightArriving( + uvCoordinates, normalize(directions[i]), startingDistance, + lightDistance, light.radius + ); + + ligthing += lightColorAtPosition * fractionOfLightArriving; + } + + fragmentColor = vec4( + colorAtPosition * (AMBIENT_LIGHT + + step(EDGE_SMOOTHING / 2.0, clamp(startingDistance, 0.0, EDGE_SMOOTHING)) * ligthing), + 1.0 + ); } diff --git a/frontend/src/shaders/passthrough-distance-vs.glsl b/frontend/src/shaders/passthrough-distance-vs.glsl index e0c033e..17fc0c9 100644 --- a/frontend/src/shaders/passthrough-distance-vs.glsl +++ b/frontend/src/shaders/passthrough-distance-vs.glsl @@ -1,5 +1,7 @@ #version 300 es +precision mediump float; + uniform mat3 ndcToWorld; in vec4 a_position; out vec2 worldCoordinates; diff --git a/frontend/src/shaders/passthrough-shading-vs.glsl b/frontend/src/shaders/passthrough-shading-vs.glsl index 80e9724..f77ce3b 100644 --- a/frontend/src/shaders/passthrough-shading-vs.glsl +++ b/frontend/src/shaders/passthrough-shading-vs.glsl @@ -1,12 +1,30 @@ #version 300 es +precision mediump float; + +#define LIGHT_COUNT {lightCount} + uniform mat3 ndcToWorld; in vec4 a_position; out vec2 worldCoordinates; out vec2 uvCoordinates; + +uniform struct Light { + vec2 center; + float radius; + vec3 value; +}[LIGHT_COUNT] lights; + +out vec2[LIGHT_COUNT] directions; + void main() { worldCoordinates = (vec3(a_position.xy, 1.0) * ndcToWorld).xy; uvCoordinates = ((a_position.xy + vec2(1.0)) / 2.0).xy; + + for (int i = 0; i < LIGHT_COUNT; i++) { + directions[i] = lights[i].center - worldCoordinates; + } + gl_Position = a_position; } diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss index 5c72e86..3781003 100644 --- a/frontend/src/styles/main.scss +++ b/frontend/src/styles/main.scss @@ -24,6 +24,10 @@ body { $outline-width $outline-width 0 #000; color: white; white-space: pre; + + @media (max-width: 800px) { + font-size: 0.75em; + } } canvas#main {