Недавно я участвовал соревнованиях демосцены Revision 2019 в категории «PC 4k intro», и моё интро выиграло первое место. Я занимался кодингом и графикой, а dixan сочинял музыку. Основное правило соревнования — необходимо создать исполняемый файл или веб-сайт, имеющий размер всего 4096 байта. Это означает, что всё приходится генерировать с помощью математики и алгоритмов; никаким другим способом не получится ужать изображения, видео и аудио в такой крошечный объём памяти. В этой статье я расскажу о конвейере рендеринга своего интро Newton Protocol. Ниже можно посмотреть готовый результат, или нажать сюда, чтобы посмотреть как оно выглядело вживую на Revision, или зайти на pouet, чтобы прокомментировать и скачать участвовавшее в конкурсе интро. О работах конкурентов и об исправлениях можно прочитать здесь.
Рубрика «WebGL» - 4
Интро Newton Protocol: что можно уместить в 4 килобайта
2019-05-06 в 4:54, admin, рубрики: demo, demoscene, javascript, ray tracing, revision, WebGL, Демосцена, ненормальное программирование, Работа с 3D-графикой, разработка игр, соревнования по программированиюУскоряем 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).
Продвинутый Three.js: шейдерные материалы и постобработка
2019-01-17 в 14:27, admin, рубрики: glsl, javascript, three.js, WebGL, Разработка веб-сайтов, шейдеры
В сети довольно много введений в основы работы с Three.js, но можно заметить нехватку материалов по более продвинутым темам. И одна из этих тем – это объединение шейдеров и сцены с трехмерными моделями. В глазах многих начинающих разработчиков это как будто несовместимые вещи из разных миров. Сегодня на простом примере “плазменной сферы” мы посмотрим, что такое ShaderMaterial и с чем его едят, а также что такое EffectComposer и как можно быстро сделать постобработку для отрендеренной сцены.
Очередное незавоевание теней в Phaser, или польза велосипедов
2018-12-27 в 20:36, admin, рубрики: javascript, lighting, phaser.js, shaders, shadows, WebGL, ненормальное программирование, разработка игрДва года назад я уже экспериментировал с веществами тенями в Phaser 2D. На последнем Ludum Dare мы внезапно решили сделать хоррор, а какой же хоррор без теней и света! Хрустнул я костяшками пальцев…
… и ни черта не успел за LD. В игре конечно есть немного света и теней, но это жалкое подобие того, что должно было быть на самом деле.
Вернувшись домой уже после отправки игры на конкурс, я решил все-таки “закрыть гештальт” и доделать эти несчастные тени. Что получилось — можно пощупать в игре, поиграться в демке, посмотреть на картинке, и почитать в статье.
Трехмерные презентации товаров на THREE.js для самых маленьких
2018-12-21 в 11:39, admin, рубрики: javascript, three.js, WebGL, Разработка веб-сайтов
Всевозможные презентации товаров в 3D – не такая уж и редкость в наше время, но эти задачи вызывают массу вопросов у начинающих разработчиков. Сегодня мы посмотрим некоторые основы, которые помогут войти в эту тему и не спотыкаться о такую простую задачу, как отображение трехмерной модельки в браузере. В качестве подспорья будем использовать THREE.js как самый популярный инструмент в этой области.
WebGL-ветер и программирование GPU. Лекция на FrontTalks 2018
2018-12-16 в 8:00, admin, рубрики: api яндекс, javascript, WebGL, Блог компании Яндекс, ветер, визуализация данных, Геоинформационные сервисыДля отрисовки сложной графики на веб-страницах существует библиотека Web Graphics Library, сокращенно WebGL. Разработчик интерфейсов Дмитрий Васильев рассказал о программировании GPU с точки зрения верстальщика, о том, что из себя представляет WebGL и как мы с помощью этой технологии решили проблему визуализации больших погодных данных.
— Я занимаюсь разработкой интерфейсов в екатеринбургском офисе Яндекса. Начинал я в группе Спорт. Мы занимались разработкой спортивных спецпроектов, когда были Чемпионаты мира по хоккею, футболу, Олимпиады, Паралимпиады и прочие классные события. Также я занимался разработкой специальной поисковой выдачи, которая была посвящена новой сочинской трассе.