Все потоки
Поиск
Написать публикацию
Обновить
3.33

WebGL *

Программная библиотека для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Wolfenstein 3D: трассировка лучей с помощью WebGL1

Время на прочтение8 мин
Количество просмотров17K
image

После появления прошлым летом графических карт Nvidia RTX трассировка лучей (ray tracing) снова обрела былую популярность. За последние несколько месяцев мою ленту в Twitter заполнил бесконечный поток сравнений графики со включенным и отключенным RTX.

Полюбовавшись на такое количество красивых изображений, я захотел самостоятельно попробовать скомбинировать классический упреждающий рендерер (forward renderer) с трассировщиком лучей.

Страдая синдромом неприятия чужих разработок, я в результате создал собственный гибридный движок рендеринга на основе WebGL1. Поиграть с демо рендеринга уровня из Wolfenstein 3D со сферами (которые я использовал из-за трассировки лучей) можно здесь.
Читать дальше →

Как я создавал Recycle! VR

Время на прочтение8 мин
Количество просмотров3.4K


В предыдущей статье мы попробовали создать базовую сцену в A-Frame, чтобы опробовать основные концепции фреймворка на практике. В этой статье я хотел бы поделится своим опытом создания игры на A-Frame — Recycle! VR. Репозиторий проекта доступен по следующей ссылке.

Переработка!?


Идея создания игры пришла почти сразу как только я узнал о Web VR. Хотя в целом, я считаю, что игры в веб в любом случае будут уступать хорошим проектам даже для мобильных устройств, не говоря уже о персональных компьютерах и консолях. Но, как мне кажется, игра самое сложное испытание. Я начал думать о том, что конкретно я могу сделать. Я наблюдал за другими проектами и мне сразу бросилась в глаза возможность брать что-то с помощью контроллера. А так как я уже довольно длительное время связан с организацией которая занимается раздельным сбором мусора, ответ пришел сам собой. Переработка. Мы берем мусор и бросаем его в корзину. Что может быть проще. Но все оказалось не так просто, об этом, собственно, и пойдет речь далее.
Читать дальше →

Быстрая генерализация маркеров на WebGL-карте

Время на прочтение8 мин
Количество просмотров7.9K

image


Маркеры — дело полезное. Полезное в разумных количествах. Когда их становится слишком много, польза улетучивается. Как поступить, если требуется отметить на карте поисковую выдачу, в которой десятки тысяч объектов? В статье я расскажу, как мы решаем эту задачу на WebGL-карте без ущерба для её внешнего вида и производительности.

Генерализируем

Cruise открывает исходный код Worldview

Время на прочтение2 мин
Количество просмотров2.2K
В Cruise Automation сотни инженеров и тестировщиков работают с данными, собранными на дорогах и через симулятор. Также специальная внутренняя команда AV Tools создает приложения для визуализации, поиска и анализа этих данных. Ведь пользователи и разработчики должны понимать что “видит” автомобиль и что он собирается сделать , включая облако точек с лидара, сотни классифицированных и отслеживаемых объектов, детализированные карты и другие данные для визуализации.

Как и множество других коллективов внутри Cruise команда AV Tools создает инструменты для визуализации в браузере, и здесь React является стандартом внутри компании. Для уменьшения сложности приложений компании и облегчения процесса создания сложных систем визуализации команда создала react-библиотеку упрощающую рендер 2D и 3D сцен, получившую название Worldview (ранее Uber выпустил похожий инструмент под названием AVS).

image
Читать дальше →

Создаем базовую сцену в A-Frame

Время на прочтение13 мин
Количество просмотров11K


От автора перевода: в предыдущей статье мы обсудили базовые концепции A-Frame. Чтобы продолжить цикл, я хотел создать урок, который бы иллюстрировал основные возможности A-Frame, но понял, что лучше сделать перевод статьи с официального сайта, которая, по-моему мнению написана велеколепно, и повторять подобную статью просто нет всякого смысла.

Давайте сделаем базовую сцену в A-Frame, чтобы понять как фреймворк работает. Нам потребуется начальное понимание HTML. В ходе этого урока мы выучим:

  • как добавлять 3D объекты с помощью примитивов;
  • как трансформировать объекты в 3-х мерном пространстве с помощью, перемещений, поворотов и масштабирования;
  • как добавить окружение;
  • как добавить текстуры;
  • как добавить базовую интерактивность с помощью событий и анимации;
  • как добавить текст.

