Babylon js как работать

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

Рис. 1. Результат, который мы получим в конце урока.

Работать будем с фреймворком BabylonJS, который облегчит нашу задачу и поможет быстрее добиться результата.

WebGL

Разберем алгоритм работы с WebGL.

Рис. 2. Основные части WebGl приложения.

Чтобы создать любую WebGL сцену, необходимо проделать следующие операции:

• Создаем на странице элемент Canvas
• Получаем контекст WebGL из Canvas для отрисовки графики
• Инициализируем и компилируем шейдеры
• Создаем необходимые буферы / текстуры / переменные / матрицы
• Делаем необходимые расчеты
• Рисуем результат

Если нам нужна анимация, то последние 2 пункта будут повторяться снова и снова. Дальше мы реализуем алгоритм на практике, но сначала разберемся с тем, что такое шейдеры.

Шейдеры (Shaders)

Шейдеры это программы, написанные на C-подобном языке OpenGL ES Shading Language или GLSL. Шейдеры выполняют роли преобразователя «сырых» координат и матриц в финальные координаты и окрашивают их в нужный цвет.

Рис. 3. Слева набор вершин и камера до применения шейдеров. Справа — после.

Каждый материал описывается своими парами шейдеров: Вершинный (Vertex Shader) и Фрагментный (Fragment Shader).

Перед нами пример вершинного шейдера. Он состоит из объявленных переменных до функции и самой функции main. Взаимодействие между JS кодом и шейдерными программами происходит по следующему алгоритму.

• Объявляется переменная в JS коде;
• Создается ссылка на требуемый атрибут в шейдерной программе;
• Объявленное через JS код значение передается в шейдерную программу через ссылку;

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

Переменные задаются посредством JS перед запуском отрисовки, а сама main() функция устанавливает преобразованные координаты в глобальную переменную gl_Position типа vec4 (массив 4 значений).

vec4(aPosition, 1.0); — такую запись следует трактовать так: преобразовать значение aPosition типа vec3 (массив 3 значений) и значения 1.0 к vec4(массиву 4 значений). Так мы получаем искомое значение gl_Position, где первые 3 значения массива это координаты xyz, а о четвертом значении мы узнаем немного позже, когда будем писать свой шейдер.

Чаще всего в шейдер передают матрицы преобразования (Model, View, Projection) и потом умножают матрицы на координаты точки, например:

В примере worldViewProjection это матрица модели-вида-проекции, необходимая для корректного отображения точки в пространстве. Так мы получаем конечные координаты вершины. В этом и заключается задача вершинного шейдера.

Матрицы преобразования перемещают точки в нужную позицию. При этом каждая матрица выполняет свою роль:

• Матрица модели — это матрица, которая преобразует локальные координаты (относительно центра модели) в глобальные координаты. Образуется путем перемножения матрицы переноса, поворота и масштабирования. Которые в свою очередь нужны для смещения точки по осям, поворота вокруг осей и масштабирования.
• Матрица вида — это матрица, которая переносит точку из глобальной системы координат в систему координат камеры. Мы переносим не камеру, а мир относительно камеры.
• Матрица проекции — это матрица, которая дает нам необходимые плоскости отсечения (мин. и макс. координаты отображения), а также создает перспективу для реальности отображения.

Если их перемножить мы получим матрицу модели-вида-проекции (тип mat4), умножение которой на позицию точки (тип vec4) дает нам конечные координаты с учетом камеры, проекции и положения на сцене, то есть те самые конечные координаты gl_Position.

Если задача вершинного шейдера получить координату и вернуть ее преобразованное значение, то задача фрагментного шейдера — закрашивать в нужный цвет. В данном примере vec4(0.0, 1.0, 0.0, 1.0) эквивалент rgba(0,255,0,1) (зеленый цвет). Цвет можно также получить из текстуры посредством передачи UV координат (о них позже).

Фрагментный шейдер состоит из функции и некоторых принимаемых параметров. Он устанавливает глобальной переменной gl_FragColor цветовое значение, параметры вида: vec4(red, green, blue, alpha) .

