Рубрика «playcanvas»
Как собрать паука в Godot, Unigine или PlayCanvas
2021-01-04 в 18:16, admin, рубрики: C#, gdscript, Godot, godotengine, javascript, playcanvas, unigine, WebGL, Программирование, прототипирование, разработка игрС наступившим 21-м годом 21-го века.
В данной статье пробегусь по особенностям работы в трёх игровых движках, на примере написания кода для паукообразного средства передвижения.
Облачные сервисы для WebGL? Нет, спасибо
2018-09-17 в 15:19, admin, рубрики: 3d, Amazon Web Services, clara.io, cloud computing, playcanvas, sketchfab, verge3d, WebGL, Облачные вычисления, облачные сервисыНесколько месяцев назад некоторые из наших клиентов начали сообщать о проблемах с подключением к нашему хостингу WebGL-приложений Verge3D Network. Как оказалось, причиной этого были заблокированные Роскомнадзором IP-адреса Amazon Web Services.
Неприятно, конечно, но терпимо. Verge3D — десктопный тулкит, а публикация на амазоновском хостинге это приятная, но не критичная для работы фича. Тем не менее, такие события заставляют задуматься о перспективах. Собственно, эта статья содержит некоторые соображения об облачных сервисах вообще и WebGL-сервисах в частности.
Создание мультяшного шейдера воды для веба. Часть 3
2018-07-16 в 7:41, admin, рубрики: playcanvas, shader, toon, WebGL, разработка игр, шейдеры
Во второй части мы рассмотрели плавучесть и линии пены. В этой последней части мы применим как эффект постобработки подводные искажения.
Преломление и эффекты постобработки
Наша цель заключается в визуальной передаче преломления света в воде. Мы уже рассказывали, как создавать такой тип искажений во фрагментом шейдере для 2D-сцены. Здесь единственное отличие заключается в том, что нам нужно понять, какая область экрана находится под водой, и применить искажение только к ней.
Постобработка
В общем случае эффект постобработки — это любой эффект, применяемый к всей сцене после её рендеринга, например, оттенки цвета или эффект старого ЭЛТ-экрана. Вместо рендеринга сцены непосредственно на экран, мы сначала рендерим её в буфер или текстуру, а затем, пропустив сцену через свой шейдер, выполняем рендеринг на экран.
Читать полностью »
Создание мультяшного шейдера воды для веба. Часть 2
2018-07-15 в 13:47, admin, рубрики: playcanvas, toon shader, WebGL, разработка игр, шейдерыВ первой части мы рассмотрели настройку окружения и поверхности воды. В этой части мы придадим объектам плавучесть, добавим на поверхности линии воды и создадим линии пены с буфером глубин вокруг границ объектов, пересекающихся с поверхностью.
Чтобы сцена выглядела чуть получше, я внёс в неё небольшие изменения. Свою сцену вы можете настраивать так, как хотите, а я сделал следующее:
- Добавил модели маяка и осьминога.
- Добавил модель земли с цветом
#FFA457
. - Добавил камере цвет неба
#6CC8FF
. - Добавил в сцену цвет подсветки
#FFC480
(эти параметры можно найти в настройках сцены).
Моя исходная сцена теперь выглядит так.

Создание мультяшного шейдера воды для веба. Часть 1
2018-07-14 в 12:57, admin, рубрики: playcanvas, toon shader, WebGL, разработка игр, шейдерыВ своём туториале «Создание шейдеров» я в основном рассматривал фрагментные шейдеры, которых достаточно для реализации любых 2D-эффектов и примеров на ShaderToy. Но существует целая категория техник, требующих использования вершинных шейдеров. В этом туториале я расскажу о создании стилизованного мультяшного шейдера воды и познакомлю вас с вершинными шейдерами (vertex shaders). Также я расскажу о буфере глубин и о том, как использовать его для получения дополнительной информации о сцене и для создания линий морской пены.
Вот как будет выглядеть готовый эффект. Интерактивное демо можно посмотреть здесь.

Этот эффект состоит из следующих элементов:
- Просвечивающий меш воды с разбитыми на части (subdivided) полигонами и смещёнными вершинами для создания волн.
- Статичные линии воды на поверхности.
- Имитируемая плавучесть лодок.
- Динамические линии пены вокруг границ объектов в воде.
- Постобработка для создания искажений всего, что находится под водой.
В этом эффекте мне нравится то, что он затрагивает множество различных концепций компьютерной графики, поэтому позволит нам использовать идеи из предыдущих туториалов, а также развить техники, которые можно будет применить в новых эффектах.
Читать полностью »