Поиграть с кодом можно тут
Читать дальше →

Обзорная статья по A-Frame

Время на прочтение7 мин
Количество просмотров12K


A-Frame — это веб-фреймворк позволяющий создавать различные приложения, игры, сцены в виртуальной реальности (ВР). Все вышеописанное будет доступно прямо из браузера вашего шлема ВР. Этот инструмент будет полезен как тем кто хочет заниматься разработкой ВР игр в браузере, так и например, может пригодится в качестве платформы для создания веб ВР приложений, сайтов, посадочных страниц. Сферы использования веб ВР ограничены лишь вашим воображением. Навскидку могу привести пару сфер деятельности человека где ВР может быть полезен: образование, медицина, спорт, продажи, отдых.
Читать дальше →

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

Время на прочтение8 мин
Количество просмотров5.2K

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

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

Продвинутый Three.js: шейдерные материалы и постобработка

Время на прочтение10 мин
Количество просмотров25K


В сети довольно много введений в основы работы с Three.js, но можно заметить нехватку материалов по более продвинутым темам. И одна из этих тем – это объединение шейдеров и сцены с трехмерными моделями. В глазах многих начинающих разработчиков это как будто несовместимые вещи из разных миров. Сегодня на простом примере “плазменной сферы” мы посмотрим, что такое ShaderMaterial и с чем его едят, а также что такое EffectComposer и как можно быстро сделать постобработку для отрендеренной сцены.

Three.js — делаем controls для космосима или планетария

Время на прочтение17 мин
Количество просмотров11K
Разрабатывая свой проект на тему космоса, столкнулся с тем что в three.js почему-то нет готового и удобного инструмента управления камерой, подходящего под такие задачи. Конечно я допускаю что просто плохо искал… Но, довольно продолжительный поиск результатов не дал.

OrbitControls — традиционный любимец примеров three.js, не умеет переворачивать камеру вверх ногами, и много разного другого нужного, тоже не умеет.

TrackballControls — замечателен тем, что камера вращается вокруг объекта как угодно, и вверх ногами тоже, но не умеет при этом поворачиваться на оси зрения, не умеет двигаться вперед-назад не меняя масштаб, нет удобной регулировки скорости движений и поворотов.

FlyControls — напротив, позволяет делать «бочку» и менять скорость, но… куда же делось вращение камеры вокруг рассматриваемого объекта.

Можно было, конечно, выкрутиться с помощью всяческих костылей, но как-то это не комильфо. Убедившись, что готового решения для моих целей нет, я решил создать его сам. Кто заинтересовался, прошу под кат.
Читать дальше →

Очередное незавоевание теней в Phaser, или польза велосипедов

Время на прочтение9 мин
Количество просмотров4.1K
Два года назад я уже экспериментировал с веществами тенями в Phaser 2D. На последнем Ludum Dare мы внезапно решили сделать хоррор, а какой же хоррор без теней и света! Хрустнул я костяшками пальцев…

… и ни черта не успел за LD. В игре конечно есть немного света и теней, но это жалкое подобие того, что должно было быть на самом деле.

Вернувшись домой уже после отправки игры на конкурс, я решил все-таки “закрыть гештальт” и доделать эти несчастные тени. Что получилось — можно пощупать в игре, поиграться в демке, посмотреть на картинке, и почитать в статье.

Читать дальше →

Трехмерные презентации товаров на Three.js для самых маленьких

Время на прочтение10 мин
Количество просмотров28K


Всевозможные презентации товаров в 3D – не такая уж и редкость в наше время, но эти задачи вызывают массу вопросов у начинающих разработчиков. Сегодня мы посмотрим некоторые основы, которые помогут войти в эту тему и не спотыкаться о такую простую задачу, как отображение трехмерной модельки в браузере. В качестве подспорья будем использовать Three.js как самый популярный инструмент в этой области.

Читать дальше →

WebGL-ветер и программирование GPU. Лекция на FrontTalks 2018

Время на прочтение11 мин
Количество просмотров9.9K
Для отрисовки сложной графики на веб-страницах существует библиотека Web Graphics Library, сокращенно WebGL. Разработчик интерфейсов Дмитрий Васильев рассказал о программировании GPU с точки зрения верстальщика, о том, что из себя представляет WebGL и как мы с помощью этой технологии решили проблему визуализации больших погодных данных.


