3D Графика & WebGL & WebGPU

Виртуальная лаборатория 3D графики. Изучаем Three.js, WebGL, WebGPU, создаём 3D диаграммы, визуализации и интерактивные сцены.

Three.js
3D диаграммы
WebGL / WebGPU

Последние публикации

Диаграмма, Гистограмма, Парето: разбор на примере Total requests и Unique visitors (Cloudflare) сайта devitpro.uz

Личный опыт изучения трёх базовых инструментов аналитика в мире IT и AI: диаграммы, гистограммы и диаграммы Парето. Разбираю, чем отличается распределение от сравнения категорий, как гистограмма показывает «горб» и выбросы, зачем нужны бины и правило Стёрджеса, и почему диаграмма Парето — это гистограмма с кумулятивной кривой, которая отвечает на вопрос «какие 20% причин дают 80% результата». Все визуализации построены на Apache ECharts на реальных данных двух источников: Total requests (Cloudflare) сайта devitpro.uz за 3 октября — 1 ноября 2026 — 39 726 запросов, 6 656 уникальных посетителей, аномальный пик 13 163 запроса 9 октября — и Unique visitors за тот же период с максимумом 344 посетителя 18 октября. Отдельно показано, почему нельзя путать запросы и людей: 53 запроса на человека 9 октября против 2 запросов на человека 18 октября. Технологии: ECharts, GSAP.

Диаграмма, Солнечные лучи: иерархия данных в радиальном свете — разбор Sunburst в IT и AI на примере Requests (Cloudflare) и Edge Requests (Vercel) сайта devitpro.uz

Личный опыт изучения диаграммы «Солнечные лучи» (Sunburst) в мире IT и AI: как иерархия превращается в концентрические кольца, где угол сектора пропорционален значению, а вложенность показывает уровни — от общего объёма трафика до отдельных стран и региональных узлов. Разбираю, как читать пропорции и выбросы, зачем нужны drill-down, подсказки и цветовое кодирование уровней, и почему Sunburst — это не «просто круги», а инструмент, который одновременно показывает структуру и масштаб. Все визуализации построены на Apache ECharts: интерактивная диаграмма с drill-down и подсказками на реальных данных трафика devitpro.uz — Requests (Cloudflare) за 01.09.2026 — 01.10.2026 (64.87k запросов, 2.3k уникальных посетителей, 60 стран мира) и Edge Requests (Vercel) за 28.06.2026 — 01.09.2026 (51 785 запросов, 19 регионов). Технологии: ECharts, GSAP.

Диаграмма, Дерево: иерархические данные через вложенные прямоугольники — разбор Treemap в IT и AI

Личный опыт изучения диаграммы «Дерево» (Treemap) в мире IT и AI: как иерархия превращается во вложенные прямоугольники, где площадь фигуры пропорциональна значению, а вложенность показывает уровни — от сервисов и эндпоинтов до слоёв ML-модели. Разбираю, как читать пропорции и выбросы, зачем нужны drill-down, хлебные крошки и цветовое кодирование дополнительной метрики, и почему Treemap — это не «просто квадратики», а инструмент, который одновременно показывает структуру и масштаб. Практика построена на Apache ECharts: интерактивная диаграмма с зумом, навигацией по узлам иерархии и реальными данными трафика devitpro.uz — Requests (Cloudflare) за 01.09.2026 — 01.10.2026 (64.87k запросов) и Edge Requests (Vercel) за 28.06.2026 — 01.09.2026 (51 785 запросов). Технологии: ECharts, GSAP.

Диаграмма, Лепестковая, Лепестковая с маркерами, Заполненная лепестковая: разбор радарных диаграмм в IT и AI на примере Cloudflare Requests и Vercel Edge Requests сайта devitpro.uz

