DEV Community

Cover image for v0.1.0 Done
Weird Codes
Weird Codes

Posted on

v0.1.0 Done

#ai #gamedev #javascript #webdev

Mobile performance optimization patch.

🕉️ मोक्ष Devlog — v0.1.1 Milestone

दिनांक: 17 अगस्त 2026
बिल्ड: v0.1.1 (upcoming patch)
प्लेटफ़ॉर्म: itch.io · GitHub

🎯 v0.1.1 क्या है?

v0.1 milestone 100% complete हुआ — 95/95 issues closed। 🎉

अगला पड़ाव है v0.1.1 — एक focused performance patch जो mobile devices पर
मोक्ष को smoother बनाएगा। कोई नया feature नहीं — सिर्फ optimization।

v0.1 milestone is 100% complete — 95/95 issues closed.
Next up is v0.1.1 — a focused performance patch to make Moksha smoother on mobile.
No new features — pure optimization.

🔍 समस्या की जड़ / Root of the Problem

मोक्ष पूरी तरह HTML5 Canvas 2D पर बना है — कोई game engine नहीं।
इसका मतलब हर frame में हम खुद GPU को instructions देते हैं।

तीन operations हैं जो mobile GPU पर सबसे ज़्यादा cost करते हैं:

Moksha is built entirely on HTML5 Canvas 2D — no game engine.
This means every frame we give instructions to the GPU directly.
Three operations are the heaviest on mobile GPU:

🐛 Issue #96 — shadowBlur per-frame GPU cost

समस्या

render.js में shadowBlur हर frame 77 बार set होता है।

shadowBlur एक expensive GPU operation है — हर बार एक blur pass trigger होता है।
Mobile पर (विशेषकर Firefox पर) यही FPS drop का सबसे बड़ा कारण है।

// यह 77 बार हर frame होता है — बहुत ज़्यादा
ctx.shadowBlur = 18;
// ... draw ...
ctx.shadowBlur = 0;
Enter fullscreen mode Exit fullscreen mode

हल (planned)

  • Low-end device पर shadowBlur = 0 (quality tier system)
  • हर draw block में ctx.save() / ctx.restore() से leak रोकें
  • Critical visuals पर ही shadowBlur रखें, बाकी हटाएँ

🐛 Issue #97 — Per-frame uncached gradients

समस्या

नीचे दिए gradients हर frame नए बनते हैं — GC pressure + GPU cost:

Location Gradient हर frame कितनी बार
drawPickupGlowIcon() Radial हर maya entity पर
Rein draw Linear हर 6 घोड़ों पर
Naama maya Radial हर naama entity पर
Chakravaata Radial हर chakravaata पर 
// यह हर frame naama के लिए नया बनता है — wasteful
let nGrad = ctx.createRadialGradient(ncx, ncy, 0, ncx, ncy, r + pulse * 4);
Enter fullscreen mode Exit fullscreen mode

हल (planned)

  • drawPickupGlowIcon() → offscreen sprite cache में bake करें
  • Naama, chakravaata gradients → bucket-cached (size key से)
  • Rein gradient → karma ratio bucket से cache करें

🐛 Issue #98 — Trig caching for orbit rendering

समस्या

outerOrbits और innerOrbit rendering में Math.sin / Math.cos
हर frame, हर entity पर compute होता है।

// हर orbit entity पर हर frame यह चलता है
let angle = (renderTime * orbit.speed) + (i * (Math.PI * 2 / orbit.count));
let dx = cx + Math.cos(angle) * actualDist;  // ← expensive
let dy = cy + Math.sin(angle) * actualDist;  // ← expensive
Enter fullscreen mode Exit fullscreen mode

हल (planned)

360-entry lookup table (LUT) जो एक बार pre-compute हो:

// एक बार — startup पर
const SIN_LUT = new Float32Array(360);
const COS_LUT = new Float32Array(360);
for (let i = 0; i < 360; i++) {
    SIN_LUT[i] = Math.sin((i * Math.PI) / 180);
    COS_LUT[i] = Math.cos((i * Math.PI) / 180);
}

// हर frame — O(1) lookup, zero trig cost
const idx = Math.round(angleDeg) % 360;
const x = cx + COS_LUT[idx] * dist;
const y = cy + SIN_LUT[idx] * dist;
Enter fullscreen mode Exit fullscreen mode

📋 v0.1.1 Milestone Issues

Issue Title Label
#96 perf: reduce shadowBlur calls performance
#97 perf: cache per-frame gradients performance
#98 perf: sin/cos LUT for orbit rendering performance

🎯 Expected Impact

Metric अभी / Now बाद / After
shadowBlur calls/frame ~77 ~15
Gradient allocations/frame ~6 ~0
Trig calls/frame (orbits) ~200+ ~0
Mobile FPS (target) 30-45fps 60fps

🔗 Links

🎮 itch.io weirdcodes.itch.io/moksha
💻 GitHub github.com/weirdcodesofficial/MOKSHA
🐘 Mastodon @pjatmasto
𝕏 X @weirdcodesx
▶️ YouTube @weirdcodes-official

Human-designed, AI-assisted. सभी शास्त्रीय और रचनात्मक निर्णय Weired Codes द्वारा।

Top comments (0)