Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

ps1-pipeline

Estrellas0

Forks0

Actualizado30 de mayo de 2026 a las 17:48

Apply the PlayStation-1 rendering aesthetic to a mathwave room — low-res framebuffer + nearest upscale + 4x4 Bayer ordered dither + 15-bit color crunch, plus optional vertex snapping. Reusable module src/ps1.js. Best on rooms with real 3D FORM (fractals), not abstract data clouds.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

vanities

vanities/mathwave

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores de softwareOcupaciones informáticas y matemáticas·SOC 15-1252

SKILL.md

readonly

name	ps1-pipeline
description	Apply the PlayStation-1 rendering aesthetic to a mathwave room — low-res framebuffer + nearest upscale + 4x4 Bayer ordered dither + 15-bit color crunch, plus optional vertex snapping. Reusable module src/ps1.js. Best on rooms with real 3D FORM (fractals), not abstract data clouds.

PS1 pipeline

Module: src/ps1.js — already built, color-correct, reusable. Two exports.

When to use it

It looks great on rooms with real 3D form — the mandelbulb, mandelbox, quaternion Julia, apollonian. It turns abstract data clouds (the transformer's 1,120 cubes) into mush — Adam rejected it there. Use judgment; default rooms stay clean (no PS1).

makePS1Pipeline — the post-process

Renders the scene into a 1/scale-res target, upscales NEAREST (chunky pixels), then a fullscreen pass does 4×4 Bayer ordered dithering + quantization to levels (≈15-bit). Shaped like an EffectComposer (.render() / .setSize()), so it drops in where you'd call renderer.render.

import { makePS1Pipeline } from "./ps1.js";
const ps1 = makePS1Pipeline(renderer, scene, camera, { scale: 4, levels: 32, srgb: false });
// loop: ps1.render();   // instead of renderer.render(scene, camera)
// resize: ps1.setSize();

The `srgb` flag — read this or everything turns red

The low-res target is linear-light; a raw ShaderMaterial skips Three's output encoding. The pass therefore applies linear→sRGB by default (srgb:true).

Lit MeshStandard/normal Three scenes → leave srgb: true.
A fragment shader that already gamma-corrects its own output (every raymarch room in this repo ends with pow(col, vec3(0.4545))) → pass srgb: false or you'll double-gamma and the image goes red/dark.

Bonus: raymarch rooms get ~4× cheaper

At scale:4 you raymarch a quarter of the pixels. Sync your shader's resolution uniform to the low-res RT, or the uv is wrong:

const syncRes = () => uniforms.uResolution.value.set(ps1.renderTarget.width, ps1.renderTarget.height);
syncRes();
onResize(renderer, camera, () => { ps1.setSize(); syncRes(); });

ps1ify — vertex snapping (the wobble)

For lit/mesh scenes, ps1ify(material, { snap: 220 }) injects clip-space vertex quantization via onBeforeCompile → the iconic PS1 vertex jitter. Works on any material (cubes, grid lines). Smaller snap = chunkier wobble.

Heavy-distance fog

PS1 hid draw distance with heavy fog. Pair the pass with scene.fog in a near-black / murky tone (not purple) for the full effect.

Always verify-on-screen after wiring — and remember a cache-bust (?v=) on the module script tag so the browser reloads your edits.

Más de este repositorio

mismo repositorio

cpu-physics-3d-room

vanities/mathwave

Build a mathwave room that runs CPU physics/simulation each frame and renders real Three.js 3D geometry — N-body, boids, cloth (Verlet), spiking neural nets, Kohonen SOM, L-systems, RL cartpole, double pendulum. PerspectiveCamera + OrbitControls. Template — src/nbody.js.

2026-05-300

gpu-pingpong-sim-room

vanities/mathwave

Build a mathwave room that is a GPU field simulation on swapped float render targets (ping-pong) — reaction-diffusion, wave/ripple equations, Schrödinger wavefunctions, Lattice-Boltzmann fluids, Lenia/neural cellular automata, Physarum. Template — src/reaction.js.

2026-05-300

grid-cells-room

vanities/mathwave

Build a mathwave room that simulates a CPU integer/cell grid and displays it via a DataTexture + fullscreen display shader — Wolfram CA, Abelian sandpile, Hopfield network, Conway-style automata. Template — src/wolfram.js (+ the fullscreen-quad display pattern from src/fractal.js).

2026-05-300

mathwave-overview

vanities/mathwave

Conventions for adding a room to the mathwave Three.js gallery — file layout, the buildless ES-module/import-map setup, kiosk navigation, the shared common.js engine, and the ROOMS registry. Use this first whenever creating or modifying any mathwave room.

2026-05-300

raymarched-shader-room

vanities/mathwave

Build a mathwave room that is a GPU fragment-shader raymarcher/SDF — fractals (mandelbulb, mandelbox, menger, quaternion Julia), volumetrics (nebula), Truchet/metaballs. Single fullscreen quad, all geometry in the fragment shader, custom uCamPos orbit. Template — src/fractal.js.

2026-05-300

verify-on-screen

vanities/mathwave

The verification discipline for mathwave rooms — how to confirm a room ACTUALLY renders before claiming it works, using agent-browser plus window.__err / window.__diag canaries. Critically, node --check and a green fps reading are NOT sufficient. Use before committing any room.

2026-05-300

name	ps1-pipeline
description	Apply the PlayStation-1 rendering aesthetic to a mathwave room — low-res framebuffer + nearest upscale + 4x4 Bayer ordered dither + 15-bit color crunch, plus optional vertex snapping. Reusable module src/ps1.js. Best on rooms with real 3D FORM (fractals), not abstract data clouds.

PS1 pipeline

Module: src/ps1.js — already built, color-correct, reusable. Two exports.

When to use it

makePS1Pipeline — the post-process

import { makePS1Pipeline } from "./ps1.js";
const ps1 = makePS1Pipeline(renderer, scene, camera, { scale: 4, levels: 32, srgb: false });
// loop: ps1.render();   // instead of renderer.render(scene, camera)
// resize: ps1.setSize();

The `srgb` flag — read this or everything turns red

The low-res target is linear-light; a raw ShaderMaterial skips Three's output encoding. The pass therefore applies linear→sRGB by default (srgb:true).

Lit MeshStandard/normal Three scenes → leave srgb: true.
A fragment shader that already gamma-corrects its own output (every raymarch room in this repo ends with pow(col, vec3(0.4545))) → pass srgb: false or you'll double-gamma and the image goes red/dark.

Bonus: raymarch rooms get ~4× cheaper

At scale:4 you raymarch a quarter of the pixels. Sync your shader's resolution uniform to the low-res RT, or the uv is wrong:

const syncRes = () => uniforms.uResolution.value.set(ps1.renderTarget.width, ps1.renderTarget.height);
syncRes();
onResize(renderer, camera, () => { ps1.setSize(); syncRes(); });

ps1ify — vertex snapping (the wobble)

Heavy-distance fog

PS1 hid draw distance with heavy fog. Pair the pass with scene.fog in a near-black / murky tone (not purple) for the full effect.

Always verify-on-screen after wiring — and remember a cache-bust (?v=) on the module script tag so the browser reloads your edits.

ps1-pipeline

PS1 pipeline

When to use it

makePS1Pipeline — the post-process

The srgb flag — read this or everything turns red

Bonus: raymarch rooms get ~4× cheaper

ps1ify — vertex snapping (the wobble)

Heavy-distance fog

Más de este repositorio

Más de este repositorio

PS1 pipeline

When to use it

makePS1Pipeline — the post-process

The srgb flag — read this or everything turns red

Bonus: raymarch rooms get ~4× cheaper

ps1ify — vertex snapping (the wobble)

Heavy-distance fog

The `srgb` flag — read this or everything turns red

The `srgb` flag — read this or everything turns red