60 fps’dan tashqari dizayn: WebGL unumdorligi usullari
Instansli meshlar, draw-call byudjetlari va og‘ir sahnalarni o‘rta darajadagi qurilmalarda silliq ushlab turadigan profillash jarayoni.
E’LON QILINGAN 17 IYL 2026 • 5 DAQIQA O‘QISH
Sekundiga oltmish kadr — bu unumdorlik maqsadi emas, muddat. Sizda 16,6 millisekund bor, brauzer kompozitsiya uchun bir qismini oladi, qolgani esa sizning sahnangizga tegishli. Sekin tuyuladigan ko‘pchilik WebGL ishi juda ko‘p matematika qilayotgani uchun emas — u GPU bilan juda tez-tez gaplashadi.
1. Avval draw-call byudjetini belgilang
Biror narsani modellashtirishdan oldin raqamni belgilang. O‘rta darajadagi mobil qurilmada biz kadr uchun taxminan 150 ta draw-call’da turamiz; undan ortig‘i bo‘lsa, CPU fragment shaderdan ancha oldin tor joyga aylanadi. Byudjet cheksiz optimallashtirish masalasini chek-ro‘yxatga aylantiradi.
O‘lchamagan narsangizni optimallashtira olmaysiz. Shaderni ochishdan oldin profilerni oching.
2. Takrorlanadigan hamma narsani instans qiling
Bir necha martadan ko‘p uchraydigan har qanday geometriya instansli meshga tegishli. O‘n ikki ming zarracha alohida meshlar sifatida asosiy oqimni to‘xtatib qo‘yadi; xuddi o‘sha o‘n ikki ming bitta instansli draw-call sifatida bitta kubga teng narxda turadi. Har bir instans ma’lumoti siz joyida yangilaydigan atribut buferida yashaydi.
3. Bo‘sh sahnalarni bepul qiling
Eng arzon kadr — siz umuman renderlamaydiganingiz. Canvas ko‘rish maydonidan chiqqanda, tab yashiringanda va sahnada hech narsa o‘zgarmaganda siklni to‘xtatib turing. Foydalanuvchilar saytni batareya sarfiga qarab, o‘zlari tan olganidan ko‘ra ancha ko‘proq baholaydi.