标签：#webgl

A game can be mechanically correct and still feel flat. The button works. The enemy loses health. The coin counter increases. The level completes. Everything technically functions, but the player's actions do not seem to have much weight. Particle effects are one of the cheapest ways to fix that. Not because every screen needs fireworks, but because particles give actions a visible consequence. Feedback Should Happen Immediately Imagine tapping an enemy in a mobile game. Version A: tap enemy HP decreases Version B: tap small flash impact particles enemy reacts HP decreases The underlying mechanic is almost identical. The second version communicates the result more clearly. The player sees exactly where the hit happened. That matters on mobile screens where fingers frequently cover part of the action. Particles Can Explain the Game VFX is not only decoration. It can communicate state. Damage Particles show where an impact happened. Healing A slow upward effect can visually separate healing from damage. Selection A subtle glow or ring can show which object is active. Currency Particles moving toward a counter connect the collected object with the UI value that changed. Cooldowns A burst or dissolve can show that an ability has become available. Danger Smoke, sparks, or unstable energy can communicate that an object is close to breaking. Good VFX helps the player understand the game without another label or tutorial popup. Timing Matters More Than Particle Count A common mistake is assuming better effects need more particles. They usually need better timing. Consider a button press. You could emit 100 particles over two seconds. Or you could emit 12 particles exactly when the interaction occurs. The second effect will often feel better because it reinforces the player's action. For responsive games, the sequence might look like this: 0 ms input 0 ms visual response begins 20 ms burst expands 80 ms largest particles appear 200 ms effect begins disappearing 350 ms effect

Why Is Overdraw Particularly Important in WebGL? When optimizing a Unity WebGL application, developers often focus on polygon count, draw calls, texture size, and shader complexity. But there is another performance problem that can quietly become expensive: UI overdraw . A UI may look simple to the player while the GPU is actually rendering the same pixels several times. A typical game interface might contain: A full-screen background Transparent panels Multiple decorative images Buttons Shadows Icons Text Semi-transparent overlays Popups Individually, these elements may seem harmless. When stacked together, however, they can significantly increase the number of pixels the GPU needs to process. Unity identifies overlapping transparent UI, sprites, and particles as common contributors to overdraw. So, is UI overdraw really killing your WebGL performance? Let's understand when it matters and how to reduce it. What Exactly Is UI Overdraw? Overdraw occurs when the same screen pixel is rendered multiple times during a frame. Imagine a 1920×1080 WebGL game with this UI: Full-screen background ↓ Transparent dark overlay ↓ Semi-transparent panel ↓ Panel decoration ↓ Button background ↓ Button icon ↓ Button text A pixel covered by all these elements may be processed repeatedly. Conceptually: GPU ↓ ┌──────────────┐ │ Background │ ← 1 │ Overlay │ ← 2 │ Panel │ ← 3 │ Decoration │ ← 4 │ Button │ ← 5 │ Icon │ ← 6 │ Text │ ← 7 └──────────────┘ Same pixel processed multiple times This is particularly relevant when your UI contains large transparent elements covering substantial portions of the screen. Unity's graphics documentation specifically recommends identifying and reducing overdraw when fill rate becomes a GPU limitation. Why Is Overdraw Particularly Important in WebGL? WebGL runs inside a browser, so performance has additional constraints compared with a native desktop application. If your application is GPU-bound, rendering unnecessary pixels means the GPU has more work to

Over the last year I shipped 9 production 3D configurators for polish manufacturers — pools, garage doors, saunas, pergolas, greenhouses, packaging, decorative lamps, terrace roofs, and light-boxes. Each one runs live on its own subdomain of my studio at grodev.pl . Some of the lessons were obvious in hindsight. Some cost me a weekend of debugging. Sharing the non-obvious ones here. 1. Draco compression is not optional for CAD-heavy models Manufacturers send you STEP or SolidWorks files exported to glTF . Raw output is 40–120 MB per variant. On 4G mobile that's a 20-second load with an empty white canvas. Draco compression brings that to 2–5 MB with no visible quality loss on product shots: import { GLTFLoader } from ' three/examples/jsm/loaders/GLTFLoader.js ' import { DRACOLoader } from ' three/examples/jsm/loaders/DRACOLoader.js ' const dracoLoader = new DRACOLoader () dracoLoader . setDecoderPath ( ' /draco/ ' ) // self-hosted, don't use CDN const loader = new GLTFLoader () loader . setDRACOLoader ( dracoLoader ) loader . load ( ' /models/pool-3.5m.glb ' , ( gltf ) => { scene . add ( gltf . scene ) }) Self-host the decoder — Google's CDN version added ~600 ms to first paint in my measurements. Copy node_modules/three/examples/jsm/libs/draco/ to your public/ folder. Tooling: gltf-pipeline -i model.glb -o model.draco.glb --draco.compressionLevel 10 2. Instancing beats individual meshes past ~200 objects A pergola with 40 louvres × 3 tilt positions × user color picker = 120 meshes updating on every frame. Naive approach tanks FPS to 12 on mid-range phones. InstancedMesh batches identical geometry into one draw call: const geo = new THREE . BoxGeometry ( 1 , 0.05 , 3 ) const mat = new THREE . MeshStandardMaterial () const louvres = new THREE . InstancedMesh ( geo , mat , 40 ) const dummy = new THREE . Object3D () for ( let i = 0 ; i < 40 ; i ++ ) { dummy . position . set ( 0 , 0 , i * 0.15 ) dummy . rotation . x = userTilt // update per frame is fine dummy . updateM

