3D Grafika & WebGL & WebGPU

3D grafika virtual laboratoriyasi. Three.js, WebGL, WebGPU ni o‘rganamiz, 3D diagrammalar, vizualizatsiyalar va interaktiv sahnalar yaratamiz.

Three.js
3D diagrammalar
WebGL / WebGPU

So‘nggi maqolalar

Diagramma, Gistogramma, Pareto: devitpro.uz saytining Total requests va Unique visitors (Cloudflare) misolida tahlil

IT va AI olamida har bir analitikning uchta asosiy vositasini o‘rganish bo‘yicha shaxsiy tajribam: diagramma, gistogramma va Pareto diagrammasi. Taqsimot va kategoriyalarni taqqoslash o‘rtasidagi farqni, gistogramma «do‘nglik» va chiqib ketishlarni qanday ochib berishini, nima uchun binlar va Sturges qoidasi muhimligini hamda nima uchun Pareto diagrammasi aslida kumulyativ egri chiziqli gistogramma ekanligini va u «qaysi 20% sabab 80% natija beradi?» degan savolga javob berishini tahlil qilaman. Barcha vizualizatsiyalar Apache ECharts asosida, ikkita manbaning haqiqiy ma’lumotlari bo‘yicha qurilgan: devitpro.uz saytining Total requests (Cloudflare) ma’lumotlari 3-oktabrdan 1-noyabrgacha 2026 — 39 726 so‘rov, 6 656 noyob tashrif buyuruvchi va 9-oktabrda 13 163 so‘rovli anomal cho‘qqi — hamda shu davr uchun Unique visitors ma’lumotlari, 18-oktabrda maksimal 344 tashrif buyuruvchi. Alohida so‘rovlar va odamlarni aralashtirib yubormaslik kerakligi ko‘rsatilgan: 9-oktabrda bir kishiga 53 so‘rov, 18-oktabrda esa bir kishiga atigi 2 so‘rov. Texnologiyalar: ECharts va GSAP.

Diagramma, Quyosh nurlari: ierarxiyani radial nurda o‘qish — IT va AI olamida Sunburst tahlili, devitpro.uz saytining Requests (Cloudflare) va Edge Requests (Vercel) misolida

IT va AI olamida «Quyosh nurlari» (Sunburst) diagrammasi bo‘yicha shaxsiy tajribam: ierarxiya qanday qilib konsentrik halqalarga aylanishi, har bir sektorning burchagi qiymatga proportsional bo‘lishi va ichma-ichlik darajalarni ko‘rsatishi — umumiy trafik hajmidan tortib alohida mamlakatlar va mintaqaviy tugunlargacha. Proportsiyalar va chetlanishlarni qanday o‘qish, nima uchun drill-down, maslahat oynachalari va darajalarni rang bilan kodlash muhimligini hamda nima uchun Sunburst «shunchaki doiralar» emas, balki struktura va masshtabni bir vaqtning o‘zida ko‘rsatuvchi vosita ekanligini tahlil qilaman. Barcha vizualizatsiyalar Apache ECharts asosida qurilgan: drill-down va maslahat oynachalari bilan interaktiv diagramma, devitpro.uz saytining haqiqiy trafik ma’lumotlari — Requests (Cloudflare) 01.09.2026 — 01.10.2026 (64.87k so‘rov, 2.3k noyob tashrif buyuruvchi, dunyoning 60 mamlakati) va Edge Requests (Vercel) 28.06.2026 — 01.09.2026 (51 785 so‘rov, 19 mintaqa). Texnologiyalar: ECharts va GSAP.

Diagramma, Daraxt: ierarxik ma’lumotlarni ichma-ich to‘rtburchaklar orqali o‘qish — IT va AI olamida Treemap tahlili

