Run any Skill in Manus with one click

cpu-physics-3d-room

Stars0

Forks0

UpdatedMay 30, 2026 at 17:48

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

vanities

vanities/mathwave

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	cpu-physics-3d-room
description	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.

CPU-physics 3D room

Canonical template: src/nbody.js. Working siblings: boids.js, cloth.js, spiking.js, som.js, lsystem.js, rl.js, pendulum.js.

Shape

A real 3D scene with a perspective camera you can orbit:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 2000);
const controls = new OrbitControls(camera, canvas);   // from three/addons
controls.enableDamping = true;
controls.autoRotate = !reducedMotion;
// lights so form reads; addGrid(scene, {...}) for a ground plane

Each frame: (1) advance the simulation on the CPU, (2) push results into geometry, (3) controls.update() + render.

Updating geometry cheaply

Allocate the geometry once; mutate its buffers in place — never rebuild per frame:

Points / lines (particles, neurons, SOM sheet, L-system segments): write into geometry.attributes.position.array and set .needsUpdate = true. For per-element color, use a color BufferAttribute (+ vertexColors: true).
InstancedMesh (N spheres/cubes — boids, spiking neurons): setMatrixAt(i, m) with a shared dummy Object3D (dummy.position.set(...); dummy.updateMatrix()), then instanceMatrix.needsUpdate = true. Per-instance color via setColorAt + instanceColor.needsUpdate. Set frustumCulled = false if instances spread beyond the base geometry's bounding sphere.
Deforming mesh (cloth): rewrite the position attribute, then geometry.computeVertexNormals() so lighting follows the folds; render DoubleSide.

Footguns

THREE.Object3D.position / .scale / .quaternion are read-only references — use .set() / .copy(), never obj.position = v.
Integrate with a small fixed dt (clamp dt ≤ 1/30); sub-step stiff systems (Izhikevich neurons, cloth constraints) to avoid blow-up.
Cap work per frame (particle/synapse/constraint counts, iterations) so the tab holds 60fps.
No temporal-dead-zone: don't reference a const/let inside a bindRange callback that runs (synchronously, on bind) before the declaration.

Learning/agent rooms

For "it learns in front of you" (RL), run many fast training steps headless in the background and render the current best policy at real-time speed — don't render every training rollout. (CartPole: Cross-Entropy Method over a linear policy is stable and solves in seconds.)

Wire-up

setVariantCycler for ↑/↓ presets (topology, target distribution, species). window.__err handler + window.__diag. onResize(renderer, camera). Then verify-on-screen.

More from this repository

same repository

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

ps1-pipeline

vanities/mathwave

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.

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	cpu-physics-3d-room
description	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.

CPU-physics 3D room

Canonical template: src/nbody.js. Working siblings: boids.js, cloth.js, spiking.js, som.js, lsystem.js, rl.js, pendulum.js.

Shape

A real 3D scene with a perspective camera you can orbit:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, innerWidth/innerHeight, 0.1, 2000);
const controls = new OrbitControls(camera, canvas);   // from three/addons
controls.enableDamping = true;
controls.autoRotate = !reducedMotion;
// lights so form reads; addGrid(scene, {...}) for a ground plane

Each frame: (1) advance the simulation on the CPU, (2) push results into geometry, (3) controls.update() + render.

Updating geometry cheaply

Allocate the geometry once; mutate its buffers in place — never rebuild per frame:

Points / lines (particles, neurons, SOM sheet, L-system segments): write into geometry.attributes.position.array and set .needsUpdate = true. For per-element color, use a color BufferAttribute (+ vertexColors: true).
InstancedMesh (N spheres/cubes — boids, spiking neurons): setMatrixAt(i, m) with a shared dummy Object3D (dummy.position.set(...); dummy.updateMatrix()), then instanceMatrix.needsUpdate = true. Per-instance color via setColorAt + instanceColor.needsUpdate. Set frustumCulled = false if instances spread beyond the base geometry's bounding sphere.
Deforming mesh (cloth): rewrite the position attribute, then geometry.computeVertexNormals() so lighting follows the folds; render DoubleSide.

Footguns

THREE.Object3D.position / .scale / .quaternion are read-only references — use .set() / .copy(), never obj.position = v.
Integrate with a small fixed dt (clamp dt ≤ 1/30); sub-step stiff systems (Izhikevich neurons, cloth constraints) to avoid blow-up.
Cap work per frame (particle/synapse/constraint counts, iterations) so the tab holds 60fps.
No temporal-dead-zone: don't reference a const/let inside a bindRange callback that runs (synchronously, on bind) before the declaration.

Learning/agent rooms

Wire-up

setVariantCycler for ↑/↓ presets (topology, target distribution, species). window.__err handler + window.__diag. onResize(renderer, camera). Then verify-on-screen.