Gouging a simpler project out of the larger project.

This commit is contained in:
Rezmason
2023-08-22 10:08:48 -07:00
parent 91201830f8
commit c231935475
168 changed files with 21 additions and 5613 deletions

View File

@@ -1,20 +0,0 @@
precision mediump float;
uniform sampler2D tex;
uniform sampler2D bloomTex;
uniform sampler2D backgroundTex;
varying vec2 vUV;
vec4 getBrightness(vec2 uv) {
vec4 primary = texture2D(tex, uv);
vec4 bloom = texture2D(bloomTex, uv);
return primary + bloom;
}
void main() {
vec3 bgColor = texture2D(backgroundTex, vUV).rgb;
// Combine the texture and bloom, then blow it out to reveal more of the image
vec4 brightness = getBrightness(vUV);
gl_FragColor = vec4(bgColor * (brightness.r + brightness.g * 2.0), 1.0);
}

View File

@@ -1,38 +0,0 @@
precision mediump float;
varying vec2 vUV;
uniform float aspectRatio, cameraAspectRatio;
uniform float time;
uniform vec3 clicks[5];
uniform sampler2D tex;
uniform sampler2D bloomTex;
uniform sampler2D cameraTex;
void main() {
float intensity = 0.0;
for (int i = 0; i < 5; i++) {
vec3 click = clicks[i];
float distanceToClick = length((click.xy - vUV) * vec2(aspectRatio, 1.0));
float elapsedTime = clamp(time - click.z, -100.0, 100.0);
float t = distanceToClick - elapsedTime * 0.5;
intensity += sin(t * 40.0) / t;
}
intensity *= 0.2;
vec2 uv = vUV + intensity * 0.001;
float webcamAspectAdjust = cameraAspectRatio / aspectRatio;
vec2 webcamTransform = vec2(1.0, webcamAspectAdjust);
if (webcamAspectAdjust > 1.0) {
webcamTransform = vec2(1.0 / webcamAspectAdjust, 1.0);
}
vec2 webcamUV = ((uv - 0.5) * webcamTransform) + 0.5;
vec3 webcam = texture2D(cameraTex, 1.0 - webcamUV).rgb;
webcam *= mix(vec3(0.1, 0.3, 0.0), vec3(0.9, 1.0, 0.7), 1.0 - length(vUV - 0.5) * 1.5);
vec3 code = mix(webcam, vec3(0.7, 1.0, 0.4), texture2D(tex, uv).r * (1.0 + intensity * 0.3) + texture2D(bloomTex, uv).r * 0.5);
gl_FragColor = vec4(code, 1.0);
}

View File

@@ -1,42 +0,0 @@
precision mediump float;
uniform sampler2D quiltTexture;
uniform float pitch;
uniform float tilt;
uniform float center;
uniform float invView;
uniform float flipImageX;
uniform float flipImageY;
uniform float subp;
uniform float tileX;
uniform float tileY;
uniform vec2 quiltViewPortion;
varying vec2 vUV;
vec2 texArr(vec3 uvz) {
float z = floor(uvz.z * tileX * tileY);
float x = (mod(z, tileX) + uvz.x) / tileX;
float y = (floor(z / tileX) + uvz.y) / tileY;
return vec2(x, y) * quiltViewPortion;
}
float remap(float value, float from1, float to1, float from2, float to2) {
return (value - from1) / (to1 - from1) * (to2 - from2) + from2;
}
void main() {
vec4 rgb[3];
vec3 nuv = vec3(vUV.xy, 0.0);
// Flip UVs if necessary
nuv.x = (1.0 - flipImageX) * nuv.x + flipImageX * (1.0 - nuv.x);
nuv.y = (1.0 - flipImageY) * nuv.y + flipImageY * (1.0 - nuv.y);
for (int i = 0; i < 3; i++) {
nuv.z = (vUV.x + float(i) * subp + vUV.y * tilt) * pitch - center;
nuv.z = mod(nuv.z + ceil(abs(nuv.z)), 1.0);
nuv.z = (1.0 - invView) * nuv.z + invView * (1.0 - nuv.z);
rgb[i] = texture2D(quiltTexture, texArr(vec3(vUV.x, vUV.y, nuv.z)));
}
gl_FragColor = vec4(rgb[0].r, rgb[1].g, rgb[2].b, 1);
}

View File

@@ -1,40 +0,0 @@
precision mediump float;
#define PI 3.14159265359
uniform sampler2D tex;
uniform sampler2D bloomTex;
uniform sampler2D stripeTex;
uniform float ditherMagnitude;
uniform float time;
uniform vec3 backgroundColor, cursorColor, glintColor;
uniform float cursorIntensity, glintIntensity;
varying vec2 vUV;
highp float rand( const in vec2 uv, const in float t ) {
const highp float a = 12.9898, b = 78.233, c = 43758.5453;
highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
return fract(sin(sn) * c + t);
}
vec4 getBrightness(vec2 uv) {
vec4 primary = texture2D(tex, uv);
vec4 bloom = texture2D(bloomTex, uv);
return primary + bloom;
}
void main() {
vec3 color = texture2D(stripeTex, vUV).rgb;
vec4 brightness = getBrightness(vUV);
// Dither: subtract a random value from the brightness
brightness -= rand( gl_FragCoord.xy, time ) * ditherMagnitude / 3.0;
gl_FragColor = vec4(
color * brightness.r
+ min(cursorColor * cursorIntensity * brightness.g, vec3(1.0))
+ min(glintColor * glintIntensity * brightness.b, vec3(1.0))
+ backgroundColor,
1.0
);
}

