Рубрика «WebGL» - 6

в 7:41, , рубрики: playcanvas, shader, toon, WebGL, разработка игр, шейдеры
image

Во второй части мы рассмотрели плавучесть и линии пены. В этой последней части мы применим как эффект постобработки подводные искажения.

Преломление и эффекты постобработки

Наша цель заключается в визуальной передаче преломления света в воде. Мы уже рассказывали, как создавать такой тип искажений во фрагментом шейдере для 2D-сцены. Здесь единственное отличие заключается в том, что нам нужно понять, какая область экрана находится под водой, и применить искажение только к ней.

Постобработка

В общем случае эффект постобработки — это любой эффект, применяемый к всей сцене после её рендеринга, например, оттенки цвета или эффект старого ЭЛТ-экрана. Вместо рендеринга сцены непосредственно на экран, мы сначала рендерим её в буфер или текстуру, а затем, пропустив сцену через свой шейдер, выполняем рендеринг на экран.
Читать полностью »

в 13:47, , рубрики: playcanvas, toon shader, WebGL, разработка игр, шейдеры

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

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

  • Добавил модели маяка и осьминога.
  • Добавил модель земли с цветом #FFA457.
  • Добавил камере цвет неба #6CC8FF.
  • Добавил в сцену цвет подсветки #FFC480 (эти параметры можно найти в настройках сцены).

Моя исходная сцена теперь выглядит так.

Создание мультяшного шейдера воды для веба. Часть 2 - 1

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

в 12:57, , рубрики: playcanvas, toon shader, WebGL, разработка игр, шейдеры

В своём туториале «Создание шейдеров» я в основном рассматривал фрагментные шейдеры, которых достаточно для реализации любых 2D-эффектов и примеров на ShaderToy. Но существует целая категория техник, требующих использования вершинных шейдеров. В этом туториале я расскажу о создании стилизованного мультяшного шейдера воды и познакомлю вас с вершинными шейдерами (vertex shaders). Также я расскажу о буфере глубин и о том, как использовать его для получения дополнительной информации о сцене и для создания линий морской пены.

Вот как будет выглядеть готовый эффект. Интерактивное демо можно посмотреть здесь.

Создание мультяшного шейдера воды для веба. Часть 1 - 1

Этот эффект состоит из следующих элементов:

  1. Просвечивающий меш воды с разбитыми на части (subdivided) полигонами и смещёнными вершинами для создания волн.
  2. Статичные линии воды на поверхности.
  3. Имитируемая плавучесть лодок.
  4. Динамические линии пены вокруг границ объектов в воде.
  5. Постобработка для создания искажений всего, что находится под водой.

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

в 13:48, , рубрики: Gamedev, voxel.js, web-разработка, WebGL, WebSocket, Блог компании Конференции Олега Бунина (Онтико), игры, разработка игр, Разработка под AR и VR

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

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

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

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

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

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

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

в 12:14, , рубрики: 3d графика, blender 3d, three.js, WebGL, Блог компании Конференции Олега Бунина (Онтико), Работа с 3D-графикой

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

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

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

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

в 7:51, , рубрики: 3d, web-разработка, WebGL, браузеры, конфигуратор

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

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

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

в 11:04, , рубрики: holyjs, holyjs2018piter, javascript, JS, multipass, OpenGL, WebGL, Блог компании JUG.ru Group, Разработка веб-сайтов, разработка игр

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

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

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

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

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

в 7:37, , рубрики: map reduce, WebGL, Блог компании Яндекс, бэкенд, высокая производительность, высоконагруженные системы, машинное обучение, погода, разработка, фронтенд

Привет!

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

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

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

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

в 5:51, , рубрики: 3d, AR, AR и VR, VR, WebGL, браузеры, будущее здесь, интерактив, кино

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

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

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

в 7:44, , рубрики: unity, unity3d, WebGL, Блог компании Plarium, разработка игр

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

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

1...567...10...18
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js