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

Ran the format script

Browse Source
This commit is contained in:
Rezmason
2025-05-05 08:52:35 -07:00
parent 7a10893486
commit 237990b44c
25 changed files with 1474 additions and 1403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
js/webgpu/bloomPass.js
View File

@@ -1,5 +1,11 @@
import { structs } from "../../lib/gpu-buffer.js";
import { makeComputeTarget, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
import {
makeComputeTarget,
loadShader,
makeUniformBuffer,
makeBindGroup,
makePass,
} from "./utils.js";
// const makePyramid = makeComputeTarget;
@@ -20,8 +26,8 @@ const makePyramid = (device, size, pyramidHeight) =>
.map((_, index) =>
makeComputeTarget(
device,
size.map((x) => Math.floor(x * 2 ** -index))
)
size.map((x) => Math.floor(x * 2 ** -index)),
),
);
const destroyPyramid = (pyramid) => pyramid?.forEach((texture) => texture.destroy());
@@ -47,7 +53,10 @@ export default ({ config, device }) => {
return makePass("No Bloom", null, (size, inputs) => ({ ...inputs, bloom: emptyTexture }));
}
const assets = [loadShader(device, "shaders/wgsl/bloomBlur.wgsl"), loadShader(device, "shaders/wgsl/bloomCombine.wgsl")];
const assets = [
loadShader(device, "shaders/wgsl/bloomBlur.wgsl"),
loadShader(device, "shaders/wgsl/bloomCombine.wgsl"),
];
const linearSampler = device.createSampler({
magFilter: "linear",
@@ -122,12 +131,27 @@ export default ({ config, device }) => {
for (let i = 0; i < pyramidHeight; i++) {
const hBlurPyramidView = makePyramidLevelView(hBlurPyramid, i);
const vBlurPyramidView = makePyramidLevelView(vBlurPyramid, i);
hBlurBindGroups[i] = makeBindGroup(device, blurPipeline, 0, [hBlurBuffer, linearSampler, srcView, hBlurPyramidView]);
vBlurBindGroups[i] = makeBindGroup(device, blurPipeline, 0, [vBlurBuffer, linearSampler, hBlurPyramidView, vBlurPyramidView]);
hBlurBindGroups[i] = makeBindGroup(device, blurPipeline, 0, [
hBlurBuffer,
linearSampler,
srcView,
hBlurPyramidView,
]);
vBlurBindGroups[i] = makeBindGroup(device, blurPipeline, 0, [
vBlurBuffer,
linearSampler,
hBlurPyramidView,
vBlurPyramidView,
]);
srcView = hBlurPyramidView;
}
combineBindGroup = makeBindGroup(device, combinePipeline, 0, [combineBuffer, linearSampler, ...makePyramidViews(vBlurPyramid), output.createView()]);
combineBindGroup = makeBindGroup(device, combinePipeline, 0, [
combineBuffer,
linearSampler,
...makePyramidViews(vBlurPyramid),
output.createView(),
]);
return {
...inputs,
@@ -144,7 +168,11 @@ export default ({ config, device }) => {
computePass.setPipeline(blurPipeline);
for (let i = 0; i < pyramidHeight; i++) {
const dispatchSize = [Math.ceil(Math.floor(scaledScreenSize[0] * 2 ** -i) / 32), Math.floor(Math.floor(scaledScreenSize[1] * 2 ** -i)), 1];
const dispatchSize = [
Math.ceil(Math.floor(scaledScreenSize[0] * 2 ** -i) / 32),
Math.floor(Math.floor(scaledScreenSize[1] * 2 ** -i)),
1,
];
computePass.setBindGroup(0, hBlurBindGroups[i]);
computePass.dispatchWorkgroups(...dispatchSize);
computePass.setBindGroup(0, vBlurBindGroups[i]);

5
js/webgpu/endPass.js
View File

@@ -45,7 +45,10 @@ export default ({ device, canvasFormat, canvasContext }) => {
})();
const build = (size, inputs) => {
renderBindGroup = makeBindGroup(device, renderPipeline, 0, [nearestSampler, inputs.primary.createView()]);
renderBindGroup = makeBindGroup(device, renderPipeline, 0, [
nearestSampler,
inputs.primary.createView(),
]);
return null;
};

12
js/webgpu/imagePass.js
View File

@@ -1,9 +1,17 @@
import { structs } from "../../lib/gpu-buffer.js";
import { makeComputeTarget, makeUniformBuffer, loadTexture, loadShader, makeBindGroup, makePass } from "./utils.js";
import {
makeComputeTarget,
makeUniformBuffer,
loadTexture,
loadShader,
makeBindGroup,
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 defaultBGURL =
"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;

27
js/webgpu/main.js
View File

@@ -74,7 +74,10 @@ export default async (canvas, config) => {
const cameraTex = device.createTexture({
size: cameraSize,
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
usage:
GPUTextureUsage.TEXTURE_BINDING |
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT,
});
const context = {
@@ -90,7 +93,12 @@ export default async (canvas, config) => {
};
const effectName = config.effect in effects ? config.effect : "palette";
const pipeline = await makePipeline(context, [makeRain, makeBloomPass, effects[effectName], makeEndPass]);
const pipeline = await makePipeline(context, [
makeRain,
makeBloomPass,
effects[effectName],
makeEndPass,
]);
const targetFrameTimeMilliseconds = 1000 / config.fps;
let frames = 0;
@@ -107,7 +115,8 @@ export default async (canvas, config) => {
last = start;
}
const shouldRender = config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once;
const shouldRender =
config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once;
if (shouldRender) {
while (now - targetFrameTimeMilliseconds > last) {
last += targetFrameTimeMilliseconds;
@@ -125,10 +134,18 @@ export default async (canvas, config) => {
}
if (config.useCamera) {
device.queue.copyExternalImageToTexture({ source: cameraCanvas }, { texture: cameraTex }, cameraSize);
device.queue.copyExternalImageToTexture(
{ source: cameraCanvas },
{ texture: cameraTex },
cameraSize,
);
}
device.queue.writeBuffer(timeBuffer, 0, timeUniforms.toBuffer({ seconds: (now - start) / 1000, frames }));
device.queue.writeBuffer(
timeBuffer,
0,
timeUniforms.toBuffer({ seconds: (now - start) / 1000, frames }),
);
frames++;
const encoder = device.createCommandEncoder();

14
js/webgpu/mirrorPass.js
View File

@@ -1,5 +1,11 @@
import { structs } from "../../lib/gpu-buffer.js";
import { makeComputeTarget, makeUniformBuffer, loadShader, makeBindGroup, makePass } from "./utils.js";
import {
makeComputeTarget,
makeUniformBuffer,
loadShader,
makeBindGroup,
makePass,
} from "./utils.js";
let start;
const numTouches = 5;
@@ -77,7 +83,11 @@ export default ({ config, device, cameraTex, cameraAspectRatio, timeBuffer }) =>
]);
const screenAspectRatio = size[0] / size[1];
device.queue.writeBuffer(sceneBuffer, 0, sceneUniforms.toBuffer({ screenAspectRatio, cameraAspectRatio }));
device.queue.writeBuffer(
sceneBuffer,
0,
sceneUniforms.toBuffer({ screenAspectRatio, cameraAspectRatio }),
);
return { primary: output };
};

8
js/webgpu/palettePass.js
View File

@@ -1,6 +1,12 @@
import colorToRGB from "../colorToRGB.js";
import { structs } from "../../lib/gpu-buffer.js";
import { loadShader, makeUniformBuffer, makeBindGroup, makeComputeTarget, makePass } from "./utils.js";
import {
loadShader,
makeUniformBuffer,
makeBindGroup,
makeComputeTarget,
makePass,
} from "./utils.js";
// Maps the brightness of the rendered rain and bloom to colors
// in a linear gradient buffer generated from the passed-in color sequence

45
js/webgpu/rainPass.js
View File

@@ -1,5 +1,12 @@
import { structs } from "../../lib/gpu-buffer.js";
import { makeRenderTarget, loadTexture, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
import {
makeRenderTarget,
loadTexture,
loadShader,
makeUniformBuffer,
makeBindGroup,
makePass,
} from "./utils.js";
const rippleTypes = {
box: 0,
@@ -46,7 +53,10 @@ export default ({ config, device, timeBuffer }) => {
// rather than a single quad for our geometry
const numQuads = config.volumetric ? numCells : 1;
const glyphTransform = mat2.fromScaling(mat2.create(), vec2.fromValues(config.glyphFlip ? -1 : 1, 1));
const glyphTransform = mat2.fromScaling(
mat2.create(),
vec2.fromValues(config.glyphFlip ? -1 : 1, 1),
);
mat2.rotate(glyphTransform, glyphTransform, (config.glyphRotation * Math.PI) / 180);
const transform = mat4.create();
@@ -98,10 +108,18 @@ export default ({ config, device, timeBuffer }) => {
let highPassOutput;
const loaded = (async () => {
const [glyphMSDFTexture, glintMSDFTexture, baseTexture, glintTexture, rainShader] = await Promise.all(assets);
const [glyphMSDFTexture, glintMSDFTexture, baseTexture, glintTexture, rainShader] =
await Promise.all(assets);
const rainShaderUniforms = structs.from(rainShader.code);
configBuffer = makeConfigBuffer(device, rainShaderUniforms.Config, config, density, gridSize, glyphTransform);
configBuffer = makeConfigBuffer(
device,
rainShaderUniforms.Config,
config,
density,
gridSize,
glyphTransform,
);
const introCellsBuffer = device.createBuffer({
size: gridSize[0] * rainShaderUniforms.IntroCell.minSize,
@@ -168,8 +186,17 @@ export default ({ config, device, timeBuffer }) => {
}),
]);
introBindGroup = makeBindGroup(device, introPipeline, 0, [configBuffer, timeBuffer, introCellsBuffer]);
computeBindGroup = makeBindGroup(device, computePipeline, 0, [configBuffer, timeBuffer, cellsBuffer, introCellsBuffer]);
introBindGroup = makeBindGroup(device, introPipeline, 0, [
configBuffer,
timeBuffer,
introCellsBuffer,
]);
computeBindGroup = makeBindGroup(device, computePipeline, 0, [
configBuffer,
timeBuffer,
cellsBuffer,
introCellsBuffer,
]);
renderBindGroup = makeBindGroup(device, renderPipeline, 0, [
configBuffer,
timeBuffer,
@@ -196,7 +223,11 @@ export default ({ config, device, timeBuffer }) => {
mat4.perspectiveZO(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
}
const screenSize = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
device.queue.writeBuffer(sceneBuffer, 0, sceneUniforms.toBuffer({ screenSize, camera, transform }));
device.queue.writeBuffer(
sceneBuffer,
0,
sceneUniforms.toBuffer({ screenSize, camera, transform }),
);
// Update
output?.destroy();

18
js/webgpu/stripePass.js
View File

@@ -1,6 +1,13 @@
import colorToRGB from "../colorToRGB.js";
import { structs } from "../../lib/gpu-buffer.js";
import { loadShader, make1DTexture, makeUniformBuffer, makeBindGroup, makeComputeTarget, makePass } from "./utils.js";
import {
loadShader,
make1DTexture,
makeUniformBuffer,
makeBindGroup,
makeComputeTarget,
makePass,
} from "./utils.js";
// Multiplies the rendered rain and bloom by a 1D gradient texture
// generated from the passed-in color sequence
@@ -38,10 +45,15 @@ const numVerticesPerQuad = 2 * 3;
export default ({ config, device, timeBuffer }) => {
// Expand and convert stripe colors into 1D texture data
const stripeColors = "stripeColors" in config ? config.stripeColors : config.effect === "pride" ? prideStripeColors : transPrideStripeColors;
const stripeColors =
"stripeColors" in config
? config.stripeColors
: config.effect === "pride"
? prideStripeColors
: transPrideStripeColors;
const stripeTex = make1DTexture(
device,
stripeColors.map((color) => [...colorToRGB(color), 1])
stripeColors.map((color) => [...colorToRGB(color), 1]),
);
const linearSampler = device.createSampler({

34
js/webgpu/utils.js
View File

@@ -3,7 +3,10 @@ const loadTexture = async (device, url) => {
return device.createTexture({
size: [1, 1, 1],
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
usage:
GPUTextureUsage.TEXTURE_BINDING |
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT,
});
}
@@ -15,7 +18,10 @@ const loadTexture = async (device, url) => {
const texture = device.createTexture({
size,
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
usage:
GPUTextureUsage.TEXTURE_BINDING |
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT,
});
device.queue.copyExternalImageToTexture({ source, flipY: true }, { texture }, size);
@@ -28,7 +34,11 @@ const makeRenderTarget = (device, size, format, mipLevelCount = 1) =>
size: [...size, 1],
mipLevelCount,
format,
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
usage:
GPUTextureUsage.TEXTURE_BINDING |
GPUTextureUsage.COPY_SRC |
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT,
});
const makeComputeTarget = (device, size, mipLevelCount = 1) =>
@@ -36,7 +46,11 @@ const makeComputeTarget = (device, size, mipLevelCount = 1) =>
size: [...size, 1],
mipLevelCount,
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.COPY_DST | GPUTextureUsage.STORAGE_BINDING,
usage:
GPUTextureUsage.TEXTURE_BINDING |
GPUTextureUsage.COPY_SRC |
GPUTextureUsage.COPY_DST |
GPUTextureUsage.STORAGE_BINDING,
});
const loadShader = async (device, url) => {
@@ -105,4 +119,14 @@ const makePipeline = async (context, steps) => {
};
};
export { makeRenderTarget, makeComputeTarget, make1DTexture, loadTexture, loadShader, makeUniformBuffer, makePass, makePipeline, makeBindGroup };
export {
makeRenderTarget,
makeComputeTarget,
make1DTexture,
loadTexture,
loadShader,
makeUniformBuffer,
makePass,
makePipeline,
makeBindGroup,
};