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

More code cleanup. Replacing Neapolitan ice cream stripes with trans flag stripes.

Browse Source
This commit is contained in:
Rezmason
2021-10-20 09:19:06 -07:00
parent 4e88f68560
commit 28d38b032f
7 changed files with 57 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
js/bloomPass.js
View File

@@ -1,4 +1,4 @@
import { loadText, extractEntries, makePassFBO, makePyramid, resizePyramid, makePass } from "./utils.js";
import { loadText, makePassFBO, makePyramid, resizePyramid, makePass } from "./utils.js";
// The bloom pass is basically an added high-pass blur.
@@ -18,7 +18,7 @@ export default (regl, config, inputs) => {
});
}
const uniforms = extractEntries(config, ["bloomStrength", "highPassThreshold"]);
const { bloomStrength, highPassThreshold } = config;
const highPassPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
const hBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
@@ -31,7 +31,7 @@ export default (regl, config, inputs) => {
const highPass = regl({
frag: regl.prop("frag"),
uniforms: {
...uniforms,
highPassThreshold,
tex: regl.prop("tex"),
},
framebuffer: regl.prop("fbo"),
@@ -45,7 +45,6 @@ export default (regl, config, inputs) => {
const blur = regl({
frag: regl.prop("frag"),
uniforms: {
...uniforms,
tex: regl.prop("tex"),
direction: regl.prop("direction"),
height: regl.context("viewportWidth"),
@@ -68,7 +67,7 @@ export default (regl, config, inputs) => {
}
`,
uniforms: {
...uniforms,
bloomStrength,
...Object.fromEntries(vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])),
},
framebuffer: output,

2
js/main.js
View File

@@ -26,6 +26,8 @@ const effects = {
customStripes: makeStripePass,
stripes: makeStripePass,
pride: makeStripePass,
transPride: makeStripePass,
trans: makeStripePass,
image: makeImagePass,
resurrection: makeResurrectionPass,
resurrections: makeResurrectionPass,

5
js/palettePass.js
View File

@@ -1,4 +1,4 @@
import { loadText, extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
const colorToRGB = ([hue, saturation, lightness]) => {
const a = saturation * Math.min(lightness, 1 - lightness);
@@ -55,6 +55,7 @@ const makePalette = (regl, entries) => {
export default (regl, config, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const palette = makePalette(regl, config.paletteEntries);
const { backgroundColor } = config;
const palettePassFrag = loadText("../shaders/palettePass.frag");
@@ -62,7 +63,7 @@ export default (regl, config, inputs) => {
frag: regl.prop("frag"),
uniforms: {
...extractEntries(config, ["backgroundColor"]),
backgroundColor,
tex: inputs.primary,
bloomTex: inputs.bloom,
palette,

52
js/renderer.js
View File

@@ -1,4 +1,6 @@
import { extractEntries, loadImage, loadText, makePassFBO, makeDoubleBuffer, makePass } from "./utils.js";
import { loadImage, loadText, makePassFBO, makeDoubleBuffer, makePass } from "./utils.js";
const extractEntries = (src, keys) => Object.fromEntries(Array.from(Object.entries(src)).filter(([key]) => keys.includes(key)));
const rippleTypes = {
box: 0,
@@ -19,22 +21,11 @@ export default (regl, config) => {
const [numQuadRows, numQuadColumns] = volumetric ? [numRows, numColumns] : [1, 1];
const numQuads = numQuadRows * numQuadColumns;
const quadSize = [1 / numQuadColumns, 1 / numQuadRows];
// These two framebuffers are used to compute the raining code.
// they take turns being the source and destination of the "compute" shader.
// The half float data type is crucial! It lets us store almost any real number,
// whereas the default type limits us to integers between 0 and 255.
// This double buffer is smaller than the screen, because its pixels correspond
// with glyphs in the final image, and the glyphs are much larger than a pixel.
const doubleBuffer = makeDoubleBuffer(regl, {
width: numColumns,
height: numRows,
wrapT: "clamp",
type: "half float",
});
const output = makePassFBO(regl, config.useHalfFloat);
const rippleType = config.rippleTypeName in rippleTypes ? rippleTypes[config.rippleTypeName] : -1;
const cycleStyle = config.cycleStyleName in cycleStyles ? cycleStyles[config.cycleStyleName] : 0;
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 showComputationTexture = config.effect === "none";
const uniforms = {
...extractEntries(config, [
@@ -71,16 +62,31 @@ export default (regl, config) => {
numQuadColumns,
quadSize,
volumetric,
rippleType,
cycleStyle,
slantVec,
slantScale,
showComputationTexture,
};
uniforms.rippleType = config.rippleTypeName in rippleTypes ? rippleTypes[config.rippleTypeName] : -1;
uniforms.cycleStyle = config.cycleStyleName in cycleStyles ? cycleStyles[config.cycleStyleName] : 0;
uniforms.slantVec = [Math.cos(config.slant), Math.sin(config.slant)];
uniforms.slantScale = 1 / (Math.abs(Math.sin(2 * config.slant)) * (Math.sqrt(2) - 1) + 1);
uniforms.showComputationTexture = config.effect === "none";
const msdf = loadImage(regl, config.glyphTexURL);
// These two framebuffers are used to compute the raining code.
// they take turns being the source and destination of the "compute" shader.
// The half float data type is crucial! It lets us store almost any real number,
// whereas the default type limits us to integers between 0 and 255.
// This double buffer is smaller than the screen, because its pixels correspond
// with glyphs in the final image, and the glyphs are much larger than a pixel.
const doubleBuffer = makeDoubleBuffer(regl, {
width: numColumns,
height: numRows,
wrapT: "clamp",
type: "half float",
});
const output = makePassFBO(regl, config.useHalfFloat);
const updateFrag = loadText("../shaders/update.frag");
const update = regl({
frag: regl.prop("frag"),

15
js/resurrectionPass.js
View File

@@ -1,24 +1,15 @@
import { loadText, extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
const colorToRGB = ([hue, saturation, lightness]) => {
const a = saturation * Math.min(lightness, 1 - lightness);
const f = (n) => {
const k = (n + hue * 12) % 12;
return lightness - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
};
return [f(0), f(8), f(4)];
};
import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
export default (regl, config, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const { backgroundColor } = config;
const resurrectionPassFrag = loadText("../shaders/resurrectionPass.frag");
const render = regl({
frag: regl.prop("frag"),
uniforms: {
...extractEntries(config, ["backgroundColor"]),
backgroundColor,
tex: inputs.primary,
bloomTex: inputs.bloom,
ditherMagnitude: 0.05,

26
js/stripePass.js
View File

@@ -1,12 +1,17 @@
import { loadText, extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
const neapolitanStripeColors = [
[0.4, 0.15, 0.1],
[0.4, 0.15, 0.1],
[0.8, 0.8, 0.6],
[0.8, 0.8, 0.6],
[1.0, 0.7, 0.8],
[1.0, 0.7, 0.8],
const transPrideStripeColors = [
[0.3, 1.0, 1.0],
[0.3, 1.0, 1.0],
[1.0, 0.5, 0.8],
[1.0, 0.5, 0.8],
[1.0, 1.0, 1.0],
[1.0, 1.0, 1.0],
[1.0, 1.0, 1.0],
[1.0, 0.5, 0.8],
[1.0, 0.5, 0.8],
[0.3, 1.0, 1.0],
[0.3, 1.0, 1.0],
].flat();
const prideStripeColors = [
@@ -21,8 +26,9 @@ const prideStripeColors = [
export default (regl, config, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const { backgroundColor } = config;
const stripeColors =
"stripeColors" in config ? config.stripeColors.split(",").map(parseFloat) : config.effect === "pride" ? prideStripeColors : neapolitanStripeColors;
"stripeColors" in config ? config.stripeColors.split(",").map(parseFloat) : config.effect === "pride" ? prideStripeColors : transPrideStripeColors;
const numStripeColors = Math.floor(stripeColors.length / 3);
const stripes = make1DTexture(
regl,
@@ -35,7 +41,7 @@ export default (regl, config, inputs) => {
frag: regl.prop("frag"),
uniforms: {
...extractEntries(config, ["backgroundColor"]),
backgroundColor,
tex: inputs.primary,
bloomTex: inputs.bloom,
stripes,

3
js/utils.js
View File

@@ -1,5 +1,3 @@
const extractEntries = (src, keys) => Object.fromEntries(Array.from(Object.entries(src)).filter(([key]) => keys.includes(key)));
const makePassTexture = (regl, halfFloat) =>
regl.texture({
width: 1,
@@ -182,7 +180,6 @@ const makePipeline = (steps, getInputs, ...params) =>
steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(...params, i == 0 ? null : getInputs(pipeline[i - 1]))], []);
export {
extractEntries,
makePassTexture,
makePassFBO,
makeDoubleBuffer,