View File

@@ -1,45 +0,0 @@
const ONE_OVER_SQRT_2PI = 0.39894;
struct Config {
bloomRadius : f32,
direction : vec2<f32>,
};
@group(0) @binding(0) var<uniform> config : Config;
@group(0) @binding(1) var linearSampler : sampler;
@group(0) @binding(2) var tex : texture_2d<f32>;
@group(0) @binding(3) var outputTex : texture_storage_2d<rgba8unorm, write>;
struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>,
};
fn gaussianPDF(x : f32) -> f32 {
return ONE_OVER_SQRT_2PI * exp( -0.5 *
( x * x ) / ( config.bloomRadius * config.bloomRadius )
) / config.bloomRadius;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
var coord = vec2<u32>(input.id.xy);
var outputSize = textureDimensions(outputTex);
if (coord.x >= outputSize.x) {
return;
}
var uv = (vec2<f32>(coord) + 0.5) / vec2<f32>(outputSize);
var uvOffset = config.direction / vec2<f32>(outputSize);
var weightSum = gaussianPDF(0.0);
var sum = textureSampleLevel( tex, linearSampler, uv, 0.0) * weightSum;
for (var x : f32 = 1.0; x < config.bloomRadius; x += 1.0) {
var weight = gaussianPDF(x);
sum += textureSampleLevel( tex, linearSampler, uv + uvOffset * x, 0.0) * weight;
sum += textureSampleLevel( tex, linearSampler, uv - uvOffset * x, 0.0) * weight;
weightSum += weight * 2.0;
}
textureStore(outputTex, coord, sum / weightSum);
}

View File

@@ -1,63 +0,0 @@
struct Config {
pyramidHeight : f32,
bloomStrength : f32
};
@group(0) @binding(0) var<uniform> config : Config;
@group(0) @binding(1) var linearSampler : sampler;
@group(0) @binding(2) var tex1 : texture_2d<f32>;
@group(0) @binding(3) var tex2 : texture_2d<f32>;
@group(0) @binding(4) var tex3 : texture_2d<f32>;
@group(0) @binding(5) var tex4 : texture_2d<f32>;
@group(0) @binding(6) var outputTex : texture_storage_2d<rgba8unorm, write>;
struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>,
};
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
var coord = vec2<u32>(input.id.xy);
var outputSize = textureDimensions(outputTex);
if (coord.x >= outputSize.x) {
return;
}
var uv = (vec2<f32>(coord) + 0.5) / vec2<f32>(outputSize);
var sum = vec4<f32>(0.0);
// for (var i = 0.0; i < config.pyramidHeight; i += 1.0) {
// var weight = (1.0 - i / config.pyramidHeight);
// weight = pow(weight + 0.5, 1.0 / 3.0);
// sum += textureSampleLevel( tex, linearSampler, uv, i + 1.0 ) * weight;
// }
{
var i = 0.0;
var weight = (1.0 - i / config.pyramidHeight);
weight = pow(weight + 0.5, 1.0 / 3.0);
sum += textureSampleLevel( tex1, linearSampler, uv, i + 1.0 ) * weight;
}
{
var i = 1.0;
var weight = (1.0 - i / config.pyramidHeight);
weight = pow(weight + 0.5, 1.0 / 3.0);
sum += textureSampleLevel( tex2, linearSampler, uv, i + 1.0 ) * weight;
}
{
var i = 2.0;
var weight = (1.0 - i / config.pyramidHeight);
weight = pow(weight + 0.5, 1.0 / 3.0);
sum += textureSampleLevel( tex3, linearSampler, uv, i + 1.0 ) * weight;
}
{
var i = 3.0;
var weight = (1.0 - i / config.pyramidHeight);
weight = pow(weight + 0.5, 1.0 / 3.0);
sum += textureSampleLevel( tex4, linearSampler, uv, i + 1.0 ) * weight;
}
textureStore(outputTex, coord, sum * config.bloomStrength);
}

View File

@@ -1,19 +0,0 @@
@group(0) @binding(0) var nearestSampler : sampler;
@group(0) @binding(1) var tex : texture_2d<f32>;
struct VertOutput {
@builtin(position) Position : vec4<f32>,
@location(0) uv : vec2<f32>,
};
@vertex fn vertMain(@builtin(vertex_index) index : u32) -> VertOutput {
var uv = vec2<f32>(f32(index % 2u), f32((index + 1u) % 6u / 3u));
var position = vec4<f32>(uv * 2.0 - 1.0, 1.0, 1.0);
return VertOutput(position, uv);
}
@fragment fn fragMain(input : VertOutput) -> @location(0) vec4<f32> {
var uv = input.uv;
uv.y = 1.0 - uv.y;
return textureSample( tex, nearestSampler, uv );
}