Личный опыт изучения четырёх ключевых типов лепестковых (радарных) диаграмм в мире IT и AI: базовая лепестковая, лепестковая с маркерами, заполненная лепестковая и комбинированная. Разбираю, как несколько измерений превращаются в замкнутый профиль, как форма профиля показывает баланс или перекос метрик, зачем нужны маркеры на осях и почему заполнение области помогает увидеть перекрытие нескольких профилей. Все визуализации построены на реальных данных двух источников: Requests (Cloudflare) сайта devitpro.uz за период с 01.09.2026 по 01.10.2026 — 64.87k запросов, 2.3k уникальных посетителей, 29.88k запросов через Cloudflare, 60 стран мира — и Edge Requests (Vercel) сайта devitpro.uz за период с 28.06.2026 по 01.09.2026 — 51 785 запросов, 19 региональных узлов мира. Технологии: ECharts, GSAP.

Диаграмма, Поверхностная, Объёмная поверхностная, Бесцветная объёмная поверхностная, Контурная, Бесцветная контурная: разбор поверхностных графиков в IT и AI

Личный опыт изучения пяти ключевых типов поверхностных диаграмм в мире IT и AI: поверхностная, объёмная поверхностная, бесцветная объёмная поверхностная, контурная и бесцветная контурная. Разбираю, как два независимых измерения (X и Y) и одно зависимое (Z) превращаются в трёхмерный ландшафт, как цвет ускоряет восприятие значений, зачем нужна монохромная поверхность и почему контурная диаграмма — это не «упрощённый 3D», а самостоятельный инструмент для анализа топологии функций. Все визуализации построены на ECharts GL: интерактивные 3D-поверхности с вращением и зумом, цветовое кодирование через visualMap, а также контурные изолинии на плоскости. Технологии: ECharts, ECharts-GL, GSAP.

Диаграмма, Биржевая: High / Low / Close, Open / High / Low / Close, Volume и полный набор OHLC — разбор биржевых графиков в IT и AI

Личный опыт изучения четырёх ключевых типов биржевых диаграмм в мире IT и AI: биржевая (самый высокий курс, самый низкий курс, курс закрытия), биржевая (курс открытия, самый высокий курс, самый низкий курс, курс закрытия), биржевая (объём, самый высокий курс, самый низкий курс, курс закрытия) и биржевая (объём, курс открытия, самый высокий курс, самый низкий курс, курс закрытия). Разбираю, как четыре точки — открытие, максимум, минимум и закрытие — превращаются в историю движения, как объём меняет восприятие графика и почему выбор правильного типа диаграммы — это и есть мастерство визуализации. Все визуализации построены на ECharts: интерактивные свечи, комбинированные панели «цена + объём». Технологии: ECharts, GSAP.

Диаграмма, Карта, Картограмма: разбор на примере Requests (Cloudflare) и Edge Requests (Vercel) сайта devitpro.uz

Личный опыт изучения трёх больших классов визуализации данных в мире IT и AI: диаграмма, карта и картограмма. Разбираю диаграмму (столбчатую, кольцевую, линейную), карту (точечную и тепловую) и картограмму (хороплет и пузырьковую) — как выбрать правильный тип под задачу и почему один график может рассказать историю, которую не увидит таблица с числами. Все визуализации построены на реальных данных двух источников: Requests (Cloudflare) сайта devitpro.uz за период с 01.09.2026 по 01.10.2026 — 64.87k запросов, 2.3k уникальных посетителей, 29.88k запросов через Cloudflare, 60 стран мира — и Edge Requests (Vercel) сайта devitpro.uz за период с 28.06.2026 по 01.09.2026 — 51 785 запросов, 19 региональных узлов мира. Технологии: ECharts, GSAP.

Диаграмма: Точечная, Точечная с гладкими кривыми и маркерами, Точечная с гладкими кривыми, Точечная с прямыми отрезками и маркерами, Точечная с прямыми отрезками, Пузырьковая и Объёмная пузырьковая: разбор на примере Edge Requests (Vercel) и Requests (Cloudflare) сайта devitpro.uz

