Рубрика «playcanvas»

С наступившим 21-м годом 21-го века.

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

Как собрать паука в Godot, Unigine или PlayCanvas - 1
Читать полностью »

Несколько месяцев назад некоторые из наших клиентов начали сообщать о проблемах с подключением к нашему хостингу WebGL-приложений Verge3D Network. Как оказалось, причиной этого были заблокированные Роскомнадзором IP-адреса Amazon Web Services.

Неприятно, конечно, но терпимо. Verge3D — десктопный тулкит, а публикация на амазоновском хостинге это приятная, но не критичная для работы фича. Тем не менее, такие события заставляют задуматься о перспективах. Собственно, эта статья содержит некоторые соображения об облачных сервисах вообще и WebGL-сервисах в частности.

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

image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js