Add mathcode-3d volumetric mode

[ap0ught]

Summary

• Add a new mathcode-3d preset (volumetric mathcode glyph rain).
• Enable depth testing + depth buffer for volumetric WebGL rain rendering.
• Add a depth buffer + pipeline depth state for WebGPU volumetric rendering.

Test plan

• Open /?version=mathcode-3d&renderer=webgpu and confirm depth/forward motion.
• Open /?version=mathcode-3d&renderer=webgl and confirm volumetric rendering.

Notes

• Changes are limited to: js/config.js, js/webgl/rainPass.js, js/webgpu/rainPass.js.

Summary

• Add a new mathcode-3d preset (volumetric mathcode glyph rain).
• Enable depth testing for volumetric WebGL rain rendering.
• Add a depth buffer/pipeline depth for WebGPU volumetric rendering.

Test plan

• Open /?version=mathcode-3d&renderer=webgpu and confirm depth/forward motion.
• Open /?version=mathcode-3d&renderer=webgl and confirm volumetric rendering.

[Copilot]

Pull request overview

Adds a new mathcode-3d version preset to render volumetric mathcode glyph rain, and updates both renderer backends to support depth-based rendering for 3D/volumetric modes.

Changes:

• Add mathcode-3d preset in js/config.js (volumetric mathcode tuning: density/forward motion/palette, etc.).
• WebGL: allocate a depth-enabled FBO for volumetric rendering and enable depth testing in the rain render pass.
• WebGPU: add depth pipeline state and create/attach a depth texture for the rain render pass.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
js/config.js	Introduces the new mathcode-3d version preset and its parameter defaults.
js/webgl/rainPass.js	Adds depth-buffered output + depth test configuration for volumetric WebGL rain rendering.
js/webgpu/rainPass.js	Adds depth pipeline state and a depth render attachment texture for WebGPU rain rendering.

[Copilot]

device.createTexture for depthTexture is passed size as a 2-element array. WebGPU GPUExtent3D requires a 3D extent (e.g. [width, height, 1] or { width, height, depthOrArrayLayers: 1 }), and this can throw at runtime on strict implementations. Update the depth texture creation to include the 3rd dimension (matching makeRenderTarget / makeComputeTarget).

Suggested change

	size,
	size: [size[0], size[1], 1],

[Copilot]

Depth testing/writes are enabled unconditionally in the WebGPU render pipeline and a full-size depth texture is allocated every resize, even for non-volumetric (2D) rendering. This adds memory + bandwidth overhead and can introduce subtle seam behavior on the fullscreen quad (depthCompare less + depth writes). Consider only enabling depthStencil (and creating/attaching depthTexture) when config.volumetric is true.

Suggested change

	depthStencil: {
	format: "depth24plus",
	depthWriteEnabled: true,
	depthCompare: "less",
	},
	...(config.volumetric
	? {
	depthStencil: {
	format: "depth24plus",
	depthWriteEnabled: true,
	depthCompare: "less",
	},
	}
	: {}),

[Copilot]

Depth testing with depthWriteEnabled/func: "less" is being combined with additive blending for volumetric glyphs. Because glyph quads are not rendered in guaranteed front-to-back order (depth varies per column over time), far fragments can be blended into the target before a nearer fragment writes depth, so the result is not reliable occlusion. If true occlusion is required, consider a depth pre-pass (depth-only then color with depthCompare equal and depthWrite disabled) or otherwise ensure near-to-far draw ordering / adjust blending strategy.

[Copilot]

A new version preset (mathcode-3d) is added, but there is no automated smoke coverage to ensure it boots cleanly on at least WebGL (and ideally WebGPU when available). Since the repo already has Playwright version smoke coverage (e.g. VERSION_SAMPLES in tests), please add mathcode-3d to that matrix (or add a targeted test) so regressions in volumetric/depth setup are caught.

[ap0ught]

@copilot apply changes based on this feedback

[Copilot]

Addressed in 18f41f8.

mathcode-3d is now included in smoke coverage via VERSION_SAMPLES in tests/matrix-smoke.spec.js, and the renderer depth-path fixes from the same review thread are included in that commit.

Screenshot: /home/runner/work/matrix/matrix/test-results/mathcode-3d-webgl.png

[github-actions]

🎬 PR Preview Deployed!

Your changes are now available for testing:

Preview URL: https://ap0ught.github.io/matrix/pr-110/

Test Links:

• Default Matrix
• Gallery Mode
• Mirror Effect
• 3D Mode
• Resurrections

The preview will be updated automatically when you push new commits.

---

Preview deployed from commit 18f41f8

[ap0ught]

@copilot apply changes based on the comments in this thread

[ap0ught]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

Implemented in commit 18f41f8.

Applied the review-thread fixes:

• WebGPU depth is now volumetric-only and uses a 3D extent ([w, h, 1]) for depth texture creation.
• WebGPU depth attachment is only set when volumetric mode is active.
• WebGL volumetric rendering now uses a depth pre-pass, then additive color pass with depth compare equal to avoid order-dependent additive/depth artifacts.
• Added smoke coverage for version=mathcode-3d in tests/matrix-smoke.spec.js.

Screenshot (mathcode-3d WebGL): /home/runner/work/matrix/matrix/test-results/mathcode-3d-webgl.png

@copilot apply changes based on the comments in this thread

Implemented in commit 18f41f8.

Applied the review-thread fixes:

• WebGPU depth is now volumetric-only and uses a 3D extent ([w, h, 1]) for depth texture creation.
• WebGPU depth attachment is only set when volumetric mode is active.
• WebGL volumetric rendering now uses a depth pre-pass, then additive color pass with depth compare equal to avoid order-dependent additive/depth artifacts.
• Added smoke coverage for version=mathcode-3d in tests/matrix-smoke.spec.js.

Screenshot (mathcode-3d WebGL): /home/runner/work/matrix/matrix/test-results/mathcode-3d-webgl.png