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

RGBs in config are no longer flat

Browse Source
This commit is contained in:
Rezmason
2022-09-28 08:49:09 -07:00
parent 67cfdcb132
commit 22dd5e8678
6 changed files with 52 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
js/config.js
View File

@@ -369,18 +369,12 @@ versions["2021"] = versions.resurrections;
const range = (f, min = -Infinity, max = Infinity) => Math.max(min, Math.min(max, f)); const range = (f, min = -Infinity, max = Infinity) => Math.max(min, Math.min(max, f));
const nullNaN = (f) => (isNaN(f) ? null : f); const nullNaN = (f) => (isNaN(f) ? null : f);
const clumpArray = (array, clumpSize) => const parseColors = (isHSL) => (s) => {
array.reduce((result, value) => { const values = s.split(",").map(parseFloat);
if (result.length > 0) { return Array(Math.floor(values.length / 3))
const last = result[result.length - 1]; .fill()
if (last.length < clumpSize) { .map((_, index) => values.slice(index * 3, (index + 1) * 3));
last.push(value); };
return result;
}
}
result.push([value]);
return result;
}, []);
const paramMapping = { const paramMapping = {
version: { key: "version", parser: (s) => s }, version: { key: "version", parser: (s) => s },
@@ -422,10 +416,10 @@ const paramMapping = {
parser: (s) => nullNaN(range(parseFloat(s), 0, 1)), parser: (s) => nullNaN(range(parseFloat(s), 0, 1)),
}, },
url: { key: "bgURL", parser: (s) => s }, url: { key: "bgURL", parser: (s) => s },
stripeColors: { key: "stripeColors", parser: (s) => s }, stripeColors: { key: "stripeColors", parser: parseColors(false) },
backgroundColor: { key: "backgroundColor", parser: (s) => s.split(",").map(parseFloat) }, backgroundColor: { key: "backgroundColor", parser: parseColors(false) },
cursorColor: { key: "cursorColor", parser: (s) => s.split(",").map(parseFloat) }, cursorColor: { key: "cursorColor", parser: parseColors(false) },
glintColor: { key: "glintColor", parser: (s) => s.split(",").map(parseFloat) }, glintColor: { key: "glintColor", parser: parseColors(false) },
volumetric: { key: "volumetric", parser: (s) => s.toLowerCase().includes("true") }, volumetric: { key: "volumetric", parser: (s) => s.toLowerCase().includes("true") },
loops: { key: "loops", parser: (s) => s.toLowerCase().includes("true") }, loops: { key: "loops", parser: (s) => s.toLowerCase().includes("true") },
skipIntro: { key: "skipIntro", parser: (s) => s.toLowerCase().includes("true") }, skipIntro: { key: "skipIntro", parser: (s) => s.toLowerCase().includes("true") },

34
js/regl/stripePass.js
View File

@@ -7,36 +7,24 @@ import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
const transPrideStripeColors = [ const transPrideStripeColors = [
[0.36, 0.81, 0.98], [0.36, 0.81, 0.98],
[0.36, 0.81, 0.98],
[0.36, 0.81, 0.98],
[0.96, 0.66, 0.72],
[0.96, 0.66, 0.72],
[0.96, 0.66, 0.72], [0.96, 0.66, 0.72],
[1.0, 1.0, 1.0], [1.0, 1.0, 1.0],
[1.0, 1.0, 1.0],
[1.0, 1.0, 1.0],
[0.96, 0.66, 0.72],
[0.96, 0.66, 0.72],
[0.96, 0.66, 0.72], [0.96, 0.66, 0.72],
[0.36, 0.81, 0.98], [0.36, 0.81, 0.98],
[0.36, 0.81, 0.98], ]
[0.36, 0.81, 0.98], .map((color) => Array(3).fill(color))
].flat(); .flat();
const prideStripeColors = [ const prideStripeColors = [
[0.89, 0.01, 0.01], [0.89, 0.01, 0.01],
[0.89, 0.01, 0.01],
[1.0, 0.55, 0.0],
[1.0, 0.55, 0.0], [1.0, 0.55, 0.0],
[1.0, 0.93, 0.0], [1.0, 0.93, 0.0],
[1.0, 0.93, 0.0],
[0.0, 0.5, 0.15],
[0.0, 0.5, 0.15], [0.0, 0.5, 0.15],
[0.0, 0.3, 1.0], [0.0, 0.3, 1.0],
[0.0, 0.3, 1.0],
[0.46, 0.03, 0.53], [0.46, 0.03, 0.53],
[0.46, 0.03, 0.53], ]
].flat(); .map((color) => Array(2).fill(color))
.flat();
export default ({ regl, config }, inputs) => { export default ({ regl, config }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat); const output = makePassFBO(regl, config.useHalfFloat);
@@ -44,12 +32,10 @@ export default ({ regl, config }, inputs) => {
const { backgroundColor, cursorColor, glintColor, ditherMagnitude, bloomStrength } = config; const { backgroundColor, cursorColor, glintColor, ditherMagnitude, bloomStrength } = config;
// Expand and convert stripe colors into 1D texture data // Expand and convert stripe colors into 1D texture data
const stripeColors = const stripeColors = "stripeColors" in config ? config.stripeColors : config.effect === "pride" ? prideStripeColors : transPrideStripeColors;
"stripeColors" in config ? config.stripeColors.split(",").map(parseFloat) : config.effect === "pride" ? prideStripeColors : transPrideStripeColors; const stripeTex = make1DTexture(
const numStripeColors = Math.floor(stripeColors.length / 3);
const stripes = make1DTexture(
regl, regl,
stripeColors.slice(0, numStripeColors * 3).map((f) => Math.floor(f * 0xff)) stripeColors.map((rgb) => [...rgb, 1])
); );
const stripePassFrag = loadText("shaders/glsl/stripePass.frag.glsl"); const stripePassFrag = loadText("shaders/glsl/stripePass.frag.glsl");
@@ -65,7 +51,7 @@ export default ({ regl, config }, inputs) => {
bloomStrength, bloomStrength,
tex: inputs.primary, tex: inputs.primary,
bloomTex: inputs.bloom, bloomTex: inputs.bloom,
stripes, stripeTex,
}, },
framebuffer: output, framebuffer: output,
}); });