View File

@@ -1,42 +0,0 @@
struct Config {
unused : f32,
};
@group(0) @binding(0) var<uniform> config : Config;
@group(0) @binding(1) var linearSampler : sampler;
@group(0) @binding(2) var tex : texture_2d<f32>;
@group(0) @binding(3) var bloomTex : texture_2d<f32>;
@group(0) @binding(4) var backgroundTex : texture_2d<f32>;
@group(0) @binding(5) var outputTex : texture_storage_2d<rgba8unorm, write>;
struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>,
};
fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var primary = textureSampleLevel(tex, linearSampler, uv, 0.0);
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0);
return primary + bloom;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
var unused = config.unused;
// Resolve the invocation ID to a texel coordinate
var coord = vec2<u32>(input.id.xy);
var screenSize = textureDimensions(tex);
if (coord.x >= screenSize.x) {
return;
}
var uv = vec2<f32>(coord) / vec2<f32>(screenSize);
var bgColor = textureSampleLevel( backgroundTex, linearSampler, vec2<f32>(uv.x, 1.0 - uv.y), 0.0 ).rgb;
// Combine the texture and bloom, then blow it out to reveal more of the image
var brightness = getBrightness(uv);
textureStore(outputTex, coord, vec4<f32>(bgColor * (brightness.r + brightness.g * 2.0), 1.0));
}

View File

@@ -1,80 +0,0 @@
struct Config {
unused : f32,
};
struct Time {
seconds : f32,
frames : i32,
};
struct Touches {
touches : array<vec4<f32>, 5>,
};
struct Scene {
screenAspectRatio : f32,
cameraAspectRatio : f32,
};
@group(0) @binding(0) var<uniform> config : Config;
@group(0) @binding(1) var<uniform> time : Time;
@group(0) @binding(2) var<uniform> scene : Scene;
@group(0) @binding(3) var<uniform> touches : Touches;
@group(0) @binding(4) var linearSampler : sampler;
@group(0) @binding(5) var tex : texture_2d<f32>;
@group(0) @binding(6) var bloomTex : texture_2d<f32>;
@group(0) @binding(7) var cameraTex : texture_2d<f32>;
@group(0) @binding(8) var outputTex : texture_storage_2d<rgba8unorm, write>;
struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>,
};
fn getBrightness(uv : vec2<f32>, intensity : f32) -> vec4<f32> {
var primary = textureSampleLevel(tex, linearSampler, uv, 0.0);
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0);
return primary * (1.0 + intensity * 0.3) + bloom * 0.5;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
var unused = config.unused;
// Resolve the invocation ID to a texel coordinate
var coord = vec2<u32>(input.id.xy);
var screenSize = textureDimensions(tex);
if (coord.x >= screenSize.x) {
return;
}
var uv = vec2<f32>(coord) / vec2<f32>(screenSize);
var intensity = 0.0;
for (var i = 0; i < 5; i++) {
var touch = touches.touches[i];
touch.y = 1.0 - touch.y;
var distanceToClick = length((touch.xy - uv) * vec2(scene.screenAspectRatio, 1.0));
var elapsedTime = clamp(time.seconds - touch.z, -100.0, 100.0);
var t = distanceToClick - elapsedTime * 0.5;
intensity += sin(t * 40.0) / t;
}
intensity *= 0.2;
var rippledUV = uv + intensity * 0.001;
var webcamAspectAdjust = scene.cameraAspectRatio / scene.screenAspectRatio;
var webcamTransform = vec2<f32>(1.0, webcamAspectAdjust);
if (webcamAspectAdjust > 1.0) {
webcamTransform = vec2<f32>(1.0 / webcamAspectAdjust, 1.0);
}
var webcamUV = ((rippledUV - 0.5) * webcamTransform) + 0.5;
var webcam = textureSampleLevel(cameraTex, linearSampler, webcamUV, 0.0).rgb;
webcam *= mix(vec3<f32>(0.1, 0.3, 0.0), vec3<f32>(0.9, 1.0, 0.7), 1.0 - length(uv - 0.5) * 1.5);
var code = mix(webcam, vec3<f32>(0.7, 1.0, 0.4), getBrightness(rippledUV, intensity).r);
textureStore(outputTex, coord, vec4<f32>(code, 1.0));
}

View File

