Как стать автором
Обновить
0
Рейтинг

WebGL *

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

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Калейдоскоп как в детстве

Работа с 3D-графикой *WebGL *Графический дизайн *

Иногда отражение в зеркале более реально, чем сам объект…
— Льюис Кэрролл (Алиса в зазеркалье)

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

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

Приглашаю и Вас окунуться со мной в мир отражений.
Читать дальше →
Всего голосов 17: ↑17 и ↓0 +17
Просмотры 5.3K
Комментарии 16

Новости

Оптимизируем ассеты для WebGL правильно

Веб-дизайн *Разработка веб-сайтов *HTML *WebGL *Разработка под e-commerce *
Tutorial
Так часто бывает, что техники оптимизации, хорошо работающие для обычной десктопной или мобильной графики, не всегда дают нужный эффект в случае WebGL. В этой статье я собрал (а точнее перевёл на русский язык и изложил в текстовом виде нашу презентацию с Verge3Day) те методы повышения производительности, которые хорошо себя зарекомендовали при создании интерактивных веб-приложений.


Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Просмотры 5K
Комментарии 5

3D игра на three.js, nw.js

Разработка игр *Canvas *WebGL *
Я решил выпустить новую версию своей старой браузерной игры, которая на протяжении пары лет пользовалась успехом в качестве приложения в социальных сетях. На этот раз я задался целью оформить ее также и в виде приложения под Windows (7-8-10) и разместить в различных магазинах. Конечно, в дальнейшем можно сделать сборки и под MacOS и Linux.


Код игры написан полностью на чистом javascript. Для отображения 3D графики в качестве связующего звена между скриптом и WebGL используется библиотека three.js. Однако, так было и в старой, браузерной версии. Самым главным в этом проекте для меня стал повод параллельно с игрой дописать собственную библиотеку, призванную дополнить three.js средствами удобной работы с объектами сцены, их анимацией и многими другими возможностями. Я тогда забросил ее на длительное время. Пришла пора к ней вернуться.
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 11K
Комментарии 20

Интро Newton Protocol: что можно уместить в 4 килобайта

Ненормальное программирование *JavaScript *Работа с 3D-графикой *Разработка игр *WebGL *
Перевод
image

Недавно я участвовал соревнованиях демосцены Revision 2019 в категории «PC 4k intro», и моё интро выиграло первое место. Я занимался кодингом и графикой, а dixan сочинял музыку. Основное правило соревнования — необходимо создать исполняемый файл или веб-сайт, имеющий размер всего 4096 байта. Это означает, что всё приходится генерировать с помощью математики и алгоритмов; никаким другим способом не получится ужать изображения, видео и аудио в такой крошечный объём памяти. В этой статье я расскажу о конвейере рендеринга своего интро Newton Protocol. Ниже можно посмотреть готовый результат, или нажать сюда, чтобы посмотреть как оно выглядело вживую на Revision, или зайти на pouet, чтобы прокомментировать и скачать участвовавшее в конкурсе интро. О работах конкурентов и об исправлениях можно прочитать здесь.

Всего голосов 89: ↑89 и ↓0 +89
Просмотры 20K
Комментарии 29

Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

Разработка веб-сайтов *JavaScript *Работа с 3D-графикой *Разработка игр *WebGL *
Перевод
Tutorial
Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.

Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.
Читать дальше →
Всего голосов 29: ↑28 и ↓1 +27
Просмотры 11K
Комментарии 11

Обзор возможностей PlayCanvas для создания Web VR приложений

JavaScript *HTML *WebGL *Разработка под AR и VR *AR и VR


PlayCanvas — это визуальная платформа разработки интерактивных веб приложений. Всё что разрабатывается с помощью PlayCanvas основано на возможностях HTML5. PlayCanvas — это веб-приложение, а значит вам не нужно устанавливать специальные программы и вы можете получить доступ к вашему проекту с любого устройства в любой точке земного шара через интернет. Все проекты, которые вы создаёте, могут быть размещены в сети буквально в одно нажатие.
Читать дальше →
Всего голосов 5: ↑4 и ↓1 +3
Просмотры 3.2K
Комментарии 0

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

