95 curated examples

WebGL Prompts

WebGL and shader prompt examples for fluid fields, generative surfaces, post-processing, particles, and GPU-driven visual experiments.

Use this model-agnostic collection to study webgl prompt patterns across browser video workflows. Compare the visual result with the full brief, then keep the reusable direction and swap in the syntax required by your preferred model.

WebGL Prompts example 10:30

Claude Opus 5.5 on our AI coding benchmark: build a fully autonomous 3D water simulation from an empty repo - procedural mountains, rain, streams, lakes. TypeScript + Three.js, no physics engine. One prompt, zero corrections, ~21 min. 23/23 tests green. https://github.com/AiondaDotCom/ai-sim-benchmark

threejsshaderphysics
View prompt
WebGL Prompts example 20:32

One prompt. One interactive camera lab. 🎥🔥 Claude Opus 5.5 generates a 3D experience where you can adjust the focus ring, move lens elements, shift the focal plane, and see real-time depth-of-field effects. AI-generated interactive 3D is getting wild. 🤯

threejsshader
View prompt
WebGL Prompts example 30:21

I asked Opus 5.5 to explain gravitational lensing by building an interactive black hole lab One prompt for the first version, then a dynamic workflow to polish it for three rounds while I slept. This is what I woke up to: 5h 28m end to end, $90 at API prices https://blackhole.voxyz.ai Drag the black hole and the sky behind it bends into arcs, closing into a full ring when everything lines up Each round ran 3 agents. Two reviewers each picked 9 to 10 issues and ranked them P0, P1, P2. The third one fixed them. Round 1: 3D materials and lighting + UI and type Round 2: camera motion and interaction + science-communication design Round 3: a design director deciding whether it ships + visual QA and performance Every P0 got fixed, the rest only if worth it. When the two reviewers disagreed, it picked one and wrote down why. It backed up before each round, checked screenshots after, and rolled back anything it couldn't fix.

threejsshadercanvasgsap
View prompt
WebGL Prompts example 40:35

Opus 5.5 generated this simulation of molecular orbitals in about ~20 minutes. I had to prompt for some structures and resonance but I can see the promise of instant educational simulations for any advanced topic

threejsshadercanvas
View prompt
WebGL Prompts example 50:44

I TRIED MAKING A 3D MOTION GRAPHIC WITH CLAUDE OPUS 5.5. THIS IS WHAT CAME OUT. The idea was simple: start at my desk and don't stop zooming until we hit a single atom inside the CPU. Opus 5.5 took it and just kept going. Into the PC case. The cooler lifts off. The CPU under it. The metal lid comes off. Then the silicon die, one core, the copper wiring stacked on top, rows of logic cells, the fins and gates of the transistors… …all the way down to one silicon atom, bonded to its four neighbours. One continuous shot, no cuts. The ruler on the right tracks the scale the whole time: from about a metre down to about 2 nanometres. And the part that still gets me: every frame of this is 3D rendered right in a browser, from code. No Blender, no After Effects, no stock footage. A year ago this would have been a studio job. Now it's one conversation. Opus 5.5 is on another level.

threejsshader
View prompt
WebGL Prompts example 61:00

From Cabo da Roca to observable universe. I gave opus 5.5 old prompt I prepared for Fable but I was not satisfied with the results. I asked model to create a cinematic film that zooms out from a hillside on Earth to the full observable universe using @threejs No external assets. Time: ~3h Output tokens: 662,769 Cache: 125.6M read, 2.0M written; API-equivalent cost: about $54.52: output $13.26, cache reads $25.12, cache writes $16.14

threejsshadercanvasparticles
View prompt
WebGL Prompts example 70:38

I asked opus 5.5 in @agnt_gg for the most realistic fire it could build using ONLY javascript. It wrote a real 3D fluid simulation that runs on the GPU. The flame colors come from blackbody physics, the smoke is real volume, it runs at 96 fps in 1080p, and it critiqued its own renders about 40 times. Then it shot a 38 second film of it. The sound comes from the fire itself. 🔥 Details: - Nothing faked. The fire is actual simulated gas that burns, heats up, rises, and swirls. It gives off soot that glows, and the soot that escapes cools into smoke. Every frame is computed on the GPU. - The AI graded its own work: render a frame, have a vision model pick it apart like a VFX supervisor, fix it, repeat. It caught a flame that kept dying, ring shaped artifacts on the ground, and coals that looked like cheese chips. - The film isn't screen recorded. Each frame is rendered offline with scripted camera moves. The crackle and roar come from how brightly the fire burns in each frame. - No Blender, no stock footage, no sound library. One HTML file, one conversation.

threejsshaderaudio
View prompt
WebGL Prompts example 80:34

