Хотели посмотреть на мир глазами существа живущего в компактной замкнутой вселенной со сферической геометрией? Посмотреть на мир без ночи? Мир, где на небе виден другой полюс планеты? Мир, где нет разницы между солнечным и лунным затмением? Добро пожаловать под кат!
Рубрика «WebGL» - 4
Мир трехмерной гиперсферы. Геодезическая трассировка лучей в замкнутой вселенной со сферической геометрией
2019-07-29 в 3:38, admin, рубрики: javascript, WebGL, астрономия, геометрия Вселенной, гиперсфера, замкнутая вселенная, математика, Научно-популярное, сферическая геометрия, трассировка лучей
Калейдоскоп как в детстве
2019-07-25 в 16:55, admin, рубрики: OpenGL, shaders, WebGL, графический дизайн, Калейдоскоп, Работа с 3D-графикой
Иногда отражение в зеркале более реально, чем сам объект…
— Льюис Кэрролл (Алиса в зазеркалье)
В юном возрасте у меня была забавная игрушка – калейдоскоп. Часами я рассматривал правильные узоры, составленные из разноцветных осколков битого стекла. Что-то завораживающее было в этом медитативном созерцании. Ныне, будучи отцом, мне захотелось показать своим чадам красоту правильных построений хаоса.
Дети сейчас модерновые, им обычные игрушки малоинтересны, им компьютер подавай или планшет. Поэтому мне захотелось воссоздать цифровой прототип варианта калейдоскопа, а заодно по практиковать свои навыки работы с компьютерной графикой.
Приглашаю и Вас окунуться со мной в мир отражений.
Читать полностью »
Оптимизируем ассеты для WebGL правильно
2019-06-18 в 8:36, admin, рубрики: 3d-моделирование, e-commerce, glTF, html, html5, three.js, verge3d, web-разработка, WebGL, веб-дизайн, оптимизация, Разработка веб-сайтов, Разработка под e-commerceТак часто бывает, что техники оптимизации, хорошо работающие для обычной десктопной или мобильной графики, не всегда дают нужный эффект в случае WebGL. В этой статье я собрал (а точнее перевёл на русский язык и изложил в текстовом виде нашу презентацию с Verge3Day) те методы повышения производительности, которые хорошо себя зарекомендовали при создании интерактивных веб-приложений.
3D игра на three.js, nw.js
2019-05-07 в 20:13, admin, рубрики: canvas, javascript, nw.js, three.js, WebGL, игры, разработка игрЯ решил выпустить новую версию своей старой браузерной игры, которая на протяжении пары лет пользовалась успехом в качестве приложения в социальных сетях. На этот раз я задался целью оформить ее также и в виде приложения под Windows (7-8-10) и разместить в различных магазинах. Конечно, в дальнейшем можно сделать сборки и под MacOS и Linux.
Код игры написан полностью на чистом javascript. Для отображения 3D графики в качестве связующего звена между скриптом и WebGL используется библиотека three.js. Однако, так было и в старой, браузерной версии. Самым главным в этом проекте для меня стал повод параллельно с игрой дописать собственную библиотеку, призванную дополнить three.js средствами удобной работы с объектами сцены, их анимацией и многими другими возможностями. Я тогда забросил ее на длительное время. Пришла пора к ней вернуться.
Читать полностью »
Интро Newton Protocol: что можно уместить в 4 килобайта
2019-05-06 в 4:54, admin, рубрики: demo, demoscene, javascript, ray tracing, revision, WebGL, Демосцена, ненормальное программирование, Работа с 3D-графикой, разработка игр, соревнования по программированию
Недавно я участвовал соревнованиях демосцены Revision 2019 в категории «PC 4k intro», и моё интро выиграло первое место. Я занимался кодингом и графикой, а dixan сочинял музыку. Основное правило соревнования — необходимо создать исполняемый файл или веб-сайт, имеющий размер всего 4096 байта. Это означает, что всё приходится генерировать с помощью математики и алгоритмов; никаким другим способом не получится ужать изображения, видео и аудио в такой крошечный объём памяти. В этой статье я расскажу о конвейере рендеринга своего интро Newton Protocol. Ниже можно посмотреть готовый результат, или нажать сюда, чтобы посмотреть как оно выглядело вживую на Revision, или зайти на pouet, чтобы прокомментировать и скачать участвовавшее в конкурсе интро. О работах конкурентов и об исправлениях можно прочитать здесь.
Ускоряем WebGL-Three.js с помощью OffscreenCanvas и веб-воркеров
2019-04-04 в 5:27, admin, рубрики: canvas, javascript, JS, offscreencanvas, three.js, web workers, WebGL, Работа с 3D-графикой, Разработка веб-сайтов, разработка игр
В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.
Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.Читать полностью »
Wolfenstein 3D: трассировка лучей с помощью WebGL1
2019-03-21 в 8:01, admin, рубрики: forward rendering, Nvidia RTX, ray tracing, WebGL, Wolfenstein 3D, Работа с 3D-графикой, разработка игр, трассировка лучей
После появления прошлым летом графических карт Nvidia RTX трассировка лучей (ray tracing) снова обрела былую популярность. За последние несколько месяцев мою ленту в Twitter заполнил бесконечный поток сравнений графики со включенным и отключенным RTX.
Полюбовавшись на такое количество красивых изображений, я захотел самостоятельно попробовать скомбинировать классический упреждающий рендерер (forward renderer) с трассировщиком лучей.
Страдая синдромом неприятия чужих разработок, я в результате создал собственный гибридный движок рендеринга на основе WebGL1. Поиграть с демо рендеринга уровня из Wolfenstein 3D со сферами (которые я использовал из-за трассировки лучей) можно здесь.
Читать полностью »
Запуск 619 тысяч тетрисов на GLSL, их рендеринг и простой бот
2019-03-09 в 9:26, admin, рубрики: game, glsl, tetris, WebGL, разработка игрУ меня была "идея" сделать максимальное число одновременно запущенных "Тетрисов" для одного шейдера (одной текстуры фреймбуфера).
Далее небольшое описание как работает полученный код.
Быстрая генерализация маркеров на WebGL-карте
2019-03-06 в 5:19, admin, рубрики: javascript, r-дерево, WebGL, Блог компании 2ГИС, буфер коллизий, генерализация, Геоинформационные сервисы, маркеры, подписи, Программирование, этажи
Маркеры — дело полезное. Полезное в разумных количествах. Когда их становится слишком много, польза улетучивается. Как поступить, если требуется отметить на карте поисковую выдачу, в которой десятки тысяч объектов? В статье я расскажу, как мы решаем эту задачу на WebGL-карте без ущерба для её внешнего вида и производительности.
Cruise открывает исходный код Worldview
2019-02-23 в 10:41, admin, рубрики: cruise automation, React, ReactJS, self-driving car, WebGL, беспилотные автомобили, визуализация данных, транспорт будущегоВ Cruise Automation сотни инженеров и тестировщиков работают с данными, собранными на дорогах и через симулятор. Также специальная внутренняя команда AV Tools создает приложения для визуализации, поиска и анализа этих данных. Ведь пользователи и разработчики должны понимать что “видит” автомобиль и что он собирается сделать , включая облако точек с лидара, сотни классифицированных и отслеживаемых объектов, детализированные карты и другие данные для визуализации.
Как и множество других коллективов внутри Cruise команда AV Tools создает инструменты для визуализации в браузере, и здесь React является стандартом внутри компании. Для уменьшения сложности приложений компании и облегчения процесса создания сложных систем визуализации команда создала react-библиотеку упрощающую рендер 2D и 3D сцен, получившую название Worldview (ранее Uber выпустил похожий инструмент под названием AVS).
