eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 14:19:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Adding "glint", the shapes that appear on top of the glyphs in the Resurrections opening titles.

Browse Source
This commit is contained in:
Rezmason
2022-09-17 01:24:23 -07:00
parent 6a3d38e965
commit 9c2d6d7ed8
17 changed files with 122 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
shaders/glsl/palettePass.frag.glsl
View File

@@ -7,7 +7,7 @@ uniform sampler2D palette;
uniform float bloomStrength;
uniform float ditherMagnitude;
uniform float time;
uniform vec3 backgroundColor, cursorColor;
uniform vec3 backgroundColor, cursorColor, glintColor;
varying vec2 vUV;
highp float rand( const in vec2 uv, const in float t ) {
@@ -26,12 +26,13 @@ void main() {
vec4 brightness = getBrightness(vUV);
// Dither: subtract a random value from the brightness
brightness -= rand( gl_FragCoord.xy, time ) * ditherMagnitude;
brightness -= rand( gl_FragCoord.xy, time ) * ditherMagnitude / 3.0;
// Map the brightness to a position in the palette texture
gl_FragColor = vec4(
texture2D( palette, vec2(brightness.r, 0.0)).rgb
+ min(cursorColor * brightness.g, vec3(1.0))
+ min(glintColor * brightness.b, vec3(1.0))
+ backgroundColor,
1.0
);

29
shaders/glsl/rainPass.frag.glsl
View File

@@ -6,7 +6,7 @@ precision lowp float;
uniform sampler2D raindropState, symbolState, effectState;
uniform float numColumns, numRows;
uniform sampler2D glyphTex;
uniform sampler2D glyphTex, glintTex;
uniform float glyphHeightToWidth, glyphSequenceLength, glyphEdgeCrop;
uniform float baseContrast, baseBrightness;
uniform float brightnessOverride, brightnessThreshold;
@@ -16,7 +16,7 @@ uniform float slantScale;
uniform bool isPolar;
uniform bool showDebugView;
uniform bool volumetric;
uniform bool isolateCursor;
uniform bool isolateCursor, isolateGlint;
varying vec2 vUV;
varying vec4 vRaindrop, vSymbol, vEffect;
@@ -87,7 +87,7 @@ vec2 getSymbolUV(float index) {
return vec2(symbolX, symbolY);
}
float getSymbol(vec2 uv, float index) {
vec2 getSymbol(vec2 uv, float index) {
// resolve UV to cropped position of glyph in MSDF texture
uv = fract(uv * vec2(numColumns, numRows));
uv -= 0.5;
@@ -96,9 +96,20 @@ float getSymbol(vec2 uv, float index) {
uv = (uv + getSymbolUV(index)) / glyphTextureGridSize;
// MSDF: calculate brightness of fragment based on distance to shape
vec3 dist = texture2D(glyphTex, uv).rgb;
float sigDist = median3(dist) - 0.5;
return clamp(sigDist / fwidth(sigDist) + 0.5, 0., 1.);
vec2 symbol;
{
vec3 dist = texture2D(glyphTex, uv).rgb;
float sigDist = median3(dist) - 0.5;
symbol.r = clamp(sigDist / fwidth(sigDist) + 0.5, 0., 1.);
}
if (isolateGlint) {
vec3 dist = texture2D(glintTex, uv).rgb;
float sigDist = median3(dist) - 0.5;
symbol.g = clamp(sigDist / fwidth(sigDist) + 0.5, 0., 1.);
}
return symbol;
}
void main() {
@@ -111,7 +122,7 @@ void main() {
vec4 effectData = volumetric ? vEffect : texture2D( effectState, uv);
vec2 brightness = getBrightness(raindropData.r, raindropData.g, effectData.r, effectData.g);
float symbol = getSymbol(uv, symbolData.r);
vec2 symbol = getSymbol(uv, symbolData.r);
if (showDebugView) {
gl_FragColor = vec4(
@@ -121,10 +132,10 @@ void main() {
1. - (raindropData.r * 3.),
1. - (raindropData.r * 8.)
) * (1. - raindropData.g)
) * symbol,
) * symbol.r,
1.
);
} else {
gl_FragColor = vec4(brightness * symbol, 0., 0.);
gl_FragColor = vec4(brightness * symbol.r, brightness.r * symbol.g, 0.);
}
}

7
shaders/glsl/stripePass.frag.glsl
View File

@@ -7,7 +7,7 @@ uniform float bloomStrength;
uniform sampler2D stripes;
uniform float ditherMagnitude;
uniform float time;
uniform vec3 backgroundColor, cursorColor;
uniform vec3 backgroundColor, cursorColor, glintColor;
varying vec2 vUV;
highp float rand( const in vec2 uv, const in float t ) {
@@ -28,11 +28,12 @@ void main() {
vec4 brightness = getBrightness(vUV);
// Dither: subtract a random value from the brightness
brightness -= rand( gl_FragCoord.xy, time ) * ditherMagnitude;
brightness -= rand( gl_FragCoord.xy, time ) * ditherMagnitude / 3.0;
gl_FragColor = vec4(
color * brightness.r
+ min(cursorColor * brightness.g, 1.0)
+ min(cursorColor * brightness.g, vec3(1.0))
+ min(glintColor * brightness.b, vec3(1.0))
+ backgroundColor,
1.0
);

6
shaders/wgsl/palettePass.wgsl
View File

@@ -2,7 +2,8 @@ struct Config {
bloomStrength : f32,
ditherMagnitude : f32,
backgroundColor : vec3<f32>,
cursorColor : vec3<f32>
cursorColor : vec3<f32>,
glintColor : vec3<f32>,
};
struct Palette {
@@ -58,7 +59,7 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var brightness = getBrightness(uv);
// Dither: subtract a random value from the brightness
brightness -= randomFloat( uv + vec2<f32>(time.seconds) ) * config.ditherMagnitude;
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);
@@ -66,6 +67,7 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
textureStore(outputTex, coord, vec4<f32>(
palette.colors[paletteIndex]
+ min(config.cursorColor * brightness.g, vec3<f32>(1.0))
+ min(config.glintColor * brightness.b, vec3<f32>(1.0))
+ config.backgroundColor,
1.0
));

28
shaders/wgsl/rainPass.wgsl
View File

@@ -37,6 +37,7 @@ struct Config {
slantVec : vec2<f32>,
volumetric : i32,
isolateCursor : i32,
isolateGlint : i32,
loops : i32,
highPassThreshold : f32,
};
@@ -76,7 +77,8 @@ struct CellData {
@group(0) @binding(2) var<uniform> scene : Scene;
@group(0) @binding(3) var linearSampler : sampler;
@group(0) @binding(4) var msdfTexture : texture_2d<f32>;
@group(0) @binding(5) var<storage, read> cells_RO : CellData;
@group(0) @binding(5) var glintMSDFTexture : texture_2d<f32>;
@group(0) @binding(6) var<storage, read> cells_RO : CellData;
// Shader params
@@ -401,7 +403,7 @@ fn getSymbolUV(symbol : i32) -> vec2<f32> {
return vec2<f32>(f32(symbolX), f32(symbolY));
}
fn getSymbol(cellUV : vec2<f32>, index : i32) -> f32 {
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.y = 1.0 - uv.y; // WebGL -> WebGPU y-flip
@@ -410,10 +412,22 @@ fn getSymbol(cellUV : vec2<f32>, index : i32) -> f32 {
uv += 0.5;
uv = (uv + getSymbolUV(index)) / vec2<f32>(config.glyphTextureGridSize);
var symbol = vec2<f32>();
// MSDF: calculate brightness of fragment based on distance to shape
var dist = textureSample(msdfTexture, linearSampler, uv).rgb;
var sigDist = median3(dist) - 0.5;
return clamp(sigDist / fwidth(sigDist) + 0.5, 0.0, 1.0);
{
var dist = textureSample(msdfTexture, linearSampler, uv).rgb;
var sigDist = median3(dist) - 0.5;
symbol.r = clamp(sigDist / fwidth(sigDist) + 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);
}
return symbol;
}
// Fragment shader
@@ -446,11 +460,11 @@ fn getSymbol(cellUV : vec2<f32>, index : i32) -> f32 {
1.0 - (cell.raindrop.r * 3.0),
1.0 - (cell.raindrop.r * 8.0)
) * (1.0 - cell.raindrop.g)
) * symbol,
) * symbol.r,
1.0
);
} else {
output.color = vec4(brightness * symbol, 0.0, 0.0);
output.color = vec4(brightness * symbol.r, brightness.r * symbol.g, 0.0);
}
var highPassColor = output.color;

6
shaders/wgsl/stripePass.wgsl
View File

@@ -2,7 +2,8 @@ struct Config {
bloomStrength : f32,
ditherMagnitude : f32,
backgroundColor : vec3<f32>,
cursorColor : vec3<f32>
cursorColor : vec3<f32>,
glintColor : vec3<f32>,
};
struct Time {
@@ -56,11 +57,12 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var brightness = getBrightness(uv);
// Dither: subtract a random value from the brightness
brightness -= randomFloat( uv + vec2<f32>(time.seconds) ) * config.ditherMagnitude;
brightness -= randomFloat( uv + vec2<f32>(time.seconds) ) * config.ditherMagnitude / 3.0;
textureStore(outputTex, coord, vec4<f32>(
color * brightness.r
+ min(config.cursorColor * brightness.g, vec3<f32>(1.0))
+ min(config.glintColor * brightness.b, vec3<f32>(1.0))
+ config.backgroundColor,
1.0
));