I asked Claude Opus 5.5 to explain how a rocket engine works by building an interactive Raptor 3 you can take apart in your browser. Cut it open, follow the oxygen and the methane through both turbopumps, then throttle it and watch the shock diamonds move. http://airsup.ai/rocket-engine

threejsshader
View prompt
WebGL Prompts example 90:22

Opus 5.5 just turned a smartphone into a 20-second trip from glass to atoms. It starts on the phone, dives through the motherboard and chip, then keeps going through the semiconductor structure until you’re basically staring at the atomic scale. This is the kind of 3D shot that normally looks like a whole studio touched it. Instead, Opus 5.5 built the sequence. That’s fucking ridiculous.

threejsshadercanvas
View prompt
WebGL Prompts example 100:43

I asked Claude Opus 5.5 to explain how a fusion reactor works by building one you can take apart in your browser. Drag the plasma from 15 million °C, the heat of the Sun's core, to 150 million and watch a city light up. https://airsup.ai/lab

threejsshader
View prompt
WebGL Prompts example 110:32

I asked Opus 5.5 again for an engine you can take apart in the browser Pistons against magnets at the same shaft speed. Push the RPM, open the cylinders, slow time down to 1/10 Under 15 minutes, and it did not even move the usage meter on my Max plan. The first experiment took half an hour, this one reused the framework the earlier ones built This is a screen recording, the real thing runs live in your browser Next I want to find where it breaks, so a game is coming

threejsshadercanvas
View prompt
WebGL Prompts example 120:30

opus5.5有点强,我让它自由选题做交互页面和视频, 提示词:用你最强的思维和能力,根据对我的了解,自行寻找我可能喜欢的主题,制作一个30s的视频还有互动html,尽可能的展示你的前端能力! 它的选题思路:滕王阁·中秋夜。 今天(2026-09-25)正好是丙午年八月十五。所以我选了《滕王阁序》里最有画面感的那句:"落霞与孤鹜齐飞,秋水共长天一色"。短片是船上视角:落日时一只孤鹜飞过太阳,天上是鱼鳞云,然后江天一色,楼阁由下往上亮起灯,满月从东边升起,江面上漂着河灯,诗句以竖排书法字幕配印章出现。 前端做的更牛,但是这里没法放! 画面:整幅画面由一个 WebGL2 着色器逐像素算出来,没有用任何图片。包括天空的暮色层次、按南昌纬度推算的日月轨迹、程序生成的鱼鳞云、9 组波浪叠加的江面倒影,以及用 Canvas 2D 画出来的滕王阁立面。 声音:全部用 WebAudio 实时合成,没有一段录音。古筝用 Karplus-Strong 弦振动模型,带按滑和揉弦;另有箫、江水声、虫鸣和混响。 自由观赏模式:可以拖动环视和缩放,拖时间轴改变时辰;点江面放河灯,会弹出一句诗、响一声古筝;点月亮进入月面特写;还能切换查看渲染图层,或者在网页里直接录制视频。

shaderwebglcanvasaudio
View prompt
WebGL Prompts example 130:10

刷到很多用opus 5.5生成的酷炫视频 为啥我用opus 生成的视频满满的像素感 大家都是怎么生成的?

threejsshadercanvas
View prompt
WebGL Prompts example 140:21

最近用 GPT 6 Astra、Opus 5.5 做了一堆 web 3d 的项目,游戏、室内、Fx、文旅、整活的都有尝试hh 我把这些项目的全部工作流与prompt都整合到了线上的workplace里,之后也会持续更新,感兴趣的朋友可以收藏一波hh

threejsshader
View prompt
WebGL Prompts example 150:13

✨审美绝了!Opus 5.5 用 Three.js 把宫崎骏《红猪》经典空战复刻出来了! 只给了这一句prompt: 「用 web3D 复刻宫崎骏《红猪》日落海面上的经典空战:白绿红涂装战斗机、紫色积云、海面反光、吉卜力运镜,画面写 just breathe.」 建模、配色、云层、尾迹和镜头全部一次对齐,审美直接封神。 #Opus5_5 #宫崎骏 #红猪 #ThreeJS #Web3D #AIGC #vibecoding #审美天花板 #3D #AI #Dario #Anthropic https://x.com/nft_chen/status/2103401780117938683?s=46

threejsshadercanvas
View prompt
WebGL Prompts example 160:17

i asked opus 5.5 to build me a planet. not a picture of a planet. a whole planet. it wrote a single html file. no libraries, no images, no 3d models. every ocean, every mountain and every city light is math, generated live in your browser. then i started playing with it. drag it and it spins. raise the sea level and watch continents drown. move the sun and watch the cities switch on at night. hit "new planet" and it invents a new world. it even names it. a year ago this was a semester project for a graphics student. now it's a prompt.

shaderwebgl
View prompt
WebGL Prompts example 170:50

I asked Opus 5.5 to generate a realistic 3D model of the Taj Mahal Dome, minarets, marble inlay, even the foundations. One prompt ⤵️ One HTML file.

