Рубрика «WebGL»

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

Как мы сделали игру для Highload++ с воксельной графикой и VR - 1

О спикере: Александр Хаёров (@allexx) руководит отделом разработки в компании Ingram Micro Cloud. Ребята в команде Александра считают себя не просто отличными инженерами, а называют себя великой командой voxel джедаями, мастерами оптимизации, гуру 3D и повелителями больших данных! [примечание: по аналогии с названиями должностей в LinkedIn и Medium]

Эта классная команда, готовясь к выступлению на Highload++ 2017, решила развлечь аудиторию и сделать что-то новое и интересное для стенда. Поэтому они запилили игру, о создании которой и пойдет дальше речь.

Хозяйке на заметку: со стороны организаторов, мы очень приветствуем усилия по подготовке к участию в конференции. Они многократно окупаются, привлекая участников, и, как выясняется, идут на пользу команде.

Итак, поехали!

Читать полностью »

Если 3D-графика не ваша основная специализация, все равно, возможно, вам придется или, как в случае автора этого доклада Александра Амосова (@s9k), захочется с ней работать. Порог входа не так высок, можно взять технологию WebGL доступную в браузере, популярный фрэймворк Three.js и небольшой компанией единомышленников сделать своими руками интересный проект. Именно на примере такого проекта, начатого в рамках хакатона Avito, и разберем основные этапы, обратим внимание на проблемные места, и, наконец, замотивируемся на создание чего-то такого же прикольного, как эта карта офиса.

Интерактивные 3D-карты своими руками - 1

Проект, кстати, интересен и сам по себе. В современных больших опенспейсах ориентироваться в пространстве, находить нужных людей или переговорки зачастую очень сложно. Конечно, можно сделать схему в Excel, но не всегда это супер хорошее решение. У Александра Амосова появилась идея сделать это более удобно, которой он поделился на Frontend Conf, а ниже расшифровка его доклада.

Читать полностью »

В последнее время известные и не очень известные компании всё чаще стали использовать 3D для предоставления информации о своей продукции или возможности конфигурирования товара «под себя». Статистика неумолимо доказывает — время браузерного 3D наступило, а разработчики предлагают множество готовых решений.

Каждый год всё больше участников интернет-бизнеса полагаются на продвижение своих товаров с помощью трехмерных приложений, которые открываются непосредственно в веб-браузере. С одной стороны, 3D гораздо привлекательнее демонстрирует «товар лицом», с другой стороны это требует достаточно серьезных технических мощностей со стороны пользовательских устройств. Однако, даже дешевые мобильные девайсы и офисные компьютеры уже позволяют просматривать 3D-графику на сайте, пусть и со средним визуальным качеством.

Итак, 3D — это уже привычная фишка современных веб-сайтов и, хотим мы того или нет, но она имеется и предлагается для повседневного использования.
3D-конфигураторы. Массовый психоз или необходимость? - 1
Читать полностью »

Каждый, кто сталкивался с трехмерной графикой, рано или поздно открывал документацию на методы отрисовки, которые предполагают несколько проходов рендерера. Такие методы позволяют дополнить картинку красивыми эффектами, вроде свечения ярких пятен (Glow), Ambient occlusion, эффекта глубины резкости.

И «взрослый» OpenGL, и мой любимый WebGL предлагают богатую функциональность для отрисовки результатов в промежуточные текстуры. Однако управление этой функциональностью — довольно сложный процесс, в котором очень легко получить ошибку на любом из этапов, начиная от создания текстур нужного разрешения до именования юниформ и передачи их в соответствующий шейдер.

Чтобы разобраться, как правильно готовить WebGL, мы обратились к специалистам компании Align Technology. Они решили создать специальный менеджер для управления всем этим зоопарком из разных текстур, которым было бы удобно пользоваться. Что из этого получилось — будет под катом. Важно, что неподготовленного читателя, который никогда до этого не сталкивался с необходимостью организации многопроходного рендеринга, статья может показаться непонятной. Задача довольно специфическая, но и безумно интересная.

Как оживить картинку в браузере. Многопроходный рендеринг в WebGL - 1

Читать полностью »

Привет!

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

Как мы переписали архитектуру Яндекс.Погоды и сделали глобальный прогноз на картах - 1

