From cde709b0449f1359b10f303d43fa0172842aecd6 Mon Sep 17 00:00:00 2001 From: Rezmason Date: Tue, 27 Sep 2022 22:30:50 -0700 Subject: [PATCH] Renaming paletteEntries to palette --- TODO.txt | 2 ++ js/config.js | 23 ++++++++++++----------- js/regl/main.js | 3 ++- js/regl/palettePass.js | 4 ++-- js/regl/stripePass.js | 22 +++++++++++----------- js/webgpu/main.js | 3 ++- js/webgpu/palettePass.js | 2 +- shaders/glsl/palettePass.frag.glsl | 4 ++-- 8 files changed, 34 insertions(+), 29 deletions(-) diff --git a/TODO.txt b/TODO.txt index 30718f4..80d29b1 100644 --- a/TODO.txt +++ b/TODO.txt @@ -1,5 +1,7 @@ TODO: +All colors in config should be able to be RGB or HSL + Bloom comparison: WebGPU vs REGL Why are they different? Create a project that tests them side-by-side diff --git a/js/config.js b/js/config.js index cc08a5e..fd0dcce 100644 --- a/js/config.js +++ b/js/config.js @@ -61,6 +61,7 @@ const textureURLs = { const defaults = { font: "matrixcode", + 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, @@ -97,7 +98,7 @@ const defaults = { 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 - paletteEntries: [ + palette: [ // The color palette that glyph brightness is color mapped to { hsl: [0.3, 0.9, 0.0], at: 0.0 }, { hsl: [0.3, 0.9, 0.2], at: 0.2 }, @@ -136,7 +137,7 @@ const versions = { glyphHeightToWidth: 1.35, rippleTypeName: "box", numColumns: 108, - paletteEntries: [ + palette: [ { hsl: [0.4, 0.8, 0.0], at: 0.0 }, { hsl: [0.4, 0.8, 0.5], at: 0.5 }, { hsl: [0.4, 0.8, 1.0], at: 1.0 }, @@ -153,7 +154,7 @@ const versions = { hasThunder: true, numColumns: 60, cycleSpeed: 0.35, - paletteEntries: [ + palette: [ { hsl: [0.0, 1.0, 0.0], at: 0.0 }, { hsl: [0.0, 1.0, 0.2], at: 0.2 }, { hsl: [0.0, 1.0, 0.4], at: 0.4 }, @@ -177,7 +178,7 @@ const versions = { rippleTypeName: "circle", rippleSpeed: 0.1, numColumns: 40, - paletteEntries: [ + palette: [ { hsl: [0.0, 0.0, 0.0], at: 0.0 }, { hsl: [0.0, 0.8, 0.3], at: 0.3 }, { hsl: [0.1, 0.8, 0.5], at: 0.5 }, @@ -197,7 +198,7 @@ const versions = { cycleSpeed: 0.03, bloomStrength: 0.7, fallSpeed: 0.3, - paletteEntries: [ + palette: [ { hsl: [0.375, 0.9, 0.0], at: 0.0 }, { hsl: [0.375, 1.0, 0.6], at: 0.92 }, { hsl: [0.375, 1.0, 1.0], at: 1.0 }, @@ -220,7 +221,7 @@ const versions = { cycleSpeed: 0.03, bloomStrength: 0.7, fallSpeed: 0.3, - paletteEntries: [ + palette: [ { hsl: [0.37, 0.6, 0.0], at: 0.0 }, { hsl: [0.37, 0.6, 0.5], at: 1.0 }, ], @@ -247,7 +248,7 @@ const versions = { cycleSpeed: 0.03, bloomStrength: 0.7, fallSpeed: 0.3, - paletteEntries: [ + palette: [ { hsl: [0.97, 0.6, 0.0], at: 0.0 }, { hsl: [0.97, 0.6, 0.5], at: 1.0 }, ], @@ -274,7 +275,7 @@ const versions = { cycleSpeed: 0.03, bloomStrength: 0.7, fallSpeed: 0.3, - paletteEntries: [ + palette: [ { hsl: [0.12, 0.6, 0.0], at: 0.0 }, { hsl: [0.14, 0.6, 0.5], at: 1.0 }, ], @@ -293,7 +294,7 @@ const versions = { cycleFrameSkip: 3, fallSpeed: 0.5, slant: Math.PI * -0.0625, - paletteEntries: [ + palette: [ { hsl: [0.15, 0.25, 0.9], at: 0.0 }, { hsl: [0.6, 0.8, 0.1], at: 0.4 }, ], @@ -306,7 +307,7 @@ const versions = { raindropLength: 0.9, fallSpeed: 0.1, highPassThreshold: 0.0, - paletteEntries: [ + palette: [ { hsl: [0.6, 1.0, 0.05], at: 0.0 }, { hsl: [0.6, 0.8, 0.1], at: 0.1 }, { hsl: [0.88, 0.8, 0.5], at: 0.5 }, @@ -330,7 +331,7 @@ const versions = { cycleSpeed: 0.03, bloomStrength: 0.7, fallSpeed: 0.3, - paletteEntries: [ + palette: [ { hsl: [0.37, 0.6, 0.0], at: 0.0 }, { hsl: [0.37, 0.6, 0.5], at: 1.0 }, ], diff --git a/js/regl/main.js b/js/regl/main.js index 635fe6c..2802a47 100644 --- a/js/regl/main.js +++ b/js/regl/main.js @@ -13,6 +13,7 @@ import getLKG from "./lkgHelper.js"; const effects = { none: null, plain: makePalettePass, + palette: makePalettePass, customStripes: makeStripePass, stripes: makeStripePass, pride: makeStripePass, @@ -72,7 +73,7 @@ export default async (canvas, config) => { // All this takes place in a full screen quad. const fullScreenQuad = makeFullScreenQuad(regl); - const effectName = config.effect in effects ? config.effect : "plain"; + const effectName = config.effect in effects ? config.effect : "palette"; const context = { regl, config, lkg, cameraTex, cameraAspectRatio }; const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName], makeQuiltPass]); const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary }; diff --git a/js/regl/palettePass.js b/js/regl/palettePass.js index 83cbd71..1d25620 100644 --- a/js/regl/palettePass.js +++ b/js/regl/palettePass.js @@ -64,7 +64,7 @@ const makePalette = (regl, entries) => { export default ({ regl, config }, inputs) => { const output = makePassFBO(regl, config.useHalfFloat); - const palette = makePalette(regl, config.paletteEntries); + const paletteTex = makePalette(regl, config.palette); const { backgroundColor, cursorColor, glintColor, ditherMagnitude, bloomStrength } = config; const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl"); @@ -80,7 +80,7 @@ export default ({ regl, config }, inputs) => { bloomStrength, tex: inputs.primary, bloomTex: inputs.bloom, - palette, + paletteTex, }, framebuffer: output, }); diff --git a/js/regl/stripePass.js b/js/regl/stripePass.js index 100db04..4af4377 100644 --- a/js/regl/stripePass.js +++ b/js/regl/stripePass.js @@ -12,9 +12,9 @@ const transPrideStripeColors = [ [0.96, 0.66, 0.72], [0.96, 0.66, 0.72], [0.96, 0.66, 0.72], - [1.00, 1.00, 1.00], - [1.00, 1.00, 1.00], - [1.00, 1.00, 1.00], + [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], @@ -26,14 +26,14 @@ const transPrideStripeColors = [ const prideStripeColors = [ [0.89, 0.01, 0.01], [0.89, 0.01, 0.01], - [1.00, 0.55, 0.00], - [1.00, 0.55, 0.00], - [1.00, 0.93, 0.00], - [1.00, 0.93, 0.00], - [0.00, 0.50, 0.15], - [0.00, 0.50, 0.15], - [0.00, 0.30, 1.00], - [0.00, 0.30, 1.00], + [1.0, 0.55, 0.0], + [1.0, 0.55, 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.3, 1.0], + [0.0, 0.3, 1.0], [0.46, 0.03, 0.53], [0.46, 0.03, 0.53], ].flat(); diff --git a/js/webgpu/main.js b/js/webgpu/main.js index 2d6b795..3415d0e 100644 --- a/js/webgpu/main.js +++ b/js/webgpu/main.js @@ -22,6 +22,7 @@ const loadJS = (src) => const effects = { none: null, plain: makePalettePass, + palette: makePalettePass, customStripes: makeStripePass, stripes: makeStripePass, pride: makeStripePass, @@ -88,7 +89,7 @@ export default async (canvas, config) => { cameraSize, }; - const effectName = config.effect in effects ? config.effect : "plain"; + const effectName = config.effect in effects ? config.effect : "palette"; const pipeline = await makePipeline(context, [makeRain, makeBloomPass, effects[effectName], makeEndPass]); let frames = 0; diff --git a/js/webgpu/palettePass.js b/js/webgpu/palettePass.js index 960c0fa..dcc6a3e 100644 --- a/js/webgpu/palettePass.js +++ b/js/webgpu/palettePass.js @@ -112,7 +112,7 @@ export default ({ config, device, timeBuffer }) => { }); const paletteUniforms = paletteShaderUniforms.Palette; - paletteBuffer = makePalette(device, paletteUniforms, config.paletteEntries); + paletteBuffer = makePalette(device, paletteUniforms, config.palette); })(); const build = (size, inputs) => { diff --git a/shaders/glsl/palettePass.frag.glsl b/shaders/glsl/palettePass.frag.glsl index 753f856..4d32b88 100644 --- a/shaders/glsl/palettePass.frag.glsl +++ b/shaders/glsl/palettePass.frag.glsl @@ -3,7 +3,7 @@ precision mediump float; uniform sampler2D tex; uniform sampler2D bloomTex; -uniform sampler2D palette; +uniform sampler2D paletteTex; uniform float bloomStrength; uniform float ditherMagnitude; uniform float time; @@ -30,7 +30,7 @@ void main() { // Map the brightness to a position in the palette texture gl_FragColor = vec4( - texture2D( palette, vec2(brightness.r, 0.0)).rgb + texture2D( paletteTex, vec2(brightness.r, 0.0)).rgb + min(cursorColor * brightness.g, vec3(1.0)) + min(glintColor * brightness.b, vec3(1.0)) + backgroundColor,