Every couple of projects I ended up rebuilding the same effect: an animated topographic map background, the kind with slowly drifting contour lines. After copy pasting the same WebGL shader for the third time I gave up and turned it into a proper library. It's called topolines . One React component, zero dependencies, everything drawn on the GPU. Repo: https://github.com/idleCyrex/topolines Playground: https://topolines.idlee.xyz/playground How it works The lines are not an image or SVG. A small fragment shader generates a noise field (simplex noise + fbm) and draws contour bands from it, so it animates smoothly at any resolution for basically no CPU cost. The component just manages a canvas and the WebGL state around it. Usage npm i topolines import { Topolines } from " topolines/react " ; export default function Hero () { return < Topolines seed = "hello" color = "#F2EFE6" style = { { position : " fixed " , inset : 0 } } />; } Same seed always renders the same field, so your background is stable between visits. There are props for speed, scale, line width, colors, drift, and an interactive mode where contour rings bloom around the cursor. Things I cared about Zero dependencies, the whole thing is one shader and some glue code SSR safe, works in a Next.js server component tree Pauses when offscreen or when the tab is hidden Respects prefers-reduced-motion (renders one static frame) Clean fallback when WebGL is not available The playground lets you tweak every knob and copy the resulting code out: https://topolines.idlee.xyz/playground It's v0.1 and my first published library, so feedback and feature ideas are very welcome.

After several weeks of optimization and community feedback, AnimaStage Lite v1.2.3 is now available. The biggest milestone of this release is that AnimaStage Lite is now available on Google Play, alongside the browser version. 📱 Google Play https://play.google.com/store/apps/details?id=com.webmmd.suite 🌐 Browser https://animastage-lite.app What's new in v1.2.3 📱 Google Play Release AnimaStage Lite is now officially available on Android through Google Play, making it easier to access the editor without manually installing APKs. ⚡ Multi-model performance improvements Working with multiple characters is now much smoother. Improvements include: Performance governor now reacts to the number of visible models. Background characters use a lighter rendering path. When playback is paused, Bullet Physics is simulated only for the selected character. Bullet Physics substeps are capped to improve stability and maintain FPS. 🔄 Physics stability A new Global Physics Stability Registry helps keep simulations more reliable across different scenes. Added: Fix Physics — a soft physics reset that restores the simulation without interrupting the animation timeline. This was implemented after feedback from users who experienced unstable physics when working with multiple models. 🛠 Bug fixes Fixed: SITE_URL is not defined in officialProject.ts General stability improvements Various internal cleanups Project goals AnimaStage Lite is an experimental browser-native MikuMikuDance studio built with WebGL and WASM. Current features include: PMX / PMD support VMD animation playback Bullet Physics Timeline editor MP4 export Browser + Android support The long-term goal is to make MMD creation accessible without requiring a desktop installation. Links 🌐 Website https://animastage-lite.app 📱 Google Play https://play.google.com/store/apps/details?id=com.webmmd.suite 💻 GitHub https://github.com/FBNonaMe/animastage-lite Feedback, bug reports, and feature suggestions are always appreciated. Every relea

MikuMikuDance still lives mostly on the desktop: PMX models, VMD motion, skirt physics, camera work. We built AnimaStage Lite — an open-source browser studio so you can load assets, preview motion, add FX, and export vertical Shorts without installing MMD. 🔗 Repository: https://github.com/FBNonaMe/animastage-lite 🌐 Live demo: https://animastage-lite.app/ 🎬 Open the studio: https://animastage-lite.app/app Why the browser? Short-form creators need: 9:16 framing and 1080×1920 export Fast PMX + VMD iteration Stable WebGL on everyday laptops AnimaStage Lite is not a full MMD clone — it’s a focused stage : load, animate, light, record. Stack Layer Tech UI React 19 + TypeScript 3D Three.js + React Three Fiber Build Vite 6 Physics Bullet (Ammo.js) HQ video WebCodecs + mp4-muxer Live video MediaRecorder All core features run client-side . What it does Drag & drop PMX/PMD, VMD, textures, HDR Timeline + dopesheet + Bézier curves + VMD export Bullet physics — skirt, hair, accessories RTX Lite — bloom, DOF, weather, style presets MP4 HQ (frame-by-frame) and Live recording Clean capture — no gizmos in the final video 9:16 Lite — lighter render path to reduce WebGL context loss Optional: MediaPipe mocap, Gemini AI keys, Local/WebRTC collab. Try it Online: https://animastage-lite.app/app — drop your PMX + VMD. Locally: bash git clone https://github.com/FBNonaMe/animastage-lite.git cd animastage-lite npm install npm run dev https://animastage-lite.app/ — landing http://localhost:3000/app — studio (local) Optional AI: copy .env.example → .env and set VITE_GEMINI_API_KEY. Open source Star ⭐ the repo, open issues, send PRs: https://github.com/FBNonaMe/animastage-lite MMD models are not bundled — use only content you have rights to publish. What would you use this for — Shorts, VTuber previews, or learning Three.js? Comments welcome. ---