Рисунок 1. Пример объёмных рендеров, выполненных описанным в посте рендерером WebGL. Слева: симуляция пространственного распределения вероятностей электронов в высокопотенциальной молекуле белка. Справа: томограмма дерева бонсай. Оба набора данных взяты из репозитория Open SciVis Datasets.

В научной визуализации объёмный рендеринг широко используется для визуализации трёхмерных скалярных полей. Эти скалярные поля часто являются однородными сетками значений, представляющими, например, плотность заряда вокруг молекулы, скан МРИ или КТ, поток огибающего самолёт воздуха, и т.д. Объёмный рендеринг — это концептуально простой метод превращения таких данных в изображения: сэмплируя данные вдоль пущенных из глаза лучей, и назначив каждому сэмплу цвет и прозрачность, мы можем создавать полезные и красивые изображения таких скалярных полей (см. Рисунок 1). В GPU-рендерере такие трёхмерные скалярные поля хранятся как 3D-текстуры; однако в WebGL1 3D-текстуры не поддерживаются, поэтому для их эмуляции в объёмном рендеринге требуются дополнительные хаки. Недавно в WebGL2 появилась поддержка 3D-текстур, позволяющая реализовать браузере элегантный и быстрый объёмный рендерер. В этом посте мы обсудим математические основы объёмного рендеринга и расскажем о том, как реализовать его на WebGL2, чтобы создать интерактивный объёмный рендерер, полностью работающий в браузере! Прежде чем начать, вы можете протестировать описанный в этом посте объёмный рендерер онлайн.

Объёмный рендеринг в WebGL