eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 22:29:28 -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

3
js/regl/palettePass.js
View File

@@ -65,7 +65,7 @@ const makePalette = (regl, entries) => {
export default ({ regl, config }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const palette = makePalette(regl, config.paletteEntries);
const { backgroundColor, cursorColor, ditherMagnitude, bloomStrength } = config;
const { backgroundColor, cursorColor, glintColor, ditherMagnitude, bloomStrength } = config;
const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl");
@@ -75,6 +75,7 @@ export default ({ regl, config }, inputs) => {
uniforms: {
backgroundColor,
cursorColor,
glintColor,
ditherMagnitude,
bloomStrength,
tex: inputs.primary,

5
js/regl/rainPass.js
View File

@@ -116,6 +116,7 @@ export default ({ regl, config, lkg }) => {
// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
const msdf = loadImage(regl, config.glyphTexURL);
const glintMSDF = loadImage(regl, config.glintTexURL);
const rainPassVert = loadText("shaders/glsl/rainPass.vert.glsl");
const rainPassFrag = loadText("shaders/glsl/rainPass.frag.glsl");
const output = makePassFBO(regl, config.useHalfFloat);
@@ -131,6 +132,7 @@ export default ({ regl, config, lkg }) => {
"brightnessThreshold",
"brightnessOverride",
"isolateCursor",
"isolateGlint",
"glyphEdgeCrop",
"isPolar",
]),
@@ -160,6 +162,7 @@ export default ({ regl, config, lkg }) => {
symbolState: symbolDoubleBuffer.front,
effectState: effectDoubleBuffer.front,
glyphTex: msdf.texture,
glintTex: glintMSDF.texture,
camera: regl.prop("camera"),
transform: regl.prop("transform"),
@@ -201,7 +204,7 @@ export default ({ regl, config, lkg }) => {
{
primary: output,
},
Promise.all([msdf.loaded, rainPassShine.loaded, rainPassSymbol.loaded, rainPassVert.loaded, rainPassFrag.loaded]),
Promise.all([msdf.loaded, glintMSDF.loaded, rainPassShine.loaded, rainPassSymbol.loaded, rainPassVert.loaded, rainPassFrag.loaded]),
(w, h) => {
output.resize(w, h);
const aspectRatio = w / h;

3
js/regl/stripePass.js
View File

@@ -31,7 +31,7 @@ const prideStripeColors = [
export default ({ regl, config }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const { backgroundColor, cursorColor, ditherMagnitude, bloomStrength } = config;
const { backgroundColor, cursorColor, glintColor, ditherMagnitude, bloomStrength } = config;
// Expand and convert stripe colors into 1D texture data
const stripeColors =
@@ -50,6 +50,7 @@ export default ({ regl, config }, inputs) => {
uniforms: {
backgroundColor,
cursorColor,
glintColor,
ditherMagnitude,
bloomStrength,
tex: inputs.primary,

2
js/regl/utils.js
View File

@@ -30,7 +30,7 @@ const loadImage = (regl, url) => {
let loaded = false;
return {
texture: () => {
if (!loaded) {
if (!loaded && url != null) {
console.warn(`texture still loading: ${url}`);
}
return texture;