— Я занимаюсь разработкой интерфейсов в екатеринбургском офисе Яндекса. Начинал я в группе Спорт. Мы занимались разработкой спортивных спецпроектов, когда были Чемпионаты мира по хоккею, футболу, Олимпиады, Паралимпиады и прочие классные события. Также я занимался разработкой специальной поисковой выдачи, которая была посвящена новой сочинской трассе.

Как я попробовал сделать статический анализатор GLSL (и что пошло не так)

Время на прочтение10 мин
Количество просмотров6.4K

Однажды я готовился к Ludum Dare и сделал простую игру, где использовал пиксельные шейдеры (других в движок Phaser не завезли).


Что такое шейдеры?

Шейдеры — это программы на си-подобном языке GLSL, которые выполняются на видеокарте. Есть два вида шейдеров, в этой статье речь идет про пиксельные (они же “фрагментные”, fragment shaders), которые очень грубо можно представить в таком виде:


color = pixelShader(x, y, ...other attributes)

Т.е. шейдер выполняется для каждого пикселя выводимого изображения, определяя или уточняя его цвет.
Вводную можно почитать на другой статье на хабре — https://habr.com/post/333002/


Потестировав, кинул ссылку другу, и получил от него вот такой скриншот с вопросом "а это нормально?"



Нет, это было ненормально. Посмотрев внимательно код шейдера, я обнаружил ошибку в вычислениях:


if (t < M) {
    realColor = mix(color1,color2, pow(1. - t / R1, 0.5));
}

Т.к. константа R1 была меньше чем M, то в некоторых случаях в первом аргументе pow получалось число меньше нуля. Квадратный корень из отрицательного числа — штука загадочная, по крайней мере для стандарта GLSL. Мою видеокарту ничего не смутило, и она как-то выпуталась из этого положения (похоже, вернув из pow 0), а вот у друга она оказалась более разборчивой.


И тут я задумался: а могу ли я избежать таких проблем в будущем? От ошибок никто не застрахован, особенно таких, которые не воспроизводятся локально. Юнит-тесты на GLSL не напишешь. В то же время преобразования внутри шейдера довольно простые — умножения, деления, синусы, косинусы… Неужели нельзя отследить значения каждой переменной и убедиться, что ни при каких условиях не происходит выхода за допустимые границы значений?


Так я решил попробовать сделать статический анализ для GLSL. Что из этого получилось — можно прочитать под катом.


Сразу предупрежу: какого-то законченного продукта получить не удалось, только учебный прототип.

Читать дальше →

Ближайшие события

3D анимация — видео или интерактив?

Время на прочтение3 мин
Количество просмотров5.4K
Мы не можем представить нашу жизнь без трёхмерной анимации. С утра до глубокой ночи нам показывают всевозможные рекламные ролики, эксплейнеры, презентации продуктов и фильмы. Тысячи digital агентств и фрилансеров конкурируют друг с другом, стремясь создать наиболее привлекательный 3D-контент для своих клиентов, а те в свою очередь, пытаются продавать свои продукты миллионам потребителей.

Вот пример качественно сделанной трёхмерной анимации. Как все могли догадаться, это презентация нового iPhone XS.

image
Читать дальше →

Делаем 3D конфигуратор без программирования и вёрстки. Часть вторая

Время на прочтение3 мин
Количество просмотров5.2K
В нашей предыдущей статье «Делаем 3D конфигуратор без программирования и вёрстки» мы обсудили вопросы создания 3D-магазина ювелирных изделий с использованием пакетов моделирования Blender и 3ds Max.

Сегодня мы обновим этот проект и сделаем из него реально работающий магазин. Для этого нам понадобится снабдить его следующими функциями:
 
  • Вычисление цены на основе конфигурации пользователя.
  • Отправка заказов для дальнейшей обработки менеджером.
  • Кнопки социальных сетей (куда без них).

В конце концов, у нас будет что-то вроде этого:

image

Нажмите тут, чтобы запустить приложение.
Читать дальше →

Облачные сервисы для WebGL? Нет, спасибо

Время на прочтение3 мин
Количество просмотров5K
Несколько месяцев назад некоторые из наших клиентов начали сообщать о проблемах с подключением к нашему хостингу WebGL-приложений Verge3D Network. Как оказалось, причиной этого были заблокированные Роскомнадзором IP-адреса Amazon Web Services.