IT va AI olamida «Daraxt» diagrammasi (Treemap) bo‘yicha shaxsiy tajribam: ierarxiya qanday qilib ichma-ich to‘rtburchaklarga aylanishi, shakl yuzasi qiymatga proportsional bo‘lishi va ichma-ichlik darajalarni ko‘rsatishni — xizmatlar va endpointlardan tortib ML-model qatlamlarigacha. Proportsiyalar va chetlanishlarni qanday o‘qish, nima uchun drill-down, non bo‘lakchalari va qo‘shimcha metrikani rang bilan kodlash muhimligini hamda nima uchun Treemap «shunchaki kvadratlar» emas, balki struktura va masshtabni bir vaqtning o‘zida ko‘rsatuvchi vosita ekanligini tahlil qilaman. Amaliyot Apache ECharts asosida qurilgan: zum, ierarxiya tugunlari bo‘ylab navigatsiya va devitpro.uz saytining haqiqiy trafik ma’lumotlari — Requests (Cloudflare) 01.09.2026 — 01.10.2026 (64.87k so‘rov) va Edge Requests (Vercel) 28.06.2026 — 01.09.2026 (51 785 so‘rov). Texnologiyalar: ECharts va GSAP.

Diagramma, Radardiagramma, Radardiagramma belgilari bilan, To‘ldirilgan radardiagramma: devitpro.uz saytining Cloudflare Requests va Vercel Edge Requests misolida IT va AI olamida radardiagrammalarni tahlil qilamiz

IT va AI olamida radardiagrammalarning (o‘rgimchak diagrammalarining) to‘rtta asosiy turini o‘rganish bo‘yicha shaxsiy tajribam: asosiy radardiagramma, radardiagramma belgilari bilan, to‘ldirilgan radardiagramma va birlashtirilgan ko‘rinish. Bir nechta o‘lchovlar qanday qilib yopiq profilga aylanishini, profil shakli ko‘rsatkichlar bo‘yicha muvozanat yoki qiyshiqlikni qanday ochib berishini, o‘qlardagi belgilar aniq qiymatlarni o‘qish uchun nima uchun zarurligini va maydonni to‘ldirish bir nechta profillarning ustma-ust tushishini ko‘rishga qanday yordam berishini tahlil qilaman. Barcha vizualizatsiyalar ikkita manbaning haqiqiy ma’lumotlari asosida qurilgan: devitpro.uz saytining Requests (Cloudflare) ma’lumotlari 01.09.2026 dan 01.10.2026 gacha — 64.87k jami so‘rov, 2.3k noyob tashrif buyuruvchi, 29.88k Cloudflare so‘rovi, dunyoning 60 mamlakati — va devitpro.uz saytining Edge Requests (Vercel) ma’lumotlari 28.06.2026 dan 01.09.2026 gacha — 51 785 so‘rov, dunyoning 19 mintaqaviy tuguni. Texnologiyalar: ECharts va GSAP.

Diagramma, Yuzaki, Hajmli yuzaki, Rangsiz hajmli yuzaki, Konturli, Rangsiz konturli: IT va AI olamida yuzaki diagrammalarni tahlil qilamiz

IT va AI olamida yuzaki diagrammalarning beshta asosiy turini o‘rganish bo‘yicha shaxsiy tajribam: yuzaki, hajmli yuzaki, rangsiz hajmli yuzaki, konturli va rangsiz konturli. Ikkita mustaqil o‘lchov (X va Y) va bitta bog‘liq o‘lchov (Z) qanday qilib uch o‘lchamli landshaftga aylanishini, rang visualMap orqali qiymatlarni qabul qilishni qanday tezlashtirishini, nima uchun bir rangli yuza muhimligini va nima uchun konturli diagramma «soddalashtirilgan 3D» emas, balki funksiyalar topologiyasini tahlil qilish uchun mustaqil vosita ekanligini tahlil qilaman. Barcha vizualizatsiyalar ECharts GL asosida qurilgan: aylantirish va zum bilan interaktiv 3D-yuzalar, visualMap orqali rang kodlash va tekislikka proyeksiya qilingan kontur izoliniyalari. Texnologiyalar: ECharts, ECharts-GL va GSAP.

Diagramma, Birjaviylik: High / Low / Close, Open / High / Low / Close, Volume va to‘liq OHLC to‘plami — IT va AI olamida birja diagrammalarini tahlil qilamiz

IT va AI olamida birja diagrammalarining to‘rtta asosiy turini o‘rganish bo‘yicha shaxsiy tajribam: birjaviylik (eng yuqori kurs, eng past kurs, yopilish kursi), birjaviylik (ochilish kursi, eng yuqori kurs, eng past kurs, yopilish kursi), birjaviylik (hajm, eng yuqori kurs, eng past kurs, yopilish kursi) va birjaviylik (hajm, ochilish kursi, eng yuqori kurs, eng past kurs, yopilish kursi). To‘rtta nuqta — ochilish, maksimum, minimum va yopilish — qanday qilib harakat hikoyasiga aylanishini, hajm grafik idrokini qanday o‘zgartirishini va nima uchun to‘g‘ri diagramma turini tanlash vizualizatsiya mahoratining asl mohiyati ekanligini tahlil qilaman. Barcha vizualizatsiyalar ECharts asosida qurilgan: interaktiv shamlar, «narx + hajm» kombinatsiyalangan panellari. Texnologiyalar: ECharts va GSAP.

