Compute Shader: WebGPU Particle Explosion
CODE PREVIEW
Prompt
Create an interactive WebGPU compute shader playground that simulates a particle explosion. Use a simple canvas (not WebGPU canvas) to render particles as dots. The page should show 'WebGPU Compute Shader: Particle Explosion' header, a small info section explaining what's happening, and a button to trigger a new explosion. The explosion should start from the center and particles fly outward with velocity, color, and lifetime. Use a JavaScript fallback if WebGPU is not available. Use no external libraries beyond CDN (Swiper, GSAP, AOS are not needed). Keep the code minimal but functional.
このインタラクティブプレイグラウンドは、2Dキャンバス上で粒子爆発をシミュレーションすることで、WebGPU コンピュートシェーダーの概念を体験できます。各粒子はランダムな速度・色・寿命を持ち、ダイナミックに爆発します。ボタンをクリックすると新しい爆発が発生します。コードは2Dキャンバスによるフォールバックですが、ロジックはコンピュートシェーダーと同様に粒子の位置・速度・寿命を並列更新します。
Prompt Overview
This interactive playground demonstrates the concept of a WebGPU compute shader by simulating a particle explosion on a 2D canvas. Each particle has a random velocity, color, and lifetime, creating a dynamic burst effect. Click the button to trigger a new explosion. The code is a simplified fallback (2D canvas) but the logic mirrors what a compute shader would do: update particle positions, velocities, and lifetimes in parallel.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選