Работа с 3D-графикой *Разработка игр *WebGL *
Перевод
image

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

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

Страдая синдромом неприятия чужих разработок, я в результате создал собственный гибридный движок рендеринга на основе WebGL1. Поиграть с демо рендеринга уровня из Wolfenstein 3D со сферами (которые я использовал из-за трассировки лучей) можно здесь.
Читать дальше →
Всего голосов 50: ↑50 и ↓0 +50
Просмотры 15K
Комментарии 11

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

JavaScript *HTML *WebGL *Разработка под AR и VR *AR и VR


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

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


Идея создания игры пришла почти сразу как только я узнал о Web VR. Хотя в целом, я считаю, что игры в веб в любом случае будут уступать хорошим проектам даже для мобильных устройств, не говоря уже о персональных компьютерах и консолях. Но, как мне кажется, игра самое сложное испытание. Я начал думать о том, что конкретно я могу сделать. Я наблюдал за другими проектами и мне сразу бросилась в глаза возможность брать что-то с помощью контроллера. А так как я уже довольно длительное время связан с организацией которая занимается раздельным сбором мусора, ответ пришел сам собой. Переработка. Мы берем мусор и бросаем его в корзину. Что может быть проще. Но все оказалось не так просто, об этом, собственно, и пойдет речь далее.
Читать дальше →
Всего голосов 14: ↑12 и ↓2 +10
Просмотры 2.8K
Комментарии 0

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

Блог компании 2ГИС JavaScript *Программирование *Геоинформационные сервисы *WebGL *

image


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

Генерализируем
Всего голосов 36: ↑36 и ↓0 +36
Просмотры 6.8K
Комментарии 17

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

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

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

image
Читать дальше →
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 1.9K
Комментарии 0

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

JavaScript *HTML *WebGL *Разработка под AR и VR *AR и VR
Перевод
Tutorial


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

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

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

Поиграть с кодом можно тут
Читать дальше →
Всего голосов 22: ↑21 и ↓1 +20
Просмотры 6.2K
Комментарии 0

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

JavaScript *HTML *WebGL *Разработка под AR и VR *AR и VR
Из песочницы


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

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

Работа с 3D-графикой *Обработка изображений *Визуализация данных WebGL *
Перевод

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

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

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

Разработка веб-сайтов *JavaScript *WebGL *
Tutorial


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

Всего голосов 19: ↑18 и ↓1 +17
Просмотры 16K
Комментарии 2

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

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

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

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

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

Можно было, конечно, выкрутиться с помощью всяческих костылей, но как-то это не комильфо. Убедившись, что готового решения для моих целей нет, я решил создать его сам. Кто заинтересовался, прошу под кат.
Читать дальше →
Всего голосов 15: ↑14 и ↓1 +13
Просмотры 7.7K
Комментарии 5

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

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

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

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

Читать дальше →
Всего голосов 12: ↑12 и ↓0 +12
Просмотры 3.4K
Комментарии 7

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

Разработка веб-сайтов *JavaScript *WebGL *
Tutorial


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

Читать дальше →
Всего голосов 17: ↑17 и ↓0 +17
Просмотры 21K
Комментарии 7

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

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


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

Всего голосов 32: ↑31 и ↓1 +30
Просмотры 8.7K
Комментарии 5

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

Ненормальное программирование *Разработка игр *WebGL *WebAssembly *

Однажды я готовился к 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. Что из этого получилось — можно прочитать под катом.


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

Читать дальше →
Всего голосов 41: ↑41 и ↓0 +41
Просмотры 5.8K
Комментарии 20

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

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

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

image
Читать дальше →
Всего голосов 9: ↑7 и ↓2 +5
Просмотры 4.3K
Комментарии 0

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