WebGL

WebGL — browser ichida JavaScript orqali GPU yordamida ikki va uch o‘lchamli grafika render qilish imkonini beradigan web API. U OpenGL ESga yaqin graphics pipeline modelidan foydalanadi va HTML Canvas elementi ichida ishlaydi.

WebGL game, 3D model, map, scientific visualization, image processing va murakkab animationlarda qo‘llanadi.

Context

Canvasdan WebGL context olinadi:

const gl = canvas.getContext("webgl2");

WebGL 1 va WebGL 2 imkoniyatlari farq qiladi.

Context olinmasa browser, driver yoki policy API’ni qo‘llamasligi mumkin.

Fallback ko‘rsatiladi.

GPU pipeline

Soddalashtirilgan rendering oqimi:

1. vertex data;
2. vertex shader;
3. primitive assembly;
4. rasterization;
5. fragment shader;
6. blending;
7. framebuffer.

Developer buffer, shader, texture va state’ni boshqaradi.

Vertex

Vertex geometriyaning nuqtasini ifodalaydi.

U:

• position;
• normal;
• color;
• texture coordinate;
• custom attribute

ga ega bo‘lishi mumkin.

Vertexlar bufferda GPUga uzatiladi.

Buffer

WebGL buffer binary data’ni GPUga saqlaydi.

JavaScript typed array:

new Float32Array(...)

orqali vertex data tayyorlaydi.

ARRAY_BUFFER attribute, ELEMENT_ARRAY_BUFFER index data uchun ishlatiladi.

Vertex shader

Vertex shader har vertex uchun ishlaydi.

U vertex positionini clip space’ga aylantiradi va fragment bosqichiga varying qiymatlar uzatadi.

Shader GLSL ES tilida yoziladi.

Shader compile xatosi log orqali tekshiriladi.

Fragment shader

Fragment shader rasterizatsiyadan keyingi har fragment rangini hisoblaydi.

U:

• texture;
• light;
• material;
• color;
• effect

bilan ishlaydi.

Final pixel blending va depth testdan o‘tishi mumkin.

Shader program

Vertex va fragment shader compile qilinib programga link qilinadi.

Attribute va uniform locationlari olinadi.

Renderdan oldin program aktiv qilinadi.

Har frame’da shaderni qayta compile qilish samarasiz.

Attribute

Attribute vertexdan vertexga o‘zgaradigan data.

Masalan:

• position;
• color;
• UV coordinate.

Buffer layout, type, stride va offset bilan shader attribute’iga bog‘lanadi.

Noto‘g‘ri stride geometriyani buzadi.

Uniform

Uniform draw call davomida ko‘p vertex va fragmentlar uchun bir xil qiymat.

Misollar:

• transform matrix;
• vaqt;
• light position;
• texture sampler;
• rang.

Har object yoki frame uchun uniform yangilanishi mumkin.

Matrix

3D transform odatda matrix bilan bajariladi:

• model;
• view;
• projection.

Model objectni worldga, view camera koordinatasiga, projection clip space’ga olib keladi.

Matrix multiplication tartibi library conventioniga bog‘liq.

Texture

Texture image yoki generated pixel data’ni GPUga beradi.

Parametrlar:

• filtering;
• wrapping;
• mipmap;
• format;
• size.

Cross-origin image CORS qoidalariga bo‘ysunadi.

Texture dimension va format device limitiga ega.

Depth test

3D scene’da yaqin fragment uzoq fragmentni yopishi kerak.

Depth buffer har pixelga chuqurlik saqlaydi.

Depth test yoqiladi va har frame tozalanadi.

Transparent objectlar alohida sorting talab qilishi mumkin.

Blending

Blending yangi fragment rangini framebufferdagi rang bilan birlashtiradi.

Alpha transparency keng misol.

Blend function noto‘g‘ri sozlansa rang va opacity kutilmagan bo‘ladi.

Premultiplied alpha tushunchasi image pipeline’da muhim.

Framebuffer

Default framebuffer canvasga chiqaradi.

Offscreen framebuffer texture yoki renderbufferga chizish imkonini beradi.

Bu:

• post-processing;
• shadow map;
• picking;
• multi-pass effect

uchun ishlatiladi.

Animation

Render loop:

requestAnimationFrame(render);

orqali ishlaydi.

Har frame state yangilanadi va draw call bajariladi.

Scene o‘zgarmasa doimiy redraw shart bo‘lmasligi mumkin.

Draw call

GPUga geometriya chizish commandi draw call.

Juda ko‘p kichik draw call CPU-GPU overheadni oshiradi.

Batching, instancing va state change kamaytirish performance’ni yaxshilaydi.

Context loss

Browser yoki driver GPU contextni yo‘qotishi mumkin.

Sabablar:

• GPU reset;
• resource pressure;
• device change;
• browser policy.

Application webglcontextlost va restore hodisalarini boshqarib resource’larni qayta yaratadi.

Security

WebGL shader va driver bilan ishlagani sabab browser inputni validate va sandbox qiladi.

Untrusted shader:

• cheksiz resource;
• juda katta texture;
• memory pressure;
• GPU hang

yaratmasligi uchun limitlar mavjud.

Browser va GPU driver yangilanishi muhim.

WebGL va Canvas 2D

Canvas 2D yuqori darajadagi shape va image API beradi.

WebGL pastroq darajadagi GPU pipeline.

Oddiy chart uchun Canvas 2D osonroq.

Ko‘p object, 3D va custom shader uchun WebGL kuchliroq.

WebGL va WebGPU

WebGPU zamonaviy GPU API’lariga yaqinroq model, compute shader va explicit resource boshqaruvini beradi.

WebGL kengroq browser va eski device supportiga ega.

Migration framework va workloadga bog‘liq.

Instancing

Bir xil geometriyani ko‘p marta boshqa transform yoki rang bilan chizish uchun instanced rendering ishlatiladi. Bitta draw call ko‘p instance yaratib CPU overheadni kamaytiradi. Per-instance attribute bufferda saqlanadi.

Picking

User qaysi 3D obyektni bosganini aniqlash uchun ray casting yoki offscreen color picking ishlatilishi mumkin. Color picking har obyektni unique rang bilan framebufferga chizib, click pixelini o‘qiydi. High-DPI va asynchronous read performance hisobga olinadi.

Resource cleanup

Buffer, texture, shader va framebuffer JavaScript reference yo‘qolganda darhol GPUdan o‘chmasligi mumkin. deleteBuffer, deleteTexture va boshqa cleanup methodlari uzoq ishlaydigan applicationda GPU memory leakni kamaytiradi.

Extension

WebGL qo‘shimcha imkoniyatlarni extension orqali beradi. Application extension mavjudligini tekshiradi va fallback ishlatadi. Extension nomi hamda support WebGL versiyasiga bog‘liq.

Bog‘liq tushunchalar

Web Graphics Library, GPU, Shader, Vertex, Fragment, Texture, Buffer, GLSL, Canvas, WebGPU, 3D rendering