Алексей Федосов из 2ГИС написал интересную статью про то, как команда веб-карт оптимизирует генерализацию маркеров в новой версии 2gis.ru.
Ребята перешли от использования R-дерева к решению на основе буфера коллизий, где "занятость" определённой позиции определяется наличием закрашенных пикселей в буфере. В итоге они ускорили процесс генерализации маркеров более чем в 10 раз. Но для генерализации подписей на карте продолжают использовать R-дерево, так как буфер коллизий не может дать ответ на то, с чем именно произошло пересечение.
Статья Алексея очень хороший пример того, насколько далеко продвинулся современный веб и какие задачи могут появляться у наших коллег по цеху.
#map #webgl #algorithm #2gis
https://habr.com/ru/company/2gis/blog/442720/
Ребята перешли от использования R-дерева к решению на основе буфера коллизий, где "занятость" определённой позиции определяется наличием закрашенных пикселей в буфере. В итоге они ускорили процесс генерализации маркеров более чем в 10 раз. Но для генерализации подписей на карте продолжают использовать R-дерево, так как буфер коллизий не может дать ответ на то, с чем именно произошло пересечение.
Статья Алексея очень хороший пример того, насколько далеко продвинулся современный веб и какие задачи могут появляться у наших коллег по цеху.
#map #webgl #algorithm #2gis
https://habr.com/ru/company/2gis/blog/442720/
Хабр
Быстрая генерализация маркеров на WebGL-карте
Маркеры — дело полезное. Полезное в разумных количествах. Когда их становится слишком много, польза улетучивается. Как поступить, если требуется отметить на кар...
Посмотрел доклад с прошедшего Google I/O'19 "Next-Generation 3D Graphics on the Web" про настоящее и будущее 3D-графики в Web'е.
Из первой части доклада запомнилось использование веб-компонентов для снижения сложности кода при использовании WebGL-фич. Вот так выглядит пример вставки просмотрщика 3D-моделей на страницу:
Вторая часть доклада для меня была самой интересной. Она была посвящена новому API — WebGPU. Показали демо, где на сцене рендерилось 10000 объектов. Всё работало довольно производительно (~40fps). WebGPU способен отправить в три раза больше команд на отрисовку относительно WebGL.
Рассказали про то, что с помощью WebGPU теперь можно эффективнее работать с фильтрами пост-процессинга и алгоритмами машинного обучения, так как WebGPU гораздо гибче чем WebGL — он позволяет работать с разделяемой памятью GPU. Это также открывает возможность вынесения симуляции жидкости, скиннинга, параллельной сортировки и других алгоритмов с CPU на GPU.
Новое API доступно пока в Chrome Canary на macOS в экспериментальном режиме. API включается с помощью флага chrome://flags/#enable-unsafe-webgpu. Над новой спецификацией работают производители всех браузеров.
#talk #webgl #webgpu
https://www.youtube.com/watch?v=K2JzIUIHIhc
Из первой части доклада запомнилось использование веб-компонентов для снижения сложности кода при использовании WebGL-фич. Вот так выглядит пример вставки просмотрщика 3D-моделей на страницу:
// импорт библиотеки
<script type="module" src="model-viewer.js"></script>
// добавление просмотрщика на страницу
<model-viewer src="astronaut.glb"></model-viewer>
Вторая часть доклада для меня была самой интересной. Она была посвящена новому API — WebGPU. Показали демо, где на сцене рендерилось 10000 объектов. Всё работало довольно производительно (~40fps). WebGPU способен отправить в три раза больше команд на отрисовку относительно WebGL.
Рассказали про то, что с помощью WebGPU теперь можно эффективнее работать с фильтрами пост-процессинга и алгоритмами машинного обучения, так как WebGPU гораздо гибче чем WebGL — он позволяет работать с разделяемой памятью GPU. Это также открывает возможность вынесения симуляции жидкости, скиннинга, параллельной сортировки и других алгоритмов с CPU на GPU.
Новое API доступно пока в Chrome Canary на macOS в экспериментальном режиме. API включается с помощью флага chrome://flags/#enable-unsafe-webgpu. Над новой спецификацией работают производители всех браузеров.
#talk #webgl #webgpu
https://www.youtube.com/watch?v=K2JzIUIHIhc
YouTube
Next-Generation 3D Graphics on the Web (Google I/O ’19)
This talk will cover the latest updates for adding 3D to your web site. You'll learn how to use model-viewer and new features for rendering, AR, and interactivity. You'll also see some phenomenal sites created with three.js. Then you'll get an overview of…
Дмитрий Малышев из команды Firefox написал пост-апдейт про текущий статус разработки WebGPU — нового API для работы с видеокартами — "A Taste of WebGPU in Firefox".
Возможности WebGL не позволяют утилизировать весь потенциал современных видеокарт. Решить эту проблему призвано новое WebGPU API, над которым работают инженеры всех основных браузеров.
WebGPU предоставляет собой абстракцию над графическими API (DirectX12, Vulkan, Metal), изменяя подход к написанию приложений, которые используют вычислительные ресурсы видеокарт. Его основное отличие от WebGL — предоставление разработчикам большего количества рычагов для планирования и управления вычислениями. Например, благодаря ему можно распараллелить ресурсоёмкие задачи в web-воркерах, эффективно задействуя многоядерные процессоры. Или переиспользовать пакеты команд рендеринга, что открывает возможность портирования игр с открытым миром на web-платформу.
На данный момент рабочая группа WebGPU решила большую часть архитектурных проблем. Окончание основных работ над спецификацией и её имплементацией в браузерах планируется на конец 2020 года.
#webgl #webgpu #future
https://hacks.mozilla.org/2020/04/experimental-webgpu-in-firefox/
Возможности WebGL не позволяют утилизировать весь потенциал современных видеокарт. Решить эту проблему призвано новое WebGPU API, над которым работают инженеры всех основных браузеров.
WebGPU предоставляет собой абстракцию над графическими API (DirectX12, Vulkan, Metal), изменяя подход к написанию приложений, которые используют вычислительные ресурсы видеокарт. Его основное отличие от WebGL — предоставление разработчикам большего количества рычагов для планирования и управления вычислениями. Например, благодаря ему можно распараллелить ресурсоёмкие задачи в web-воркерах, эффективно задействуя многоядерные процессоры. Или переиспользовать пакеты команд рендеринга, что открывает возможность портирования игр с открытым миром на web-платформу.
На данный момент рабочая группа WebGPU решила большую часть архитектурных проблем. Окончание основных работ над спецификацией и её имплементацией в браузерах планируется на конец 2020 года.
#webgl #webgpu #future
https://hacks.mozilla.org/2020/04/experimental-webgpu-in-firefox/
Mozilla Hacks – the Web developer blog
A Taste of WebGPU in Firefox
WebGPU is an emerging API, designed from the ground up within the W3C, to provide access to the graphics and computing capabilities of hardware on the web.
Колин Эберхарт — участвует в разработке многих проектов — написал статью про использование D3 для визуализации очень больших объёмов данных — "Rendering One Million Datapoints with D3 and WebGL".
Колин разрабатывает D3FC (набор компонентов для создания интерактивных диаграмм поверх D3). Недавно туда была добавлена поддержка WebGL. В статье на примере визуализации данных из репозитория цифрового контента научных библиотек HathiTrust рассказывается, как использовать эти компоненты.
Датасет HathiTrust состоит из одного миллиона объектов и занимает 70Mb. Если его читать полностью перед отрисовкой, то пользователь некоторое время не будет видеть график. Гораздо лучше рендерить график по мере получения данных. Для этого можно использовать Streams API. При наведении курсора мыши на каждую точку желательно показывать описание. Но опять же из-за большого объёма данных будут тормоза, если использовать линейный поиск для получения нужной точки. Для оптимизации поиска в примере используется структура данных Quadtree (идёт из коробки с D3).
Довольно большая и подробная статья. Cоветую почитать, если у вас возникнет задача визуализации очень большого количества данных.
#d3 #dataviz #webgl
https://blog.scottlogic.com/2020/05/01/rendering-one-million-points-with-d3.html
Колин разрабатывает D3FC (набор компонентов для создания интерактивных диаграмм поверх D3). Недавно туда была добавлена поддержка WebGL. В статье на примере визуализации данных из репозитория цифрового контента научных библиотек HathiTrust рассказывается, как использовать эти компоненты.
Датасет HathiTrust состоит из одного миллиона объектов и занимает 70Mb. Если его читать полностью перед отрисовкой, то пользователь некоторое время не будет видеть график. Гораздо лучше рендерить график по мере получения данных. Для этого можно использовать Streams API. При наведении курсора мыши на каждую точку желательно показывать описание. Но опять же из-за большого объёма данных будут тормоза, если использовать линейный поиск для получения нужной точки. Для оптимизации поиска в примере используется структура данных Quadtree (идёт из коробки с D3).
Довольно большая и подробная статья. Cоветую почитать, если у вас возникнет задача визуализации очень большого количества данных.
#d3 #dataviz #webgl
https://blog.scottlogic.com/2020/05/01/rendering-one-million-points-with-d3.html
Scott Logic
Rendering One Million Datapoints with D3 and WebGL
This blog post introduces the WebGL components which we recently added to D3FC, this suite of components make it easy to render charts with very large numbers of datapoints using D3. Throughout this post I'll describe the creation of the following visualisation…
Максим Эзьер написал большое руководство по работе с WebGL — "WebGL guide".
В руководстве с азов объясняется создание интерактивной трёхмерной сцены без использования сторонних библиотек. Используется только чистый JS и WebGL. В самом начале есть раздел про математику, которая необходима для работы с графикой. Затем объясняется процесс создания простых двумерных и трёхмерных сцен с подробным объяснением примеров исходного кода. Есть пример текстурирования объектов и работы с источниками света. В конце статьи есть список наиболее распространённых ошибок. Про них полезно знать при отладке кода.
В общем, если хотели потыкать WebGL, рекомендую заглянуть в это руководство.
#webgl #tutorial
https://xem.github.io/articles/webgl-guide.html
В руководстве с азов объясняется создание интерактивной трёхмерной сцены без использования сторонних библиотек. Используется только чистый JS и WebGL. В самом начале есть раздел про математику, которая необходима для работы с графикой. Затем объясняется процесс создания простых двумерных и трёхмерных сцен с подробным объяснением примеров исходного кода. Есть пример текстурирования объектов и работы с источниками света. В конце статьи есть список наиболее распространённых ошибок. Про них полезно знать при отладке кода.
В общем, если хотели потыкать WebGL, рекомендую заглянуть в это руководство.
#webgl #tutorial
https://xem.github.io/articles/webgl-guide.html
Клон Quake в 13kb
Каждый год проходит ивент js13kGames. Его участники разрабатывают браузерные игры размером не более 13kb. В этом году Доменик Саблевски сделал клон Quake и рассказал о нюансах его разработки — "Q1K3 – Making Of".
В Q1K3 используется динамическая генерация текстур, чтобы уменьшить общий размер игры. Для упрощения создания таких текстур Доменик разработал визуальный редактор. В качестве формата карт используется сильно модифицированный формат карт Quake
Хорошая статья. Рекомендую почитать, если интересуетесь оптимизациями и графикой.
#webgl
https://phoboslab.org/log/2021/09/q1k3-making-of
Каждый год проходит ивент js13kGames. Его участники разрабатывают браузерные игры размером не более 13kb. В этом году Доменик Саблевски сделал клон Quake и рассказал о нюансах его разработки — "Q1K3 – Making Of".
В Q1K3 используется динамическая генерация текстур, чтобы уменьшить общий размер игры. Для упрощения создания таких текстур Доменик разработал визуальный редактор. В качестве формата карт используется сильно модифицированный формат карт Quake
.map. В игре используется восемь моделей, которые модифицируются при запуске игры для создания большего разнообразия персонажей и предметов. Например, изменяются пропорции модели человека для создания разных моделей противников. Для музыки и эффектов используется Sonant-X — JS-библиотека синтеза звука. Для сжатия кода игры используется uglifyJS и Roadroller.Хорошая статья. Рекомендую почитать, если интересуетесь оптимизациями и графикой.
#webgl
https://phoboslab.org/log/2021/09/q1k3-making-of
Улучшение веба с помощью OffscreenCanvas
Брайан Карделл из Igalia рассказал о преимуществах OffscreenCanvas — "Making the whole web better, one canvas at a time".
HTML-элемент
Canvas бывает большим источником проблем производительности, так как выполнение кода отрисовки и процесс рендеринга в
На данный момент полноценная поддержка
#performance #api #webgl
https://bkardell.com/blog/OffscreenCanvas.html
Брайан Карделл из Igalia рассказал о преимуществах OffscreenCanvas — "Making the whole web better, one canvas at a time".
HTML-элемент
canvas по статистике HTTPArchive используется чаще чем тег video. Он используется для разных целей: для отрисовки карт, для создания графических редакторов и отображения любой сложной графики.Canvas бывает большим источником проблем производительности, так как выполнение кода отрисовки и процесс рендеринга в
canvas происходят в главном потоке. Для решения этой проблемы был придуман новый API — OffscreenCanvas. С его помощью тяжёлые вычисления можно вынести в воркер. Передача готовой картинки из воркера в главный поток очень быстрый процесс и не влияет на отзывчивость страницы. Также благодаря OffscreenCanvas можно распараллелить рендеринг по нескольким воркерам, открывая новые возможности для веба.На данный момент полноценная поддержка
OffscreenCanvas есть только в Chrome. В Firefox его можно включить с помощью флага gfx.offscreencanvas.enabled. В WebKit он находится на этапе разработки.#performance #api #webgl
https://bkardell.com/blog/OffscreenCanvas.html
Bkardell
Making the whole web better, one canvas at a time.
One can have an entire career on the web and never write a single canvas.getContext('2d'), so "Why should I care about this new OffscreenCanvas thing?" is a decent question for man
Сравнение вычислительной производительности WebGL и WebGPU
Денис Радин сравнил вычислительную производительность WebGL и WebGPU — "WebGPU computations performance in comparison to WebGL".
WebGPU API предоставляет доступ к возможностям современных видеокарт. Для поддержки вычислений в нём используются вычислительные шейдеры (compute shaders). В WebGL что-то подобное можно сделать с помощью хака преобразованием данных в текстуру и их дальнейшей обработкой с помощью пиксельного шейдера. Так как WebGPU разрабатывался с учётом поддержки произвольных вычислений, в задаче на перемножение матриц он работает в 3,5 раза быстрее WebGL.
WebGPU открывает доступ к машинному обучению в вебе, пост-процессингу в реальном времени и физическим симуляциям в 60 fps.
#webgl #webgpu #performance
https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/
http://pixelscommander.com/ru/javascript/webgpu-computations-performance-in-comparison-to-webgl/ (на русском языке)
Денис Радин сравнил вычислительную производительность WebGL и WebGPU — "WebGPU computations performance in comparison to WebGL".
WebGPU API предоставляет доступ к возможностям современных видеокарт. Для поддержки вычислений в нём используются вычислительные шейдеры (compute shaders). В WebGL что-то подобное можно сделать с помощью хака преобразованием данных в текстуру и их дальнейшей обработкой с помощью пиксельного шейдера. Так как WebGPU разрабатывался с учётом поддержки произвольных вычислений, в задаче на перемножение матриц он работает в 3,5 раза быстрее WebGL.
WebGPU открывает доступ к машинному обучению в вебе, пост-процессингу в реальном времени и физическим симуляциям в 60 fps.
#webgl #webgpu #performance
https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/
http://pixelscommander.com/ru/javascript/webgpu-computations-performance-in-comparison-to-webgl/ (на русском языке)