Diagramma, Xarita, Kartogramma: devitpro.uz saytining Requests (Cloudflare) va Edge Requests (Vercel) misolida tahlil

IT va AI olamida ma’lumotlar vizualizatsiyasining uchta katta klassini o‘rganish bo‘yicha shaxsiy tajribam: diagramma, xarita va kartogramma. Diagramma (ustunli, halqali, chiziqli), xarita (nuqtali va issiqlik) va kartogramma (xoroplet va pufakli) turlarini tahlil qilaman — vazifaga mos to‘g‘ri turni qanday tanlash va nima uchun bitta vizualizatsiya raqamlar jadvali hech qachon aytib bera olmaydigan hikoyani aytib berishi mumkin. Barcha vizualizatsiyalar ikkita manbaning haqiqiy ma’lumotlari asosida qurilgan: devitpro.uz saytining Requests (Cloudflare) ma’lumotlari 01.09.2026 dan 01.10.2026 gacha — 64.87k jami so‘rov, 2.3k noyob tashrif buyuruvchi, 29.88k Cloudflare so‘rovi, dunyoning 60 mamlakati — va devitpro.uz saytining Edge Requests (Vercel) ma’lumotlari 28.06.2026 dan 01.09.2026 gacha — 51 785 so‘rov, dunyoning 19 mintaqaviy tuguni. Texnologiyalar: ECharts va GSAP.

Diagramma: Nuqtali, Silliq egri chiziqli va markerli nuqtali, Silliq egri chiziqli nuqtali, To‘g‘ri segmentli va markerli nuqtali, To‘g‘ri segmentli nuqtali, Pufakli va Hajmli pufakli: devitpro.uz saytining Edge Requests (Vercel) va Requests (Cloudflare) misolida tahlil

IT va AI olamida nuqtali va pufakli diagrammalarning yetti turini o‘rganish bo‘yicha shaxsiy tajribam: nuqtali, silliq egri chiziqli va markerli nuqtali, silliq egri chiziqli nuqtali, to‘g‘ri segmentli va markerli nuqtali, to‘g‘ri segmentli nuqtali, pufakli va hajmli pufakli. Barcha vizualizatsiyalar ikkita manbaning haqiqiy ma’lumotlari asosida qurilgan: devitpro.uz saytining Edge Requests (Vercel) ma’lumotlari 28.06.2026 dan 01.09.2026 gacha — 51 785 so‘rov, dunyoning 19 mintaqaviy tuguni — va devitpro.uz saytining Requests (Cloudflare) ma’lumotlari 01.09.2026 dan 01.10.2026 gacha — 64.87k jami so‘rov, 2.3k noyob tashrif buyuruvchi, 29.88k Cloudflare so‘rovi, dunyoning 60 mamlakati. Texnologiyalar: ECharts, ECharts-GL, GSAP.

Diagramma: Sohali, To‘plangan sohali, Normallashtirilgan to‘plangan sohali, Hajmli sohali, Hajmli to‘plangan sohali va Hajmli normallashtirilgan to‘plangan sohali: devitpro.uz saytining Edge Requests (Vercel) va Requests (Cloudflare) misolida tahlil

IT va AI olamida sohali diagrammalarning olti turini o‘rganish bo‘yicha shaxsiy tajribam: sohali, to‘plangan sohali, normallashtirilgan to‘plangan sohali, hajmli sohali, hajmli to‘plangan sohali va hajmli normallashtirilgan to‘plangan sohali. Barcha vizualizatsiyalar ikkita manbaning haqiqiy ma’lumotlari asosida qurilgan: devitpro.uz saytining Edge Requests (Vercel) ma’lumotlari 28.06.2026 dan 01.09.2026 gacha — 51 785 so‘rov, dunyoning 19 mintaqaviy tuguni — va devitpro.uz saytining Requests (Cloudflare) ma’lumotlari 01.09.2026 dan 01.10.2026 gacha — 64.87k jami so‘rov, 2.3k noyob tashrif buyuruvchi, 29.88k Cloudflare so‘rovi, dunyoning 60 mamlakati. Texnologiyalar: ECharts, ECharts-GL, GSAP.

