I asked GPT 5.

PromptCube Intermediate 2h ago 143 views 12 likes 3 min read

The prompt that did the heavy lifting

The first version I tried was vague ("make the matrix rain in threejs") and it returned a flat 2D canvas effect with no depth. The second pass worked because I forced the scene into a real 3D layout. I asked for: falling glyph columns placed on a grid, each with random speed and opacity, a perspective camera drifting along the Z-axis, and a full-screen shader for that blurry CRT look. The prompt looked like this:

Build a Three.js scene simulating the Matrix opening.
- Create 80 columns of vertical falling characters (katakana + digits).
- Each column is a separate plane with a canvas texture.
- Randomize speed, offset and char set per column.
- Camera starts far away and slowly moves forward (Z axis).
- Add a post-processing bloom or glow effect (UnrealBloomPass).
- Pure black background, green #00ff41 text.
- Keep it in one HTML file with CDN imports.

That one prompt produced working code on the first try. Not "kinda works" — it ran, it rained, it looked right. The camera move wasn't perfect (it accelerated like a broken elevator), but the structure was there. I had to tweak the camera easing manually.

Step-by-step workflow, if you want to reproduce it

1. Set the CDN imports for Three.js and OrbitControls + EffectComposer. Sol picked r128 from a CDN by default — pin a modern version or it'll complain.
2. Generate canvas textures for each column using fillText inside a loop. That's what makes the glyphs look like actual code, not random squares.
3. Place columns in a GridHelper-like pattern manually: (i % 10) * 4 - 20 for X, random Z spread. Depth comes from the grid, not from texture tricks.
4. Move the camera along Z using a normalized time accumulator, and apply a ease-out curve. I replaced Sol's linear movement with 1 - Math.pow(1 - t, 3).
5. Add UnrealBloomPass for the glow. If you skip this, it looks like a terminal screensaver from the 90s.

The final HTML was about 300 lines, all self-contained. I opened it in a browser and it was honestly cinematic. The way the far columns blur into the dark while the near ones rush past — that only works because the camera is actually moving through 3D space, not scrolling a 2D canvas.

The real lesson about AI workflow

This is a great use case for prompt engineering because the requirements are visual and measurable. You can screenshot the output, show it to the LLM, and ask for changes. I took the rendered frame, pasted it back into the chat, and said "the text is too small, make the columns wider and the camera closer" — Sol adjusted the values in the exact spots. That feedback loop is the actual magic, not the first generation.

If you're looking for a beginner-friendly way to test an AI coding agent, this is it. It's a complete guide in one file: procedural textures, scene setup, animation loop, post-processing. No backend, no build tool, no deployment needed. Just open the HTML and it runs. And if you're into LLM agents, watch how well it responds to visual critique — that's where the real workflow gains are.

The code isn't perfect. It still drops frames on a big monitor and the glyphs occasionally flash white. But for a zero-shot prompt? I've paid for worse tutorials.

webglGPT-5.6Three.js3DThe Matrix

All Replies (4)

M
Max75 Advanced 2h ago
One thing you didn't mention: specify the camera position and rotation, otherwise it stays flat.
0 Reply
N
NightPanda Expert 2h ago
@Max75 Yeah, adding a slight tilt makes a huge difference. Ever tried a top-down view?
0 Reply
G
GhostFounder Intermediate 2h ago
Quick question: did you use instanced meshes or a shader to handle the depth sorting?
0 Reply
J
Jamie5 Advanced 2h ago
Had the same issue — once I gave it a few landmarks for scale, everything clicked.
0 Reply

Write a Reply

Markdown supported