Make the effect transparent

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,8 @@ 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&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.
 

index.html

@@ -7,6 +7,11 @@
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /></meta>
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
 		<style>
+			html {
+				width: 100vw;
+				height: 100vh;
+			}
+
 			@supports (padding-top: env(safe-area-inset-top)) {
 				body {
 					padding: 0;
@@ -15,6 +20,9 @@
 			}
 			body {
 				background: black;
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: cover;
 				overflow: hidden;
 				margin: 0;
 
@@ -28,6 +36,10 @@
 				height: 100vh;
 			}
 
+			canvas::backdrop {
+				background-color: transparent;
+			}
+
 			p {
 				color: hsl(108, 90%, 70%);
 				text-shadow: hsl(108, 90%, 40%) 1px 0 10px;

js/config.js

@@ -475,7 +475,8 @@ const paramMapping = {
 		key: "ditherMagnitude",
 		parser: (s) => nullNaN(range(parseFloat(s), 0, 1)),
 	},
-	url: { key: "bgURL", parser: (s) => s },
+	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) },

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"),

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);

js/regl/palettePass.js

@@ -57,15 +57,14 @@ 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");
 
 	const render = regl({
 		frag: regl.prop("frag"),
 
 		uniforms: {
-			backgroundColor: colorToRGB(backgroundColor),
 			cursorColor: colorToRGB(cursorColor),
 			glintColor: colorToRGB(glintColor),
 			cursorIntensity,

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,

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",

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) {
@@ -62,8 +72,8 @@ export default async (canvas, config) => {
 
 	canvasContext.configure({
 		device,
+		alphaMode: "premultiplied",
 		format: canvasFormat,
-		alphaMode: "opaque",
 		usage:
 			// GPUTextureUsage.STORAGE_BINDING |
 			GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,

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,

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,

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);
 }

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);
 }

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
 	);
 }

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
 	);
 }

shaders/wgsl/imagePass.wgsl

@@ -38,5 +38,5 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
 	// Combine the texture and bloom, then blow it out to reveal more of the image
 	var brightness = getBrightness(uv);
 
-	textureStore(outputTex, coord, vec4<f32>(bgColor * (brightness.r + brightness.g * 2.0), 1.0));
+	textureStore(outputTex, coord, vec4<f32>(bgColor * (brightness.r + brightness.g * 2.0), 0.0));
 }

shaders/wgsl/mirrorPass.wgsl

@@ -76,5 +76,5 @@ fn getBrightness(uv : vec2<f32>, intensity : f32) -> vec4<f32> {
 	webcam *= mix(vec3<f32>(0.1, 0.3, 0.0), vec3<f32>(0.9, 1.0, 0.7), 1.0 - length(uv - 0.5) * 1.5);
 
 	var code = mix(webcam, vec3<f32>(0.7, 1.0, 0.4), getBrightness(rippledUV, intensity).r);
-	textureStore(outputTex, coord, vec4<f32>(code, 1.0));
+	textureStore(outputTex, coord, vec4<f32>(code, 0.0));
 }

shaders/wgsl/palettePass.wgsl

@@ -1,6 +1,5 @@
 struct Config {
 	ditherMagnitude : f32,
-	backgroundColor : vec3<f32>,
 	cursorColor : vec3<f32>,
 	glintColor : vec3<f32>,
 	cursorIntensity : f32,
@@ -68,9 +67,8 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
 	textureStore(outputTex, coord, vec4<f32>(
 		palette.colors[paletteIndex]
 			+ min(config.cursorColor * config.cursorIntensity * brightness.g, vec3<f32>(1.0))
-			+ min(config.glintColor * config.glintIntensity * brightness.b, vec3<f32>(1.0))
-			+ config.backgroundColor,
-		1.0
+			+ min(config.glintColor * config.glintIntensity * brightness.b, vec3<f32>(1.0)),
+		0.0
 	));
 }
 

shaders/wgsl/stripePass.wgsl

@@ -1,6 +1,5 @@
 struct Config {
 	ditherMagnitude : f32,
-	backgroundColor : vec3<f32>,
 	cursorColor : vec3<f32>,
 	glintColor : vec3<f32>,
 	cursorIntensity : f32,
@@ -63,8 +62,7 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
 	textureStore(outputTex, coord, vec4<f32>(
 		color * brightness.r
 			+ min(config.cursorColor * config.cursorIntensity * brightness.g, vec3<f32>(1.0))
-			+ min(config.glintColor * config.glintIntensity * brightness.b, vec3<f32>(1.0))
-			+ config.backgroundColor,
-		1.0
+			+ min(config.glintColor * config.glintIntensity * brightness.b, vec3<f32>(1.0)),
+		0.0
 	));
 }