eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-14 12:29:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rezmason
2022-09-04 23:56:49 -07:00
parent 1aeaba7a3f
commit 33edffc99c
9 changed files with 4 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

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

16
js/config.js
View File

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

3
js/regl/main.js
View File

@@ -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,
};

2
js/regl/rainPass.js
View File

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

37
js/regl/resurrectionPass.js
View File

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

3
js/webgpu/main.js
View File

@@ -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,
};

74
js/webgpu/resurrectionPass.js
View File

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

7
shaders/glsl/rainPass.vert.glsl
View File

@@ -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) {

7
shaders/wgsl/rainPass.wgsl
View File

@@ -7,7 +7,6 @@ struct Config {
glyphSequenceLength : i32,
glyphTextureGridSize : vec2<i32>,
glyphHeightToWidth : f32,
resurrectingCodeRatio : f32,
gridSize : vec2<f32>,
showComputationTexture : i32,
@@ -344,13 +343,7 @@ fn computeResult (isFirstFrame : bool, previousResult : vec4<f32>, 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<f32>(1.0, 0.0, 0.0);
if (volumetric && randomFloat(vec2<f32>(quadPosition.x, 0.0)) < config.resurrectingCodeRatio) {
worldPosition.y = -worldPosition.y;
channel = vec3<f32>(0.0, 1.0, 0.0);
}
// Convert the vertex's world space position to screen space
var screenPosition = vec4<f32>(worldPosition, quadDepth, 1.0);