threejsshadercanvas
View prompt
WebGL Prompts example 180:59

Claude Opus 5.5 is absurdly good at 3D. I reran one of my recent 3D experiments with Claude Opus 5.5. Same prompt, same references, same real-world scene I had previously built with GPT-6 Astra. The result was much better than I expected. Put simply, for this specific use case, Claude Opus 5.5 was a clear win for me. The biggest differences for me were instruction following and taste. With the same references, Opus 5.5 got much closer to the Zelda Breath of the Wild-style look I was aiming for. The layout felt more intentional. It picked better camera angles. Asset placement made more sense. And I spent much less time fixing basic mistakes. In my Astra version, I had to repeatedly correct things like tree roots not touching the ground, rough geometry being used where proper assets already existed, or objects being placed in ways that just looked wrong. Opus 5.5 got much more of this right on its own. The interesting part for me is that I have almost zero real 3D skills. I mostly give references, look at the result, explain what feels wrong, and keep iterating. With better instruction following and visual judgment, that loop becomes dramatically easier. Still plenty to improve, especially indoors. Next test is whether I can recreate the interior of the house with the same level of quality.

threejsshader
View prompt
WebGL Prompts example 190:34

Opus 5.5 does a great job in eval of GLSL (OpenGL Shading Language) in threejs. The prompt here is roughly. A fishbowl with reflection, refraction and water caustics. Check it out yourself! And compare it to other models https://threejseval.com/gallery?eval=fishtank

threejsshadercanvas
View prompt
WebGL Prompts example 200:36

Opus 5.5 turned one sentence into a 3D system that opens in Blender, rigged, textured and ready to animate. It does not render the object. It constructs it, part by part, the way a modeller would if they had a week. > PARSE - the sentence becomes a parts list with real dimensions, nothing implied > MASS - each part built as clean geometry, quads only, no sculpted mush > RIG - joints and pivots placed where the object physically bends > SKIN - materials assigned per surface, scale and roughness set separately > PACK - exported with a named hierarchy, so a human can edit one part Image models stop at the render. What you get is a photograph of a thing that does not exist as a thing. That gap appears the second someone wants to move an arm, swap a material, or send it to a printer. Rigging is what nobody automates. Without pivots you have a statue, and a statue cannot be a system. Topology beats detail every time. A dense mesh looks stunning in a screenshot and folds the moment it deforms. Names carry through the whole export. Every part, joint and material reads the way a person would label it. Studios burn days on modelling and cleanup before anyone gets to the creative part of the job. The prompt format and what each stage returns are laid out underneath.

threejsshader
View prompt
WebGL Prompts example 210:15

Opus 5.5 is good at 3d motion too apparantely

threejsshadercanvas
View prompt
WebGL Prompts example 220:48

Claude Opus 5.5 یه انیمیشن 3D دیوونه‌کننده ساخته از دیتاسنتر شروع می‌شه، وارد سرور می‌شه، کارت گرافیک رو باز می‌کنه، داخل چیپ می‌ره، از مدار و ترانزیستور رد می‌شه و تا اتم سیلیکون می‌رسه. همه‌ش توی یک فایل HTML واحد اجرا می‌شه و حدود ۱ ساعت طول کشیده.

threejsshadercanvas
View prompt
WebGL Prompts example 230:25

Opus 5.5 is mind boggling. It created this 3D website from just one prompt. Told it to create a website for forest conservation agency with pinterest post as reference for 3D animation. It one shotted into a single html file.

threejsshadersvgparticles
View prompt
WebGL Prompts example 240:20

I wanted to see if beautiful destinations could become playable 3D experiences. Annecy, France became the prototype: a boat journey through canals, bridges, waterfront, and the mountain lake, built with Claude Opus 5.5 using Three.js + TSL. I trimmed the navigation footage for the sake of keeping the video short and the post below below has a slightly longer version. The whole workflow behind this is simple:- - Explained the concept to Opus and asked it to list some ideas. - Shortlisted one and asked it to generate a prompt, with tech stack directions. - Thats it, needed few iterations and is still a work in progress with few issues needing ironing. - The audio effects were added by Opus itself.

threejsshader
View prompt

Prompt anatomy

How to write a better prompt

  • Define the visual effect before naming the shader technique.
  • List interactive uniforms and their value ranges.
  • Require graceful degradation for low-power devices.

FAQ

Can I use these prompts with models other than Claude Opus 5.5?

Yes. The examples are written as portable creative specifications. Keep the scene, motion, camera, timing, and technical constraints, then adapt the output format for your model or coding agent.

What makes a strong AI video prompt?

A useful prompt names the subject, visual system, sequence of motion, camera behavior, duration, transitions, and delivery constraints. Concrete verbs and measurable timing outperform vague style words.