Неприятно, конечно, но терпимо. Verge3D — десктопный тулкит, а публикация на амазоновском хостинге это приятная, но не критичная для работы фича. Тем не менее, такие события заставляют задуматься о перспективах. Собственно, эта статья содержит некоторые соображения об облачных сервисах вообще и WebGL-сервисах в частности.

image
Читать дальше →

Применяем мозаику Вороного, пикселизацию и геометрические маски в шейдерах для украшения сайта

Время на прочтение14 мин
Количество просмотров13K
image

Данная статья является логическим продолжением введения в программирование шейдеров для верстальщиков. В ней мы сделали шаблон для создания различных двумерных эффектов с фотографиями с помощью шейдеров и посмотрели пару примеров. В данной статье мы добавим еще пару текстур, применим на практике разбиение Вороного для создания мозаики из них, поговорим о создании различных масок в шейдерах, о пикселизации, а также затронем некоторые проблемы древнего синтаксиса GLSL, который до сих пор существует в наших браузерах.


Так же, как и в прошлый раз, будет минимум теории и максимум практики и рассуждений на приземленном бытовом языке. Начинающие найдут здесь последовательность действий с советами и полезными замечаниями, а опытные фронтендеры возможно найдут себе пару идей для вдохновения.

Введение в программирование шейдеров для верстальщиков

Время на прочтение18 мин
Количество просмотров34K


WebGL существует уже давно, про шейдеры написано немало статей, есть серии уроков. Но в основной массе они слишком сложные для верстальщика. Даже лучше сказать, что они охватывают большие объемы информации, которые скорее нужны разработчику игрового движка, чем верстальщику. Там сразу начинают с построения сложной сцены, камера, свет… На обычном сайте для создания пары эффектов с фотографиями все эти знания избыточны. В результате люди делают очень сложные архитектурные конструкции и пишут длинные-длинные шейдеры ради очень простых по сути действий.


Все это побудило создать введение в те аспекты работы с шейдерами, которые наиболее вероятно пригодятся в работе именно верстальщику для создания различных 2d-эффектов с картинками на сайте. Конечно с поправкой на то, что сами по себе в дизайне интерфейсов они у нас применяются относительно редко. Мы сделаем стартовый шаблон на чистом JS без сторонних библиотек и рассмотрим идеи создания некоторых популярных эффектов, основанных на сдвиге пикселей, которые сложно сделать на SVG, но при этом они легко реализуются с помощью шейдеров.

Делаем 3D конфигуратор без программирования и вёрстки

Время на прочтение4 мин
Количество просмотров21K
3D-конфигураторы продуктов — это относительно новая тенденция в онлайн-маркетинге и электронной коммерции. Создание таких веб-приложений стало возможным вследствие быстрого развития браузерной технологии WebGL, позволяющей рисовать 3D-графику прямо на веб-страницах пользователей.

На мой взгляд, единственная проблема, которая мешает развитию этой тенденции — отсутствие эффективных инструментов. Большинство из них являются трёхмерными движками, которые могут быть очень полезны программисту, но не обычному художнику. Но есть и исключения: аддон Verge3D к пакетам 3ds Max и Blender предлагает средства, с помощью которых трёхмерные конфигураторы может сделать и обычный человек. Именно этот инструмент мы и разберём в нашей статье.

В качестве примера мы создадим ювелирный конфигуратор. Сейчас такие конфигураторы делают все кому не лень, так что пример более чем актуальный.



Кликните тут чтобы запустить конфигуратор в новом окне.

Читать дальше →

Использование функций JavaScript для построения 3D-моделей

Время на прочтение10 мин
Количество просмотров7.9K
В данной статье рассмотрено применение геометрической библиотеки функций WebGeometry для построения моделей сложных многогранников. Библиотека написана на языке Javascript. Ссылка на GitHub с примером, в котором приведен простейший пример использования библиотеки. Замечания и критика приветствуются.



Для отображения моделей, предварительно рассчитанных с помощью функций из библиотеки WebGeometry, применяется библиотека ThreeJS. Холст (canvas) HTML5 используется для показа отдельных плоских элементов моделей и вывода на экран вспомогательной информации.
Читать дальше →

Вклад авторов