@@ -1,76 +0,0 @@
struct Config {
ditherMagnitude : f32,
backgroundColor : vec3<f32>,
cursorColor : vec3<f32>,
glintColor : vec3<f32>,
cursorIntensity : f32,
glintIntensity : f32,
};
struct Palette {
colors : array<vec3<f32>, 512>,
};
struct Time {
seconds : f32,
frames : i32,
};
@group(0) @binding(0) var<uniform> config : Config;
@group(0) @binding(1) var<uniform> palette : Palette;
@group(0) @binding(2) var<uniform> time : Time;
@group(0) @binding(3) var linearSampler : sampler;
@group(0) @binding(4) var tex : texture_2d<f32>;
@group(0) @binding(5) var bloomTex : texture_2d<f32>;
@group(0) @binding(6) var outputTex : texture_storage_2d<rgba8unorm, write>;
struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>,
};
const PI : f32 = 3.14159265359;
fn randomFloat( uv : vec2<f32> ) -> f32 {
let a = 12.9898;
let b = 78.233;
let c = 43758.5453;
let dt = dot( uv, vec2<f32>( a, b ) );
let sn = dt % PI;
return fract(sin(sn) * c);
}
fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var primary = textureSampleLevel(tex, linearSampler, uv, 0.0);
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0);
return primary + bloom;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
// Resolve the invocation ID to a texel coordinate
var coord = vec2<u32>(input.id.xy);
var screenSize = textureDimensions(tex);
if (coord.x >= screenSize.x) {
return;
}
var uv = vec2<f32>(coord) / vec2<f32>(screenSize);
var brightness = getBrightness(uv);
// Dither: subtract a random value from the brightness
brightness -= randomFloat( uv + vec2<f32>(time.seconds) ) * config.ditherMagnitude / 3.0;
// Map the brightness to a position in the palette texture
var paletteIndex = clamp(i32(brightness.r * 512.0), 0, 511);
textureStore(outputTex, coord, vec4<f32>(
palette.colors[paletteIndex]
+ min(config.cursorColor * config.cursorIntensity * brightness.g, vec3<f32>(1.0))
+ min(config.glintColor * config.glintIntensity * brightness.b, vec3<f32>(1.0))
+ config.backgroundColor,
1.0
));
}

View File

