WebGPU — browser va boshqa web runtime’larda zamonaviy GPU imkoniyatlaridan foydalanish uchun yaratilgan graphics hamda general-purpose compute API. U WebGLga qaraganda zamonaviy native API’lar — Vulkan, Metal va Direct3D 12ga yaqinroq abstraction beradi.
WebGPU 3D rendering, machine-learning inference, scientific calculation, image processing va yuqori performance talab qiladigan parallel workloadlar uchun ishlatilishi mumkin.
Adapter
WebGPU bilan ishlashda avval GPU adapter so‘raladi.
Adapter systemdagi mos GPU yoki software implementationni ifodalashi mumkin.
U feature va limitlar haqida ma’lumot beradi.
User agent power preference va privacy sabab aniq hardware modelini yashirishi ehtimoli bor.
Device
Adapterdan logical device olinadi.
Device:
yaratish uchun asosiy obyekt.
Device yo‘qolishi mumkin va application recovery’ni boshqaradi.
Queue
Queue tayyor command bufferlarni GPUga yuboradi.
Shuningdek buffer yoki texturega data yozish imkonini beradi.
GPU execution asynchronous.
JavaScript command submit qilgach natija darhol tayyor bo‘lmasligi mumkin.
Buffer
GPUBuffer vertex, index, uniform, storage, copy yoki map data’ni saqlaydi.
Yaratishda usage flaglar oldindan beriladi:
- VERTEX;
- INDEX;
- UNIFORM;
- STORAGE;
- COPY_SRC;
- COPY_DST;
- MAP_READ;
- MAP_WRITE.
Noto‘g‘ri usage keyin operationni cheklaydi.
Texture
GPUTexture ikki yoki uch o‘lchamli pixel data’ni saqlaydi.
U:
- render target;
- sampled texture;
- storage texture;
- depth/stencil;
- copy source/destination
sifatida ishlatilishi mumkin.
Format, dimension, mip level va usage belgilanadi.
Shader
WebGPU shaderlari ko‘pincha WGSL tilida yoziladi.
Shader turlari:
- vertex;
- fragment;
- compute.
WGSL type-safe va web security modeliga mos validation uchun yaratilgan.
Shader module pipeline yaratishdan oldin parse qilinadi.
Vertex shader
Vertex shader geometriya vertexlarini transform qiladi.
Input buffer layout va shader location orqali bog‘lanadi.
Output position va fragment bosqichiga uzatiladigan qiymatlarni beradi.
Fragment shader
Fragment shader render target rangini hisoblaydi.
Texture, sampler va uniformlardan foydalanishi mumkin.
Blend, depth va multisample holatlari render pipeline’da oldindan belgilanadi.
Compute shader
Compute shader graphics pipeline’dan tashqari parallel hisoblash bajaradi.
Workgroup va invocation modelidan foydalanadi.
Misollar:
Natija storage buffer yoki texturega yozilishi mumkin.
Pipeline
WebGPU pipeline state’ni oldindan ko‘p qismi bilan yaratadi.
Render pipeline:
- shader entry point;
- vertex layout;
- primitive;
- color target;
- depth;
- multisample.
Compute pipeline compute shaderni belgilaydi.
Pipeline yaratish qimmat bo‘lishi mumkin, shu sababli cache qilinadi.
Bind group
Shader resource’lari bind group orqali bog‘lanadi.
U:
ni ma’lum binding slotlarga joylashtiradi.
Bind group layout shader va pipeline contractini belgilaydi.
Command encoder
JavaScript to‘g‘ridan-to‘g‘ri GPU state’ni darhol bajarmaydi.
Command encoder:
commandlarini yozib oladi.
Oxirida command bufferga aylantirib queue’ga yuboriladi.
Render pass
Render pass qaysi color va depth attachmentga chizilishini belgilaydi.
Load va store operationlar attachmentning oldingi hamda yakuniy holatini boshqaradi.
Bir pass ichida pipeline, bind group, buffer va draw commandlar beriladi.
Compute pass
Compute pass compute pipeline va resource’larni bog‘laydi.
dispatchWorkgroups parallel ish hajmini belgilaydi.
Shader buffer boundary va workgroup limitlariga rioya qiladi.
CPU natijani o‘qishi kerak bo‘lsa copy va map jarayoni talab qilinadi.
Mapping
GPU buffer memory’sini JavaScriptga map qilish asynchronous operation.
GPU ishlatayotgan buffer bir vaqtning o‘zida map qilinmasligi mumkin.
Ko‘pincha natija avval MAP_READ flagli staging bufferga copy qilinadi.
Map tugagach ArrayBuffer view olinadi.
Canvas integration
Canvas uchun WebGPU context olinadi va preferred format bilan configure qilinadi.
Har frame current texture olinib render target sifatida ishlatiladi.
Window resize va device pixel ratio bo‘yicha canvas o‘lchami yangilanadi.
Error handling
WebGPU validation error, out-of-memory va internal error scope’lariga ega.
Device lost Promise orqali yo‘qolish sababini bildirishi mumkin.
Silent xato o‘rniga validation qatlam developerga noto‘g‘ri resource usage’ni ko‘rsatadi.
Limit va feature
Har adapter bir xil imkoniyatga ega emas.
Application:
ni tekshiradi.
Required limit juda yuqori bo‘lsa device olish muvaffaqiyatsiz bo‘lishi mumkin.
WebGPU va WebGL
WebGPU:
- compute shader;
- explicit command;
- modern pipeline;
- predictable validation;
- zamonaviy GPUga yaqin.
- OpenGL ES modeli;
- kengroq eski support;
- sodda boshlang‘ich ekotizim.
Framework abstraction ikkisini fallback sifatida qo‘llashi mumkin.
Security
WebGPU web sandbox ichida ishlaydi.
Browser shader, resource va commandlarni validate qiladi.
Application:
ni cheklaydi.
GPU memory’dan boshqa process data’si ochilmasligi browser va driver xavfsizligiga bog‘liq.
Synchronization
GPU commandlar CPUdan mustaqil bajariladi. Har frame natijani CPUga qayta o‘qish pipeline’ni to‘xtatib performance’ni pasaytirishi mumkin. Data imkon qadar GPU ichida passlar orasida saqlanadi. CPU readback faqat zarur holatda staging buffer va asynchronous mapping bilan bajariladi.
Timestamp query
Qo‘llab-quvvatlansa GPU operation vaqtini query orqali o‘lchash mumkin. Bu render yoki compute pass bottleneckini topishga yordam beradi. Feature privacy va hardware support sabab barcha adapterda mavjud bo‘lmasligi mumkin.
Bog‘liq tushunchalar
WebGPU, GPU, WGSL, Compute shader, Render pipeline, Buffer, Texture, Bind group, Command encoder, WebGL, Parallel computing