andras/sdf-2d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add WebGL compatibility

Browse source
This commit is contained in:
schmelczerandras 2020-09-22 16:41:59 +02:00
parent 3725f56c78
commit 1d4980ae28
29 changed files with 567 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/graphics/rendering/render-pass/render-pass.ts
View file

@ -1,11 +1,12 @@
import { DrawableDescriptor } from '../../../drawables/drawable-descriptor';
import { FrameBuffer } from '../../graphics-library/frame-buffer/frame-buffer';
import { UniformArrayAutoScalingProgram } from '../../graphics-library/program/uniform-array-autoscaling-program';
import { UniversalRenderingContext } from '../../graphics-library/universal-rendering-context';
export abstract class RenderPass {
protected program: UniformArrayAutoScalingProgram;
constructor(gl: WebGL2RenderingContext, protected frame: FrameBuffer) {
constructor(gl: UniversalRenderingContext, protected frame: FrameBuffer) {
this.program = new UniformArrayAutoScalingProgram(gl);
}

48
src/graphics/rendering/webgl2-renderer.ts → src/graphics/rendering/renderer-implementation.ts
View file

@ -5,9 +5,12 @@ import { LightDrawable } from '../../drawables/lights/light-drawable';
import { msToString } from '../../helper/ms-to-string';
import { DefaultFrameBuffer } from '../graphics-library/frame-buffer/default-frame-buffer';
import { IntermediateFrameBuffer } from '../graphics-library/frame-buffer/intermediate-frame-buffer';
import { getWebGl2Context } from '../graphics-library/helper/get-webgl2-context';
import { WebGlStopwatch } from '../graphics-library/helper/stopwatch';
import { ParallelCompiler } from '../graphics-library/parallel-compiler';
import {
getUniversalRenderingContext,
UniversalRenderingContext,
} from '../graphics-library/universal-rendering-context';
import { FpsAutoscaler } from './fps-autoscaler';
import { Insights } from './insights';
import { DistanceRenderPass } from './render-pass/distance-render-pass';
@ -15,14 +18,18 @@ import { LightsRenderPass } from './render-pass/lights-render-pass';
import { Renderer } from './renderer';
import { RuntimeSettings } from './settings/runtime-settings';
import { StartupSettings } from './settings/startup-settings';
import distanceFragmentShader100 from './shaders/distance-fs-100.glsl';
import distanceFragmentShader from './shaders/distance-fs.glsl';
import distanceVertexShader100 from './shaders/distance-vs-100.glsl';
import distanceVertexShader from './shaders/distance-vs.glsl';
import lightsFragmentShader100 from './shaders/shading-fs-100.glsl';
import lightsFragmentShader from './shaders/shading-fs.glsl';
import lightsVertexShader100 from './shaders/shading-vs-100.glsl';
import lightsVertexShader from './shaders/shading-vs.glsl';
import { UniformsProvider } from './uniforms-provider';
export class WebGl2Renderer implements Renderer {
private gl: WebGL2RenderingContext;
export class RendererImplementation implements Renderer {
private gl: UniversalRenderingContext;
private stopwatch?: WebGlStopwatch;
private uniformsProvider: UniformsProvider;
private distanceFieldFrameBuffer: IntermediateFrameBuffer;
@ -69,7 +76,7 @@ export class WebGl2Renderer implements Renderer {
private canvas: HTMLCanvasElement,
private descriptors: Array<DrawableDescriptor>
) {
this.gl = getWebGl2Context(canvas);
this.gl = getUniversalRenderingContext(canvas);
ParallelCompiler.initialize(this.gl);
@ -92,23 +99,30 @@ export class WebGl2Renderer implements Renderer {
palette: Array<vec3>,
settingsOverrides: Partial<StartupSettings>
): Promise<void> {
const settings = { ...WebGl2Renderer.defaultStartupSettings, ...settingsOverrides };
const settings = {
...RendererImplementation.defaultStartupSettings,
...settingsOverrides,
};
const promises: Array<Promise<void>> = [];
promises.push(
this.distancePass.initialize(
[distanceVertexShader, distanceFragmentShader],
this.descriptors.filter(WebGl2Renderer.hasSdf)
this.gl.isWebGL2
? [distanceVertexShader, distanceFragmentShader]
: [distanceVertexShader100, distanceFragmentShader100],
this.descriptors.filter(RendererImplementation.hasSdf)
)
);
promises.push(
this.lightsPass.initialize(
[lightsVertexShader, lightsFragmentShader],
this.descriptors.filter((d) => !WebGl2Renderer.hasSdf(d)),
this.gl.isWebGL2
? [lightsVertexShader, lightsFragmentShader]
: [lightsVertexShader100, lightsFragmentShader100],
this.descriptors.filter((d) => !RendererImplementation.hasSdf(d)),
{
palette: this.generatePaletteCode(palette),
colorCount: palette.length.toString(),
shadowTraceCount: settings.shadowTraceCount,
}
)
@ -134,7 +148,9 @@ export class WebGl2Renderer implements Renderer {
}
public addDrawable(drawable: Drawable): void {
if (WebGl2Renderer.hasSdf((drawable.constructor as typeof Drawable).descriptor)) {
if (
RendererImplementation.hasSdf((drawable.constructor as typeof Drawable).descriptor)
) {
this.distancePass.addDrawable(drawable);
} else {
this.lightsPass.addDrawable(drawable as LightDrawable);
@ -149,12 +165,12 @@ export class WebGl2Renderer implements Renderer {
const numberToGlslFloat = (n: number) => (Number.isInteger(n) ? `${n}.0` : `${n}`);
return palette
.map(
(c) =>
`vec3(${numberToGlslFloat(c[0])}, ${numberToGlslFloat(
c[1]
)}, ${numberToGlslFloat(c[2])})`
(c, i) =>
`${this.gl.isWebGL2 ? '' : `colors[${i}] = `}vec3(${numberToGlslFloat(
c[0]
)}, ${numberToGlslFloat(c[1])}, ${numberToGlslFloat(c[2])})`
)
.join(',\n');
.join(this.gl.isWebGL2 ? ',\n' : ';\n');
}
public renderDrawables() {

23
src/graphics/rendering/shaders/distance-fs-100.glsl Normal file
View file

@ -0,0 +1,23 @@
#version 100
precision lowp float;
#define SURFACE_OFFSET 0.001
uniform float maxMinDistance;
uniform float distanceNdcPixelSize;
varying vec2 position;
{macroDefinitions}
{declarations}
void main() {
float minDistance = maxMinDistance;
float color = 0.0;
{functionCalls}
// minDistance / 2.0: NDC to UV scale
gl_FragColor = vec4(minDistance / 2.0, color, 0.0, 0.0);
}

15
src/graphics/rendering/shaders/distance-vs-100.glsl Normal file
View file

@ -0,0 +1,15 @@
#version 100
precision lowp float;
uniform mat3 modelTransform;
uniform vec2 squareToAspectRatio;
attribute vec4 vertexPosition;
varying vec2 position;
void main() {
vec3 vertexPosition2D = vec3(vertexPosition.xy, 1.0) * modelTransform;
gl_Position = vec4(vertexPosition2D.xy, 0.0, 1.0);
position = vertexPosition2D.xy * squareToAspectRatio;
}

145
src/graphics/rendering/shaders/shading-fs-100.glsl Normal file
View file

@ -0,0 +1,145 @@
#version 100
precision lowp float;
#define INFINITY 1000.0
#define INTENSITY_INSIDE_RATIO 0.5
#define SHADOW_TRACE_COUNT {shadowTraceCount}
{macroDefinitions}
uniform vec2 squareToAspectRatioTimes2;
uniform float shadingNdcPixelSize;
uniform float shadowLength;
uniform sampler2D distanceTexture;
varying vec2 position;
varying vec2 uvCoordinates;
uniform vec3 ambientLight;
vec3 colors[{colorCount}];
float getDistance(in vec2 target, out vec3 color) {
vec4 values = texture2D(distanceTexture, target);
color = vec3(0.5);
return values[0];
}
float getDistance(in vec2 target) {
return texture2D(distanceTexture, target)[0];
}
float shadowTransparency(float startingDistance, float lightCenterDistance, vec2 direction) {
float rayLength = startingDistance;
for (int j = 0; j < SHADOW_TRACE_COUNT; j++) {
rayLength += getDistance(uvCoordinates + direction * rayLength);
}
return min(
1.0,
(
step(lightCenterDistance, rayLength) +
rayLength / (shadowLength * shadingNdcPixelSize)
) * 2.0
);
}
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
uniform vec2 circleLightCenters[CIRCLE_LIGHT_COUNT];
uniform float circleLightIntensities[CIRCLE_LIGHT_COUNT];
uniform vec3 circleLightColors[CIRCLE_LIGHT_COUNT];
varying vec2 circleLightDirections[CIRCLE_LIGHT_COUNT];
#endif
#endif
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
uniform vec2 flashlightCenters[FLASHLIGHT_COUNT];
uniform float flashlightIntensities[FLASHLIGHT_COUNT];
uniform vec3 flashlightColors[FLASHLIGHT_COUNT];
uniform vec2 flashlightDirections[FLASHLIGHT_COUNT];
varying vec2 flashlightActualDirections[FLASHLIGHT_COUNT];
float intensityInDirection(vec2 lightDirection, vec2 targetDirection) {
return smoothstep(0.0, 1.0, 10.0 * max(0.0, dot(targetDirection, lightDirection) - 0.9));
}
#endif
#endif
void main() {
vec3 lighting = ambientLight;
{palette};
vec3 colorAtPosition;
float startingDistance = getDistance(uvCoordinates, colorAtPosition);
if (startingDistance < 0.0) {
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
float lightCenterDistance = distance(circleLightCenters[i], position);
lighting += circleLightColors[i] / pow(
lightCenterDistance / (circleLightIntensities[i] * INTENSITY_INSIDE_RATIO) + 1.0, 2.0
);
}
#endif
#endif
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
float lightCenterDistance = distance(flashlightCenters[i], position);
lighting += intensityInDirection(
flashlightDirections[i],
normalize(flashlightActualDirections[i])
) * flashlightColors[i] / pow(
lightCenterDistance / (flashlightIntensities[i] * INTENSITY_INSIDE_RATIO) + 1.0, 2.0
);
}
#endif
#endif
} else {
colorAtPosition = vec3(1.0);
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
vec2 direction = normalize(circleLightDirections[i]) / squareToAspectRatioTimes2;
float lightCenterDistance = distance(circleLightCenters[i], position);
lighting += circleLightColors[i] / pow(
lightCenterDistance / circleLightIntensities[i] + 1.0, 2.0
) * shadowTransparency(startingDistance, lightCenterDistance, direction);
}
#endif
#endif
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
vec2 originalDirection = normalize(flashlightDirections[i]);
vec2 direction = originalDirection / squareToAspectRatioTimes2;
float lightCenterDistance = distance(flashlightCenters[i], position);
vec3 lightColorAtPosition = intensityInDirection(flashlightDirections[i], positionDirection) *
flashlightColors[i] / pow(
lightCenterDistance / flashlightIntensities[i] + 1.0, 2.0
);
if (length(lightColorAtPosition) < 0.01) {
continue;
}
lighting += lightColorAtPosition * shadowTransparency(startingDistance, lightCenterDistance, direction);
}
#endif
#endif
}
gl_FragColor = vec4(colorAtPosition * lighting, 1.0);
}

68
src/graphics/rendering/shaders/shading-fs.glsl
View file

@ -18,7 +18,7 @@ in vec2 uvCoordinates;
uniform vec3 ambientLight;
vec3[3] colors = vec3[](
vec3[colorCount] colors = vec3[](
{palette}
);
@ -50,25 +50,23 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
uniform struct CircleLight {
vec2 center;
float intensity;
vec3 color;
}[CIRCLE_LIGHT_COUNT] circleLights;
uniform vec2 circleLightCenters[CIRCLE_LIGHT_COUNT];
uniform float circleLightIntensities[CIRCLE_LIGHT_COUNT];
uniform vec3 circleLightColors[CIRCLE_LIGHT_COUNT];
in vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
vec3 colorInPosition(CircleLight light, out float lightCenterDistance) {
lightCenterDistance = distance(light.center, position);
return light.color / pow(
lightCenterDistance / light.intensity + 1.0, 2.0
vec3 colorInPosition(int lightIndex, out float lightCenterDistance) {
lightCenterDistance = distance(circleLightCenters[lightIndex], position);
return circleLightColors[lightIndex] / pow(
lightCenterDistance / circleLightIntensities[lightIndex] + 1.0, 2.0
);
}
vec3 colorInPositionInside(CircleLight light) {
float lightCenterDistance = distance(light.center, position);
return light.color / pow(
lightCenterDistance / (light.intensity * INTENSITY_INSIDE_RATIO) + 1.0, 2.0
vec3 colorInPositionInside(int lightIndex) {
float lightCenterDistance = distance(circleLightCenters[lightIndex], position);
return circleLightColors[lightIndex] / pow(
lightCenterDistance / (circleLightIntensities[lightIndex] * INTENSITY_INSIDE_RATIO) + 1.0, 2.0
);
}
#endif
@ -76,31 +74,31 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
uniform struct Flashlight {
vec2 center;
vec2 direction;
float intensity;
vec3 color;
}[FLASHLIGHT_COUNT] flashlights;
uniform vec2 flashlightCenters[FLASHLIGHT_COUNT];
uniform float flashlightIntensities[FLASHLIGHT_COUNT];
uniform vec3 flashlightColors[FLASHLIGHT_COUNT];
uniform vec2 flashlightDirections[FLASHLIGHT_COUNT];
in vec2[FLASHLIGHT_COUNT] flashlightDirections;
in vec2[FLASHLIGHT_COUNT] flashlightActualDirections;
float intensityInDirection(vec2 lightDirection, vec2 targetDirection) {
return smoothstep(0.0, 1.0, 10.0 * max(0.0, dot(targetDirection, lightDirection) - 0.9));
}
vec3 colorInPosition(Flashlight light, vec2 positionDirection, out float lightCenterDistance) {
lightCenterDistance = distance(light.center, position);
return intensityInDirection(light.direction, positionDirection) * light.color / pow(
lightCenterDistance / light.intensity + 1.0, 2.0
);
vec3 colorInPosition(int lightIndex, vec2 positionDirection, out float lightCenterDistance) {
lightCenterDistance = distance(flashlightCenters[lightIndex], position);
return intensityInDirection(flashlightDirections[lightIndex], positionDirection) *
flashlightColors[lightIndex] / pow(
lightCenterDistance / flashlightIntensities[lightIndex] + 1.0, 2.0
);
}
vec3 colorInPositionInside(Flashlight light, vec2 positionDirection) {
float lightCenterDistance = distance(light.center, position);
return intensityInDirection(light.direction, positionDirection) * light.color / pow(
lightCenterDistance / (light.intensity * INTENSITY_INSIDE_RATIO) + 1.0, 2.0
);
vec3 colorInPositionInside(int lightIndex, vec2 positionDirection) {
float lightCenterDistance = distance(flashlightCenters[lightIndex], position);
return intensityInDirection(flashlightDirections[lightIndex], positionDirection) *
flashlightColors[lightIndex] / pow(
lightCenterDistance / (flashlightIntensities[lightIndex] * INTENSITY_INSIDE_RATIO) + 1.0, 2.0
);
}
#endif
#endif
@ -116,7 +114,7 @@ void main() {
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
lighting += colorInPositionInside(circleLights[i]);
lighting += colorInPositionInside(i);
}
#endif
#endif
@ -124,7 +122,7 @@ void main() {
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
lighting += colorInPositionInside(flashlights[i], normalize(flashlightDirections[i]));
lighting += colorInPositionInside(i, normalize(flashlightActualDirections[i]));
}
#endif
#endif
@ -137,7 +135,7 @@ void main() {
vec2 direction = normalize(circleLightDirections[i]) / squareToAspectRatioTimes2;
float lightCenterDistance;
vec3 lightColorAtPosition = colorInPosition(circleLights[i], lightCenterDistance);
vec3 lightColorAtPosition = colorInPosition(i, lightCenterDistance);
lighting += lightColorAtPosition * shadowTransparency(startingDistance, lightCenterDistance, direction);
}
@ -151,7 +149,7 @@ void main() {
vec2 direction = originalDirection / squareToAspectRatioTimes2;
float lightCenterDistance;
vec3 lightColorAtPosition = colorInPosition(flashlights[i], originalDirection, lightCenterDistance);
vec3 lightColorAtPosition = colorInPosition(i, originalDirection, lightCenterDistance);
if (length(lightColorAtPosition) < 0.01) {
continue;

55
src/graphics/rendering/shaders/shading-vs-100.glsl Normal file
View file

@ -0,0 +1,55 @@
#version 100
precision lowp float;
{macroDefinitions}
uniform mat3 modelTransform;
attribute vec4 vertexPosition;
varying vec2 position;
varying vec2 uvCoordinates;
uniform vec2 squareToAspectRatio;
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
uniform vec2 circleLightCenters[CIRCLE_LIGHT_COUNT];
varying vec2 circleLightDirections[CIRCLE_LIGHT_COUNT];
#endif
#endif
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
uniform vec2 flashlightCenters[FLASHLIGHT_COUNT];
varying vec2 flashlightActualDirections[FLASHLIGHT_COUNT];
#endif
#endif
void main() {
vec3 vertexPosition2D = vec3(vertexPosition.xy, 1.0) * modelTransform;
gl_Position = vec4(vertexPosition2D.xy, 0.0, 1.0);
position = vertexPosition2D.xy * squareToAspectRatio;
uvCoordinates = (vertexPosition2D * mat3(
0.5, 0.0, 0.5,
0.0, 0.5, 0.5,
0.0, 0.0, 1.0
)).xy;
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
circleLightDirections[i] = circleLightCenters[i] - position;
}
#endif
#endif
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
flashlightActualDirections[i] = flashlightCenters[i] - position;
}
#endif
#endif
}

21
src/graphics/rendering/shaders/shading-vs.glsl
View file

@ -14,26 +14,15 @@ uniform vec2 squareToAspectRatio;
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
uniform struct CircleLight {
vec2 center;
float intensity;
vec3 color;
}[CIRCLE_LIGHT_COUNT] circleLights;
uniform vec2 circleLightCenters[CIRCLE_LIGHT_COUNT];
out vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
#endif
#endif
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
uniform struct Flashlight {
vec2 center;
vec2 direction;
float intensity;
vec3 color;
}[FLASHLIGHT_COUNT] flashlights;
out vec2[FLASHLIGHT_COUNT] flashlightDirections;
uniform vec2 flashlightCenters[FLASHLIGHT_COUNT];
out vec2[FLASHLIGHT_COUNT] flashlightActualDirections;
#endif
#endif
@ -51,7 +40,7 @@ void main() {
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
circleLightDirections[i] = circleLights[i].center - position;
circleLightDirections[i] = circleLightCenters[i] - position;
}
#endif
#endif
@ -59,7 +48,7 @@ void main() {
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
flashlightDirections[i] = flashlights[i].center - position;
flashlightActualDirections[i] = flashlightCenters[i] - position;
}
#endif
#endif

3
src/graphics/rendering/uniforms-provider.ts
View file

@ -1,4 +1,5 @@
import { mat2d, vec2, vec3 } from 'gl-matrix';
import { UniversalRenderingContext } from '../graphics-library/universal-rendering-context';
export class UniformsProvider {
public ambientLight = vec3.fromValues(0.25, 0.15, 0.25);
@ -12,7 +13,7 @@ export class UniformsProvider {
private squareToAspectRatio = vec2.create();
private uvToWorld = mat2d.create();
public constructor(private gl: WebGL2RenderingContext) {}
public constructor(private gl: UniversalRenderingContext) {}
public getUniforms(uniforms: any): any {
return {