mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-18 22:29:28 -07:00
Gouging a simpler project out of the larger project.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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 );
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
@@ -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
|
||||
));
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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
|
||||
));
|
||||
}
|
||||
Reference in New Issue
Block a user