From 33edffc99c9a99ccc59372c0514f2d878ed94998 Mon Sep 17 00:00:00 2001 From: Rezmason Date: Sun, 4 Sep 2022 23:56:49 -0700 Subject: [PATCH] Removing the "resurrection" effect that mirrored the Matrix Resurrections trailers, as they aren't canon and the color channels of the output textures can be put to better use --- README.md | 3 +- js/config.js | 16 +------ js/regl/main.js | 3 -- js/regl/rainPass.js | 2 +- js/regl/resurrectionPass.js | 37 ----------------- js/webgpu/main.js | 3 -- js/webgpu/resurrectionPass.js | 74 --------------------------------- shaders/glsl/rainPass.vert.glsl | 7 ---- shaders/wgsl/rainPass.wgsl | 7 ---- 9 files changed, 4 insertions(+), 148 deletions(-) delete mode 100644 js/regl/resurrectionPass.js delete mode 100644 js/webgpu/resurrectionPass.js diff --git a/README.md b/README.md index 914eb5e..fd8e7be 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,7 @@ - [3D mode](https://rezmason.github.io/matrix?volumetric=true) - [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)) - Mirror mode, [with camera](https://rezmason.github.io/matrix/?version=updated&effect=mirror&camera=true) and [without](rezmason.github.io/matrix/?version=updated&effect=mirror). (Click to make ripples.) -- [Matrix Resurrections code (WIP)](https://rezmason.github.io/matrix?version=resurrections) -- [Matrix Resurrections's updated code (WIP)](https://rezmason.github.io/matrix?version=updated) +- [Matrix Resurrections updated code (WIP)](https://rezmason.github.io/matrix?version=resurrections) - [Operator Matrix code (with ripple effects)](https://rezmason.github.io/matrix?version=operator) - [Code of the "Nightmare Matrix"](https://rezmason.github.io/matrix?version=nightmare) - [(you know, this stuff).](http://matrix.wikia.com/wiki/Nightmare_Matrix) diff --git a/js/config.js b/js/config.js index 726489b..5f962bc 100644 --- a/js/config.js +++ b/js/config.js @@ -56,7 +56,6 @@ const defaults = { useCamera: false, backgroundColor: [0, 0, 0], // The color "behind" the glyphs volumetric: false, // A mode where the raindrops appear in perspective - resurrectingCodeRatio: 0, // The percent of columns that flow upward animationSpeed: 1, // The global rate that all animations progress forwardSpeed: 0.25, // The speed volumetric rain approaches the eye bloomStrength: 0.7, // The intensity of the bloom @@ -172,17 +171,7 @@ const versions = { raindropLength: 0.4, }, resurrections: { - resurrectingCodeRatio: 0.25, - glyphVerticalSpacing: 1.5, - effect: "resurrections", - numColumns: 100, - volumetric: true, - fallSpeed: 0.4, - }, - updated: { font: "resurrections", - bloomStrength:1, - bloomSize:0.6, numColumns: 70, cycleStyleName: "cycleRandomly", cycleSpeed: 0.15, @@ -191,9 +180,7 @@ const versions = { { hsl: [0.38, 1.0, 0.6], at: 0.92 }, { hsl: [0.38, 1.0, 1.0], at: 1.0 }, ], - raindropLength: 1.4, - highPassThreshold: 0.2, - cursorEffectThreshold: 0.8, + raindropLength: 1.4 }, palimpsest: { font: "huberfishA", @@ -253,6 +240,7 @@ const versions = { }, }; versions.throwback = versions.operator; +versions.updated = versions.resurrections; versions["1999"] = versions.operator; versions["2003"] = versions.classic; versions["2021"] = versions.resurrections; diff --git a/js/regl/main.js b/js/regl/main.js index da1b49d..1e8da12 100644 --- a/js/regl/main.js +++ b/js/regl/main.js @@ -5,7 +5,6 @@ import makeBloomPass from "./bloomPass.js"; import makePalettePass from "./palettePass.js"; import makeStripePass from "./stripePass.js"; import makeImagePass from "./imagePass.js"; -import makeResurrectionPass from "./resurrectionPass.js"; import makeQuiltPass from "./quiltPass.js"; import makeMirrorPass from "./mirrorPass.js"; import { setupCamera, cameraCanvas, cameraAspectRatio } from "../camera.js"; @@ -20,8 +19,6 @@ const effects = { transPride: makeStripePass, trans: makeStripePass, image: makeImagePass, - resurrection: makeResurrectionPass, - resurrections: makeResurrectionPass, mirror: makeMirrorPass, }; diff --git a/js/regl/rainPass.js b/js/regl/rainPass.js index b05e400..b408b61 100644 --- a/js/regl/rainPass.js +++ b/js/regl/rainPass.js @@ -40,7 +40,7 @@ export default ({ regl, config, lkg }) => { const showComputationTexture = config.effect === "none"; const commonUniforms = { - ...extractEntries(config, ["animationSpeed", "glyphHeightToWidth", "glyphSequenceLength", "glyphTextureGridSize", "resurrectingCodeRatio"]), + ...extractEntries(config, ["animationSpeed", "glyphHeightToWidth", "glyphSequenceLength", "glyphTextureGridSize"]), numColumns, numRows, showComputationTexture, diff --git a/js/regl/resurrectionPass.js b/js/regl/resurrectionPass.js deleted file mode 100644 index e43285b..0000000 --- a/js/regl/resurrectionPass.js +++ /dev/null @@ -1,37 +0,0 @@ -import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js"; - -// Matrix Resurrections isn't in theaters yet, -// and this version of the effect is still a WIP. - -// Criteria: -// Upward-flowing glyphs should be golden -// Downward-flowing glyphs should be tinted slightly blue on top and golden on the bottom -// Cheat a lens blur, interpolating between the texture and bloom at the edges - -export default ({ regl, config }, inputs) => { - const output = makePassFBO(regl, config.useHalfFloat); - const { backgroundColor, ditherMagnitude, bloomStrength } = config; - const resurrectionPassFrag = loadText("shaders/glsl/resurrectionPass.frag.glsl"); - - const render = regl({ - frag: regl.prop("frag"), - - uniforms: { - backgroundColor, - ditherMagnitude, - bloomStrength, - tex: inputs.primary, - bloomTex: inputs.bloom, - }, - framebuffer: output, - }); - - return makePass( - { - primary: output, - }, - resurrectionPassFrag.loaded, - (w, h) => output.resize(w, h), - () => render({ frag: resurrectionPassFrag.text() }) - ); -}; diff --git a/js/webgpu/main.js b/js/webgpu/main.js index bc2a5b6..2d6b795 100644 --- a/js/webgpu/main.js +++ b/js/webgpu/main.js @@ -6,7 +6,6 @@ import makeBloomPass from "./bloomPass.js"; import makePalettePass from "./palettePass.js"; import makeStripePass from "./stripePass.js"; import makeImagePass from "./imagePass.js"; -import makeResurrectionPass from "./resurrectionPass.js"; import makeMirrorPass from "./mirrorPass.js"; import makeEndPass from "./endPass.js"; import { setupCamera, cameraCanvas, cameraAspectRatio, cameraSize } from "../camera.js"; @@ -29,8 +28,6 @@ const effects = { transPride: makeStripePass, trans: makeStripePass, image: makeImagePass, - resurrection: makeResurrectionPass, - resurrections: makeResurrectionPass, mirror: makeMirrorPass, }; diff --git a/js/webgpu/resurrectionPass.js b/js/webgpu/resurrectionPass.js deleted file mode 100644 index ecaf5a2..0000000 --- a/js/webgpu/resurrectionPass.js +++ /dev/null @@ -1,74 +0,0 @@ -import { structs } from "../../lib/gpu-buffer.js"; -import { loadShader, makeUniformBuffer, makeComputeTarget, makeBindGroup, makePass } from "./utils.js"; - -// Matrix Resurrections isn't in theaters yet, -// and this version of the effect is still a WIP. - -// Criteria: -// Upward-flowing glyphs should be golden -// Downward-flowing glyphs should be tinted slightly blue on top and golden on the bottom -// Cheat a lens blur, interpolating between the texture and bloom at the edges - -const numVerticesPerQuad = 2 * 3; - -export default ({ config, device, timeBuffer }) => { - const linearSampler = device.createSampler({ - magFilter: "linear", - minFilter: "linear", - }); - - let computePipeline; - let configBuffer; - let computeBindGroup; - let output; - let screenSize; - - const assets = [loadShader(device, "shaders/wgsl/resurrectionPass.wgsl")]; - - const loaded = (async () => { - const [resurrectionShader] = await Promise.all(assets); - - computePipeline = device.createComputePipeline({ - compute: { - module: resurrectionShader.module, - entryPoint: "computeMain", - }, - }); - - const configUniforms = structs.from(resurrectionShader.code).Config; - configBuffer = makeUniformBuffer(device, configUniforms, { - bloomStrength: config.bloomStrength, - ditherMagnitude: config.ditherMagnitude, - backgroundColor: config.backgroundColor, - }); - })(); - - const build = (size, inputs) => { - output?.destroy(); - output = makeComputeTarget(device, size); - screenSize = size; - - computeBindGroup = makeBindGroup(device, computePipeline, 0, [ - configBuffer, - timeBuffer, - linearSampler, - inputs.primary.createView(), - inputs.bloom.createView(), - output.createView(), - ]); - - return { - primary: output, - }; - }; - - const run = (encoder) => { - const computePass = encoder.beginComputePass(); - computePass.setPipeline(computePipeline); - computePass.setBindGroup(0, computeBindGroup); - computePass.dispatchWorkgroups(Math.ceil(screenSize[0] / 32), screenSize[1], 1); - computePass.end(); - }; - - return makePass(loaded, build, run); -}; diff --git a/shaders/glsl/rainPass.vert.glsl b/shaders/glsl/rainPass.vert.glsl index 3a79f22..524ac4c 100644 --- a/shaders/glsl/rainPass.vert.glsl +++ b/shaders/glsl/rainPass.vert.glsl @@ -9,7 +9,6 @@ uniform mat4 camera, transform; uniform vec2 screenSize; uniform float time, animationSpeed, forwardSpeed; uniform bool volumetric; -uniform float resurrectingCodeRatio; varying vec2 vUV; varying vec3 vChannel; varying vec4 vGlyph; @@ -34,13 +33,7 @@ void main() { vec2 position = (aPosition * vec2(1., glyphVerticalSpacing) + aCorner * vec2(density, 1.)) * quadSize; vec4 pos = vec4((position - 0.5) * 2.0, quadDepth, 1.0); - // "Resurrected" columns are in the green channel, - // and are vertically flipped (along with their glyphs) vChannel = vec3(1.0, 0.0, 0.0); - if (volumetric && rand(vec2(aPosition.x, 0)) < resurrectingCodeRatio) { - pos.y = -pos.y; - vChannel = vec3(0.0, 1.0, 0.0); - } // Convert the world space position to screen space if (volumetric) { diff --git a/shaders/wgsl/rainPass.wgsl b/shaders/wgsl/rainPass.wgsl index 4ebc102..ef518b0 100644 --- a/shaders/wgsl/rainPass.wgsl +++ b/shaders/wgsl/rainPass.wgsl @@ -7,7 +7,6 @@ struct Config { glyphSequenceLength : i32, glyphTextureGridSize : vec2, glyphHeightToWidth : f32, - resurrectingCodeRatio : f32, gridSize : vec2, showComputationTexture : i32, @@ -344,13 +343,7 @@ fn computeResult (isFirstFrame : bool, previousResult : vec4, glyphPos : ve worldPosition /= quadGridSize; worldPosition = (worldPosition - 0.5) * 2.0; - // "Resurrected" columns are in the green channel, - // and are vertically flipped (along with their glyphs) var channel = vec3(1.0, 0.0, 0.0); - if (volumetric && randomFloat(vec2(quadPosition.x, 0.0)) < config.resurrectingCodeRatio) { - worldPosition.y = -worldPosition.y; - channel = vec3(0.0, 1.0, 0.0); - } // Convert the vertex's world space position to screen space var screenPosition = vec4(worldPosition, quadDepth, 1.0);