From 661989a47084bf2b096e046f85e9b5c12d309c19 Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Tue, 22 Nov 2022 20:29:07 +0600 Subject: [PATCH 01/10] make palettePass transparent --- js/regl/palettePass.js | 3 +-- js/webgpu/main.js | 1 - js/webgpu/palettePass.js | 1 - shaders/glsl/palettePass.frag.glsl | 7 +++---- shaders/wgsl/palettePass.wgsl | 6 ++---- 5 files changed, 6 insertions(+), 12 deletions(-) diff --git a/js/regl/palettePass.js b/js/regl/palettePass.js index 7c9a548..2d1e443 100644 --- a/js/regl/palettePass.js +++ b/js/regl/palettePass.js @@ -57,7 +57,7 @@ const makePalette = (regl, entries) => { export default ({ regl, config }, inputs) => { const output = makePassFBO(regl, config.useHalfFloat); const paletteTex = makePalette(regl, config.palette); - const { backgroundColor, cursorColor, glintColor, cursorIntensity, glintIntensity, ditherMagnitude } = config; + const { cursorColor, glintColor, cursorIntensity, glintIntensity, ditherMagnitude } = config; const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl"); @@ -65,7 +65,6 @@ export default ({ regl, config }, inputs) => { frag: regl.prop("frag"), uniforms: { - backgroundColor: colorToRGB(backgroundColor), cursorColor: colorToRGB(cursorColor), glintColor: colorToRGB(glintColor), cursorIntensity, diff --git a/js/webgpu/main.js b/js/webgpu/main.js index aa5ce42..0210ae4 100644 --- a/js/webgpu/main.js +++ b/js/webgpu/main.js @@ -63,7 +63,6 @@ export default async (canvas, config) => { canvasContext.configure({ device, format: canvasFormat, - alphaMode: "opaque", usage: // GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST, diff --git a/js/webgpu/palettePass.js b/js/webgpu/palettePass.js index 7e2b479..5551a02 100644 --- a/js/webgpu/palettePass.js +++ b/js/webgpu/palettePass.js @@ -97,7 +97,6 @@ export default ({ config, device, timeBuffer }) => { const configUniforms = paletteShaderUniforms.Config; configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, - backgroundColor: colorToRGB(config.backgroundColor), cursorColor: colorToRGB(config.cursorColor), glintColor: colorToRGB(config.glintColor), cursorIntensity: config.cursorIntensity, diff --git a/shaders/glsl/palettePass.frag.glsl b/shaders/glsl/palettePass.frag.glsl index 6fda862..cff547b 100644 --- a/shaders/glsl/palettePass.frag.glsl +++ b/shaders/glsl/palettePass.frag.glsl @@ -6,7 +6,7 @@ uniform sampler2D bloomTex; uniform sampler2D paletteTex; uniform float ditherMagnitude; uniform float time; -uniform vec3 backgroundColor, cursorColor, glintColor; +uniform vec3 cursorColor, glintColor; uniform float cursorIntensity, glintIntensity; varying vec2 vUV; @@ -32,8 +32,7 @@ void main() { gl_FragColor = vec4( texture2D( paletteTex, vec2(brightness.r, 0.0)).rgb + min(cursorColor * cursorIntensity * brightness.g, vec3(1.0)) - + min(glintColor * glintIntensity * brightness.b, vec3(1.0)) - + backgroundColor, - 1.0 + + min(glintColor * glintIntensity * brightness.b, vec3(1.0)), + 0.0 ); } diff --git a/shaders/wgsl/palettePass.wgsl b/shaders/wgsl/palettePass.wgsl index 7c087a5..166fd98 100644 --- a/shaders/wgsl/palettePass.wgsl +++ b/shaders/wgsl/palettePass.wgsl @@ -1,6 +1,5 @@ struct Config { ditherMagnitude : f32, - backgroundColor : vec3, cursorColor : vec3, glintColor : vec3, cursorIntensity : f32, @@ -68,9 +67,8 @@ fn getBrightness(uv : vec2) -> vec4 { textureStore(outputTex, coord, vec4( palette.colors[paletteIndex] + min(config.cursorColor * config.cursorIntensity * brightness.g, vec3(1.0)) - + min(config.glintColor * config.glintIntensity * brightness.b, vec3(1.0)) - + config.backgroundColor, - 1.0 + + min(config.glintColor * config.glintIntensity * brightness.b, vec3(1.0)), + 0.0 )); } From 328e2171698caeb2e9809435a9974b7292809813 Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Tue, 22 Nov 2022 22:14:13 +0600 Subject: [PATCH 02/10] fix black bg on full screen --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 90150eb..ce26e28 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,10 @@ height: 100vh; } + canvas::backdrop { + background-color: transparent; + } + p { color: hsl(108, 90%, 70%); text-shadow: hsl(108, 90%, 40%) 1px 0 10px; From a219f09962bffb75eb3cf61aa65294118f43b163 Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Tue, 22 Nov 2022 23:11:07 +0600 Subject: [PATCH 03/10] remove background from stripePass --- js/regl/stripePass.js | 3 +-- js/webgpu/stripePass.js | 1 - shaders/glsl/stripePass.frag.glsl | 7 +++---- shaders/wgsl/stripePass.wgsl | 6 ++---- 4 files changed, 6 insertions(+), 11 deletions(-) diff --git a/js/regl/stripePass.js b/js/regl/stripePass.js index a45dd61..0b708b1 100644 --- a/js/regl/stripePass.js +++ b/js/regl/stripePass.js @@ -30,7 +30,7 @@ const prideStripeColors = [ export default ({ regl, config }, inputs) => { const output = makePassFBO(regl, config.useHalfFloat); - const { backgroundColor, cursorColor, glintColor, cursorIntensity, glintIntensity, ditherMagnitude } = config; + const { cursorColor, glintColor, cursorIntensity, glintIntensity, ditherMagnitude } = config; // Expand and convert stripe colors into 1D texture data const stripeColors = "stripeColors" in config ? config.stripeColors : config.effect === "pride" ? prideStripeColors : transPrideStripeColors; @@ -45,7 +45,6 @@ export default ({ regl, config }, inputs) => { frag: regl.prop("frag"), uniforms: { - backgroundColor: colorToRGB(backgroundColor), cursorColor: colorToRGB(cursorColor), glintColor: colorToRGB(glintColor), cursorIntensity, diff --git a/js/webgpu/stripePass.js b/js/webgpu/stripePass.js index 3f709ce..168578a 100644 --- a/js/webgpu/stripePass.js +++ b/js/webgpu/stripePass.js @@ -72,7 +72,6 @@ export default ({ config, device, timeBuffer }) => { const configUniforms = structs.from(stripeShader.code).Config; configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, - backgroundColor: colorToRGB(config.backgroundColor), cursorColor: colorToRGB(config.cursorColor), glintColor: colorToRGB(config.glintColor), cursorIntensity: config.cursorIntensity, diff --git a/shaders/glsl/stripePass.frag.glsl b/shaders/glsl/stripePass.frag.glsl index dbd5280..f12a66a 100644 --- a/shaders/glsl/stripePass.frag.glsl +++ b/shaders/glsl/stripePass.frag.glsl @@ -6,7 +6,7 @@ uniform sampler2D bloomTex; uniform sampler2D stripeTex; uniform float ditherMagnitude; uniform float time; -uniform vec3 backgroundColor, cursorColor, glintColor; +uniform vec3 cursorColor, glintColor; uniform float cursorIntensity, glintIntensity; varying vec2 vUV; @@ -33,8 +33,7 @@ void main() { gl_FragColor = vec4( color * brightness.r + min(cursorColor * cursorIntensity * brightness.g, vec3(1.0)) - + min(glintColor * glintIntensity * brightness.b, vec3(1.0)) - + backgroundColor, - 1.0 + + min(glintColor * glintIntensity * brightness.b, vec3(1.0)), + 0.0 ); } diff --git a/shaders/wgsl/stripePass.wgsl b/shaders/wgsl/stripePass.wgsl index c8646bb..3dbf7eb 100644 --- a/shaders/wgsl/stripePass.wgsl +++ b/shaders/wgsl/stripePass.wgsl @@ -1,6 +1,5 @@ struct Config { ditherMagnitude : f32, - backgroundColor : vec3, cursorColor : vec3, glintColor : vec3, cursorIntensity : f32, @@ -63,8 +62,7 @@ fn getBrightness(uv : vec2) -> vec4 { textureStore(outputTex, coord, vec4( color * brightness.r + min(config.cursorColor * config.cursorIntensity * brightness.g, vec3(1.0)) - + min(config.glintColor * config.glintIntensity * brightness.b, vec3(1.0)) - + config.backgroundColor, - 1.0 + + min(config.glintColor * config.glintIntensity * brightness.b, vec3(1.0)), + 0.0 )); } From 3f1aa0a6e346794a04bbc7895cdcdc18e258c42f Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Tue, 22 Nov 2022 23:39:30 +0600 Subject: [PATCH 04/10] made imagePass transparent --- shaders/glsl/imagePass.frag.glsl | 2 +- shaders/wgsl/imagePass.wgsl | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/shaders/glsl/imagePass.frag.glsl b/shaders/glsl/imagePass.frag.glsl index 1de22d6..6cdfc18 100644 --- a/shaders/glsl/imagePass.frag.glsl +++ b/shaders/glsl/imagePass.frag.glsl @@ -16,5 +16,5 @@ void main() { // Combine the texture and bloom, then blow it out to reveal more of the image vec4 brightness = getBrightness(vUV); - gl_FragColor = vec4(bgColor * (brightness.r + brightness.g * 2.0), 1.0); + gl_FragColor = vec4(bgColor * (brightness.r + brightness.g * 2.0), 0.0); } diff --git a/shaders/wgsl/imagePass.wgsl b/shaders/wgsl/imagePass.wgsl index 419e85e..0112e29 100644 --- a/shaders/wgsl/imagePass.wgsl +++ b/shaders/wgsl/imagePass.wgsl @@ -38,5 +38,5 @@ fn getBrightness(uv : vec2) -> vec4 { // Combine the texture and bloom, then blow it out to reveal more of the image var brightness = getBrightness(uv); - textureStore(outputTex, coord, vec4(bgColor * (brightness.r + brightness.g * 2.0), 1.0)); + textureStore(outputTex, coord, vec4(bgColor * (brightness.r + brightness.g * 2.0), 0.0)); } From 42ccc110b51b1d1baca2dc8a0d2af810a8929828 Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Tue, 22 Nov 2022 23:41:36 +0600 Subject: [PATCH 05/10] made mirrorPass transparent --- shaders/glsl/mirrorPass.frag.glsl | 2 +- shaders/wgsl/mirrorPass.wgsl | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/shaders/glsl/mirrorPass.frag.glsl b/shaders/glsl/mirrorPass.frag.glsl index 5683fc3..f7e6d96 100644 --- a/shaders/glsl/mirrorPass.frag.glsl +++ b/shaders/glsl/mirrorPass.frag.glsl @@ -34,5 +34,5 @@ void main() { vec3 code = mix(webcam, vec3(0.7, 1.0, 0.4), texture2D(tex, uv).r * (1.0 + intensity * 0.3) + texture2D(bloomTex, uv).r * 0.5); - gl_FragColor = vec4(code, 1.0); + gl_FragColor = vec4(code, 0.0); } diff --git a/shaders/wgsl/mirrorPass.wgsl b/shaders/wgsl/mirrorPass.wgsl index 0372c1e..2577e82 100644 --- a/shaders/wgsl/mirrorPass.wgsl +++ b/shaders/wgsl/mirrorPass.wgsl @@ -76,5 +76,5 @@ fn getBrightness(uv : vec2, intensity : f32) -> vec4 { webcam *= mix(vec3(0.1, 0.3, 0.0), vec3(0.9, 1.0, 0.7), 1.0 - length(uv - 0.5) * 1.5); var code = mix(webcam, vec3(0.7, 1.0, 0.4), getBrightness(rippledUV, intensity).r); - textureStore(outputTex, coord, vec4(code, 1.0)); + textureStore(outputTex, coord, vec4(code, 0.0)); } From 8e108571f918e0eb760f060ff8ac9c33fa03363c Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Wed, 23 Nov 2022 11:51:13 +0600 Subject: [PATCH 06/10] explicitly set GPUCanvasAlphaMode to premultiplied --- js/webgpu/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/webgpu/main.js b/js/webgpu/main.js index 0210ae4..1bb19cf 100644 --- a/js/webgpu/main.js +++ b/js/webgpu/main.js @@ -62,6 +62,7 @@ export default async (canvas, config) => { canvasContext.configure({ device, + alphaMode: "premultiplied", format: canvasFormat, usage: // GPUTextureUsage.STORAGE_BINDING | From ac386e7bdf3cae58dc3a4487cb8a705e470623cd Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Wed, 23 Nov 2022 15:39:14 +0600 Subject: [PATCH 07/10] rename url & bgURL to glyphURL & glyphBGURL --- README.md | 2 +- js/config.js | 2 +- js/regl/imagePass.js | 6 +++--- js/webgpu/imagePass.js | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 332500f..abd0798 100644 --- a/README.md +++ b/README.md @@ -135,7 +135,7 @@ Now you know link fu. Here's a list of customization options: - `paletteHSL`, `stripeHSL`, `backgroundHSL`, `cursorHSL`, and `glintHSL` — the same as the above, except they use *H,S,L* (hue, saturation, lightness) instead of *R,G,B*. - `cursorIntensity`, — the brightness of cursors' glow. Can be any number greater than zero. Default is 2.0. - `glintIntensity` — the brightness of glint glow, if there is any glint. Can be any number greater than zero. Default is 1.0. -- `url` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) +- `glyphURL` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) - `loops` - (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video. - `fps` — the framerate of the effect. Can be any number between 0 and 60. Default is 60. diff --git a/js/config.js b/js/config.js index 3fd53f4..253c6c4 100644 --- a/js/config.js +++ b/js/config.js @@ -475,7 +475,7 @@ const paramMapping = { key: "ditherMagnitude", parser: (s) => nullNaN(range(parseFloat(s), 0, 1)), }, - url: { key: "bgURL", parser: (s) => s }, + glyphURL: { key: "glyphBGURL", parser: (s) => s }, palette: { key: "palette", parser: parsePalette(false) }, stripeColors: { key: "stripeColors", parser: parseColors(false) }, backgroundColor: { key: "backgroundColor", parser: parseColor(false) }, diff --git a/js/regl/imagePass.js b/js/regl/imagePass.js index f78106f..228e8d5 100644 --- a/js/regl/imagePass.js +++ b/js/regl/imagePass.js @@ -2,12 +2,12 @@ import { loadImage, loadText, makePassFBO, makePass } from "./utils.js"; // Multiplies the rendered rain and bloom by a loaded in image -const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg"; +const defaultGlyphBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg"; export default ({ regl, config }, inputs) => { const output = makePassFBO(regl, config.useHalfFloat); - const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL; - const background = loadImage(regl, bgURL); + const glyphBGURL = "glyphBGURL" in config ? config.glyphBGURL : defaultGlyphBGURL; + const background = loadImage(regl, glyphBGURL); const imagePassFrag = loadText("shaders/glsl/imagePass.frag.glsl"); const render = regl({ frag: regl.prop("frag"), diff --git a/js/webgpu/imagePass.js b/js/webgpu/imagePass.js index ee859de..2939293 100644 --- a/js/webgpu/imagePass.js +++ b/js/webgpu/imagePass.js @@ -3,11 +3,11 @@ import { makeComputeTarget, makeUniformBuffer, loadTexture, loadShader, makeBind // Multiplies the rendered rain and bloom by a loaded in image -const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg"; +const defaultGlyphBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg"; export default ({ config, device }) => { - const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL; - const assets = [loadTexture(device, bgURL), loadShader(device, "shaders/wgsl/imagePass.wgsl")]; + const GlyphBGURL = "glyphBGURL" in config ? config.glyphBGURL : defaultGlyphBGURL; + const assets = [loadTexture(device, GlyphBGURL), loadShader(device, "shaders/wgsl/imagePass.wgsl")]; const linearSampler = device.createSampler({ magFilter: "linear", From 4d9c606c1b39fd4eb3e2cfa6f52847f530c85ce3 Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Wed, 23 Nov 2022 16:15:08 +0600 Subject: [PATCH 08/10] some more name changes i forgor --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index abd0798..4204508 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ - [Trans flag colors](https://rezmason.github.io/matrix/?effect=trans) - [Custom stripes (`effect=stripes&stripeColors=R,G,B,R,G,B,R,G,B, etc`)](https://rezmason.github.io/matrix/?effect=stripes&stripeColors=1,0,0,1,1,0,0,1,0) - [Custom palette (`palette=R,G,B,%,R,G,B,%,R,G,B,%, etc`)](https://rezmason.github.io/matrix/?palette=0.1,0,0.2,0,0.2,0.5,0,0.5,1,0.7,0,1) -- [Custom image (`url=www.website.com/picture.jpg`)](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) +- [Custom image (`glyphURL=www.website.com/picture.jpg`)](https://rezmason.github.io/matrix/?effect=image&glyphURL=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) - [Debug view (`effect=none`)](https://rezmason.github.io/matrix/?effect=none) (*epilepsy warning*: this once had lots of flickering) - [Holographic version](https://rezmason.github.io/matrix?version=holoplay) (requires a Looking Glass display; see it in action [here](https://www.youtube.com/watch?v=gwA9hfq1Ing)) @@ -135,7 +135,7 @@ Now you know link fu. Here's a list of customization options: - `paletteHSL`, `stripeHSL`, `backgroundHSL`, `cursorHSL`, and `glintHSL` — the same as the above, except they use *H,S,L* (hue, saturation, lightness) instead of *R,G,B*. - `cursorIntensity`, — the brightness of cursors' glow. Can be any number greater than zero. Default is 2.0. - `glintIntensity` — the brightness of glint glow, if there is any glint. Can be any number greater than zero. Default is 1.0. -- `glyphURL` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) +- `glyphURL` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&glyphURL=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&glyphURL=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) - `loops` - (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video. - `fps` — the framerate of the effect. Can be any number between 0 and 60. Default is 60. From 49ba0d50fd2b86efb979fcf984c1b58dd65c989b Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Wed, 23 Nov 2022 20:36:27 +0600 Subject: [PATCH 09/10] implement a bg color and image customization --- README.md | 1 + index.html | 3 +++ js/config.js | 1 + js/regl/main.js | 10 ++++++++++ js/webgpu/main.js | 10 ++++++++++ 5 files changed, 25 insertions(+) diff --git a/README.md b/README.md index 4204508..52f3f96 100644 --- a/README.md +++ b/README.md @@ -136,6 +136,7 @@ Now you know link fu. Here's a list of customization options: - `cursorIntensity`, — the brightness of cursors' glow. Can be any number greater than zero. Default is 2.0. - `glintIntensity` — the brightness of glint glow, if there is any glint. Can be any number greater than zero. Default is 1.0. - `glyphURL` - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&glyphURL=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&glyphURL=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg) +- `bgURL` - set the page background to a picture given by the url. The `backgroundColor` or `backgroundHSL` won't take effect if this is set. - `loops` - (WIP) if set to "true", this causes the effect to loop, so that it can be converted into a looping video. - `fps` — the framerate of the effect. Can be any number between 0 and 60. Default is 60. diff --git a/index.html b/index.html index ce26e28..469b150 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,9 @@ } body { background: black; + background-repeat: no-repeat; + background-position: center; + background-size: cover; overflow: hidden; margin: 0; diff --git a/js/config.js b/js/config.js index 253c6c4..35f07ce 100644 --- a/js/config.js +++ b/js/config.js @@ -476,6 +476,7 @@ const paramMapping = { parser: (s) => nullNaN(range(parseFloat(s), 0, 1)), }, glyphURL: { key: "glyphBGURL", parser: (s) => s }, + bgURL: { key: "pageBGURL", parser: (s) => s }, palette: { key: "palette", parser: parsePalette(false) }, stripeColors: { key: "stripeColors", parser: parseColors(false) }, backgroundColor: { key: "backgroundColor", parser: parseColor(false) }, diff --git a/js/regl/main.js b/js/regl/main.js index 9caec17..2aa629f 100644 --- a/js/regl/main.js +++ b/js/regl/main.js @@ -9,6 +9,7 @@ import makeQuiltPass from "./quiltPass.js"; import makeMirrorPass from "./mirrorPass.js"; import { setupCamera, cameraCanvas, cameraAspectRatio } from "../camera.js"; import getLKG from "./lkgHelper.js"; +import colorToRGB from "../colorToRGB.js"; const effects = { none: null, @@ -37,6 +38,15 @@ const loadJS = (src) => export default async (canvas, config) => { await Promise.all([loadJS("lib/regl.min.js"), loadJS("lib/gl-matrix.js")]); + if (config.pageBGURL) { + document.body.style.backgroundImage = `url(${config.pageBGURL})` + } + else { + let colors = colorToRGB(config.backgroundColor).map( e => e * 100 ); + let colorStyle = `rgb(${colors[0]}%, ${colors[1]}%, ${colors[2]}%)`; + document.body.style.backgroundColor = colorStyle; + } + const resize = () => { const devicePixelRatio = window.devicePixelRatio ?? 1; canvas.width = Math.ceil(canvas.clientWidth * devicePixelRatio * config.resolution); diff --git a/js/webgpu/main.js b/js/webgpu/main.js index 1bb19cf..257eca9 100644 --- a/js/webgpu/main.js +++ b/js/webgpu/main.js @@ -9,6 +9,7 @@ import makeImagePass from "./imagePass.js"; import makeMirrorPass from "./mirrorPass.js"; import makeEndPass from "./endPass.js"; import { setupCamera, cameraCanvas, cameraAspectRatio, cameraSize } from "../camera.js"; +import colorToRGB from "../colorToRGB.js"; const loadJS = (src) => new Promise((resolve, reject) => { @@ -35,6 +36,15 @@ const effects = { export default async (canvas, config) => { await loadJS("lib/gl-matrix.js"); + if (config.pageBGURL) { + document.body.style.backgroundImage = `url(${config.pageBGURL})` + } + else { + let colors = colorToRGB(config.backgroundColor).map( e => e * 100 ); + let colorStyle = `rgb(${colors[0]}%, ${colors[1]}%, ${colors[2]}%)`; + document.body.style.backgroundColor = colorStyle; + } + if (document.fullscreenEnabled || document.webkitFullscreenEnabled) { window.ondblclick = () => { if (document.fullscreenElement == null) { From 258b7bda738e1d4cca1222709ce8bdfb29089306 Mon Sep 17 00:00:00 2001 From: FieryRMS Date: Wed, 23 Nov 2022 20:57:11 +0600 Subject: [PATCH 10/10] bg moving on fullscreen bug fix --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index 469b150..01e1479 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,11 @@