Do some more refactoring

This commit is contained in:
schmelczerandras 2020-07-30 20:59:37 +02:00
parent c892ca2d01
commit 24cc572e47
29 changed files with 191 additions and 152 deletions

View file

@ -18,7 +18,6 @@ A good-looking 2D adventure.
- subtract cameraPosition
- cross browser testing
- nginx log monitor
- pass befejezése
- lightweight object storage
- local dev env
- CI pipeline:

View file

@ -1,5 +1,5 @@
import { Command } from '../command';
import { IRenderer } from '../../drawing/i-renderer';
import { Command } from '../../commands/command';
import { IRenderer } from '../i-renderer';
export class BeforeRenderCommand extends Command {
public constructor(public readonly renderer?: IRenderer) {

View file

@ -1,5 +1,5 @@
import { Command } from '../command';
import { IRenderer } from '../../drawing/i-renderer';
import { Command } from '../../commands/command';
export class RenderCommand extends Command {
public constructor(public readonly renderer?: IRenderer) {

View file

@ -5,8 +5,8 @@ import { IDrawableDescriptor } from '../i-drawable-descriptor';
export class CircleLight implements ILight {
public static descriptor: IDrawableDescriptor = {
uniformName: 'lights',
countMacroName: 'lightCount',
uniformName: 'circleLights',
countMacroName: 'circleLightCount',
shaderCombinationSteps: settings.shaderCombinations.circleLightSteps,
};
@ -17,15 +17,15 @@ export class CircleLight implements ILight {
public lightness: number
) {}
distance(target: vec2): number {
public distance(target: vec2): number {
return 0;
}
minimumDistance(target: vec2): number {
public minimumDistance(target: vec2): number {
return 0;
}
serializeToUniforms(uniforms: any): void {
public serializeToUniforms(uniforms: any): void {
const listName = CircleLight.descriptor.uniformName;
if (!uniforms.hasOwnProperty(listName)) {
@ -39,7 +39,7 @@ export class CircleLight implements ILight {
});
}
get value(): vec3 {
public get value(): vec3 {
return vec3.scale(
vec3.create(),
vec3.normalize(this.color, this.color),

View file

@ -1,23 +1,32 @@
import { ILight } from './i-light';
import { vec2, vec3 } from 'gl-matrix';
import { IDrawableDescriptor } from '../i-drawable-descriptor';
import { settings } from '../../settings';
export class PointLight implements ILight {
public static uniformName = 'lights';
public static descriptor: IDrawableDescriptor = {
uniformName: 'pointLights',
countMacroName: 'pointLightCount',
shaderCombinationSteps: settings.shaderCombinations.pointLightSteps,
};
constructor(
public center: vec2,
public radius: number,
public color: vec3,
public lightness: number
) {}
distance(target: vec2): number {
throw new Error('Method not implemented.');
}
minimumDistance(target: vec2): number {
throw new Error('Method not implemented.');
public distance(target: vec2): number {
return vec2.distance(this.center, target) - this.radius;
}
serializeToUniforms(uniforms: any): void {
const listName = PointLight.uniformName;
public minimumDistance(target: vec2): number {
return vec2.distance(this.center, target) - this.radius;
}
public serializeToUniforms(uniforms: any): void {
const listName = PointLight.descriptor.uniformName;
if (!uniforms.hasOwnProperty(listName)) {
uniforms[listName] = [];
@ -25,12 +34,12 @@ export class PointLight implements ILight {
uniforms[listName].push({
center: this.center,
radius: 0,
radius: this.radius,
value: this.value,
});
}
get value(): vec3 {
public get value(): vec3 {
return vec3.scale(vec3.create(), this.color, this.lightness);
}
}

View file

@ -25,7 +25,6 @@ export class TunnelShape implements IPrimitive {
public readonly toRadius: number
) {
this.toFromDelta = vec2.subtract(vec2.create(), to, from);
this.toFromDeltaLength = vec2.length(this.toFromDelta);
this.boundingCircle = new Circle(
vec2.fromValues(from.x / 2 + to.x / 2, from.y / 2 + to.y / 2),
@ -50,8 +49,7 @@ export class TunnelShape implements IPrimitive {
const targetFromDelta = vec2.subtract(vec2.create(), target, this.from);
const h = clamp01(
vec2.dot(targetFromDelta, this.toFromDelta) /
this.toFromDeltaLength /
this.toFromDeltaLength
vec2.dot(this.toFromDelta, this.toFromDelta)
);
return (
vec2.distance(

View file

@ -1,4 +1,4 @@
import { mat2d, vec2 } from 'gl-matrix';
import { mat2d, vec2, vec3 } from 'gl-matrix';
import caveFragmentShader from '../shaders/cave-distance-fs.glsl';
import lightsFragmentShader from '../shaders/lights-shading-fs.glsl';
import caveVertexShader from '../shaders/passthrough-distance-vs.glsl';
@ -20,6 +20,7 @@ import { getWebGl2Context } from '../graphics-library/helper/get-webgl2-context'
import { RenderingPass } from './rendering-pass';
import { TunnelShape } from '../drawables/primitives/tunnel-shape';
import { CircleLight } from '../drawables/lights/circle-light';
import { PointLight } from '../drawables/lights/point-light';
export class WebGl2Renderer implements IRenderer {
private gl: WebGL2RenderingContext;
@ -53,7 +54,7 @@ export class WebGl2Renderer implements IRenderer {
this.lightingPass = new RenderingPass(
this.gl,
[lightsVertexShader, lightsFragmentShader],
[CircleLight.descriptor],
[CircleLight.descriptor, PointLight.descriptor],
this.lightingFrameBuffer
);
@ -85,6 +86,9 @@ export class WebGl2Renderer implements IRenderer {
public finishFrame() {
const uniforms = this.calculateOwnUniforms();
this.lightingPass.addDrawable(
new PointLight(uniforms.cursorPosition, 200, vec3.fromValues(1, 1, 0), 1)
);
this.distancePass.render(uniforms, this.viewCircle);
this.lightingPass.render(
uniforms,

View file

@ -22,10 +22,12 @@ export const settings = {
tileMultiplier: 5,
shaderMacros: {
distanceScale: 64,
distanceOffset: 0.15,
edgeSmoothing: 10,
},
shaderCombinations: {
lineSteps: [0, 1, 2, 3, 4, 8, 16, 32],
circleLightSteps: [0, 1, 2, 3],
pointLightSteps: [0, 1, 2, 3],
},
};

View file

@ -6,7 +6,7 @@ precision mediump float;
#define CAVE_COLOR vec3(0.36, 0.38, 0.76)
#define AIR_COLOR vec3(0.7)
#define DISTANCE_SCALE {distanceScale}
#define EDGE_SMOOTHING {edgeSmoothing}
#define DISTANCE_OFFSET {distanceOffset}
uniform float maxMinDistance;
@ -23,28 +23,25 @@ in vec2 worldCoordinates;
out vec4 fragmentColor;
void main() {
float realDistance = 0.0;
#if LINE_COUNT > 0
float minDistance = maxMinDistance;
for (int i = 0; i < LINE_COUNT; i++) {
Line line = lines[i];
vec2 pa = worldCoordinates - line.from;
vec2 ba = line.toFromDelta;
float baLength = length(ba);
// todo: do we really want this dot(pa / baLength, ba / baLength)
float h = clamp(dot(pa / baLength, ba / baLength), 0.0, 1.0);
float lineDistance = distance(pa, ba * h) - mix(line.fromRadius, line.toRadius, h);
vec2 pa = worldCoordinates - lines[i].from;
vec2 ba = lines[i].toFromDelta;
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
float lineDistance = distance(pa, ba * h) - mix(lines[i].fromRadius, lines[i].toRadius, h);
minDistance = min(minDistance, lineDistance);
}
float distance = -minDistance;
fragmentColor = vec4(
mix(CAVE_COLOR, AIR_COLOR, clamp(distance, -EDGE_SMOOTHING, 0.0) / EDGE_SMOOTHING + 1.0),
distance / DISTANCE_SCALE
);
#else
fragmentColor = vec4(AIR_COLOR, maxMinDistance / DISTANCE_SCALE);
realDistance = -minDistance;
#endif
fragmentColor = vec4(
mix(CAVE_COLOR, AIR_COLOR, clamp(realDistance, 0.0, 1.0)),
(realDistance + DISTANCE_OFFSET) / DISTANCE_SCALE - 1.0/255.0
);
}

View file

@ -7,58 +7,43 @@ precision mediump float;
#define MIN_STEP 1.0
#define AMBIENT_LIGHT vec3(0.15)
#define LIGHT_COUNT {lightCount}
#define CIRCLE_LIGHT_COUNT {circleLightCount}
#define POINT_LIGHT_COUNT {pointLightCount}
#define DISTANCE_SCALE {distanceScale}
#define DISTANCE_OFFSET {distanceOffset}
#define EDGE_SMOOTHING {edgeSmoothing}
#if LIGHT_COUNT > 0
uniform struct Light {
uniform sampler2D distanceTexture;
uniform vec2 viewBoxSize;
float getDistance(in vec2 target, out vec3 color) {
vec4 values = texture(distanceTexture, target);
color = values.rgb;
return (values.w - DISTANCE_OFFSET) * DISTANCE_SCALE;
}
float getDistance(in vec2 target) {
return (texture(distanceTexture, target).w - DISTANCE_OFFSET) * DISTANCE_SCALE;
}
#if CIRCLE_LIGHT_COUNT > 0
uniform struct CircleLight {
vec2 center;
float radius;
vec3 value;
}[LIGHT_COUNT] lights;
}[CIRCLE_LIGHT_COUNT] circleLights;
uniform sampler2D distanceTexture;
uniform vec2 viewBoxSize;
in vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
#endif
in vec2[LIGHT_COUNT] directions;
#if POINT_LIGHT_COUNT > 0
uniform struct PointLight {
vec2 center;
float radius;
vec3 value;
}[POINT_LIGHT_COUNT] pointLights;
float getDistance(in vec2 target, out vec3 color) {
vec4 values = texture(distanceTexture, target);
color = values.rgb;
return values.w * DISTANCE_SCALE;
}
float getDistance(in vec2 target) {
return texture(distanceTexture, target).w * DISTANCE_SCALE;
}
float getFractionOfLightArriving(
in vec2 target,
in vec2 direction,
in float startingDistance,
in float lightDistance,
in float lightRadius
) {
float q = 1.0;
float rayLength = startingDistance;
float movingAverageMeanDistance = startingDistance;
direction /= viewBoxSize;
for (int j = 0; j < 48; j++) {
float minDistance = getDistance(target + direction * rayLength);
movingAverageMeanDistance = movingAverageMeanDistance / 2.0 + minDistance / 2.0;
q = min(q, movingAverageMeanDistance / rayLength);
rayLength += max(MIN_STEP, minDistance);
if (rayLength > lightDistance) {
return clamp(q * (lightDistance + lightRadius) / lightRadius, 0.0, 1.0);
}
}
return 0.0;
}
in vec2[POINT_LIGHT_COUNT] pointLightDirections;
#endif
in vec2 worldCoordinates;
@ -66,35 +51,65 @@ in vec2 uvCoordinates;
out vec4 fragmentColor;
void main() {
#if LIGHT_COUNT > 0
vec3 colorAtPosition;
float startingDistance = getDistance(uvCoordinates, colorAtPosition);
vec3 ligthing = AMBIENT_LIGHT;
vec3 colorAtPosition;
float startingDistance = getDistance(uvCoordinates, colorAtPosition);
#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 ligthing = vec3(0.0);
for (int i = 0; i < LIGHT_COUNT; i++) {
Light light = lights[i];
float lightDistance = distance(light.center, worldCoordinates);
float q = INFINITY;
float rayLength = startingDistance;
float exponentialDecayDistance = rayLength;
vec2 direction = normalize(circleLightDirections[i]) / viewBoxSize;
float r = (lightDistance + light.radius) / LIGHT_DROP + 1.0;
vec3 lightColorAtPosition = light.value / (r * r);
for (int j = 0; j < 48; j++) {
if (rayLength > lightCenterDistance) {
ligthing += lightColorAtPosition * clamp(
q / circleLights[i].radius * (lightCenterDistance + 1.0), 0.0, 1.0
) * step(circleLights[i].radius, getDistance(uvCoordinates + direction * lightCenterDistance));
break;
}
float fractionOfLightArriving = getFractionOfLightArriving(
uvCoordinates, normalize(directions[i]), startingDistance,
lightDistance, light.radius
float minDistance = getDistance(uvCoordinates + direction * rayLength);
exponentialDecayDistance = (exponentialDecayDistance + minDistance) / 2.0;
q = min(q, exponentialDecayDistance / rayLength);
rayLength += max(MIN_STEP, minDistance);
}
}
#endif
#if POINT_LIGHT_COUNT > 0
for (int i = 0; i < POINT_LIGHT_COUNT; i++) {
float lightDistance = distance(pointLights[i].center, worldCoordinates);
vec3 lightColorAtPosition = mix(
pointLights[i].value,
vec3(0.0),
sqrt(clamp(lightDistance / pointLights[i].radius, 0.0, 1.0))
);
ligthing += lightColorAtPosition * fractionOfLightArriving;
float q = INFINITY;
float rayLength = startingDistance;
float exponentialDecayDistance = startingDistance;
vec2 direction = normalize(pointLightDirections[i]) / viewBoxSize;
for (int j = 0; j < 48; j++) {
if (rayLength > lightDistance) {
ligthing += lightColorAtPosition * step(0.0, q);
break;
}
float minDistance = getDistance(uvCoordinates + direction * rayLength);
exponentialDecayDistance = (exponentialDecayDistance + minDistance) / 2.0;
q = min(q, exponentialDecayDistance);
rayLength += max(MIN_STEP, minDistance);
}
}
fragmentColor = vec4(
colorAtPosition * (AMBIENT_LIGHT +
step(EDGE_SMOOTHING / 2.0, clamp(startingDistance, 0.0, EDGE_SMOOTHING)) * ligthing),
1.0
);
#else
fragmentColor = vec4(1.0);
#endif
fragmentColor = vec4(colorAtPosition * ligthing * clamp(startingDistance, 0.0, 1.0), 1.0);
}

View file

@ -2,7 +2,8 @@
precision mediump float;
#define LIGHT_COUNT {lightCount}
#define CIRCLE_LIGHT_COUNT {circleLightCount}
#define POINT_LIGHT_COUNT {pointLightCount}
uniform mat3 modelTransform;
uniform mat3 ndcToUv;
@ -13,14 +14,24 @@ in vec4 vertexPosition;
out vec2 worldCoordinates;
out vec2 uvCoordinates;
#if LIGHT_COUNT > 0
uniform struct Light {
#if CIRCLE_LIGHT_COUNT > 0
uniform struct CircleLight {
vec2 center;
float radius;
vec3 value;
}[LIGHT_COUNT] lights;
}[CIRCLE_LIGHT_COUNT] circleLights;
out vec2[LIGHT_COUNT] directions;
out vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
#endif
#if POINT_LIGHT_COUNT > 0
uniform struct PointLight {
vec2 center;
float radius;
vec3 value;
}[POINT_LIGHT_COUNT] pointLights;
out vec2[POINT_LIGHT_COUNT] pointLightDirections;
#endif
void main() {
@ -29,9 +40,15 @@ void main() {
worldCoordinates = (uvCoordinates1 * uvToWorld).xy;
uvCoordinates = (uvCoordinates1).xy;
#if LIGHT_COUNT > 0
for (int i = 0; i < LIGHT_COUNT; i++) {
directions[i] = lights[i].center - worldCoordinates;
#if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
circleLightDirections[i] = circleLights[i].center - worldCoordinates;
}
#endif
#if POINT_LIGHT_COUNT > 0
for (int i = 0; i < POINT_LIGHT_COUNT; i++) {
pointLightDirections[i] = pointLights[i].center - worldCoordinates;
}
#endif

View file

@ -1,7 +1,6 @@
import { CommandBroadcaster } from './commands/command-broadcaster';
import { BeforeRenderCommand } from './commands/types/before-render';
import { RenderCommand } from './commands/types/draw';
import { StepCommand } from './commands/types/step';
import { BeforeRenderCommand } from './drawing/commands/before-render';
import { StepCommand } from './physics/commands/step';
import { WebGl2Renderer } from './drawing/rendering/webgl2-renderer';
import { timeIt } from './helper/timing';
import { KeyboardListener } from './input/keyboard-listener';
@ -11,6 +10,7 @@ import { ObjectContainer } from './objects/object-container';
import { InfoText } from './objects/types/info-text';
import { createCharacter } from './objects/world/create-character';
import { createDungeon } from './objects/world/create-dungeon';
import { RenderCommand } from './drawing/commands/render';
export class Game {
private previousTime?: DOMHighResTimeStamp = null;

View file

@ -1,4 +1,4 @@
import { Command } from '../command';
import { Command } from '../../commands/command';
import { vec2 } from 'gl-matrix';
export class CursorMoveCommand extends Command {

View file

@ -1,4 +1,4 @@
import { Command } from '../command';
import { Command } from '../../commands/command';
export class KeyDownCommand extends Command {
public constructor(public readonly key?: string) {

View file

@ -1,4 +1,4 @@
import { Command } from '../command';
import { Command } from '../../commands/command';
export class KeyUpCommand extends Command {
public constructor(public readonly key?: string) {

View file

@ -1,5 +1,5 @@
import { Command } from '../command';
import { vec2 } from 'gl-matrix';
import { Command } from '../../commands/command';
export class PrimaryActionCommand extends Command {
public constructor(public readonly position?: vec2) {

View file

@ -1,5 +1,5 @@
import { Command } from '../command';
import { vec2 } from 'gl-matrix';
import { Command } from '../../commands/command';
export class SecondaryActionCommand extends Command {
public constructor(public readonly position?: vec2) {

View file

@ -1,5 +1,5 @@
import { Command } from '../command';
import { vec2 } from 'gl-matrix';
import { Command } from '../../commands/command';
export class SwipeCommand extends Command {
public constructor(public readonly delta?: vec2) {

View file

@ -1,4 +1,4 @@
import { Command } from '../command';
import { Command } from '../../commands/command';
export class ZoomCommand extends Command {
public constructor(public readonly factor?: number) {

View file

@ -1,6 +1,6 @@
import { CommandGenerator } from '../commands/command-generator';
import { KeyDownCommand } from '../commands/types/key-down';
import { KeyUpCommand } from '../commands/types/key-up';
import { KeyDownCommand } from './commands/key-down';
import { KeyUpCommand } from './commands/key-up';
export class KeyboardListener extends CommandGenerator {
constructor(target: Element) {

View file

@ -1,11 +1,11 @@
import { CommandGenerator } from '../commands/command-generator';
import { PrimaryActionCommand } from '../commands/types/primary-action';
import { SecondaryActionCommand } from '../commands/types/secondary-action';
import { SwipeCommand } from '../commands/types/swipe';
import { ZoomCommand } from '../commands/types/zoom';
import { vec2 } from 'gl-matrix';
import { clamp01 } from '../helper/clamp';
import { CursorMoveCommand } from '../commands/types/cursor-move-command';
import { CursorMoveCommand } from './commands/cursor-move-command';
import { PrimaryActionCommand } from './commands/primary-action';
import { SwipeCommand } from './commands/swipe';
import { SecondaryActionCommand } from './commands/secondary-action';
import { ZoomCommand } from './commands/zoom';
export class MouseListener extends CommandGenerator {
private previousPosition = vec2.create();

View file

@ -1,9 +1,9 @@
import { CommandGenerator } from '../commands/command-generator';
import { PrimaryActionCommand } from '../commands/types/primary-action';
import { SecondaryActionCommand } from '../commands/types/secondary-action';
import { SwipeCommand } from '../commands/types/swipe';
import { vec2 } from 'gl-matrix';
import { clamp01 } from '../helper/clamp';
import { PrimaryActionCommand } from './commands/primary-action';
import { SecondaryActionCommand } from './commands/secondary-action';
import { SwipeCommand } from './commands/swipe';
export class TouchListener extends CommandGenerator {
private previousPosition = vec2.create();

View file

@ -1,10 +1,10 @@
import { vec2 } from 'gl-matrix';
import { BeforeRenderCommand } from '../../commands/types/before-render';
import { CursorMoveCommand } from '../../commands/types/cursor-move-command';
import { MoveToCommand } from '../../commands/types/move-to';
import { ZoomCommand } from '../../commands/types/zoom';
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';
export class Camera extends GameObject {
private inViewArea = 1920 * 1080 * 5;

View file

@ -1,11 +1,11 @@
import { vec2 } from 'gl-matrix';
import { KeyDownCommand } from '../../commands/types/key-down';
import { KeyUpCommand } from '../../commands/types/key-up';
import { MoveToCommand } from '../../commands/types/move-to';
import { StepCommand } from '../../commands/types/step';
import { SwipeCommand } from '../../commands/types/swipe';
import { GameObject } from '../game-object';
import { Camera } from './camera';
import { StepCommand } from '../../physics/commands/step';
import { KeyDownCommand } from '../../input/commands/key-down';
import { KeyUpCommand } from '../../input/commands/key-up';
import { SwipeCommand } from '../../input/commands/swipe';
import { MoveToCommand } from '../../physics/commands/move-to';
export class Character extends GameObject {
private keysDown: Set<string> = new Set();

View file

@ -1,5 +1,5 @@
import { RenderCommand } from '../../commands/types/draw';
import { GameObject } from '../game-object';
import { RenderCommand } from '../../drawing/commands/render';
export class InfoText extends GameObject {
constructor() {

View file

@ -1,10 +1,8 @@
import { vec2, vec3 } from 'gl-matrix';
import { RenderCommand } from '../../commands/types/draw';
import { MoveToCommand } from '../../commands/types/move-to';
import { GameObject } from '../game-object';
import { CircleLight } from '../../drawing/drawables/lights/circle-light';
const range = 2000;
import { RenderCommand } from '../../drawing/commands/render';
import { MoveToCommand } from '../../physics/commands/move-to';
export class Lamp extends GameObject {
private light: CircleLight;

View file

@ -1,7 +1,7 @@
import { vec2 } from 'gl-matrix';
import { RenderCommand } from '../../commands/types/draw';
import { TunnelShape } from '../../drawing/drawables/primitives/tunnel-shape';
import { GameObject } from '../game-object';
import { RenderCommand } from '../../drawing/commands/render';
export interface Line {}

View file

@ -1,5 +1,5 @@
import { Command } from '../command';
import { vec2 } from 'gl-matrix';
import { Command } from '../../commands/command';
export class MoveToCommand extends Command {
public constructor(public readonly position?: vec2) {

View file

@ -1,4 +1,4 @@
import { Command } from '../command';
import { Command } from '../../commands/command';
export class StepCommand extends Command {
public constructor(