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

Improve shadows and add antialiasing

Browse source
This commit is contained in:
schmelczerandras 2020-09-25 15:40:10 +02:00
parent 7d2c74d6a8
commit 40b9644171
13 changed files with 182 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/graphics/rendering/settings/default-startup-settings.ts Normal file
View file

@ -0,0 +1,7 @@
import { StartupSettings } from './startup-settings';
export const defaultStartupSettings: StartupSettings = {
shadowTraceCount: 16,
paletteSize: 256,
ignoreWebGL2: false,
};

6
src/graphics/rendering/settings/runtime-settings.ts
View file

@ -1,11 +1,11 @@
import { vec3 } from 'gl-matrix';
import { vec3, vec4 } from 'gl-matrix';
export interface RuntimeSettings {
enableHighDpiRendering: boolean;
tileMultiplier: number;
isWorldInverted: boolean;
shadowLength: number;
lightCutoffDistance: number;
colorPalette: Array<vec3>;
backgroundColor: vec3 | vec4;
colorPalette: Array<vec3 | vec4>;
ambientLight: vec3;
}

1
src/graphics/rendering/settings/startup-settings.ts
View file

@ -1,4 +1,5 @@
export interface StartupSettings {
shadowTraceCount: number;
paletteSize: number;
ignoreWebGL2: boolean;
}

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

@ -2,8 +2,6 @@
precision lowp float;
#define SURFACE_OFFSET 0.001
uniform float maxMinDistance;
uniform float distanceNdcPixelSize;
varying vec2 position;
@ -24,6 +22,5 @@ void main() {
minDistance = maxMinDistance;
#endif
// minDistance / 2.0: NDC to UV scale
gl_FragColor = vec4(minDistance / 2.0, color, 0.0, 0.0);
gl_FragColor = vec4(minDistance * 8.0, color, 0.0, 1.0);
}

5
src/graphics/rendering/shaders/distance-fs.glsl
View file

@ -2,8 +2,6 @@
precision lowp float;
#define SURFACE_OFFSET 0.001
uniform float maxMinDistance;
uniform float distanceNdcPixelSize;
in vec2 position;
@ -26,6 +24,5 @@ void main() {
minDistance = maxMinDistance;
#endif
// minDistance / 2.0: NDC to UV scale
fragmentColor = vec2(minDistance / 2.0, color);
fragmentColor = vec2(minDistance, color);
}

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