@@ -1,582 +0,0 @@
// This shader module is the star of the show.
// It is where the cell states update and the symbols get drawn to the screen.
struct Config {
// common properties used for compute and rendering
animationSpeed : f32,
glyphSequenceLength : f32,
glyphTextureGridSize : vec2<i32>,
glyphHeightToWidth : f32,
gridSize : vec2<f32>,
showDebugView : i32,
// compute-specific properties
brightnessThreshold : f32,
brightnessOverride : f32,
brightnessDecay : f32,
cursorBrightness : f32,
cycleSpeed : f32,
cycleFrameSkip : i32,
fallSpeed : f32,
hasThunder : i32,
raindropLength : f32,
rippleScale : f32,
rippleSpeed : f32,
rippleThickness : f32,
rippleType : i32,
// render-specific properties
msdfPxRange : f32,
forwardSpeed : f32,
baseBrightness : f32,
baseContrast : f32,
glintBrightness : f32,
glintContrast : f32,
hasBaseTexture: i32,
hasGlintTexture: i32,
glyphVerticalSpacing : f32,
glyphEdgeCrop : f32,
isPolar : i32,
density : f32,
slantScale : f32,
slantVec : vec2<f32>,
volumetric : i32,
isolateCursor : i32,
isolateGlint : i32,
loops : i32,
skipIntro : i32,
highPassThreshold : f32,
};
// The properties that change over time get their own buffer.
struct Time {
seconds : f32,
frames : i32,
};
// The properties related to the size of the canvas get their own buffer.
struct Scene {
screenSize : vec2<f32>,
camera : mat4x4<f32>,
transform : mat4x4<f32>,
};
struct Cell {
raindrop : vec4<f32>,
symbol : vec4<f32>,
effect : vec4<f32>,
};
// The array of cells that the compute shader updates, and the fragment shader draws.
struct CellData {
cells: array<Cell>,
};
struct IntroCell {
progress : vec4<f32>,
};
// The array of cells that the compute shader updates, and the fragment shader draws.
struct IntroCellData {
cells: array<IntroCell>,
};
// Shared bindings
@group(0) @binding(0) var<uniform> config : Config;
@group(0) @binding(1) var<uniform> time : Time;
// Intro-specific bindings
@group(0) @binding(2) var<storage, read_write> introCells_RW : IntroCellData;
// Compute-specific bindings
@group(0) @binding(2) var<storage, read_write> cells_RW : CellData;
@group(0) @binding(3) var<storage, read_write> introCells_RO : IntroCellData;
// Render-specific bindings
@group(0) @binding(2) var<uniform> scene : Scene;
@group(0) @binding(3) var linearSampler : sampler;
@group(0) @binding(4) var glyphMSDFTexture : texture_2d<f32>;
@group(0) @binding(5) var glintMSDFTexture : texture_2d<f32>;
@group(0) @binding(6) var baseTexture : texture_2d<f32>;
@group(0) @binding(7) var glintTexture : texture_2d<f32>;
@group(0) @binding(8) var<storage, read> cells_RO : CellData;
// Shader params
struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>,
};
struct VertInput {
@builtin(vertex_index) index : u32,
};
struct VertOutput {
@builtin(position) Position : vec4<f32>,
@location(0) uv : vec2<f32>,
@location(1) quadDepth : f32,
};
struct FragOutput {
@location(0) color : vec4<f32>,
@location(1) highPassColor : vec4<f32>,
};
// Constants
const NUM_VERTICES_PER_QUAD : i32 = 6; // 2 * 3
const PI : f32 = 3.14159265359;
const TWO_PI : f32 = 6.28318530718;
const SQRT_2 : f32 = 1.4142135623730951;
const SQRT_5 : f32 = 2.23606797749979;
// Helper functions for generating randomness, borrowed from elsewhere
fn randomFloat( uv : vec2<f32> ) -> f32 {
let a = 12.9898;
let b = 78.233;
let c = 43758.5453;
let dt = dot( uv, vec2<f32>( a, b ) );
let sn = dt % PI;
return fract(sin(sn) * c);
}
fn randomVec2( uv : vec2<f32> ) -> vec2<f32> {
return fract(vec2<f32>(sin(uv.x * 591.32 + uv.y * 154.077), cos(uv.x * 391.32 + uv.y * 49.077)));
}
fn wobble(x : f32) -> f32 {
return x + 0.3 * sin(SQRT_2 * x) + 0.2 * sin(SQRT_5 * x);
}
// Compute shader core functions
// This is the code rain's key underlying concept.
// It's why glyphs that share a column are lit simultaneously, and are brighter toward the bottom.
// It's also why those bright areas are truncated into raindrops.
fn getRainBrightness(simTime : f32, glyphPos : vec2<f32>) -> f32 {
var columnTimeOffset = randomFloat(vec2<f32>(glyphPos.x, 0.0)) * 1000.0;
var columnSpeedOffset = randomFloat(vec2<f32>(glyphPos.x + 0.1, 0.0)) * 0.5 + 0.5;
if (bool(config.loops)) {
columnSpeedOffset = 0.5;
}
var columnTime = columnTimeOffset + simTime * config.fallSpeed * columnSpeedOffset;
var rainTime = (glyphPos.y * 0.01 + columnTime) / config.raindropLength;
if (!bool(config.loops)) {
rainTime = wobble(rainTime);
}
return 1.0 - fract(rainTime);
}
// Compute shader additional effects
fn getThunder(simTime : f32, screenPos : vec2<f32>) -> f32 {
if (!bool(config.hasThunder)) {
return 0.0;
}
var thunderTime = simTime * 0.5;
var thunder = 1.0 - fract(wobble(thunderTime));
if (bool(config.loops)) {
thunder = 1.0 - fract(thunderTime + 0.3);
}
thunder = log(thunder * 1.5) * 4.0;
thunder = clamp(thunder, 0.0, 1.0) * 10.0 * pow(screenPos.y, 2.0);
return thunder;
}
fn getRipple(simTime : f32, screenPos : vec2<f32>) -> f32 {
if (config.rippleType == -1) {
return 0.0;
}
var rippleTime = (simTime * 0.5 + sin(simTime) * 0.2) * config.rippleSpeed + 1.0; // TODO: clarify
if (bool(config.loops)) {
rippleTime = (simTime * 0.5) * config.rippleSpeed + 1.0;
}
var offset = randomVec2(vec2<f32>(floor(rippleTime), 0.0)) - 0.5;
if (bool(config.loops)) {
offset = vec2<f32>(0.0);
}
var ripplePos = screenPos * 2.0 - 1.0 + offset;
var rippleDistance : f32;
if (config.rippleType == 0) {
var boxDistance = abs(ripplePos) * vec2<f32>(1.0, config.glyphHeightToWidth);
rippleDistance = max(boxDistance.x, boxDistance.y);
} else if (config.rippleType == 1) {
rippleDistance = length(ripplePos);
}
var rippleValue = fract(rippleTime) * config.rippleScale - rippleDistance;
if (rippleValue > 0.0 && rippleValue < config.rippleThickness) {
return 0.75;
}
return 0.0;
}
// Compute shader main functions
fn computeIntroProgress (simTime : f32, isFirstFrame : bool, glyphPos : vec2<f32>, screenPos : vec2<f32>, previous : vec4<f32>) -> vec4<f32> {
if (bool(config.skipIntro)) {
return vec4<f32>(2.0, 0.0, 0.0, 0.0);
}
var columnTimeOffset = 0.0;
var column = i32(glyphPos.x);
if (column == i32(config.gridSize.y / 2.0)) {
columnTimeOffset = -1.0;
} else if (column == i32(config.gridSize.y * 0.75)) {
columnTimeOffset = -2.0;
} else {
columnTimeOffset = randomFloat(vec2(glyphPos.x, 0.)) * -4.;
columnTimeOffset += (sin(glyphPos.x / config.gridSize.y * PI) - 1.) * 2. - 2.5;
}
var introTime = (simTime + columnTimeOffset) * config.fallSpeed / config.gridSize.y * 100.0;
var result = vec4<f32>(introTime, 0.0, 0.0, 0.0);
return result;
}
fn computeRaindrop (simTime : f32, isFirstFrame : bool, glyphPos : vec2<f32>, screenPos : vec2<f32>, previous : vec4<f32>, progress : vec4<f32>) -> vec4<f32> {
var brightness = getRainBrightness(simTime, glyphPos);
var brightnessBelow = getRainBrightness(simTime, glyphPos + vec2(0.0, -1.0));
var introProgress = progress.r - (1.0 - glyphPos.y / config.gridSize.y);
var introProgressBelow = progress.r - (1.0 - (glyphPos.y - 1.0) / config.gridSize.y);
var skipIntro = bool(config.skipIntro);
var activated = bool(previous.b) || skipIntro || introProgress > 0.0;
var activatedBelow = skipIntro || introProgressBelow > 0.0;
var cursor = brightness > brightnessBelow || (activated && !activatedBelow);
// Blend the glyph's brightness with its previous brightness, so it winks on and off organically
if (!isFirstFrame) {
var previousBrightness = previous.r;
brightness = mix(previousBrightness, brightness, config.brightnessDecay);
}
var result = vec4<f32>(brightness, f32(cursor), f32(activated), introProgress);
return result;
}
fn computeSymbol (simTime : f32, isFirstFrame : bool, glyphPos : vec2<f32>, screenPos : vec2<f32>, previous : vec4<f32>, raindrop : vec4<f32>) -> vec4<f32> {
var previousSymbol = previous.r;
var previousAge = previous.g;
var resetGlyph = isFirstFrame;
if (bool(config.loops)) {
resetGlyph = resetGlyph || raindrop.r < 0.0;
}
if (resetGlyph) {
previousAge = randomFloat(screenPos + 0.5);
previousSymbol = floor(config.glyphSequenceLength * randomFloat(screenPos));
}
var cycleSpeed = config.animationSpeed * config.cycleSpeed;
var age = previousAge;
var symbol = previousSymbol;
if (time.frames % config.cycleFrameSkip == 0) {
age += cycleSpeed * f32(config.cycleFrameSkip);
var advance = floor(age);
if (age > 1.0) {
symbol = floor(config.glyphSequenceLength * randomFloat(screenPos + simTime));
age = fract(age);
}
}
var result = vec4<f32>(symbol, age, 0.0, 0.0);
return result;
}
fn computeEffect (simTime : f32, isFirstFrame : bool, glyphPos : vec2<f32>, screenPos : vec2<f32>, previous : vec4<f32>, raindrop : vec4<f32>) -> vec4<f32> {
var multipliedEffects = 1.0 + getThunder(simTime, screenPos);
var addedEffects = getRipple(simTime, screenPos); // Round or square ripples across the grid
var result = vec4<f32>(multipliedEffects, addedEffects, 0.0, 0.0);
return result;
}
@compute @workgroup_size(32, 1, 1) fn computeIntro(input : ComputeInput) {
// Resolve the invocation ID to an intro cell coordinate
var column = i32(input.id.x);
if (column >= i32(config.gridSize.x)) {
return;
}
var simTime = time.seconds * config.animationSpeed;
var isFirstFrame = time.frames == 0;
// Update the cell
var glyphPos = vec2<f32>(f32(column), 0.0);
var screenPos = glyphPos / config.gridSize;
var introCell = introCells_RW.cells[column];
introCell.progress = computeIntroProgress(simTime, isFirstFrame, glyphPos, screenPos, introCell.progress);
introCells_RW.cells[column] = introCell;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
// Resolve the invocation ID to a cell coordinate
var row = i32(input.id.y);
var column = i32(input.id.x);
if (column >= i32(config.gridSize.x)) {
return;
}
var i = row * i32(config.gridSize.x) + column;
var simTime = time.seconds * config.animationSpeed;
var isFirstFrame = time.frames == 0;
// Update the cell
var glyphPos = vec2<f32>(f32(column), f32(row));
var screenPos = glyphPos / config.gridSize;
var cell = cells_RW.cells[i];
var introCell = introCells_RO.cells[column];
cell.raindrop = computeRaindrop(simTime, isFirstFrame, glyphPos, screenPos, cell.raindrop, introCell.progress);
cell.symbol = computeSymbol(simTime, isFirstFrame, glyphPos, screenPos, cell.symbol, cell.raindrop);
cell.effect = computeEffect(simTime, isFirstFrame, glyphPos, screenPos, cell.effect, cell.raindrop);
cells_RW.cells[i] = cell;
}
// Vertex shader
var<private> quadCorners : array<vec2<f32>, NUM_VERTICES_PER_QUAD> = array<vec2<f32>, NUM_VERTICES_PER_QUAD>(
vec2<f32>(0.0, 0.0), vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 1.0),
vec2<f32>(0.0, 0.0), vec2<f32>(1.0, 1.0), vec2<f32>(1.0, 0.0)
);
@vertex fn vertMain(input : VertInput) -> VertOutput {
var volumetric = bool(config.volumetric);
var quadGridSize = select(vec2<f32>(1.0), config.gridSize, volumetric);
// Convert the vertex index into its quad's position and its corner in its quad
var i = i32(input.index);
var quadIndex = i / NUM_VERTICES_PER_QUAD;
var quadCorner = quadCorners[i % NUM_VERTICES_PER_QUAD];
var quadPosition = vec2<f32>(
f32(quadIndex % i32(quadGridSize.x)),
f32(quadIndex / i32(quadGridSize.x))
);
// Calculate the vertex's uv
var uv = (quadPosition + quadCorner) / quadGridSize;
// Determine the quad's depth. This is a static value for each column of quads.
var quadDepth = 0.0;
if (volumetric) {
var startDepth = randomFloat(vec2(quadPosition.x, 0.0));
quadDepth = fract(startDepth + time.seconds * config.animationSpeed * config.forwardSpeed);
}
// Calculate the vertex's world space position
var worldPosition = quadPosition * vec2<f32>(1.0, config.glyphVerticalSpacing);
worldPosition += quadCorner * vec2<f32>(config.density, 1.0);
if (volumetric) {
worldPosition.y += randomFloat(vec2(quadPosition.x, 1.0));
}
worldPosition /= quadGridSize;
worldPosition = (worldPosition - 0.5) * 2.0;
// Convert the vertex's world space position to screen space
var screenPosition = vec4<f32>(worldPosition, quadDepth, 1.0);
if (volumetric) {
screenPosition.x /= config.glyphHeightToWidth;
screenPosition = scene.camera * scene.transform * screenPosition;
} else {
screenPosition = vec4<f32>(screenPosition.xy * scene.screenSize, screenPosition.zw);
}
return VertOutput(
screenPosition,
uv,
quadDepth
);
}
// Fragment shader core functions
fn median3(i : vec3<f32>) -> f32 {
return max(min(i.r, i.g), min(max(i.r, i.g), i.b));
}
fn getUV(inputUV : vec2<f32>) -> vec2<f32> {
var uv = inputUV;
if (bool(config.volumetric)) {
return uv;
}
if (bool(config.isPolar)) {
// Curved space to make the letters appear to radiate from up above
uv -= 0.5;
uv *= 0.5;
uv.y -= 0.5;
var radius = length(uv);
var angle = atan2(uv.y, uv.x) / (2.0 * PI) + 0.5;
uv = vec2<f32>(fract(angle * 4.0 - 0.5), 1.5 * (1.0 - sqrt(radius)));
} else {
// Apply the slant and a scale to space so the viewport is still fully covered by the geometry
uv = vec2<f32>(
(uv.x - 0.5) * config.slantVec.x + (uv.y - 0.5) * config.slantVec.y,
(uv.y - 0.5) * config.slantVec.x - (uv.x - 0.5) * config.slantVec.y
) * config.slantScale + 0.5;
}
uv.y /= config.glyphHeightToWidth;
return uv;
}
fn getBrightness(raindrop : vec4<f32>, effect : vec4<f32>, uv : vec2<f32>, quadDepth : f32) -> vec3<f32> {
var base = raindrop.r + max(0.0, 1.0 - raindrop.a * 5.0);
var isCursor = bool(raindrop.g) && bool(config.isolateCursor);
var glint = base;
var multipliedEffects = effect.r;
var addedEffects = effect.g;
var textureUV = fract(uv * config.gridSize);
base = base * config.baseContrast + config.baseBrightness;
if (bool(config.hasBaseTexture)) {
base *= textureSample(baseTexture, linearSampler, textureUV).r;
}
glint = glint * config.glintContrast + config.glintBrightness;
if (bool(config.hasGlintTexture)) {
glint *= textureSample(glintTexture, linearSampler, textureUV).r;
}
// Modes that don't fade glyphs set their actual brightness here
if (config.brightnessOverride > 0. && base > config.brightnessThreshold && !isCursor) {
base = config.brightnessOverride;
}
base = base * multipliedEffects + addedEffects;
glint = glint * multipliedEffects + addedEffects;
// In volumetric mode, distant glyphs are dimmer
if (bool(config.volumetric) && !bool(config.showDebugView)) {
base = base * min(1.0, quadDepth);
glint = glint * min(1.0, quadDepth);
}
return vec3<f32>(
select(vec2<f32>(1.0, 0.0), vec2<f32>(0.0, 1.0), isCursor) * base,
glint
) * raindrop.b;
}
fn getSymbolUV(symbol : i32) -> vec2<f32> {
var symbolX = symbol % config.glyphTextureGridSize.x;
var symbolY = symbol / config.glyphTextureGridSize.x;
symbolY = config.glyphTextureGridSize.y - symbolY - 1;
return vec2<f32>(f32(symbolX), f32(symbolY));
}
fn getSymbol(cellUV : vec2<f32>, index : i32) -> vec2<f32> {
// resolve UV to cropped position of glyph in MSDF texture
var uv = fract(cellUV * config.gridSize);
uv -= 0.5;
uv *= clamp(1.0 - config.glyphEdgeCrop, 0.0, 1.0);
uv += 0.5;
uv = (uv + getSymbolUV(index)) / vec2<f32>(config.glyphTextureGridSize);
// MSDF: calculate brightness of fragment based on distance to shape
var symbol = vec2<f32>();
{
// var dist = textureSample(glyphMSDFTexture, linearSampler, uv).rgb;
// var sigDist = median3(dist) - 0.5;
// symbol.r = clamp(sigDist / fwidth(sigDist) + 0.5, 0.0, 1.0);
var unitRange = vec2<f32>(config.msdfPxRange) / vec2<f32>(textureDimensions(glyphMSDFTexture));
var screenTexSize = vec2<f32>(1.0) / fwidth(uv);
var screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
var signedDistance = median3(textureSample(glyphMSDFTexture, linearSampler, uv).rgb);
var screenPxDistance = screenPxRange * (signedDistance - 0.5);
symbol.r = clamp(screenPxDistance + 0.5, 0.0, 1.0);
}
if (bool(config.isolateGlint)) {
// var dist = textureSample(glintMSDFTexture, linearSampler, uv).rgb;
// var sigDist = median3(dist) - 0.5;
// symbol.g = clamp(sigDist / fwidth(sigDist) + 0.5, 0.0, 1.0);
var unitRange = vec2<f32>(config.msdfPxRange) / vec2<f32>(textureDimensions(glintMSDFTexture));
var screenTexSize = vec2<f32>(1.0) / fwidth(uv);
var screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
var signedDistance = median3(textureSample(glintMSDFTexture, linearSampler, uv).rgb);
var screenPxDistance = screenPxRange * (signedDistance - 0.5);
symbol.g = clamp(screenPxDistance + 0.5, 0.0, 1.0);
}
return symbol;
}
// Fragment shader
@fragment fn fragMain(input : VertOutput) -> FragOutput {
var uv = getUV(input.uv);
// Retrieve cell
var gridCoord : vec2<i32> = vec2<i32>(uv * config.gridSize);
var gridIndex = gridCoord.y * i32(config.gridSize.x) + gridCoord.x;
var cell = cells_RO.cells[gridIndex];
var brightness = getBrightness(
cell.raindrop,
cell.effect,
uv,
input.quadDepth
);
var symbol = getSymbol(uv, i32(cell.symbol.r));
var output : FragOutput;
if (bool(config.showDebugView)) {
output.color = vec4<f32>(
vec3<f32>(
cell.raindrop.g,
vec2<f32>(
1.0 - ((1.0 - cell.raindrop.r) * 3.0),
1.0 - ((1.0 - cell.raindrop.r) * 8.0)
) * (1.0 - cell.raindrop.g)
) * symbol.r,
1.0
);
} else {
output.color = vec4(brightness.rg * symbol.r, brightness.b * symbol.g, 0.0);
}
var highPassColor = output.color;
if (highPassColor.r < config.highPassThreshold) {
highPassColor.r = 0.0;
}
if (highPassColor.g < config.highPassThreshold) {
highPassColor.g = 0.0;
}
if (highPassColor.b < config.highPassThreshold) {
highPassColor.b = 0.0;
}
output.highPassColor = highPassColor;
return output;
}

