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

Combining the rain pass's compute shaders

Browse Source
This commit is contained in:
Rezmason
2023-08-22 11:46:29 -07:00
parent 7a4f8b0e0b
commit 2d97f764f5
11 changed files with 122 additions and 8490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
js/main.js
View File

@@ -4,18 +4,12 @@ const config = {
glyphMSDFURL: "assets/matrixcode_msdf.png",
glyphSequenceLength: 57,
glyphTextureGridSize: [8, 8],
effect: "palette", // The name of the effect to apply at the end of the process— mainly handles coloration
baseTexture: null, // The name of the texture to apply to the base layer of the glyphs
glintTexture: null, // The name of the texture to apply to the glint layer of the glyphs
useCamera: false,
backgroundColor: hsl(0, 0, 0), // The color "behind" the glyphs
isolateCursor: true, // Whether the "cursor"— the brightest glyph at the bottom of a raindrop— has its own color
cursorColor: hsl(0.242, 1, 0.73), // The color of the cursor
cursorIntensity: 2, // The intensity of the cursor
isolateGlint: false, // Whether the "glint"— highlights on certain symbols in the font— should appear
glintColor: hsl(0, 0, 1), // The color of the glint
glintIntensity: 1, // The intensity of the glint
volumetric: false, // A mode where the raindrops appear in perspective
animationSpeed: 1, // The global rate that all animations progress
fps: 60, // The target frame rate (frames per second) of the effect
forwardSpeed: 0.25, // The speed volumetric rain approaches the eye
@@ -30,20 +24,12 @@ const config = {
glintContrast: 2.5, // The contrast of the glints, before any effects are applied
brightnessOverride: 0.0, // A global override to the brightness of displayed glyphs. Only used if it is > 0.
brightnessThreshold: 0, // The minimum brightness for a glyph to still be considered visible
brightnessDecay: 1.0, // The rate at which glyphs light up and dim
ditherMagnitude: 0.05, // The magnitude of the random per-pixel dimming
fallSpeed: 0.3, // The speed the raindrops progress downwards
glyphEdgeCrop: 0.0, // The border around a glyph in a font texture that should be cropped out
glyphHeightToWidth: 1, // The aspect ratio of glyphs
glyphVerticalSpacing: 1, // The ratio of the vertical distance between glyphs to their height
hasThunder: false, // An effect that adds dramatic lightning flashes
isPolar: false, // Whether the glyphs arc across the screen or sit in a standard grid
rippleTypeName: null, // The variety of the ripple effect
rippleThickness: 0.2, // The thickness of the ripple effect
rippleScale: 30, // The size of the ripple effect
rippleSpeed: 0.2, // The rate at which the ripple effect progresses
numColumns: 80, // The maximum dimension of the glyph grid
density: 1, // In volumetric mode, the number of actual columns compared to the grid
palette: [
// The color palette that glyph brightness is color mapped to
{ color: hsl(0.3, 0.9, 0.0), at: 0.0 },
@@ -52,16 +38,8 @@ const config = {
{ color: hsl(0.3, 0.9, 0.8), at: 0.8 },
],
raindropLength: 0.75, // Adjusts the frequency of raindrops (and their length) in a column
slant: 0, // The angle at which rain falls; the orientation of the glyph grid
resolution: 0.75, // An overall scale multiplier
useHalfFloat: false,
renderer: "regl", // The preferred web graphics API
suppressWarnings: false, // Whether to show warnings to visitors on load
isometric: false,
useHoloplay: false,
loops: false,
skipIntro: true,
testFix: null,
};
const canvas = document.createElement("canvas");
@@ -88,7 +66,7 @@ const loadJS = (src) =>
});
const init = async () => {
await Promise.all([loadJS("lib/regl.js"), loadJS("lib/gl-matrix.js")]);
await loadJS("lib/regl.js");
const resize = () => {
const devicePixelRatio = window.devicePixelRatio ?? 1;
@@ -111,24 +89,10 @@ const init = async () => {
}
resize();
if (config.useCamera) {
await setupCamera();
}
const extensions = ["OES_texture_half_float", "OES_texture_half_float_linear"];
// These extensions are also needed, but Safari misreports that they are missing
const optionalExtensions = ["EXT_color_buffer_half_float", "WEBGL_color_buffer_float", "OES_standard_derivatives"];
switch (config.testFix) {
case "fwidth_10_1_2022_A":
extensions.push("OES_standard_derivatives");
break;
case "fwidth_10_1_2022_B":
optionalExtensions.forEach((ext) => extensions.push(ext));
extensions.length = 0;
break;
}
const regl = createREGL({ canvas, pixelRatio: 1, extensions, optionalExtensions });
// All this takes place in a full screen quad.
@@ -142,7 +106,7 @@ const init = async () => {
const targetFrameTimeMilliseconds = 1000 / config.fps;
let last = NaN;
const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
const render = ({ viewportWidth, viewportHeight }) => {
if (config.once) {
tick.cancel();
}
@@ -177,7 +141,11 @@ const init = async () => {
}
drawToScreen();
});
});
};
render({viewportWidth: 1, viewportHeight: 1});
const tick = regl.frame(render);
};
document.body.onload = () => {

160
js/rainPass.js
View File

@@ -2,11 +2,6 @@ import { loadImage, loadText, makePassFBO, makeDoubleBuffer, makePass } from "./
const extractEntries = (src, keys) => Object.fromEntries(Array.from(Object.entries(src)).filter(([key]) => keys.includes(key)));
const rippleTypes = {
box: 0,
circle: 1,
};
// These compute buffers are used to compute the properties of cells in the grid.
// They take turns being the source and destination of a "compute" shader.
// The half float data type is crucial! It lets us store almost any real number,
@@ -30,112 +25,41 @@ const brVert = [1, 1];
const quadVertices = [tlVert, trVert, brVert, tlVert, brVert, blVert];
export default ({ regl, config }) => {
// The volumetric mode multiplies the number of columns
// to reach the desired density, and then overlaps them
const volumetric = config.volumetric;
const density = volumetric && config.effect !== "none" ? config.density : 1;
const [numRows, numColumns] = [config.numColumns, Math.floor(config.numColumns * density)];
// The volumetric mode requires us to create a grid of quads,
// rather than a single quad for our geometry
const [numQuadRows, numQuadColumns] = volumetric ? [numRows, numColumns] : [1, 1];
const numQuads = numQuadRows * numQuadColumns;
const quadSize = [1 / numQuadColumns, 1 / numQuadRows];
// Various effect-related values
const rippleType = config.rippleTypeName in rippleTypes ? rippleTypes[config.rippleTypeName] : -1;
const slantVec = [Math.cos(config.slant), Math.sin(config.slant)];
const slantScale = 1 / (Math.abs(Math.sin(2 * config.slant)) * (Math.sqrt(2) - 1) + 1);
const showDebugView = config.effect === "none";
const [numRows, numColumns] = [config.numColumns, config.numColumns];
const commonUniforms = {
...extractEntries(config, ["animationSpeed", "glyphHeightToWidth", "glyphSequenceLength", "glyphTextureGridSize"]),
numColumns,
numRows,
showDebugView,
};
const introDoubleBuffer = makeComputeDoubleBuffer(regl, 1, numColumns);
const rainPassIntro = loadText("shaders/glsl/rainPass.intro.frag.glsl");
const introUniforms = {
const computeDoubleBuffer = makeComputeDoubleBuffer(regl, numRows, numColumns);
const rainPassCompute = loadText("shaders/glsl/rainPass.compute.frag.glsl");
const computeUniforms = {
...commonUniforms,
...extractEntries(config, ["fallSpeed", "skipIntro"]),
...extractEntries(config, ["fallSpeed", "raindropLength"]),
...extractEntries(config, ["cycleSpeed", "cycleFrameSkip"]),
};
const intro = regl({
const compute = regl({
frag: regl.prop("frag"),
uniforms: {
...introUniforms,
previousIntroState: introDoubleBuffer.back,
...computeUniforms,
previousComputeState: computeDoubleBuffer.back,
},
framebuffer: introDoubleBuffer.front,
framebuffer: computeDoubleBuffer.front,
});
const raindropDoubleBuffer = makeComputeDoubleBuffer(regl, numRows, numColumns);
const rainPassRaindrop = loadText("shaders/glsl/rainPass.raindrop.frag.glsl");
const raindropUniforms = {
...commonUniforms,
...extractEntries(config, ["brightnessDecay", "fallSpeed", "raindropLength", "loops", "skipIntro"]),
};
const raindrop = regl({
frag: regl.prop("frag"),
uniforms: {
...raindropUniforms,
introState: introDoubleBuffer.front,
previousRaindropState: raindropDoubleBuffer.back,
},
framebuffer: raindropDoubleBuffer.front,
});
const symbolDoubleBuffer = makeComputeDoubleBuffer(regl, numRows, numColumns);
const rainPassSymbol = loadText("shaders/glsl/rainPass.symbol.frag.glsl");
const symbolUniforms = {
...commonUniforms,
...extractEntries(config, ["cycleSpeed", "cycleFrameSkip", "loops"]),
};
const symbol = regl({
frag: regl.prop("frag"),
uniforms: {
...symbolUniforms,
raindropState: raindropDoubleBuffer.front,
previousSymbolState: symbolDoubleBuffer.back,
},
framebuffer: symbolDoubleBuffer.front,
});
const effectDoubleBuffer = makeComputeDoubleBuffer(regl, numRows, numColumns);
const rainPassEffect = loadText("shaders/glsl/rainPass.effect.frag.glsl");
const effectUniforms = {
...commonUniforms,
...extractEntries(config, ["hasThunder", "rippleScale", "rippleSpeed", "rippleThickness", "loops"]),
rippleType,
};
const effect = regl({
frag: regl.prop("frag"),
uniforms: {
...effectUniforms,
raindropState: raindropDoubleBuffer.front,
previousEffectState: effectDoubleBuffer.back,
},
framebuffer: effectDoubleBuffer.front,
});
const quadPositions = Array(numQuadRows)
const quadPositions = Array(1)
.fill()
.map((_, y) =>
Array(numQuadColumns)
Array(1)
.fill()
.map((_, x) => Array(numVerticesPerQuad).fill([x, y]))
);
// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
const glyphMSDF = loadImage(regl, config.glyphMSDFURL);
const glintMSDF = loadImage(regl, config.glintMSDFURL);
const baseTexture = loadImage(regl, config.baseTextureURL, true);
const glintTexture = loadImage(regl, config.glintTextureURL, true);
const rainPassVert = loadText("shaders/glsl/rainPass.vert.glsl");
const rainPassFrag = loadText("shaders/glsl/rainPass.frag.glsl");
const output = makePassFBO(regl, config.useHalfFloat);
@@ -153,17 +77,8 @@ export default ({ regl, config }) => {
"brightnessThreshold",
"brightnessOverride",
"isolateCursor",
"isolateGlint",
"glyphEdgeCrop",
"isPolar",
]),
density,
numQuadColumns,
numQuadRows,
quadSize,
slantScale,
slantVec,
volumetric,
};
const render = regl({
blend: {
@@ -179,45 +94,25 @@ export default ({ regl, config }) => {
uniforms: {
...renderUniforms,
raindropState: raindropDoubleBuffer.front,
symbolState: symbolDoubleBuffer.front,
effectState: effectDoubleBuffer.front,
computeState: computeDoubleBuffer.front,
glyphMSDF: glyphMSDF.texture,
glintMSDF: glintMSDF.texture,
baseTexture: baseTexture.texture,
glintTexture: glintTexture.texture,
msdfPxRange: 4.0,
glyphMSDFSize: () => [glyphMSDF.width(), glyphMSDF.height()],
glintMSDFSize: () => [glintMSDF.width(), glintMSDF.height()],
camera: regl.prop("camera"),
transform: regl.prop("transform"),
screenSize: regl.prop("screenSize"),
},
attributes: {
aPosition: quadPositions,
aCorner: Array(numQuads).fill(quadVertices),
aCorner: quadVertices,
},
count: numQuads * numVerticesPerQuad,
count: numVerticesPerQuad,
framebuffer: output,
});
// Camera and transform math for the volumetric mode
const screenSize = [1, 1];
const { mat4, vec3 } = glMatrix;
const transform = mat4.create();
if (volumetric && config.isometric) {
mat4.rotateX(transform, transform, (Math.PI * 1) / 8);
mat4.rotateY(transform, transform, (Math.PI * 1) / 4);
mat4.translate(transform, transform, vec3.fromValues(0, 0, -1));
mat4.scale(transform, transform, vec3.fromValues(1, 1, 2));
} else {
mat4.translate(transform, transform, vec3.fromValues(0, 0, -1));
}
const camera = mat4.create();
return makePass(
{
@@ -225,36 +120,17 @@ export default ({ regl, config }) => {
},
Promise.all([
glyphMSDF.loaded,
glintMSDF.loaded,
baseTexture.loaded,
glintTexture.loaded,
rainPassIntro.loaded,
rainPassRaindrop.loaded,
rainPassSymbol.loaded,
rainPassCompute.loaded,
rainPassVert.loaded,
rainPassFrag.loaded,
]),
(w, h) => {
output.resize(w, h);
const aspectRatio = w / h;
if (volumetric && config.isometric) {
if (aspectRatio > 1) {
mat4.ortho(camera, -1.5 * aspectRatio, 1.5 * aspectRatio, -1.5, 1.5, -1000, 1000);
} else {
mat4.ortho(camera, -1.5, 1.5, -1.5 / aspectRatio, 1.5 / aspectRatio, -1000, 1000);
}
} else {
mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
}
[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
},
(shouldRender) => {
intro({ frag: rainPassIntro.text() });
raindrop({ frag: rainPassRaindrop.text() });
symbol({ frag: rainPassSymbol.text() });
effect({ frag: rainPassEffect.text() });
compute({ frag: rainPassCompute.text() });
if (shouldRender) {
regl.clear({
@@ -263,7 +139,7 @@ export default ({ regl, config }) => {
framebuffer: output,
});
render({ camera, transform, screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
render({ screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
}
}
);