@ -2,47 +2,38 @@
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 vec2 squareToAspectRatioTimes2;
uniform vec3 ambientLight;
uniform vec4 backgroundColor;
uniform sampler2D distanceTexture;
uniform sampler2D palette;
varying vec2 position;
varying vec2 uvCoordinates;
uniform vec3 ambientLight;
float getDistance(in vec2 target, out vec3 color) {
float getDistance(in vec2 target, out vec4 color) {
vec4 values = texture2D(distanceTexture, target);
color = texture2D(palette, vec2(values[1], 0.0)).rgb;
return values[0];
color = texture2D(palette, vec2(values[1], 0.0));
return values[0] / 8.0;
}
float getDistance(in vec2 target) {
return texture2D(distanceTexture, target)[0];
return texture2D(distanceTexture, target)[0] / 8.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);
rayLength += max(0.0, getDistance(uvCoordinates + direction * rayLength));
}
return min(
1.0,
(
step(lightCenterDistance, rayLength) +
rayLength / (shadowLength * shadingNdcPixelSize)
) * 2.0
);
return min(1.0, pow(rayLength / lightCenterDistance, 0.3));
}
#ifdef CIRCLE_LIGHT_COUNT
@ -50,7 +41,6 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
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
@ -61,7 +51,6 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
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) {
@ -71,73 +60,70 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
#endif
void main() {
vec4 rgbaColorAtPosition;
float startingDistance = getDistance(uvCoordinates, rgbaColorAtPosition);
vec3 colorAtPosition = rgbaColorAtPosition.rgb;
vec3 lighting = ambientLight;
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
vec3 lightingInside = lighting * INTENSITY_INSIDE_RATIO;
#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++) {
float lightCenterDistance = distance(circleLightCenters[i], position);
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
vec2 direction = normalize(circleLightDirections[i]) / squareToAspectRatioTimes2;
vec3 lightColorAtPosition = circleLightColors[i] / pow(
lightCenterDistance / circleLightIntensities[i] + 1.0, 2.0
);
float lightCenterDistance = distance(circleLightCenters[i], position);
lighting += circleLightColors[i] / pow(
lightCenterDistance / circleLightIntensities[i] + 1.0, 2.0
) * shadowTransparency(startingDistance, lightCenterDistance, direction);
}
#endif
#endif
vec2 direction = normalize(circleLightDirections[i]) / squareToAspectRatioTimes2;
lighting += lightColorAtPosition * shadowTransparency(
startingDistance,
lightCenterDistance,
direction
);
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
vec2 originalDirection = normalize(flashlightDirections[i]);
vec2 direction = originalDirection / squareToAspectRatioTimes2;
lightingInside += lightColorAtPosition;
}
#endif
#endif
float lightCenterDistance = distance(flashlightCenters[i], position);
vec3 lightColorAtPosition = intensityInDirection(flashlightDirections[i], positionDirection) *
flashlightColors[i] / pow(
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
vec2 originalDirection = normalize(flashlightDirections[i]);
vec3 lightColorAtPosition = colorInPosition(i, originalDirection, lightCenterDistance);
float lightCenterDistance = intensityInDirection(flashlightDirections[i], positionDirection)
* flashlightColors[lightIndex] / pow(
lightCenterDistance / flashlightIntensities[i] + 1.0, 2.0
);
if (length(lightColorAtPosition) < 0.01) {
continue;
}
lighting += lightColorAtPosition * shadowTransparency(startingDistance, lightCenterDistance, direction);
vec2 direction = originalDirection / squareToAspectRatioTimes2
if (length(lightColorAtPosition) < 0.0) {
continue;
}
#endif
#endif
lighting += lightColorAtPosition * shadowTransparency(
startingDistance,
lightCenterDistance,
direction
);
lightingInside += lightColorAtPosition;
}
gl_FragColor = vec4(colorAtPosition * lighting, 1.0);
#endif
#endif
vec3 outsideColor = backgroundColor.rgb * lighting;
vec3 insideColor = colorAtPosition * lightingInside;
float edge = clamp(startingDistance / shadingNdcPixelSize, 0.0, 1.0);
vec3 antialiasedColor = mix(insideColor, outsideColor, edge);
gl_FragColor = vec4(
antialiasedColor,
mix(rgbaColorAtPosition.a, backgroundColor.a, step(0.0, startingDistance))
);
}

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