Личный опыт изучения семи типов точечных и пузырьковых диаграмм в мире IT и AI: точечная, точечная с гладкими кривыми и маркерами, точечная с гладкими кривыми, точечная с прямыми отрезками и маркерами, точечная с прямыми отрезками, пузырьковая и объёмная пузырьковая. Все визуализации построены на реальных данных двух источников: Edge Requests (Vercel) сайта devitpro.uz за период с 28.06.2026 по 01.09.2026 — 51 785 запросов, 19 региональных узлов мира — и Requests (Cloudflare) сайта devitpro.uz за период с 01.09.2026 по 01.10.2026 — 64.87k запросов, 2.3k уникальных посетителей, 29.88k запросов через Cloudflare, 60 стран мира. Технологии: ECharts, ECharts-GL, GSAP.

Диаграмма: С областями, С областями и накоплением, Нормированная с областями и накоплением, Объёмная с областями, Объёмная с областями и накоплением, Объёмная нормированная с областями и накоплением: разбор на примере Edge Requests (Vercel) и Requests (Cloudflare) сайта devitpro.uz

Личный опыт изучения шести типов диаграмм с областями в мире IT и AI: с областями, с областями и накоплением, нормированная с областями и накоплением, объёмная с областями, объёмная с областями и накоплением и объёмная нормированная с областями и накоплением. Все визуализации построены на реальных данных двух источников: Edge Requests (Vercel) сайта devitpro.uz за период с 28.06.2026 по 01.09.2026 — 51 785 запросов, 19 региональных узлов мира — и Requests (Cloudflare) сайта devitpro.uz за период с 01.09.2026 по 01.10.2026 — 64.87k запросов, 2.3k уникальных посетителей, 29.88k запросов через Cloudflare, 60 стран мира. Технологии: ECharts, ECharts-GL, GSAP.

Диаграмма: Линейчатая с группировкой, Линейчатая с накоплением, Нормированная линейчатая с накоплением, Объёмная линейчатая с группировкой, Объёмная линейчатая с накоплением, Объёмная нормированная линейчатая с накоплением: разбор на примере Edge Requests (Vercel) и Requests (Cloudflare) сайта devitpro.uz

Личный опыт изучения шести типов линейчатых диаграмм в мире IT и AI: линейчатая с группировкой, линейчатая с накоплением, нормированная линейчатая с накоплением, объёмная линейчатая с группировкой, объёмная линейчатая с накоплением и объёмная нормированная линейчатая с накоплением. Все визуализации построены на реальных данных двух источников: Edge Requests (Vercel) сайта devitpro.uz за период с 28.06.2026 по 01.09.2026 — 51 785 запросов, 19 региональных узлов мира — и Requests (Cloudflare) сайта devitpro.uz за период с 01.09.2026 по 01.10.2026 — 64.87k запросов, 2.3k уникальных посетителей, 29.88k запросов через Cloudflare, 60 стран мира. Технологии: ECharts, ECharts-GL, GSAP.

3D Графики, Диаграмма, Круговая, Объёмная круговая, Вторичная круговая, Вторичная линейчатая и Кольцевая: разбор на примере Edge Requests (Vercel) и Requests (Cloudflare) сайта devitpro.uz

Личный опыт изучения семи типов визуализации данных в мире IT и AI: 3D-графики, диаграмма, круговая, объёмная круговая, вторичная круговая, вторичная линейчатая и кольцевая. Все визуализации построены на реальных данных двух источников: Edge Requests (Vercel) сайта devitpro.uz за период с 28.06.2026 по 01.09.2026 — 51 785 запросов, 19 региональных узлов мира — и Requests (Cloudflare) сайта devitpro.uz за период с 01.09.2026 по 01.10.2026 — 64.87k запросов, 2.3k уникальных посетителей, 29.88k запросов через Cloudflare, 60 стран мира. Технологии: ECharts, ECharts-GL, GSAP.