Оба шейдера выполняются для всех вершин и на выходе мы имеем закрашенный участок, соответствующий вершинам и их цветам. Вот еще несколько интересных моментов о GLSL:

• GLSL типизированный язык и многие параметры требуют именно переменных типа float, поэтому vec2(0,1) часто будет ошибкой, нужно писать так vec2(0.0, 1.0);
• GLSL работает с особыми типами, такими как mat4/3/2/1, vec4/3/2/1, упрощающими работу с массивами и матрицами;
• GLSL имеет множество встроенных функций, например dot(vec3, vec3) — скалярное произведение векторов;
• GLSL имеет несколько типов квалификаторов (для указания точности расчетов, а значит и влияния на быстродействие)
• GLSL имеет несколько спец. типов переменных

• Attribute — глобальный атрибут для передачи координат в вершинный шейдер
• Uniform — переменные которые можно использовать в обоих шейдерах
• Varying — переменные через которые вершинный шейдер может общаться с фрагментным

В последующих частях мы напишем пару шейдеров и освоим некоторые моменты работы с ними.

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

BabylonJS

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

Одна из возможностей BabylonJS — экспорт моделей из 3D-редакторов, например Blender. Благодаря этому мы можем создать 3D модель не кодом, а в предназначанной для этого программе.

Попробовать BabylonJS можно в песочнице.

Делаем космос. Окружение и материалы

Начнем работу с создания страницы и подключения всех необходимых библиотек. Создаем папку web, в ней папку js и файл index.html. В нем мы опишем верстку страницы и код взаимодействия с BabylonJS. Что получится в итоге можно посмотреть здесь.

Скачиваем из репозитория библиотеку babylon.js. Для управления камерой нам пригодится библиотека hand.js. Обе библиотеки кладем в папку js. Получим такую структуру проекта:

Далее пишем код страницы

Мы добавили элемент canvas, в котором BabylonJS отобразит нашу сцену. Нам не нужно задавать элементу canvas аттрибуты width и height, т.к. BabylonJS сам задаст их во время инициализации движка, исходя из стилевых размеров canvas.

Весь джаваскрипт код запишем внутри тега

Разберем построчно этот вершинный шейдера.

В GLSL квалификатор точности precision определяет количество байт выделяемых под переменную. В данном случае float. Это оказывает влияние не только на точность расчетов, но и на производительность. Мы задаем повышенную точность переменных типа float для более корректного отображения нашей планеты. В BabylonJS лучше всегда использовать квалификатор highp.

Это переменные типа attribute , которые принимает только вершинный шейдер. То, что они должны быть переданы в шейдер мы указали ранее в материале:

. attributes: [position, normal, uv], .

position — переменная атрибут типа vec3 (т.е. массив из 3 элементов типа float). Это координаты текущей вершины.

normal — атрибут типа vec3 , его смысл — вектор нормали, это вектор перпендикулярный грани (см. рисунок ниже). Он нужен нам для определения ориентации поверхности, и задается для каждой вершины.

Определение ориентации нужно, чтобы понять — какая сторона плоскости является внешней, а какая внутренней.

Рис. 16. Нормаль к 4 плоскости (она также является нормалью ко всем четырем вершинам).

Uv – атрибут типа vec2 , представляет собой координату текстуры, которая соответствует вершине (см. рис ниже).

Рис. 17. UV координаты. Они отсчитываются слева-направо и снизу-вверх от 0.0 до 1.0.

UV координаты задаются для каждой вершины. Не каждая вершина соответствует всем возможным координатам. Например при задании двум вершинам uv координат ([0.1, 0,1] и [0.5, 0.5]) область между ними будет закрашена как и ожидается. Значения цвета каждого фрагмента между вершинами будут интерполироваться относительно конечных координат (наглядный пример интерполяции — градиент). Но это работа фрагментного шейдера, а не вершинного. В данном случае мы будем передавать UV координату (координату текселя) фрагментному шейдеру посредством varying переменной.