View File

@@ -1,70 +0,0 @@
struct Config {
ditherMagnitude : f32,
backgroundColor : vec3<f32>,
cursorColor : vec3<f32>,
glintColor : vec3<f32>,
cursorIntensity : f32,
glintIntensity : f32,
};
struct Time {
seconds : f32,
frames : i32,
};
@group(0) @binding(0) var<uniform> config : Config;
@group(0) @binding(1) var<uniform> time : Time;
@group(0) @binding(2) var linearSampler : sampler;
@group(0) @binding(3) var tex : texture_2d<f32>;
@group(0) @binding(4) var bloomTex : texture_2d<f32>;
@group(0) @binding(5) var stripeTex : texture_2d<f32>;
@group(0) @binding(6) var outputTex : texture_storage_2d<rgba8unorm, write>;
struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>,
};
const PI : f32 = 3.14159265359;
fn randomFloat( uv : vec2<f32> ) -> f32 {
let a = 12.9898;
let b = 78.233;
let c = 43758.5453;
let dt = dot( uv, vec2<f32>( a, b ) );
let sn = dt % PI;
return fract(sin(sn) * c);
}
fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var primary = textureSampleLevel(tex, linearSampler, uv, 0.0);
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0);
return primary + bloom;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
// Resolve the invocation ID to a texel coordinate
var coord = vec2<u32>(input.id.xy);
var screenSize = textureDimensions(tex);
if (coord.x >= screenSize.x) {
return;
}
var uv = vec2<f32>(coord) / vec2<f32>(screenSize);
var color = textureSampleLevel( stripeTex, linearSampler, vec2<f32>(uv.x, 1.0 - uv.y), 0.0 ).rgb;
var brightness = getBrightness(uv);
// Dither: subtract a random value from the brightness
brightness -= randomFloat( uv + vec2<f32>(time.seconds) ) * config.ditherMagnitude / 3.0;
textureStore(outputTex, coord, vec4<f32>(
color * brightness.r
+ min(config.cursorColor * config.cursorIntensity * brightness.g, vec3<f32>(1.0))
+ min(config.glintColor * config.glintIntensity * brightness.b, vec3<f32>(1.0))
+ config.backgroundColor,
1.0
));
}