Diagramma: Guruhli chiziqli, To‘plangan chiziqli, Normallashtirilgan to‘plangan chiziqli, Hajmli guruhli chiziqli, Hajmli to‘plangan chiziqli va Hajmli normallashtirilgan to‘plangan chiziqli: devitpro.uz saytining Edge Requests (Vercel) va Requests (Cloudflare) misolida tahlil

IT va AI olamida chiziqli diagrammalarning olti turini o‘rganish bo‘yicha shaxsiy tajribam: guruhli chiziqli, to‘plangan chiziqli, normallashtirilgan to‘plangan chiziqli, hajmli guruhli chiziqli, hajmli to‘plangan chiziqli va hajmli normallashtirilgan to‘plangan chiziqli. Barcha vizualizatsiyalar ikkita manbaning haqiqiy ma’lumotlari asosida qurilgan: devitpro.uz saytining Edge Requests (Vercel) ma’lumotlari 28.06.2026 dan 01.09.2026 gacha — 51 785 so‘rov, dunyoning 19 mintaqaviy tuguni — va devitpro.uz saytining Requests (Cloudflare) ma’lumotlari 01.09.2026 dan 01.10.2026 gacha — 64.87k jami so‘rov, 2.3k noyob tashrif buyuruvchi, 29.88k Cloudflare so‘rovi, dunyoning 60 mamlakati. Texnologiyalar: ECharts, ECharts-GL, GSAP.

3D Grafiklar, Diagramma, Doiraviy, Hajmli Doiraviy, Ikkilamchi Doiraviy, Ikkilamchi Chiziqli va Halqali: devitpro.uz saytining Edge Requests (Vercel) va Requests (Cloudflare) misolida tahlil

IT va AI olamida ma’lumotlar vizualizatsiyasining yetti turini o‘rganish bo‘yicha shaxsiy tajribam: 3D grafiklar, diagramma, doiraviy, hajmli doiraviy, ikkilamchi doiraviy, ikkilamchi chiziqli va halqali. Barcha vizualizatsiyalar ikkita manbaning haqiqiy ma’lumotlari asosida qurilgan: devitpro.uz saytining Edge Requests (Vercel) ma’lumotlari 28.06.2026 dan 01.09.2026 gacha — 51 785 so‘rov, dunyoning 19 mintaqaviy tuguni — va devitpro.uz saytining Requests (Cloudflare) ma’lumotlari 01.09.2026 dan 01.10.2026 gacha — 64.87k jami so‘rov, 2.3k noyob tashrif buyuruvchi, 29.88k Cloudflare so‘rovi, dunyoning 60 mamlakati. Texnologiyalar: ECharts, ECharts-GL, GSAP.

3D Grafiklar, Diagramma, To‘plangan Grafik, Markerli Grafik va Hajmli Grafik: devitpro.uz saytining Requests (Cloudflare) misolida tahlil

IT va AI olamida 3D ma’lumotlar vizualizatsiyasining to‘qqiz turini o‘rganish bo‘yicha shaxsiy tajribam: 3D grafiklar, diagramma, chiziqli grafik, to‘plangan grafik, normallashtirilgan to‘plangan grafik, markerli grafik, markerli va to‘plangan grafik, normallashtirilgan markerli va to‘plangan grafik hamda hajmli grafik. Barcha vizualizatsiyalar devitpro.uz saytining 01.09.2026 dan 01.10.2026 gacha bo‘lgan haqiqiy Requests (Cloudflare) ma’lumotlari asosida qurilgan — 64.87k jami so‘rov, 2.3k noyob tashrif buyuruvchi, 29.88k Cloudflare so‘rovi va dunyoning 60 mamlakati. Texnologiyalar: ECharts, ECharts-GL, GSAP.

3D Grafiklar, Diagrammalar va Gistogrammalar: devitpro.uz saytining Vercel Edge Requests misolida tahlil