Uniform переменные — это переменные, которые могут быть переданы в оба шейдера.

World — переменная типа mat4 (матрица 4 на 4, наполненная значениями типа float ), при умножении вектора координат на которую мы получаем вершину в глобальной системе координат (относительно центра сцены, а не относительно центра модели)

worldViewProjection — матрица 4 на 4, матрица мира-вида-проекции. После умножения на нее вершина перемещается в нужное положение относительно камеры, т.е свое конечное положение.

Varying переменные передают значения из одного шейдера в другой при условии, что они названы одинаково. Передавать мы будем координату текселя, координату в мировой системе координат и ее нормаль единичной длины.

vUV — это uv координаты.

vPositionW — это позиция вершины в глобальной системе координат

vNormalW — это нормализованная нормаль вершины

Теперь к расчетам:

Сначала мы описываем, то что должен делать вершинный шейдер — определить конечную позицию каждой вершины. Для этого умножаем матрицу вида проекции (предоставляемую и уже рассчитанную BabylonJS) на позицию вершины.

worldViewProjection * vec4(position, 1.0)

Умножаем переменную mat4 на переменную vec4, которую формируем из атрибута position (x,y,z — 3 значения) и значения 1.0, которое станет 4-ым параметром. В данном случае vec4 — это позиция. Если же задать 0.0, то значением vec4 станет направлением.

Затем делаем необходимые для нашего кастомного отображения действия:

Передаем во фрагментный шейдер глобальную координату вершины, ее нормализованную нормаль и координату текселя (это varying переменные). Зачем? Выясним, когда будем разбирать и улучшать фрагментный шейдер. А пока мы уже разобрали объявление ShaderMaterial и одного из двух шейдеров. Нам надо чтобы в зависимости от освещенности использовалась одна или другая текстура, поэтому объявим их в материале

Рис. 18. Текстура ландшафта.

Рис. 19. Текстура ночных городов.

Таким образом мы задали обе текстуры. Чтобы они передавались в шейдере мы уже настроили нужные параметры этой строчкой

Все необходимые параметры настроены и будут передаваться в шейдеры. Напишем фрагментный шейдер в элементе

Необходимые переменные, для отрисовки каждого фрагмента:

varying vec2 vUV — uv координаты текстуры

varying vec3 vPositionW — позиция вершины на сцене

varying vec3 vNormalW — нормализованная нормаль вершины

Нормализованный вектор — это вектор, длина которого равна 1 (для его получения каждую координату нужно разделить на длину вектора). В GLSL есть специальная функция нормализации normalize() . Т.е. vNormalW — это нормаль.

uniform vec3 lightPosition — позиция источника света

uniform sampler2D diffuseTexture — переданная в шейдер текстура ландшафта

uniform sampler2D nightTexture — переданная в шейдер ночная текстура

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

• Окрашивать меш в нужную текстуру
• Учитывать положение источника освещения и делать ярче ту часть меша, которая непосредственно освещена
• Смешивать текстуры, в зависимости от степени освещенности

Приступим к написанию шейдера:

Первым делом мы определяем вектор от источника света до вершины и нормализуем. Происходит это просто: вычитаем из координат источника света (lightPosition) координаты вершины (vPositionW), а потом применяем встроенную функцию нормализации вектора (normalize). Теперь у нас есть lightVectorW . Его будем использовать для определения коэффициента освещенности фрагмента соответствующего текущей вершине. Поможет нам в этом скалярное произведение векторов, а именно тот факт, что скалярное произведение нормализованных векторов дает нам косинус угла между ними. А так как нормализованная нормаль вершины у нас уже есть ( vNormalW , ее нам рассчитал вершинный шейдер), то остается только выполнить скалярное произведение и получить косинус угла.

Теперь выводим коэффициент освещенности lightDiffuse с помощью следующих операций:

1. Используем функцию dot() — это встроенная функция расчета скалярного произведения
2. Ее результат кладем во встроенную функцию max() , которая вернет наибольшее из чисел 0.05 (чтобы неосвещенная часть меша была не совсем черной) и результат выполнения dot. Поэтому результат будет не меньше 0.05, но и не больше 1.0 (т.к. значение cos всегда меньше 1).

Почему именно так (схематичный рисунок):

Рис. 20. Углы между нормалями вершин и вектором направления света на эти вершины.

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

Мы объявили переменную для конечного цвета vec3 color , переменную vec4 nightColor — в которую мы поместили цвет соответствующий uv координатам текстуры, переменную vec3 diffuseColor — с которой сделали тоже самое, только цвет будет браться из базовой текстуры.

Между переменными цветов, взятых из текстур есть небольшие отличия. Например .rgb — способ обращения к 1,2 и 3 элементу массива (можно также использовать x/y/z) в результате которого получим vec3 с этими значениями. texture2D возвращает vec4 , где 4 значение — это альфа составляющая. Но для diffuseTexture она всегда равно 1.0, а вот для nightColor большая часть точек прозрачна. Точки отвечающие за «ночные города» почти полностью непрозрачны, мы это используем далее, когда будем получать результирующий цвет.

Умножаем diffuseColor на lightDiffuse и получаем цвет обычной текстуры под влиянием светового коэффициента. Так если точка напрямую освещена, то значения будут примерно такие — vec3(0.0, 0.4, 0.5) * 0.9 . Так мы получим почти тот же цвет, что есть на текстуре, если же lightDiffuse будет ближе к 0, то и цвет будет почти черным.

Прибавляем составляющую ночной текстуры + (nightColor.rgb * nightColor.a * pow((1.0, lightDiffuse), 6.0)) . Умножаем оригинальный цвет точки на альфа-составляющую nightColor.rgb * nightColor.a (которая будет = 0 почти везде кроме городов, а значит в этом случае влияния на результирующий цвет оказано не будет вообще). А потом домножаем на обратный коэффициент освещенности в степени 6.0 pow((1.0, lightDiffuse), 6.0) . Обратный потому что в этой части — чем меньше сам коэффициент, тем больше его влияние (мы ведь вычитаем из максимального значения коэффициента равного 1.0).

Степень 6, нужная для экспоненциального роста значения, чтобы светимость городов была заметна, когда значение коэффициента осещения lightDiffuse близко к нулю. Если же степень убрать, то светимость городов будет расти линейно, что приведет к нежелательному проявлению света городов на освещенной части Земли.

Чем меньше коэффициент — тем сильнее выражена безовая текстура, чем больше — тем больше выражена ночная.

Наконец gl_FragColor = vec4(color, 1.0); задает финальный цвет фрагмента — vec4(vec3, float). Именно так можно составлять нужный тип, GLSL все разберет и создаст нужную переменную vec4 из vec3 и еще одной переменной.

Финальный код шейдера:

Добавим еще одну строчку в runRenderLoop для того, чтобы заставить планету вращаться и разглядеть результат со всех сторон.

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

Babylon.js создан с использованием языка TypeScript. TypeScript компилируемый и мультиплатформенный язык генерирующий чистый JavaScript код.

Сегодня мы рассмотрим следующие темы:

• Введение в Babylon.js
• Почему он был разработан с использованием TypeScript
• Введение в TypeScript

Создатели

Babylon.js был создан David Catuhe, Devid Rousset, Pierre Lagarde и Michel Rousseau. Это проект с открытым исходным кодом посмотреть на него можно на GitHab https://github.com/BabylonJS/Babylon.js, а так же у него есть свой собственный сайт http://www.babylonjs.com со множеством примеров и отличной документацией.

Инструменты вам в помощь для работы с Babylon.js

Babylon.js предоставляет насколько интерактивных инструментов в помощь разработчика и художникам:

• Для разработчиков, площадка для экспериментов (http://www.babylonjs-playground.com). Она включает в себя редактор кода и холст для вывода результата. В нем также есть некоторые примеры кода, с которыми можно очень интересно побаловаться.
• Для художников, Sandbox (http://www.babylonjs.com/sandbox/) позволяет перетаскивать в нее результат экспорта из 3D студий таких как Blender и 3ds Max, чтобы увидеть, как сцена будет выглядеть в браузере. Sandbox предоставляет вам средства отладки и дополнительные инструменты для оптимизации.
• CYOS http://www.babylonjs.com/cyos/acpr/ позволяет разработчикам создавать свои собственные шейдеры в реальном времени. Также есть несколько шейдеров уже доступных в качестве примера для обучения и экспериментов.

Почему Babylon.js разработан с использованием TypeScript?

Babylon.js достаточно большой проект, с момента его появления на GitHab он активно развивается по сей день. В нем создано большое количество функций с большим количеством параметров для большей гибкости. Язык TypeScript помогает разрабатывать более надежные и простые в сопровождении приложения, за счет типизации и ООП.

TypeScript

TypeScript — это проект с открытым исходным кодом разработанный в Microsoft. Он компилируется в JavaScript и предоставляет статическую типизацию, которая не является обязательной. Система типизации позволяет получить более чистый и понятный код. Это означает, что если функция имеет множество параметров с описанием типов, их проще понять и запомнить вместо тогда чтобы каждый раз обращаться к документации. Кроме того TypeScript позволяет объявлять классы (как это заведено в спецификации ECMAAcript 6) и интерфейсы для более понятной архитектуры и структуры кода.

Особенности TypeScript

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

Язык TS поддерживает наследование (классов), а также ограничения доступа (private / public / protected) для членов класса, что очень хорошо для разделения публичного интерфейса и внутреннего.

Введение в TypeScript

Давайте рассмотрим основные моменты, такие как компиляция ts в js, работу с классами, типами, функциями, наследованием и интерфейсами.

Компиляция с помощью Gulp

Gulp — это библиотека автоматизации задач, доступная из npm. Так же имеется специальный плагин для компиляции ts в js. Единственно нам осталось все это добро настроить.

Для начало надо установить Node.js (https://nodejs.org) если у вас его еще нет, вместе с ним мы получим среду выполнения нашего скрипта gulp + доступ к NPM пакетам.

1. Используя командную строку установим gulp

Недавно команда разработчиков babylon.js выпустила новую версию одноименной библиотеки (v2.1) с множеством усовершенствований, а также новых инструментов для создания 3D в браузере, уже имея опыт создания таких игр как Flight Arcade и Assassin’s Creed Pirates . В этой статье будет рассказано о некоторых из основных обновлений, а также будут даны ссылки на демки и песочницу, чтобы можно было самостоятельно попробовать.

Unity 5 Експортер.

На хабре была публикация Blend4Web vs Unity c упоминанием, что Unity чересчур медленно и непропорционально больших размеров импортирует файлы в WebGl . Возможно, это вариант для таких случаев.

Unity удивительный инструмент для создания игр, которые могут работать на почти всех операционных системах. Мне нравится Unity 5 WebGL экспортер — это хороший способ для экспорта всех игр в WebGL/ASM.JS/WebAudio сайт.

Чтобы сделать это решение более завершённым и, если мы хотим более легкий экспорт проекции мешей, которые могли бы запускаться без ASM.JS , можно установить Babylon.js экспортер: доступный здесь.

Когда установлен, exporter может экспортировать сцену, перейдя в меню exporter Babylon.js:

Через несколько секунд, сгенерируется .babylon файл вместе с связанными с ним текстурами:

Теперь можно загрузить Babylon из JavaScript проекта или непосредственно протестировать, используя песочницу Babylon.js

Decals — я бы, наверное, перевел как «кляксы» 🙂

Decals (пятна) — обычно используют для добавления на 3D объекты каких-то деталей (пулевые отверстия, какая-то локальная информация, и т.д.). Внутри decals (пятно) есть меш, созданный из предыдущего, только с небольшим смещением, чтобы находиться поверх.

Смещение можно рассматривать по аналогии со свойством из CSS zindex . Без этого будет видно, что когда два 3D объекта появляются в одном и том же месте:

Код для создания нового пятна:

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

SIMD.js

Microsoft, Firefox и Chrome, объявили о поддержке SIMD.js — в API для использования возможностей мульти-скаляров процессора непосредственно из JavaScript кода. Это особенно полезно для использования скалярных операций, таких как «умножение матриц».

Было решено (при участии Intel), интегрировать поддержку SIMD.js непосредственно в математическую библиотеку.

А это, например, приводит к эволюции кода где одна и та же операция применяется 4 раза:

Основная идея — это загрузить SIMD регистр данными и выполнить только одну инструкцию, тогда как раньше требовалось выполнить несколько.

Посмотреть как это работает можно здесь здесь

Эта демка пытается поддерживать постоянную частоту кадров (50 fps по умолчанию) при добавлении новых танцоров через каждые несколько секунд. Это приводит к появлению большого количества «перемножений матриц» для анимации скелетов, используемых танцорами.

Если ваш браузер поддерживает SIMD , вы можете включить его и увидеть прирост производительности.

Коллизии веб-воркеров

Ranaan Вебер (топовый контрибьютор Babylon.js) сделал огромную работу, чтобы серьёзно улучшить движок коллизий, и позволить Babylon.js вычислять столкновения с помощью отдельных веб-воркеров.

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

Например, возьмем сцену, где у нас есть большая сетка (красивый череп) с включенными коллизиями в камере (это значит, что с помощью колёсика мыши не получится пройти через череп). Эта демка не использует невидимые объекты. Используется реальная сетка, имеющая более 41 000 вершин, каждую из которых необходимо проверить.

Раньше с постоянными коллизиями основной поток должен заниматься показом сцены. И вычислять столкновения.

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

Чтобы включить коллизии, нужно использовать следующий код:

Больше узнать о коллизиях можно здесь.

Новый движок для теней

Добавление на сцену теней всегда придаёт реализм. Предыдущая версия реализации теней могла создать динамические тени для направленных источников света (Directional Light).
Новая версия добавляет поддержку для источников света, имитирующих точечную подсветку (Spot Light) наподобие фонарика, а также добавлено два новых фильтра, создающих очень хорошие мягкие тени,
это можно увидеть в демке.

А эта демка показывает различные варианты изменения динамических теней.

Для более полного ознакомления работы с тенями читайте документацию.

Формы заданные параметрами

Jerome Bousquie (еще один топовый контрибьютор) добавил много новых мешей на основе параметрических форм.

Как можно видеть, в Babylon.js , до сих пор базовый меш имел изначально заданную стандартную форму: то есть, если мы создаём сферический меш, то мы ожидаем увидеть сферу.То же самое касается куба, тора, цилиндра и т.д.

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

Jerome, с помощью этих «параметрических фигур», добавил список мешей для работы из коробки:

• Ribbons
• Disc
• Dashed lines
• Lathe
• Tube

Если есть желание узнать больше о параметрических фигурах: то можно изучить этот гид.
Jerome также создал обучающий материал чтобы лучше понять ribbons: read it here.

Новый оптический эффект

Jahow (другой топовый контрибьютор) использовал пайп-лайн постпроцессингового рендеринга Babylon.js, что позволит добиваться фотографического реализма.

Два вида постпроцессинга используемых в пайплайне:

1. "хроматические аберрации" шейдеров, которые сдвигает слегка красный, зеленый и синий каналы на экране. Этот эффект сильнее по краям.
2. «Глубина резкости» шейдеров, включающая в себя:

• Размытие по краю линзы
• Искажения объектива
• Корректировка резкости и размытия изображения
• Эффект боке — глубина резкости (формы, появляющиеся в размытых областях)
• Эффект зернистости (шум или пользовательские текстуры)

Это демо также можно посмотреть в playground.