Draw Your First WebGPU Shader Triangle: Prompt Example

This prompt asks an AI coding assistant to scaffold a complete, self-contained WebGPU demo that draws the classic first triangle — the "Hello, World" of GPU programming. The generated output includes an HTML canvas wired to a WebGPU render pipeline, commented vertex and fragment shader source written in WGSL, a live log panel that surfaces the shader code, and a recompile button so learners can edit and hot-reload without a build tool. A CDN polyfill reference keeps the demo runnable in browsers that are still catching up on native WebGPU support.

This kind of prompt is ideal for educators building workshop starter kits, frontend developers taking their first steps into GPU rendering, or technical bloggers who want a reproducible, copy-paste-ready code example alongside an explainer article. It works best with models strong in code generation — GPT-4o, Claude 3.5 Sonnet, or Gemini 1.5 Pro are solid choices. Variations worth trying include swapping the static triangle for an animated rotating shape, adding a color uniform controlled by a slider, or splitting the output into separate HTML, JS, and WGSL files for a cleaner project structure.