3D ma’lumotlar vizualizatsiyasining sakkiz turini o‘rganish bo‘yicha shaxsiy tajribam: 3D grafiklar, hajmli diagrammalar, guruhlangan va to‘plangan gistogrammalar, normallashtirilgan hamda hajmli variantlar. Barcha grafiklar devitpro.uz saytining 28.06.2026 dan 01.09.2026 gacha bo‘lgan haqiqiy Edge Requests ma’lumotlari asosida qurilgan — 19 mintaqa, 46 607 so‘rov. Texnologiyalar: ECharts, ECharts-GL, GSAP.

iPhone 16 Pro 3D da: Peter Csipkay tomonidan Three.js demosini tahlil qilamiz

iPhone 16 Pro ning to‘liq aylantirish, yaqinlashtirish va detallarni ko‘rish imkoniyatiga ega immersiv 3D demosi. Three.js bu interaktiv tajribani qanday quvvatlantirishini o‘rganing, uni saytingizga qanday joylashtirishni bilib oling va nima uchun 3D ko‘rgazmalar veb-mahsulot namoyishlari uchun yangi standartga aylanayotganini tushuning.

GSAP nima: Veb-animatsiya uchun kuchli kutubxona va Showcase'dan 5 ta loyiha

GSAP — brauzerda silliq va yuqori samarali animatsiyalar yaratish uchun professional kutubxona bilan tanishing. Uning imkoniyatlarini o'rganing va rasmiy galereyadan 5 ta ta'sirli loyihani kashf eting: Michael Gatt, Graffico Office, Harsh' Portfolio, HOLM va bleibtgleich'26.

Three.js veb-saytlari namoyishi — eng yaxshi loyihalar

Three.js yordamida yaratilgan eng ta'sirli veb-saytlar to'plami: logistikadan tortib ijodiy portfoliolargacha. United Carriers, Ricardo Chance, Framemode va yana 16 ta loyiha texnologiyalar bilan to'liq tahlilda.

Web Design Awards: Hakamlar nimaga baho beradi va men yoqtirgan loyihalar

Web Design Awards mukofotining 7 ta baholash mezonini tahlil qilaman, Three.js loyihalari bo'yicha shaxsiy top 5 tanlovim va veb-ishlab chiquvchilar uchun asosiy xulosalar bilan bo'lishaman.

Imzolangan masofa maydoni asosidagi matn (SDF) — Babylon.js da 3D matnning yangi avlodi

SDF texnologiyasi yordamida 3D sahnalarda aniq va masshtablanuvchi matn yaratish. Jonli Playground misoli, shader tahlili va SDF matnni loyihalarga integratsiya qilish bo'yicha amaliy maslahatlar.

Babylon.js nima? — Brauzer uchun qudratli 3D dvigatel

Babylon.js — ochiq kodli 3D dvigatel bilan tanishing. Uning imkoniyatlarini o'rganing, jonli 3D Lamborghini Countach modelini ko'ring.

Ferrari 458 Italia 3D: three.js da materiallar, yorug'lik va real vaqt rang boshqaruvi

Rasmiy three.js Ferrari 458 Italia misolini chuqur tahlil qilamiz. MeshPhysicalMaterial, HDR muhit, DRACO siqish va real vaqt rang boshqaruvi WebGL da qanday ishlashini o'rganamiz.

Kun va tun almashuvi bilan globus: 3D-globusni loyihangizga qanday integratsiya qilish

Three.js yordamida dinamik kun va tun tsikliga ega realistik 3D Yer globusini yarating. Yer teksturalari, atmosfera, aylanish va yorug'lik — globusni loyihangizga integratsiya qilish bo'yicha to'liq qo'llanma.

3D Grafika, Three.js, WebGL, WebGPU

Zamonaviy veb-grafika yangi cho‘qqilarga ko‘tarilmoqda. Three.js — brauzerda 3D sahnalar yaratish uchun kutubxona bo‘lib, WebGL (past darajadagi renderlash API) ustida ishlaydi. WebGPU — bu keyingi avlod, yuqori unumdorlik va hisoblash shaderlariga kirish imkonini beradi. Laboratoriyamizda biz ushbu texnologiyalarni o‘rganamiz, 3D diagrammalar, interaktiv vizualizatsiyalar va virtual turlar yaratamiz. 3D ni real loyihalarga integratsiya qilish, optimizatsiya va krosplatforma yechimlari bo‘yicha tajribamiz bilan bo'lishamiz.