Сперва пару слов про продукт. Погодные карты — способ узнавать погоду, очень популярный на западе и пока что не очень популярный в России. Причиной тому является, собственно, сама погода. Из-за особенностей климата наиболее населенные регионы нашей страны не подвержены внезапным погодным катаклизмам (и это хорошо). Поэтому интерес к погоде у жителей этих регионов скорее бытовой. Так, людям в центральной России важно знать, например, какая погода будет в Москве в выходные или что в четверг в Питере будет дождь. Такую информацию проще всего узнать из таблицы, в которой будет дата, время и набор погодных параметров.

Читать полностью »

Мы все воспитывались на мультиках, где, затаив дыхание, смотрели за противостоянием Волка и Зайца, выкрутасами Черного Плаща или забавными похождениями Спасателей. У разных поколений людей свои кумиры детства. Но есть одно объединяющее свойство всех мультипликационных и полнометражных фильмов — линейное действие: раз и единожды выбранные ракурсы съемок, диалоги персонажей, сценарии. И уже от искусства операторов, режиссеров, сценаристов зависело, будут ли зрители возвращаться к картине снова и снова.

Время не стоит на месте. Новые технологии и программы позволяют создавать все более яркие миры. Устройства виртуальной реальности предлагают дополнительные ощущения, а «умные» девайсы есть почти в каждом доме. Это компьютеры, Smart-телевизоры, мобильные устройства. Так есть ли альтернатива «традиционному» кино в современном высокотехнологичном мире, а главное, что мы получим с приходом нового интерактивного медиа?

Игрушка или нет. Что насчет интерактивного кино? - 1
Читать полностью »

Создание десктопной версии мобильной игры стало настоящей исследовательской миссией для краснодарской студии Plarium. В этой статье мы расскажем, как перешли на технологию WebGL при переносе проекта Vikings: War of Clans на новую платформу.

image
Читать полностью »

Создавать вещи своими руками приятно. Современный уровень развития технологий предоставляет небывалые возможности для домашнего производства — больше не нужно вручную выпиливать, вытачивать и строгать. В вашем распоряжении целый парк станков с числовым программным управлением: 3D принтеры, лазерные граверы, плазморезы, токарные и фрезерные станки. Созданные вами детали будут настолько хороши, что их не отличить от фабричных! Осталось только… Спроектировать! И здесь, вынужден признать, вам нужно быть профессионалом. Современные САПР — это квинтэссенция достижений науки и техники и с помощью них можно создавать сложнейшие детали и механизмы. Обычно подобные программы стоят дорого, а на их освоение нужно потратить много времени, прежде, чем вы сможете ими легко и непринужденно пользоваться. С другой стороны, существует множество различных онлайн-инструментов для проектирования, в том числе и довольно несложных для освоения. С их помощью легко создавать геометрически простые предметы, а если хочется сделать что-то посложнее, вам нужно быть либо программистом, либо иметь достаточно терпения и фантазии, чтобы из ограниченного набора примитивов составить сложную форму вашего изделия.

Знакомьтесь, NoteCAD - 1

Мне захотелось решить эту проблему — создать такой инструмент, который будет, с одной стороны, прост в освоении и использовании, однако, позволит создавать сложные детали и механизмы при помощи параметрического подхода к моделированию. Если вы хотите узнать о процессе создания онлайн-инструмента для трехмерного проектирования, который называется "NoteCAD", добро пожаловать ПодКАТ! [любая рифма случайна]Читать полностью »

Нередко рассказы о том, как веб-разработчики заботятся о своих приложениях, начинаются с процесса визуализации сайта, опускаются на уровень DOM и останавливаются на утверждениях типа: «И это быстро потому, что используется ускорение». Мартин Сплитт рассказывает о производительности снизу вверх: он начинает с пикселя и поднимается уровень за уровнем, заканчивая компоновкой страницы.

В основе статьи – выступление Мартина на JavaScript-конференции HolyJS 2017 в Питере, где он рассказывает о том, как происходит визуализация в браузерах и что нужно делать для того, чтобы ваши сайты «летали».

Читать полностью »

Разработка браузерной онлайн игры без фреймворков и движков - 1

Привет!
В этом посте будет описан процесс разработки онлайн игры на чистом javascript и WebGL (без фреймворков и движков). Будут рассмотрены некоторые алгоритмы, техники рендеринга, искусственный интеллект ботов и сетевая игра. Проект является полностью опенсорсным, в конце поста будет ссылка на репозиторий.
Читать полностью »