@ -2,26 +2,25 @@
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 vec2 squareToAspectRatioTimes2;
uniform vec3 ambientLight;
uniform vec4 backgroundColor;
uniform sampler2D distanceTexture;
uniform sampler2D palette;
in vec2 position;
in vec2 uvCoordinates;
uniform vec3 ambientLight;
float getDistance(in vec2 target, out vec3 color) {
float getDistance(in vec2 target, out vec4 color) {
vec4 values = texture(distanceTexture, target);
color = texture(palette, vec2(values[1], 0.0)).rgb;
color = texture(palette, vec2(values[1], 0.0));
return values[0];
}
@ -31,18 +30,10 @@ float getDistance(in vec2 target) {
float shadowTransparency(float startingDistance, float lightCenterDistance, vec2 direction) {
float rayLength = startingDistance;
for (int j = 0; j < SHADOW_TRACE_COUNT; j++) {
rayLength += max(0.0, getDistance(uvCoordinates + direction * rayLength));
}
return min(
1.0,
(
step(lightCenterDistance, rayLength) +
rayLength / (shadowLength * shadingNdcPixelSize)
) * 2.0
);
return min(1.0, pow(rayLength / lightCenterDistance, 0.3));
}
#ifdef CIRCLE_LIGHT_COUNT
@ -51,21 +42,14 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
uniform float circleLightIntensities[CIRCLE_LIGHT_COUNT];
uniform vec3 circleLightColors[CIRCLE_LIGHT_COUNT];
in vec2[CIRCLE_LIGHT_COUNT] circleLightDirections;
in vec2 circleLightDirections[CIRCLE_LIGHT_COUNT];
vec3 colorInPosition(int lightIndex, out float lightCenterDistance) {
lightCenterDistance = max(0.0, distance(circleLightCenters[lightIndex], position));
lightCenterDistance = distance(circleLightCenters[lightIndex], position);
return circleLightColors[lightIndex] / pow(
lightCenterDistance / circleLightIntensities[lightIndex] + 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
#endif
@ -76,7 +60,7 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
uniform vec3 flashlightColors[FLASHLIGHT_COUNT];
uniform vec2 flashlightDirections[FLASHLIGHT_COUNT];
in vec2[FLASHLIGHT_COUNT] flashlightActualDirections;
in 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));
@ -89,74 +73,69 @@ float shadowTransparency(float startingDistance, float lightCenterDistance, vec2
lightCenterDistance / flashlightIntensities[lightIndex] + 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
out vec4 fragmentColor;
void main() {
vec4 rgbaColorAtPosition;
float startingDistance = getDistance(uvCoordinates, rgbaColorAtPosition);
vec3 colorAtPosition = rgbaColorAtPosition.rgb;
vec3 lighting = ambientLight;
vec3 lightingInside = lighting * INTENSITY_INSIDE_RATIO;
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++) {
lighting += colorInPositionInside(i);
}
#endif
#endif
#ifdef CIRCLE_LIGHT_COUNT
#if CIRCLE_LIGHT_COUNT > 0
for (int i = 0; i < CIRCLE_LIGHT_COUNT; i++) {
float lightCenterDistance;
vec3 lightColorAtPosition = colorInPosition(i, lightCenterDistance);
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
lighting += colorInPositionInside(i, normalize(flashlightActualDirections[i]));
}
#endif
#endif
} else {
colorAtPosition = vec3(1.0);
vec2 direction = normalize(circleLightDirections[i]) / squareToAspectRatioTimes2;
lighting += lightColorAtPosition * shadowTransparency(
startingDistance,
lightCenterDistance,
direction
);
#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;
vec3 lightColorAtPosition = colorInPosition(i, lightCenterDistance);
lighting += lightColorAtPosition * 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;
vec3 lightColorAtPosition = colorInPosition(i, originalDirection, lightCenterDistance);
if (length(lightColorAtPosition) < 0.01) {
continue;
}
lighting += lightColorAtPosition * shadowTransparency(startingDistance, lightCenterDistance, direction);
}
#endif
#endif
lightingInside += lightColorAtPosition;
}
fragmentColor = vec4(colorAtPosition * lighting, 1.0);
#endif
#endif
#ifdef FLASHLIGHT_COUNT
#if FLASHLIGHT_COUNT > 0
for (int i = 0; i < FLASHLIGHT_COUNT; i++) {
vec2 originalDirection = normalize(flashlightDirections[i]);
float lightCenterDistance;
vec3 lightColorAtPosition = colorInPosition(i, originalDirection, lightCenterDistance);
vec2 direction = originalDirection / squareToAspectRatioTimes2
if (length(lightColorAtPosition) < 0.0) {
continue;
}
lighting += lightColorAtPosition * shadowTransparency(
startingDistance,
lightCenterDistance,
direction
);
lightingInside += lightColorAtPosition;
}
#endif
#endif
vec3 outsideColor = backgroundColor.rgb * lighting;
vec3 insideColor = colorAtPosition * lightingInside;
float edge = clamp(startingDistance / shadingNdcPixelSize, 0.0, 1.0);
vec3 antialiasedColor = mix(insideColor, outsideColor, edge);
fragmentColor = vec4(
antialiasedColor,
mix(rgbaColorAtPosition.a, backgroundColor.a, step(0.0, startingDistance))
);
}