From b6bef3c77d28c7fb0f742181c5036c19192c5cae Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Sat, 25 Jul 2020 17:51:13 +0200 Subject: [PATCH] Fix should draw condition --- frontend/src/scripts/drawing/drawer.ts | 3 ++- frontend/src/scripts/drawing/webgl2-renderer.ts | 15 +++++++++++++-- frontend/src/scripts/math/circle.ts | 15 +++++++++++++++ frontend/src/scripts/math/rectangle.ts | 7 ++----- frontend/src/scripts/objects/types/camera.ts | 2 +- .../src/scripts/objects/types/circle-light.ts | 10 +++++++++- frontend/src/scripts/objects/types/tunnel.ts | 9 ++++++++- .../src/scripts/objects/world/create-dungeon.ts | 2 +- frontend/src/shaders/lights-shading-fs.glsl | 6 +++--- 9 files changed, 54 insertions(+), 15 deletions(-) create mode 100644 frontend/src/scripts/math/circle.ts diff --git a/frontend/src/scripts/drawing/drawer.ts b/frontend/src/scripts/drawing/drawer.ts index 692e7f3..ce07d28 100644 --- a/frontend/src/scripts/drawing/drawer.ts +++ b/frontend/src/scripts/drawing/drawer.ts @@ -1,4 +1,5 @@ import { vec2 } from 'gl-matrix'; +import { Circle } from '../math/circle'; export interface Drawer { startFrame(deltaTime: DOMHighResTimeStamp): void; @@ -10,5 +11,5 @@ export interface Drawer { setInViewArea(size: number): vec2; screenUvToWorldCoordinate(mousePosition: vec2): vec2; drawInfoText(text: string): void; - isOnScreen(position: vec2): boolean; + isOnScreen(boundingCircle: Circle): boolean; } diff --git a/frontend/src/scripts/drawing/webgl2-renderer.ts b/frontend/src/scripts/drawing/webgl2-renderer.ts index fb5dbed..8931c0d 100644 --- a/frontend/src/scripts/drawing/webgl2-renderer.ts +++ b/frontend/src/scripts/drawing/webgl2-renderer.ts @@ -1,5 +1,6 @@ import { mat2d, vec2 } from 'gl-matrix'; 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'; @@ -13,6 +14,7 @@ export class WebGl2Renderer implements Drawer { private stopwatch?: WebGlStopwatch; private viewBox: Rectangle = new Rectangle(); + private viewCircle: Circle = new Circle(vec2.create(), 0); private uniforms: any; private cursorPosition = vec2.create(); private distanceFieldFrameBuffer: IntermediateFrameBuffer; @@ -212,6 +214,15 @@ export class WebGl2Renderer implements Drawer { Math.sqrt(size * canvasAspectRatio), Math.sqrt(size / canvasAspectRatio) ); + + const halfDiagonal = vec2.scale(vec2.create(), this.viewBox.size, 0.5); + this.viewCircle.center = vec2.add( + vec2.create(), + this.viewBox.topLeft, + halfDiagonal + ); + this.viewCircle.radius = vec2.length(halfDiagonal); + return this.viewBox.size; } @@ -221,7 +232,7 @@ export class WebGl2Renderer implements Drawer { } } - public isOnScreen(position: vec2): boolean { - return this.viewBox.isInside(position); + public isOnScreen(boundingCircle: Circle): boolean { + return this.viewCircle.areIntersecting(boundingCircle); } } diff --git a/frontend/src/scripts/math/circle.ts b/frontend/src/scripts/math/circle.ts new file mode 100644 index 0000000..20a65a2 --- /dev/null +++ b/frontend/src/scripts/math/circle.ts @@ -0,0 +1,15 @@ +import { vec2 } from 'gl-matrix'; + +export class Circle { + public constructor(public center: vec2, public radius: number) {} + + public isInside(position: vec2): boolean { + const distance = vec2.distance(this.center, position); + return distance < this.radius; + } + + public areIntersecting(other: Circle): boolean { + const distance = vec2.distance(this.center, other.center); + return distance < this.radius + other.radius; + } +} diff --git a/frontend/src/scripts/math/rectangle.ts b/frontend/src/scripts/math/rectangle.ts index ddefb76..e2d39e6 100644 --- a/frontend/src/scripts/math/rectangle.ts +++ b/frontend/src/scripts/math/rectangle.ts @@ -1,13 +1,10 @@ -import { Typed } from '../transport/serializable'; import { vec2 } from 'gl-matrix'; -export class Rectangle extends Typed { +export class Rectangle { public constructor( public topLeft: vec2 = vec2.create(), public size: vec2 = vec2.create() - ) { - super(); - } + ) {} public isInside(position: vec2): boolean { const translated = vec2.subtract(vec2.create(), position, this.topLeft); diff --git a/frontend/src/scripts/objects/types/camera.ts b/frontend/src/scripts/objects/types/camera.ts index f3cccfc..43f1f7f 100644 --- a/frontend/src/scripts/objects/types/camera.ts +++ b/frontend/src/scripts/objects/types/camera.ts @@ -7,7 +7,7 @@ import { GameObject } from '../game-object'; import { CircleLight } from './circle-light'; export class Camera extends GameObject { - private inViewArea = 1920 * 1080; + private inViewArea = 1920 * 1080 * 5; private cursorPosition = vec2.create(); constructor(private light: CircleLight) { diff --git a/frontend/src/scripts/objects/types/circle-light.ts b/frontend/src/scripts/objects/types/circle-light.ts index 3ae53f4..8d95cee 100644 --- a/frontend/src/scripts/objects/types/circle-light.ts +++ b/frontend/src/scripts/objects/types/circle-light.ts @@ -1,9 +1,14 @@ import { vec2, vec3 } from 'gl-matrix'; import { DrawCommand } from '../../commands/types/draw'; import { MoveToCommand } from '../../commands/types/move-to'; +import { Circle } from '../../math/circle'; import { GameObject } from '../game-object'; +const range = 2000; + export class CircleLight extends GameObject { + private boundingCircle: Circle; + constructor( private center: vec2, private radius: number, @@ -11,12 +16,14 @@ export class CircleLight extends GameObject { ) { super(); + this.boundingCircle = new Circle(center, range); + this.addCommandExecutor(DrawCommand, this.draw.bind(this)); this.addCommandExecutor(MoveToCommand, this.moveTo.bind(this)); } private draw(c: DrawCommand) { - if (c.drawer.isOnScreen(this.center)) { + if (c.drawer.isOnScreen(this.boundingCircle)) { c.drawer.appendToUniformList('lights', { center: this.center, radius: this.radius, @@ -27,5 +34,6 @@ export class CircleLight extends GameObject { private moveTo(c: MoveToCommand) { this.center = c.position; + this.boundingCircle.center = c.position; } } diff --git a/frontend/src/scripts/objects/types/tunnel.ts b/frontend/src/scripts/objects/types/tunnel.ts index c8140f3..7059f90 100644 --- a/frontend/src/scripts/objects/types/tunnel.ts +++ b/frontend/src/scripts/objects/types/tunnel.ts @@ -1,10 +1,13 @@ import { vec2 } from 'gl-matrix'; import { DrawCommand } from '../../commands/types/draw'; +import { Circle } from '../../math/circle'; import { GameObject } from '../game-object'; export interface Line {} export class Tunnel extends GameObject { + private boundingCircle: Circle; + constructor( private from: vec2, private to: vec2, @@ -13,11 +16,15 @@ export class Tunnel extends GameObject { ) { super(); + this.boundingCircle = new Circle( + vec2.fromValues(from.x / 2 + to.x / 2, from.y / 2 + to.y / 2), + radiusFrom + radiusTo + vec2.distance(from, to) + ); this.addCommandExecutor(DrawCommand, this.draw.bind(this)); } private draw(c: DrawCommand) { - if (c.drawer.isOnScreen(this.from) || c.drawer.isOnScreen(this.to)) { + if (c.drawer.isOnScreen(this.boundingCircle)) { c.drawer.appendToUniformList('lines', this.from, this.to); c.drawer.appendToUniformList('radii', this.radiusFrom, this.radiusTo); } diff --git a/frontend/src/scripts/objects/world/create-dungeon.ts b/frontend/src/scripts/objects/world/create-dungeon.ts index cdc86a2..84fd7e7 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) { + if (deltaHeight > 0 && Math.random() > 0.5) { objects.addObject( new CircleLight( currentEnd, diff --git a/frontend/src/shaders/lights-shading-fs.glsl b/frontend/src/shaders/lights-shading-fs.glsl index c41e4ec..c74b36c 100644 --- a/frontend/src/shaders/lights-shading-fs.glsl +++ b/frontend/src/shaders/lights-shading-fs.glsl @@ -2,8 +2,8 @@ precision mediump float; -#define INFINITY 10000.0 -#define LIGHT_COUNT 5 +#define INFINITY 1000.0 +#define LIGHT_COUNT 10 #define AMBIENT_LIGHT vec3(0.15) #define LIGHT_DROP 800.0 #define SHADOW_BIAS 0.01 @@ -24,7 +24,7 @@ float square(in float a) { float getDistance(in vec2 target, out vec3 color) { vec4 values = texture(distanceTexture, target); color = values.rgb; - return values.w * 32.0; + return values.w * 32.0; } float getDistance(in vec2 target) {