diff --git a/frontend/src/scripts/drawing/drawables/lights/circle-light.ts b/frontend/src/scripts/drawing/drawables/lights/circle-light.ts index 1bc54e7..2f90ed8 100644 --- a/frontend/src/scripts/drawing/drawables/lights/circle-light.ts +++ b/frontend/src/scripts/drawing/drawables/lights/circle-light.ts @@ -1,9 +1,9 @@ -import { ILight } from './i-light'; import { vec2, vec3 } from 'gl-matrix'; +import { GameObject } from '../../../objects/game-object'; +import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box'; import { settings } from '../../settings'; import { IDrawableDescriptor } from '../i-drawable-descriptor'; -import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box'; -import { GameObject } from '../../../objects/game-object'; +import { ILight } from './i-light'; export class CircleLight implements ILight { public static descriptor: IDrawableDescriptor = { @@ -18,7 +18,7 @@ export class CircleLight implements ILight { public radius: number, public color: vec3, public lightness: number - ) {} + ) { } boundingBox: ImmutableBoundingBox; diff --git a/frontend/src/scripts/drawing/drawables/primitives/circle.ts b/frontend/src/scripts/drawing/drawables/primitives/circle.ts index 5872ae3..d55977a 100644 --- a/frontend/src/scripts/drawing/drawables/primitives/circle.ts +++ b/frontend/src/scripts/drawing/drawables/primitives/circle.ts @@ -1,14 +1,14 @@ import { vec2 } from 'gl-matrix'; -import { IPrimitive } from './i-primitive'; -import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box'; import { GameObject } from '../../../objects/game-object'; +import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box'; +import { IPrimitive } from './i-primitive'; export class Circle implements IPrimitive { public constructor( public readonly owner: GameObject, public center = vec2.create(), public radius = 0 - ) {} + ) { } public serializeToUniforms(uniforms: any): void { throw new Error('Method not implemented.'); @@ -40,4 +40,8 @@ export class Circle implements IPrimitive { const distance = vec2.distance(this.center, other.center); return distance < this.radius + other.radius; } + + public clone(): Circle { + return new Circle(this.owner, this.center, this.radius); + } } diff --git a/frontend/src/scripts/drawing/drawables/primitives/i-primitive.ts b/frontend/src/scripts/drawing/drawables/primitives/i-primitive.ts index 0f46971..2675475 100644 --- a/frontend/src/scripts/drawing/drawables/primitives/i-primitive.ts +++ b/frontend/src/scripts/drawing/drawables/primitives/i-primitive.ts @@ -1,3 +1,5 @@ import { IDrawable } from '../i-drawable'; -export interface IPrimitive extends IDrawable {} +export interface IPrimitive extends IDrawable { + clone(): IPrimitive +} diff --git a/frontend/src/scripts/drawing/drawables/primitives/tunnel-shape.ts b/frontend/src/scripts/drawing/drawables/primitives/tunnel-shape.ts index b07077e..f8197d3 100644 --- a/frontend/src/scripts/drawing/drawables/primitives/tunnel-shape.ts +++ b/frontend/src/scripts/drawing/drawables/primitives/tunnel-shape.ts @@ -1,12 +1,12 @@ import { vec2 } from 'gl-matrix'; -import { IDrawableDescriptor } from '../i-drawable-descriptor'; -import { IPrimitive } from './i-primitive'; -import { settings } from '../../settings'; -import { Circle } from './circle'; -import { mix } from '../../../helper/mix'; import { clamp01 } from '../../../helper/clamp'; -import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box'; +import { mix } from '../../../helper/mix'; import { GameObject } from '../../../objects/game-object'; +import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box'; +import { settings } from '../../settings'; +import { IDrawableDescriptor } from '../i-drawable-descriptor'; +import { Circle } from './circle'; +import { IPrimitive } from './i-primitive'; export class TunnelShape implements IPrimitive { public static descriptor: IDrawableDescriptor = { @@ -73,7 +73,7 @@ export class TunnelShape implements IPrimitive { const targetFromDelta = vec2.subtract(vec2.create(), target, this.from); const h = clamp01( vec2.dot(targetFromDelta, this.toFromDelta) / - vec2.dot(this.toFromDelta, this.toFromDelta) + vec2.dot(this.toFromDelta, this.toFromDelta) ); return ( vec2.distance( @@ -86,4 +86,14 @@ export class TunnelShape implements IPrimitive { public minimumDistance(target: vec2): number { return this.boundingCircle.distance(target); } + + public clone(): TunnelShape { + return new TunnelShape( + this.owner, + this.from, + this.to, + this.fromRadius, + this.toRadius + ); + } } diff --git a/frontend/src/scripts/drawing/graphics-library/program/program.ts b/frontend/src/scripts/drawing/graphics-library/program/program.ts index 2038e17..fd91937 100644 --- a/frontend/src/scripts/drawing/graphics-library/program/program.ts +++ b/frontend/src/scripts/drawing/graphics-library/program/program.ts @@ -34,7 +34,6 @@ export abstract class Program implements IProgram { public setDrawingRectangle(bottomLeft: vec2, size: vec2) { mat2d.invert(this.modelTransform, this.ndcToUv); - mat2d.translate(this.modelTransform, this.modelTransform, bottomLeft); mat2d.scale(this.modelTransform, this.modelTransform, size); mat2d.multiply(this.modelTransform, this.modelTransform, this.ndcToUv); diff --git a/frontend/src/scripts/drawing/rendering/webgl2-renderer.ts b/frontend/src/scripts/drawing/rendering/webgl2-renderer.ts index 8de4339..1b5ed7b 100644 --- a/frontend/src/scripts/drawing/rendering/webgl2-renderer.ts +++ b/frontend/src/scripts/drawing/rendering/webgl2-renderer.ts @@ -1,4 +1,4 @@ -import { mat2d, vec2, vec3 } from 'gl-matrix'; +import { mat2d, vec2 } from 'gl-matrix'; import { CircleLight } from '../drawables/lights/circle-light'; import { ILight } from '../drawables/lights/i-light'; import { PointLight } from '../drawables/lights/point-light'; @@ -39,7 +39,6 @@ export class WebGl2Renderer implements IRenderer { cursorPosition?: mat2d; ndcToUv?: mat2d; uvToWorld?: mat2d; - viewBoxSize?: mat2d; } = { ndcToUv: mat2d.fromValues(0.5, 0, 0, 0.5, 0.5, 0.5) }; constructor(private canvas: HTMLCanvasElement, private overlay: HTMLElement) { @@ -69,7 +68,7 @@ export class WebGl2Renderer implements IRenderer { try { this.stopwatch = new WebGlStopwatch(this.gl); - } catch {} + } catch { } } public drawPrimitive(primitive: IPrimitive) { @@ -91,25 +90,18 @@ export class WebGl2Renderer implements IRenderer { public finishFrame() { this.calculateMatrices(); - const cursorPosition = this.screenUvToWorldCoordinate(this.cursorPosition); - - this.lightingPass.addDrawable( - new PointLight(null, cursorPosition, 200, vec3.fromValues(1, 1, 0), 1) - ); - const viewBoxRadius = vec2.length( vec2.scale(vec2.create(), this.viewBoxSize, 0.5) ); this.distancePass.render( - { ...this.matrices, cursorPosition }, + this.uniforms, this.cameraPosition, viewBoxRadius ); this.lightingPass.render( - { ...this.matrices, cursorPosition }, - this.cameraPosition, + this.uniforms, this.cameraPosition, viewBoxRadius, this.distanceFieldFrameBuffer.colorTexture ); @@ -117,6 +109,11 @@ export class WebGl2Renderer implements IRenderer { this.stopwatch?.stop(); } + private get uniforms(): any { + const cursorPosition = this.screenUvToWorldCoordinate(this.cursorPosition); + return { ...this.matrices, cursorPosition, viewBoxSize: this.viewBoxSize } + } + private calculateMatrices() { this.matrices.uvToWorld = mat2d.fromTranslation( mat2d.create(), diff --git a/frontend/src/scripts/drawing/shaders/lights-shading-fs.glsl b/frontend/src/scripts/drawing/shaders/lights-shading-fs.glsl index 2366bd3..d92cf11 100644 --- a/frontend/src/scripts/drawing/shaders/lights-shading-fs.glsl +++ b/frontend/src/scripts/drawing/shaders/lights-shading-fs.glsl @@ -53,12 +53,15 @@ out vec4 fragmentColor; void main() { vec3 colorAtPosition; float startingDistance = getDistance(uvCoordinates, colorAtPosition); - vec3 ligthing = AMBIENT_LIGHT; + vec3 lighting = AMBIENT_LIGHT; #if CIRCLE_LIGHT_COUNT > 0 for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) { float lightCenterDistance = distance(circleLights[i].center, worldCoordinates); - vec3 lightColorAtPosition = circleLights[i].value / pow(lightCenterDistance / LIGHT_DROP + 1.0, 2.0); + + vec3 lightColorAtPosition = circleLights[i].value / pow( + lightCenterDistance / LIGHT_DROP + 1.0, 2.0 + ); float q = INFINITY; float rayLength = startingDistance; @@ -67,9 +70,11 @@ void main() { for (int j = 0; j < 48; j++) { if (rayLength > lightCenterDistance) { - ligthing += lightColorAtPosition * clamp( + lighting += lightColorAtPosition * clamp( q / circleLights[i].radius * (lightCenterDistance + 1.0), 0.0, 1.0 - ) * step(circleLights[i].radius, getDistance(uvCoordinates + direction * lightCenterDistance)); + ) * step(circleLights[i].radius, getDistance( + uvCoordinates + direction * lightCenterDistance + )); break; } @@ -99,7 +104,7 @@ void main() { for (int j = 0; j < 48; j++) { if (rayLength > lightDistance) { - ligthing += lightColorAtPosition * step(0.0, q); + lighting += lightColorAtPosition * step(0.0, q); break; } @@ -111,5 +116,5 @@ void main() { } #endif - fragmentColor = vec4(colorAtPosition * ligthing * clamp(startingDistance, 0.0, 1.0), 1.0); + fragmentColor = vec4(colorAtPosition * lighting * clamp(startingDistance, 0.0, 1.0), 1.0); } diff --git a/frontend/src/scripts/objects/types/camera.ts b/frontend/src/scripts/objects/types/camera.ts index 19d2f12..d5fc19b 100644 --- a/frontend/src/scripts/objects/types/camera.ts +++ b/frontend/src/scripts/objects/types/camera.ts @@ -1,12 +1,12 @@ import { vec2 } from 'gl-matrix'; import { BeforeRenderCommand } from '../../drawing/commands/before-render'; import { CursorMoveCommand } from '../../input/commands/cursor-move-command'; -import { GameObject } from '../game-object'; -import { Lamp } from './lamp'; import { ZoomCommand } from '../../input/commands/zoom'; import { MoveToCommand } from '../../physics/commands/move-to'; import { BoundingBox } from '../../physics/containers/bounding-box'; import { Physics } from '../../physics/physics'; +import { GameObject } from '../game-object'; +import { Lamp } from './lamp'; export class Camera extends GameObject { private inViewArea = 1920 * 1080 * 5; @@ -33,25 +33,14 @@ export class Camera extends GameObject { } private draw(c: BeforeRenderCommand) { - console.log('camera', this.boundingBox.topLeft); - c.renderer.setCameraPosition(this.boundingBox.topLeft); c.renderer.setCursorPosition(this.cursorPosition); this.boundingBox.size = c.renderer.setInViewArea(this.inViewArea); } private moveTo(c: MoveToCommand) { - console.log('camera', c.position); this.boundingBox.topLeft = c.position; - this.light.sendCommand( - new MoveToCommand( - vec2.add( - vec2.create(), - c.position, - vec2.scale(vec2.create(), this.boundingBox.size, 0.5) - ) - ) - ); + this.light.sendCommand(c); } private zoom(c: ZoomCommand) { diff --git a/frontend/src/scripts/objects/types/character.ts b/frontend/src/scripts/objects/types/character.ts index a094638..aff0637 100644 --- a/frontend/src/scripts/objects/types/character.ts +++ b/frontend/src/scripts/objects/types/character.ts @@ -6,7 +6,6 @@ import { SwipeCommand } from '../../input/commands/swipe'; import { MoveToCommand } from '../../physics/commands/move-to'; import { StepCommand } from '../../physics/commands/step'; import { TeleportToCommand } from '../../physics/commands/teleport-to'; -import { BoundingBox } from '../../physics/containers/bounding-box'; import { Physics } from '../../physics/physics'; import { GameObject } from '../game-object'; import { Camera } from './camera'; @@ -21,7 +20,7 @@ export class Character extends GameObject { super(); this.primitive = new Circle(this); - this.primitive.radius = 20; + this.primitive.radius = 40; this.addCommandExecutor(StepCommand, this.stepHandler.bind(this)); this.addCommandExecutor(TeleportToCommand, (c) => @@ -41,29 +40,20 @@ export class Character extends GameObject { } private checkAndSetPosition(value: vec2) { - const size = this.camera.viewAreaSize; - const realCenter = vec2.fromValues( - value.x + size.x / 2, - value.y + size.y / 2 - ); + const nextPrimitive = this.primitive.clone(); + nextPrimitive.center = value; - const targetBoundingBox = new BoundingBox( - null, - value.x + size.x / 2, - value.x + size.x / 2 + 10, - value.y + size.y / 2, - value.y + size.y / 2 + 10 - ); + console.log(this.physics + .findIntersecting(nextPrimitive.boundingBox) + .filter(b => b.value) + .map((b) => b.value.distance(nextPrimitive.center) + 2 * nextPrimitive.radius) + ) - console.log( - this.physics - .findIntersecting(targetBoundingBox) - .map((b) => b.value.distance(realCenter)) - ); if ( this.physics - .findIntersecting(targetBoundingBox) - .map((b) => b.value.distance(realCenter)) + .findIntersecting(nextPrimitive.boundingBox) + .filter(b => b.value) + .map((b) => b.value.distance(nextPrimitive.center) + 2 * nextPrimitive.radius) .find((d) => d < 0) !== undefined ) { this.setPosition(value); @@ -71,7 +61,7 @@ export class Character extends GameObject { } private setPosition(value: vec2) { - console.log('character', value); + // console.log('character', value); this.primitive.center = value; this.camera.sendCommand(new MoveToCommand(this.primitive.center)); diff --git a/frontend/src/scripts/objects/world/create-dungeon.ts b/frontend/src/scripts/objects/world/create-dungeon.ts index 948e187..a2b6d94 100644 --- a/frontend/src/scripts/objects/world/create-dungeon.ts +++ b/frontend/src/scripts/objects/world/create-dungeon.ts @@ -1,8 +1,7 @@ -import { vec2, vec3 } from 'gl-matrix'; +import { vec2 } from 'gl-matrix'; +import { Physics } from '../../physics/physics'; import { Objects } from '../objects'; import { Tunnel } from '../types/tunnel'; -import { Physics } from '../../physics/physics'; -import { GameObject } from '../game-object'; export const createDungeon = (objects: Objects, physics: Physics): Tunnel => { let previousRadius = 350; @@ -10,7 +9,7 @@ export const createDungeon = (objects: Objects, physics: Physics): Tunnel => { let first: Tunnel; - for (let i = 0; i < 1; i += 500) { + for (let i = 0; i < 50000; i += 500) { const deltaHeight = (Math.random() - 0.5) * 2000; const height = previousEnd.y + deltaHeight; const currentEnd = vec2.fromValues(i, height);