3D Графики, Диаграмма, График с накоплением, График с маркерами и Объёмный график: разбор на примере Requests (Cloudflare) сайта devitpro.uz

Личный опыт изучения девяти типов 3D-визуализации данных в мире IT и AI: 3D-графики, диаграмма, линейный график, график с накоплением, нормированный график с накоплением, график с маркерами, график с маркерами и накоплением, нормированный график с маркерами и накоплением, а также объёмный график. Все визуализации построены на реальных данных Requests (Cloudflare) сайта devitpro.uz за период с 01.09.2026 по 01.10.2026 — 64.87k запросов, 2.3k уникальных посетителей, 29.88k запросов через Cloudflare и 60 стран мира. Технологии: ECharts, ECharts-GL, GSAP.

3D Графики, Диаграммы и Гистограммы: разбор на примере Edge Requests (Vercel) сайта devitpro.uz

Личный опыт изучения восьми типов 3D-визуализации данных: 3D-графики, объёмные диаграммы, гистограммы с группировкой и накоплением, нормированные и объёмные варианты. Все графики построены на реальных данных Edge Requests сайта devitpro.uz за период с 28.06.2026 по 01.09.2026 — 19 регионов мира, 46 607 запросов. Технологии: ECharts, ECharts-GL, GSAP.

iPhone 16 Pro в 3D: разбираем демо на Three.js от Peter Csipkay

Эффектное 3D-демо iPhone 16 Pro с возможностью вращения, приближения и изучения деталей. Разбираем, как работает Three.js, как встроить демо к себе на сайт и почему такие решения становятся стандартом для веб-витрин.

Что такое GSAP: мощная библиотека для веб-анимации и 5 проектов из Showcase

Знакомство с GSAP — профессиональной библиотекой для создания плавных анимаций в браузере. Разбираем возможности и смотрим 5 впечатляющих проектов из официальной галереи: Michael Gatt, Graffico Office, Harsh' Portfolio, HOLM и bleibtgleich'26.

Что такое Three.js Websites Showcase — лучшие проекты

Подборка самых впечатляющих сайтов на Three.js: от логистических платформ до креативных портфолио. United Carriers, Ricardo Chance, Framemode и ещё 16 проектов с полным разбором технологий.

Web Design Awards: что оценивает жюри и проекты, которые мне понравились

Разбираю 7 критериев оценки премии Web Design Awards, делюсь личным топом работ с Three.js и инсайтами для веб-разработчиков.

Текст на основе SDF — 3D-текст нового поколения в Babylon.js

Разбираем технологию SDF для рендеринга текста в 3D-сцене. Как работает, где применяется, живой пример из Playground и практические советы по внедрению.

Что такое BABYLON.JS — мощный 3D-движок для браузера

Знакомство с Babylon.js — открытым 3D-движком. Рассматриваем возможности, смотрим живую 3D-модель Lamborghini Countach.

Ferrari 458 Italia в 3D: материалы, свет и управление цветом в three.js

Разбираем официальный пример three.js с Ferrari 458 Italia. Как работают физические материалы, HDR-окружение и управление цветом в реальном времени.

Глобус со сменой дня и ночи: как внедрить 3D-глобус в свой проект

Библиотека реалистичного 3D-глобуса с динамической сменой дня и ночи на Three.js. Текстуры Земли, атмосфера, вращение и освещение — полный гайд по внедрению в ваш проект.

3D Графика, Three.js, WebGL, WebGPU

Современная веб-графика выходит на новый уровень. Three.js — это библиотека для создания 3D-сцен в браузере, работающая поверх WebGL (низкоуровневый API для рендеринга). WebGPU — следующее поколение, обеспечивающее более высокую производительность и доступ к вычислительным шейдерам. В нашей лаборатории мы исследуем все эти технологии, создаём 3D диаграммы, интерактивные визуализации и виртуальные туры. Делимся опытом внедрения 3D в реальные проекты, оптимизацией и кроссплатформенными решениями.