andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Refactor rendering

Browse source
This commit is contained in:
schmelczerandras 2020-07-30 13:28:10 +02:00
parent 9b47d56d8f
commit c892ca2d01
38 changed files with 511 additions and 429 deletions
Download patch file Download diff file Expand all files Collapse all files

249
frontend/src/scripts/drawing/rendering/webgl2-renderer.ts
View file

@ -1,24 +1,28 @@
import { mat2d, vec2 } from 'gl-matrix';
import { InfoText } from '../../objects/types/info-text';
import caveFragmentShader from '../shaders/cave-distance-fs.glsl';
import lightsFragmentShader from '../shaders/lights-shading-fs.glsl';
import caveVertexShader from '../shaders/passthrough-distance-vs.glsl';
import lightsVertexShader from '../shaders/passthrough-shading-vs.glsl';
// import lightsShader from '../shaders/rainbow-shading-fs.glsl';
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 { IProgram } from '../graphics-library/program/i-program';
import { UniformArrayAutoScalingProgram } from '../graphics-library/program/uniform-array-autoscaling-program';
import { IRenderer } from './i-renderer';
import { Circle } from '../primitives/circle';
import { IPrimitive } from '../primitives/i-primitive';
import { Rectangle } from '../primitives/rectangle';
import { TunnelShape } from '../primitives/tunnel-shape';
import { Autoscaler } from './autoscaler';
import { ILight } from '../lights/i-light';
import { toPercent } from '../../helper/to-percent';
import { exponentialDecay } from '../../helper/exponential-decay';
import { settings } from './settings';
import { IRenderer } from '../i-renderer';
import { Circle } from '../drawables/primitives/circle';
import { IPrimitive } from '../drawables/primitives/i-primitive';
import { Rectangle } from '../drawables/primitives/rectangle';
import { ILight } from '../drawables/lights/i-light';
import { settings } from '../settings';
import { FpsAutoscaler } from './fps-autoscaler';
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';
export class WebGl2Renderer implements IRenderer {
private gl: WebGL2RenderingContext;
private qualityScaler: Autoscaler;
private stopwatch?: WebGlStopwatch;
private viewBox: Rectangle = new Rectangle();
@ -28,131 +32,51 @@ export class WebGl2Renderer implements IRenderer {
private distanceFieldFrameBuffer: IntermediateFrameBuffer;
private lightingFrameBuffer: DefaultFrameBuffer;
private distanceProgram: IProgram;
private lightingProgram: IProgram;
private distancePass: RenderingPass;
private lightingPass: RenderingPass;
private primitives: Array<IPrimitive>;
private lights: Array<ILight>;
private autoscaler: FpsAutoscaler;
constructor(
private canvas: HTMLCanvasElement,
private overlay: HTMLElement,
shaderSources: Array<[string, string]>
) {
this.getContext();
this.createPipeline(shaderSources);
this.setupAutoscaling();
constructor(private canvas: HTMLCanvasElement, private overlay: HTMLElement) {
this.gl = getWebGl2Context(canvas);
this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl);
this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl);
this.distancePass = new RenderingPass(
this.gl,
[caveVertexShader, caveFragmentShader],
[TunnelShape.descriptor],
this.distanceFieldFrameBuffer
);
this.lightingPass = new RenderingPass(
this.gl,
[lightsVertexShader, lightsFragmentShader],
[CircleLight.descriptor],
this.lightingFrameBuffer
);
this.autoscaler = new FpsAutoscaler([
this.lightingFrameBuffer,
this.distanceFieldFrameBuffer,
]);
try {
this.stopwatch = new WebGlStopwatch(this.gl);
} catch {}
}
private getContext() {
this.gl = this.canvas.getContext('webgl2');
if (!this.gl) {
throw new Error('WebGl2 is not supported');
}
}
private createPipeline(shaderSources: Array<[string, string]>) {
const distanceScale = settings.shaderUniforms.distanceScale;
this.distanceFieldFrameBuffer = new IntermediateFrameBuffer(this.gl);
this.distanceProgram = new UniformArrayAutoScalingProgram(
this.gl,
shaderSources[0][0],
shaderSources[0][1],
{ ...settings.shaderUniforms },
{
getValueFromUniforms: (v) => (v.lines ? v.lines.length / 2 : 0),
uniformArraySizeName: 'lineCount',
startingValue: 0,
enablingMacro: 'linesEnabled',
steps: 1,
maximumValue: 15,
}
);
this.lightingFrameBuffer = new DefaultFrameBuffer(this.gl);
this.lightingProgram = new UniformArrayAutoScalingProgram(
this.gl,
shaderSources[1][0],
shaderSources[1][1],
{ ...settings.shaderUniforms },
{
getValueFromUniforms: (v) => (v.lights ? v.lights.length : 0),
uniformArraySizeName: 'lightCount',
startingValue: 1,
enablingMacro: null,
steps: 1,
maximumValue: 8,
}
);
}
private setupAutoscaling() {
this.qualityScaler = new Autoscaler(
[
(v) => (this.lightingFrameBuffer.renderScale = v),
(v) => (this.distanceFieldFrameBuffer.renderScale = v),
],
settings.qualityScaling.scaleTargets,
settings.qualityScaling.startingTargetIndex,
settings.qualityScaling.scalingOptions
);
}
private timeSinceLastAdjusment = 0;
private exponentialDecayedDeltaTime = 0.0;
private configureQuality(deltaTime: DOMHighResTimeStamp) {
this.timeSinceLastAdjusment += deltaTime;
if (
this.timeSinceLastAdjusment >=
settings.qualityScaling.adjusmentRateInMilliseconds
) {
this.timeSinceLastAdjusment = 0;
this.exponentialDecayedDeltaTime = exponentialDecay(
this.exponentialDecayedDeltaTime,
deltaTime,
settings.qualityScaling.deltaTimeResponsiveness
);
if (
this.exponentialDecayedDeltaTime <=
settings.qualityScaling.targetDeltaTimeInMilliseconds -
settings.qualityScaling.deltaTimeError
) {
this.qualityScaler.increase();
} else if (
this.exponentialDecayedDeltaTime >
settings.qualityScaling.targetDeltaTimeInMilliseconds +
settings.qualityScaling.deltaTimeError
) {
this.qualityScaler.decrease();
}
}
InfoText.modifyRecord(
'quality',
`${toPercent(this.distanceFieldFrameBuffer.renderScale)}, ${toPercent(
this.lightingFrameBuffer.renderScale
)}`
);
}
public drawPrimitive(primitive: IPrimitive) {
this.primitives.push(primitive);
this.distancePass.addDrawable(primitive);
}
public drawLight(light: ILight) {
this.lights.push(light);
this.lightingPass.addDrawable(light);
}
public startFrame(deltaTime: DOMHighResTimeStamp): void {
this.configureQuality(deltaTime);
this.primitives = [];
this.lights = [];
this.autoscaler.autoscale(deltaTime);
this.stopwatch?.start();
this.distanceFieldFrameBuffer.setSize();
@ -160,84 +84,13 @@ export class WebGl2Renderer implements IRenderer {
}
public finishFrame() {
const uniforms: any = this.calculateOwnUniforms();
this.lights.forEach((l) => l.serializeToUniforms(uniforms));
this.distanceFieldFrameBuffer.bindAndClear();
const q = 1 / settings.tileMultiplier;
const uvSize = vec2.fromValues(q, q);
const possiblyOnScreenPrimitives = this.primitives.filter(
(p) => p.minimumDistance(this.viewCircle.center) < this.viewCircle.radius
) as Array<TunnelShape>;
InfoText.modifyRecord(
'nearby lines',
possiblyOnScreenPrimitives.length.toString()
);
const origin = vec2.transformMat2d(
vec2.create(),
vec2.fromValues(0, 0),
uniforms.uvToWorld
);
const firstCenter = vec2.transformMat2d(
vec2.create(),
vec2.fromValues(q, q),
uniforms.uvToWorld
);
vec2.subtract(firstCenter, firstCenter, origin);
const worldR = vec2.length(firstCenter);
uniforms.maxMinDistance = 2 * worldR;
let sumLineCount = 0;
for (let x = 0; x < 1; x += q) {
for (let y = 0; y < 1; y += q) {
const uvBottomLeft = vec2.fromValues(x, y);
this.distanceProgram.setDrawingRectangle(uvBottomLeft, uvSize);
const tileCenterWorldCoordinates = vec2.transformMat2d(
vec2.create(),
vec2.add(vec2.create(), uvBottomLeft, vec2.fromValues(q, q)),
uniforms.uvToWorld
);
const primitivesNearTile = possiblyOnScreenPrimitives.filter(
(p) => p.distance(tileCenterWorldCoordinates) < 2 * worldR
);
sumLineCount += primitivesNearTile.length;
uniforms.lines = [];
uniforms.radii = [];
primitivesNearTile.forEach((p) => p.serializeToUniforms(uniforms));
this.distanceProgram.bindAndSetUniforms(uniforms);
this.distanceProgram.draw();
}
}
InfoText.modifyRecord(
'lines',
(
sumLineCount /
settings.tileMultiplier /
settings.tileMultiplier
).toFixed(2)
);
this.lightingFrameBuffer.bindAndClear(
const uniforms = this.calculateOwnUniforms();
this.distancePass.render(uniforms, this.viewCircle);
this.lightingPass.render(
uniforms,
this.viewCircle,
this.distanceFieldFrameBuffer.colorTexture
);
this.lightingProgram.bindAndSetUniforms(uniforms);
this.lightingProgram.draw();
this.stopwatch?.stop();
}