10
js/regl/utils.js
View File

@@ -110,15 +110,17 @@ const makeFullScreenQuad = (regl, uniforms = {}, context = {}) =>
depth: { enable: false }, depth: { enable: false },
}); });
const make1DTexture = (regl, data) => const make1DTexture = (regl, rgbas) => {
regl.texture({ const data = rgbas.map((rgba) => rgba.map((f) => Math.floor(f * 0xff))).flat();
return regl.texture({
data, data,
width: data.length / 3, width: data.length / 4,
height: 1, height: 1,
format: "rgb", format: "rgba",
mag: "linear", mag: "linear",
min: "linear", min: "linear",
}); });
};
const makePass = (outputs, ready, setSize, execute) => ({ const makePass = (outputs, ready, setSize, execute) => ({
outputs: outputs ?? {}, outputs: outputs ?? {},

49
js/webgpu/stripePass.js
View File

@@ -7,27 +7,25 @@ import { loadShader, make1DTexture, makeUniformBuffer, makeBindGroup, makeComput
// This shader introduces noise into the renders, to avoid banding // This shader introduces noise into the renders, to avoid banding
const transPrideStripeColors = [ const transPrideStripeColors = [
[0.3, 1.0, 1.0], [0.36, 0.81, 0.98],
[0.3, 1.0, 1.0], [0.96, 0.66, 0.72],
[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], [0.96, 0.66, 0.72],
[1.0, 1.0, 1.0], [0.36, 0.81, 0.98],
[1.0, 0.5, 0.8], ]
[1.0, 0.5, 0.8], .map((color) => Array(3).fill(color))
[0.3, 1.0, 1.0], .flat(1);
[0.3, 1.0, 1.0],
].flat();
const prideStripeColors = [ const prideStripeColors = [
[1, 0, 0], [0.89, 0.01, 0.01],
[1, 0.5, 0], [1.0, 0.55, 0.0],
[1, 1, 0], [1.0, 0.93, 0.0],
[0, 1, 0], [0.0, 0.5, 0.15],
[0, 0, 1], [0.0, 0.3, 1.0],
[0.8, 0, 1], [0.46, 0.03, 0.53],
].flat(); ]
.map((color) => Array(2).fill(color))
.flat(1);
const numVerticesPerQuad = 2 * 3; const numVerticesPerQuad = 2 * 3;
@@ -39,14 +37,11 @@ const numVerticesPerQuad = 2 * 3;
export default ({ config, device, timeBuffer }) => { export default ({ config, device, timeBuffer }) => {
// Expand and convert stripe colors into 1D texture data // Expand and convert stripe colors into 1D texture data
const input = const stripeColors = "stripeColors" in config ? config.stripeColors : config.effect === "pride" ? prideStripeColors : transPrideStripeColors;
"stripeColors" in config ? config.stripeColors.split(",").map(parseFloat) : config.effect === "pride" ? prideStripeColors : transPrideStripeColors; const stripeTex = make1DTexture(
device,
const stripeColors = Array(Math.floor(input.length / 3)) stripeColors.map((rgb) => [...rgb, 1])
.fill() );
.map((_, index) => [...input.slice(index * 3, (index + 1) * 3), 1]);
const stripeTexture = make1DTexture(device, stripeColors);
const linearSampler = device.createSampler({ const linearSampler = device.createSampler({
magFilter: "linear", magFilter: "linear",
@@ -105,7 +100,7 @@ export default ({ config, device, timeBuffer }) => {
linearSampler, linearSampler,
tex.createView(), tex.createView(),
bloomTex.createView(), bloomTex.createView(),
stripeTexture.createView(), stripeTex.createView(),
output.createView(), output.createView(),
]); ]);
computePass.setBindGroup(0, computeBindGroup); computePass.setBindGroup(0, computeBindGroup);

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

@@ -4,7 +4,7 @@ precision mediump float;
uniform sampler2D tex; uniform sampler2D tex;
uniform sampler2D bloomTex; uniform sampler2D bloomTex;
uniform float bloomStrength; uniform float bloomStrength;
uniform sampler2D stripes; uniform sampler2D stripeTex;
uniform float ditherMagnitude; uniform float ditherMagnitude;
uniform float time; uniform float time;
uniform vec3 backgroundColor, cursorColor, glintColor; uniform vec3 backgroundColor, cursorColor, glintColor;
@@ -23,7 +23,7 @@ vec4 getBrightness(vec2 uv) {
} }
void main() { void main() {
vec3 color = texture2D(stripes, vUV).rgb; vec3 color = texture2D(stripeTex, vUV).rgb;
vec4 brightness = getBrightness(vUV); vec4 brightness = getBrightness(vUV);

4
shaders/wgsl/stripePass.wgsl
View File

@@ -16,7 +16,7 @@ struct Time {
@group(0) @binding(2) var linearSampler : sampler; @group(0) @binding(2) var linearSampler : sampler;
@group(0) @binding(3) var tex : texture_2d<f32>; @group(0) @binding(3) var tex : texture_2d<f32>;
@group(0) @binding(4) var bloomTex : texture_2d<f32>; @group(0) @binding(4) var bloomTex : texture_2d<f32>;
@group(0) @binding(5) var stripeTexture : texture_2d<f32>; @group(0) @binding(5) var stripeTex : texture_2d<f32>;
@group(0) @binding(6) var outputTex : texture_storage_2d<rgba8unorm, write>; @group(0) @binding(6) var outputTex : texture_storage_2d<rgba8unorm, write>;
struct ComputeInput { struct ComputeInput {
@@ -52,7 +52,7 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var uv = vec2<f32>(coord) / vec2<f32>(screenSize); var uv = vec2<f32>(coord) / vec2<f32>(screenSize);
var color = textureSampleLevel( stripeTexture, linearSampler, uv, 0.0 ).rgb; var color = textureSampleLevel( stripeTex, linearSampler, uv, 0.0 ).rgb;
var brightness = getBrightness(uv); var brightness = getBrightness(uv);