Web Game Dev

Learn how to make games in JavaScript 🎮 WebGamer.io🎮 WebGamer.io (opens in a new tab)

GitHub (opens in a new tab)Discord (opens in a new tab)

👋 Introduction
✨ Games & Demos
🤖 Artificial Intelligence
🎾 Physics
⚡️ Performance
🌎 Publishing
💌 Newsletter
✍️ Community Blog
- A-Frame Mech Walker

💌 Check out the newsletter!

⚡ Performance

✏️ TODO:

Fixed update (opens in a new tab) vs update, update stages

GLTF, GLB, Draco, gltf-pipeline (opens in a new tab)

gltf-transform (opens in a new tab), gltfpack, meshoptimizer

Reusing geometries and materials

Mutations over FP (for loops over forEach / maps, Object.assign over spread, etc)

WebGPU

Debugging, DrawCallInspector (opens in a new tab), RenderDoc, RenderDoc for Oculus

MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial

Bake shadows, don’t render shadows if they are far

Drei soft shadows

Chrome / Firefox performance profiler

React profiler

Drei Performance Monitor (opens in a new tab)

LOD (opens in a new tab) (Drei Detailed (opens in a new tab))

Multiple passes (hmans discussion (opens in a new tab))

Blender mesh-gpu-instancing (opens in a new tab) (demo (opens in a new tab))

PlayCanvas's guidelines (opens in a new tab)

Bullet Hell article (Unity) (opens in a new tab)

Tojiro's WebXR Scene Optimization article (opens in a new tab)

Optimizing scenes for better WebGL performance by Verge3D (opens in a new tab)

Spatial hashing (opens in a new tab) (Yuka (opens in a new tab), other video (opens in a new tab))

For distance culling, use PerspectiveCamera.far (opens in a new tab) + Fog (opens in a new tab)

Tips from Meta WebXR optimizations talk (opens in a new tab) (valid for non-XR too):

Rendering front-to-back as a performance optimization
If you cannot hit 90FPS consistently, target 72 or 80FPS. It is better to have a consistent FPS than big FPS drops and variations (particularly in VR).
Quest 2 : aim for 100-200 draw calls / frame max.

Three.js Optimization - Best Practices and Techniques (opens in a new tab)

glTF-Compressor (opens in a new tab) by Khronos (opens in a new tab)

How Games Use "Culling" to Be More Efficient (opens in a new tab) by SimonDev

🎾 Physics ✏️ Reduce Draw Calls

Sponsored by Poki

The market leader on Web

Sponsored by Hathora

Cloud Hosting for Multiplayer Games

Written by 🐦 Verekia
🐘 Mastodon • 🐙 GitHub