Fix some bugs

This commit is contained in:
Schmelczer András 2020-08-07 18:12:53 +02:00
parent 345e183e34
commit 15151e53a7
10 changed files with 69 additions and 74 deletions

View file

@ -1,9 +1,9 @@
import { ILight } from './i-light';
import { vec2, vec3 } from 'gl-matrix'; 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 { settings } from '../../settings';
import { IDrawableDescriptor } from '../i-drawable-descriptor'; import { IDrawableDescriptor } from '../i-drawable-descriptor';
import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box'; import { ILight } from './i-light';
import { GameObject } from '../../../objects/game-object';
export class CircleLight implements ILight { export class CircleLight implements ILight {
public static descriptor: IDrawableDescriptor = { public static descriptor: IDrawableDescriptor = {

View file

@ -1,7 +1,7 @@
import { vec2 } from 'gl-matrix'; 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 { GameObject } from '../../../objects/game-object';
import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box';
import { IPrimitive } from './i-primitive';
export class Circle implements IPrimitive { export class Circle implements IPrimitive {
public constructor( public constructor(
@ -40,4 +40,8 @@ export class Circle implements IPrimitive {
const distance = vec2.distance(this.center, other.center); const distance = vec2.distance(this.center, other.center);
return distance < this.radius + other.radius; return distance < this.radius + other.radius;
} }
public clone(): Circle {
return new Circle(this.owner, this.center, this.radius);
}
} }

View file

@ -1,3 +1,5 @@
import { IDrawable } from '../i-drawable'; import { IDrawable } from '../i-drawable';
export interface IPrimitive extends IDrawable {} export interface IPrimitive extends IDrawable {
clone(): IPrimitive
}

View file

@ -1,12 +1,12 @@
import { vec2 } from 'gl-matrix'; 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 { clamp01 } from '../../../helper/clamp';
import { ImmutableBoundingBox } from '../../../physics/containers/immutable-bounding-box'; import { mix } from '../../../helper/mix';
import { GameObject } from '../../../objects/game-object'; 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 { export class TunnelShape implements IPrimitive {
public static descriptor: IDrawableDescriptor = { public static descriptor: IDrawableDescriptor = {
@ -86,4 +86,14 @@ export class TunnelShape implements IPrimitive {
public minimumDistance(target: vec2): number { public minimumDistance(target: vec2): number {
return this.boundingCircle.distance(target); return this.boundingCircle.distance(target);
} }
public clone(): TunnelShape {
return new TunnelShape(
this.owner,
this.from,
this.to,
this.fromRadius,
this.toRadius
);
}
} }

View file

@ -34,7 +34,6 @@ export abstract class Program implements IProgram {
public setDrawingRectangle(bottomLeft: vec2, size: vec2) { public setDrawingRectangle(bottomLeft: vec2, size: vec2) {
mat2d.invert(this.modelTransform, this.ndcToUv); mat2d.invert(this.modelTransform, this.ndcToUv);
mat2d.translate(this.modelTransform, this.modelTransform, bottomLeft); mat2d.translate(this.modelTransform, this.modelTransform, bottomLeft);
mat2d.scale(this.modelTransform, this.modelTransform, size); mat2d.scale(this.modelTransform, this.modelTransform, size);
mat2d.multiply(this.modelTransform, this.modelTransform, this.ndcToUv); mat2d.multiply(this.modelTransform, this.modelTransform, this.ndcToUv);

View file

@ -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 { CircleLight } from '../drawables/lights/circle-light';
import { ILight } from '../drawables/lights/i-light'; import { ILight } from '../drawables/lights/i-light';
import { PointLight } from '../drawables/lights/point-light'; import { PointLight } from '../drawables/lights/point-light';
@ -39,7 +39,6 @@ export class WebGl2Renderer implements IRenderer {
cursorPosition?: mat2d; cursorPosition?: mat2d;
ndcToUv?: mat2d; ndcToUv?: mat2d;
uvToWorld?: mat2d; uvToWorld?: mat2d;
viewBoxSize?: mat2d;
} = { ndcToUv: mat2d.fromValues(0.5, 0, 0, 0.5, 0.5, 0.5) }; } = { ndcToUv: mat2d.fromValues(0.5, 0, 0, 0.5, 0.5, 0.5) };
constructor(private canvas: HTMLCanvasElement, private overlay: HTMLElement) { constructor(private canvas: HTMLCanvasElement, private overlay: HTMLElement) {
@ -91,25 +90,18 @@ export class WebGl2Renderer implements IRenderer {
public finishFrame() { public finishFrame() {
this.calculateMatrices(); 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( const viewBoxRadius = vec2.length(
vec2.scale(vec2.create(), this.viewBoxSize, 0.5) vec2.scale(vec2.create(), this.viewBoxSize, 0.5)
); );
this.distancePass.render( this.distancePass.render(
{ ...this.matrices, cursorPosition }, this.uniforms,
this.cameraPosition, this.cameraPosition,
viewBoxRadius viewBoxRadius
); );
this.lightingPass.render( this.lightingPass.render(
{ ...this.matrices, cursorPosition }, this.uniforms, this.cameraPosition,
this.cameraPosition,
viewBoxRadius, viewBoxRadius,
this.distanceFieldFrameBuffer.colorTexture this.distanceFieldFrameBuffer.colorTexture
); );
@ -117,6 +109,11 @@ export class WebGl2Renderer implements IRenderer {
this.stopwatch?.stop(); this.stopwatch?.stop();
} }
private get uniforms(): any {
const cursorPosition = this.screenUvToWorldCoordinate(this.cursorPosition);
return { ...this.matrices, cursorPosition, viewBoxSize: this.viewBoxSize }
}
private calculateMatrices() { private calculateMatrices() {
this.matrices.uvToWorld = mat2d.fromTranslation( this.matrices.uvToWorld = mat2d.fromTranslation(
mat2d.create(), mat2d.create(),

View file

@ -53,12 +53,15 @@ out vec4 fragmentColor;
void main() { void main() {
vec3 colorAtPosition; vec3 colorAtPosition;
float startingDistance = getDistance(uvCoordinates, colorAtPosition); float startingDistance = getDistance(uvCoordinates, colorAtPosition);
vec3 ligthing = AMBIENT_LIGHT; vec3 lighting = AMBIENT_LIGHT;
#if CIRCLE_LIGHT_COUNT > 0 #if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) { for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
float lightCenterDistance = distance(circleLights[i].center, worldCoordinates); 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 q = INFINITY;
float rayLength = startingDistance; float rayLength = startingDistance;
@ -67,9 +70,11 @@ void main() {
for (int j = 0; j < 48; j++) { for (int j = 0; j < 48; j++) {
if (rayLength > lightCenterDistance) { if (rayLength > lightCenterDistance) {
ligthing += lightColorAtPosition * clamp( lighting += lightColorAtPosition * clamp(
q / circleLights[i].radius * (lightCenterDistance + 1.0), 0.0, 1.0 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; break;
} }
@ -99,7 +104,7 @@ void main() {
for (int j = 0; j < 48; j++) { for (int j = 0; j < 48; j++) {
if (rayLength > lightDistance) { if (rayLength > lightDistance) {
ligthing += lightColorAtPosition * step(0.0, q); lighting += lightColorAtPosition * step(0.0, q);
break; break;
} }
@ -111,5 +116,5 @@ void main() {
} }
#endif #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);
} }

View file

@ -1,12 +1,12 @@
import { vec2 } from 'gl-matrix'; import { vec2 } from 'gl-matrix';
import { BeforeRenderCommand } from '../../drawing/commands/before-render'; import { BeforeRenderCommand } from '../../drawing/commands/before-render';
import { CursorMoveCommand } from '../../input/commands/cursor-move-command'; import { CursorMoveCommand } from '../../input/commands/cursor-move-command';
import { GameObject } from '../game-object';
import { Lamp } from './lamp';
import { ZoomCommand } from '../../input/commands/zoom'; import { ZoomCommand } from '../../input/commands/zoom';
import { MoveToCommand } from '../../physics/commands/move-to'; import { MoveToCommand } from '../../physics/commands/move-to';
import { BoundingBox } from '../../physics/containers/bounding-box'; import { BoundingBox } from '../../physics/containers/bounding-box';
import { Physics } from '../../physics/physics'; import { Physics } from '../../physics/physics';
import { GameObject } from '../game-object';
import { Lamp } from './lamp';
export class Camera extends GameObject { export class Camera extends GameObject {
private inViewArea = 1920 * 1080 * 5; private inViewArea = 1920 * 1080 * 5;
@ -33,25 +33,14 @@ export class Camera extends GameObject {
} }
private draw(c: BeforeRenderCommand) { private draw(c: BeforeRenderCommand) {
console.log('camera', this.boundingBox.topLeft);
c.renderer.setCameraPosition(this.boundingBox.topLeft); c.renderer.setCameraPosition(this.boundingBox.topLeft);
c.renderer.setCursorPosition(this.cursorPosition); c.renderer.setCursorPosition(this.cursorPosition);
this.boundingBox.size = c.renderer.setInViewArea(this.inViewArea); this.boundingBox.size = c.renderer.setInViewArea(this.inViewArea);
} }
private moveTo(c: MoveToCommand) { private moveTo(c: MoveToCommand) {
console.log('camera', c.position);
this.boundingBox.topLeft = c.position; this.boundingBox.topLeft = c.position;
this.light.sendCommand( this.light.sendCommand(c);
new MoveToCommand(
vec2.add(
vec2.create(),
c.position,
vec2.scale(vec2.create(), this.boundingBox.size, 0.5)
)
)
);
} }
private zoom(c: ZoomCommand) { private zoom(c: ZoomCommand) {

View file

@ -6,7 +6,6 @@ import { SwipeCommand } from '../../input/commands/swipe';
import { MoveToCommand } from '../../physics/commands/move-to'; import { MoveToCommand } from '../../physics/commands/move-to';
import { StepCommand } from '../../physics/commands/step'; import { StepCommand } from '../../physics/commands/step';
import { TeleportToCommand } from '../../physics/commands/teleport-to'; import { TeleportToCommand } from '../../physics/commands/teleport-to';
import { BoundingBox } from '../../physics/containers/bounding-box';
import { Physics } from '../../physics/physics'; import { Physics } from '../../physics/physics';
import { GameObject } from '../game-object'; import { GameObject } from '../game-object';
import { Camera } from './camera'; import { Camera } from './camera';
@ -21,7 +20,7 @@ export class Character extends GameObject {
super(); super();
this.primitive = new Circle(this); this.primitive = new Circle(this);
this.primitive.radius = 20; this.primitive.radius = 40;
this.addCommandExecutor(StepCommand, this.stepHandler.bind(this)); this.addCommandExecutor(StepCommand, this.stepHandler.bind(this));
this.addCommandExecutor(TeleportToCommand, (c) => this.addCommandExecutor(TeleportToCommand, (c) =>
@ -41,29 +40,20 @@ export class Character extends GameObject {
} }
private checkAndSetPosition(value: vec2) { private checkAndSetPosition(value: vec2) {
const size = this.camera.viewAreaSize; const nextPrimitive = this.primitive.clone();
const realCenter = vec2.fromValues( nextPrimitive.center = value;
value.x + size.x / 2,
value.y + size.y / 2
);
const targetBoundingBox = new BoundingBox( console.log(this.physics
null, .findIntersecting(nextPrimitive.boundingBox)
value.x + size.x / 2, .filter(b => b.value)
value.x + size.x / 2 + 10, .map((b) => b.value.distance(nextPrimitive.center) + 2 * nextPrimitive.radius)
value.y + size.y / 2, )
value.y + size.y / 2 + 10
);
console.log(
this.physics
.findIntersecting(targetBoundingBox)
.map((b) => b.value.distance(realCenter))
);
if ( if (
this.physics this.physics
.findIntersecting(targetBoundingBox) .findIntersecting(nextPrimitive.boundingBox)
.map((b) => b.value.distance(realCenter)) .filter(b => b.value)
.map((b) => b.value.distance(nextPrimitive.center) + 2 * nextPrimitive.radius)
.find((d) => d < 0) !== undefined .find((d) => d < 0) !== undefined
) { ) {
this.setPosition(value); this.setPosition(value);
@ -71,7 +61,7 @@ export class Character extends GameObject {
} }
private setPosition(value: vec2) { private setPosition(value: vec2) {
console.log('character', value); // console.log('character', value);
this.primitive.center = value; this.primitive.center = value;
this.camera.sendCommand(new MoveToCommand(this.primitive.center)); this.camera.sendCommand(new MoveToCommand(this.primitive.center));

View file

@ -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 { Objects } from '../objects';
import { Tunnel } from '../types/tunnel'; import { Tunnel } from '../types/tunnel';
import { Physics } from '../../physics/physics';
import { GameObject } from '../game-object';
export const createDungeon = (objects: Objects, physics: Physics): Tunnel => { export const createDungeon = (objects: Objects, physics: Physics): Tunnel => {
let previousRadius = 350; let previousRadius = 350;
@ -10,7 +9,7 @@ export const createDungeon = (objects: Objects, physics: Physics): Tunnel => {
let first: 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 deltaHeight = (Math.random() - 0.5) * 2000;
const height = previousEnd.y + deltaHeight; const height = previousEnd.y + deltaHeight;
const currentEnd = vec2.fromValues(i, height); const currentEnd = vec2.fromValues(i, height);