Spline

О программе

Spline – это программа для трехмерного моделирования с удачным сочетанием векторных и 3d инструментов. Интерфейс отличается хорошим юзабилити, который позволяет за полчаса освоить программу и набросать приличную композицию. Один из сценариев моделирования: сначала пользователь векторным пером рисует контур, потом из него выдавливает 3d фигуру, задает материал, положение в трехмерном пространстве, добавляет освещение на сцену... Есть также заготовленные 3d примитивы в виде куба, шара, тора, цилиндра… которые также могут участвовать в лепке моделей, персонажей и конструирования сцены. Да, есть режим лепки, как из пластилина. Экспорт возможен в файл проекта, в статичный растр, 3d формат gLTF, публичный URL для встройки на свой сайт, в автономное веб-приложение.

Интерфейс

Для пользования программой надо зарегистрироваться – это бесплатно. После успешной регистрации и подтверждения реальности своего почтового ящика откроется рабочий интерфейс Spline. Это пространство сцены посередине, панель инструментов вверху, панель свойств справа и панель навигации слева.

Сцена. Основные манипуляции вы проводите на сцене. Вращение сцены (Orbit) происходит путем движения мыши с зажатой ЛКП и нажатой клавишей ALT на клавиатуре. Перемещение сцены (Pan) происходит путем движения мыши с зажатой ЛКП и нажатой клавишей ПРОБЕЛ на клавиатуре.
Если надо повернуть/передвинуть объект, то после его выделения появляются направляющие и для поворота вокруг трех осей по отдельности, и для перемещения по направлениям трех осей и для масштабирования вдоль осей. Можно и по-простому мышью передвигать, но это крайне неточная операция.

Панель инструментов. По кнопке-плюсику на сцену можно добавлять векторные примитивы, 3d примитивы, текст, источники света, камеры. Также на панели есть инструменты рисования произвольных векторных контуров. На этой панели могут возникнуть другие инструменты в зависимости от режима работы. Например, если выделить объект и на панели свойств нажать кнопку [Smooth & Edit], то панель инструментов преобразится и на ней появятся инструменты для трехмерной лепки.

Панель свойств. Если выделить на сцене объект, то на панели свойств справа отобразятся все его параметры, которые можно регулировать с большой точностью. Объекты разносущностные – примитивы, группы, свет, камера… – и параметры у них разные.

Панель навигации. Слева она находится. На ней представлено иерархическое дерево сцены. Т.е., все объекты и группы объектов. У них есть имена, которые даются по умолчанию согласно их сущности. Но имена можно менять. Есть поиск по дереву. При выделении объекта на этой панели, он также выделяется на сцене. И наоборот.
На этой панели есть полезная кнопка-гамбургер [≡] вверху справа – это меню по операциям. В нем есть, например, кнопки отмены операции, но операцию можно отменить и обычным сочетанием CTRL+Z при условии включенной английской раскладки клавиатуры.

Фрагментарно

Для изучению почти любой 3d программы лучше обращаться к ее руководству пользователя, но получать начальные сведения и определять свой интерес к программе можно и по таким обзорам как у меня. Я их пишу не только для вас, но и для себя, чтобы при больших перерывах в пользовании программы можно было обратиться к обзору и вспомнить основные позиции и нюансы. Ниже я просто тезисно обозначу те моменты, которые полезно знать.

Материалы. На Панели свойств есть раздел Material, справа от этого слова значок из четырех точек – по нему надо кликать, чтобы применить материал к выделенному объекту. Сначала откроется панелька с теми материалами, которые уже присутствуют на сцене у других объектов. Можно выбрать один из них. А можно создать новый материал по большой кнопке-плюсу [+]. Материал – это не только цвет, но ряд других параметров.
Есть возможность в качестве материала добавить картинку с диска – вот инструкция, как это сделать: выделите объект > на Панели свойств в разделе Material рядом с полем Color нажмите стрелочку и выберите Image > в большом поле кликните на кнопку [Upload Image] > выберите картинку на диске.
Интересное наблюдение: слои материала на объекте можно накапливать в виде слоев и их взаимное расположение имеет значение. Например, есть слой Outline, который окрашивает ребра объекта в черный цвет, а есть слой Color, который окрашивает всю поверхность объекта. Так вот, если слой Outline выше слоя Color, то всё красиво, а если наоборот, то эффекта от Outline нет, потому что слой Color его забивает.

Библиотека. Программа обладает встроенной библиотекой готовых моделей и сцен. Вызывается библиотека по кнопке [Library] внизу слева под панелью навигации. Модели и сцены в библиотеки разбиты на категории. Есть контекстный поиск на английском. Для добавления модели на вашу сцену надо захватить ее ЛКМ и перетащить на сцену. Она попадет точно в центр сцены. Также можно добавить модель или сцену на ваш дэшборд My files по ПКМ. Сам дэшборд открывается по клику на ваше имя пользователя в самом верхнем левом углу.

SVG. Вот это порадовало. Можно импортировать svg контур из файла (по кнопке [≡] на Панели навигации) и выдавить из него трехмерность. Если SVG состоит из нескольких контуров, то они объеденяются в группу и каждый контур из группы возможно редактировать в Spline.

Скульптинг и редактирование. Выделяется объект. На панели свойств нажимается кнопка [Smooth & Edit]. Панель инструментов преобразуется под скульптинг и редактирование граней, рёбер, узлов – становится возможным их перемещать, вращать, масштабировать по отдельности. Есть даже кисть, которой можно вдавливать или выдавливать поверхность. Конечно, не ZBrush и не 3ds Max, но что-то внятное вылепить реально.

Группировка. Выделить объекты и нажать Ctrl+G (клавиатура должна находиться в английской раскладке). Объекты будут сгруппированы: их можно перетаскивать, вращать, масштабировать как единое целое; на Панели навигации они будут упакованы в отдельную папку; группе можно менять положение Pivot (точку поворота).
Кстати одному объекту тоже можно менять положение Pivot, но через группировку. Анонсированная разработчиком возможность через Ctrl+G -> Ctrl+Alt у меня не срабатывает. Так срабатывает: выделить объект > сгруппировать > вывести объект из группы > группе поменять местоположение > обратно засунуть объект в группу.

Клонирование. Тутошнее клонирование довольно функционально. Не просто продублировать объект, а можно назначить кол-во дублей и их пространственное расположение. Вся совокупность клонов будет вести себя как один объект.

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

Анимация. Чтобы создать анимацию надо поработать на панели свойств с параметрами States и Events (Состояния и События). Выделите объект. Кликните на плюсик напротив States – появится базовое состояние Base State и текущее состояние State, которое выделено. Измените объект (поворот, передвижение…). Нажмите плюсик напротив Events. Раскроется настройка события, по которому объект будет переходить из состояния Base State в состояние State. По умолчанию это событие Start. Этого уже достаточно, чтобы анимация сработала – нажмите кнопку [>] на панели инструментов для просмотра. Анимацию можно экспортировать в видео. Для этого нажмите кнопку [Export] в окне просмотра анимации. Выберите MP4 и нажмите [Start]. Нажмите кнопку записи (яркий кружок) внизу (включится секундомер) и затем кнопку повтора анимации вверху. После того, как анимация проиграется, нажмите [Stop] внизу. Программа предложит сохранить видеофайл – выберите месторасположение для него и сохраните.

Экспорт. Экспортируется проект по кнопке [Export]. Возможные форматы экспорта:

• Public URL. Ваш проект отправляется на сервер компании-разработчика и вы получаете html-код для вставки вашей сцены через iframe. Всё хорошо, только контент хранится не у вас. После каждого редактирования проекта надо нажимать кнопку [Update] в окне экспорта, чтобы данные на сервере обновились.
• Code. Ваш проект архивируется и сохраняется на диск. После разархивирования его можно просматривать на локальном сервере или на вашем удаленном сайте. Простое открытие файла index.html в вашем браузере ничего не покажет. Для владельцев сайтов это более предпочтительный вариант, чем первый, т.к., вы сами контролируете местонахождение проекта. В этом пункте есть две кнопки [Download ZIP] и [Download Bundled ZIP]. По первой кнопке скачиваются лишь файлы с основными настройками сцены, а библиотеки js подгружаются по ссылкам из этих файлов. По второй кнопке скачивается всё, полностью автономный проект.
• Image. Тут все стандартно – то, что вы в данный момент видите на сцене, будет сохранено в PNG или JPG файл. Разрешение файла регулируется параметром Ratio, который задает кратность увеличения первоначального размера.
• Frame Recording. Это экспорт анимации в видео или анимированый GIF. Для этого вы должны заранее эту анимацию создать.
• .gLTF. Это формат 3d графики, который понимают многие профессиональные 3d редакторы.
• .spline. Это внутренний формат проекта программы Spline.

При выборе экспорта Code вы можете дополнительно выбрать js-библиотеку, чей код вам люб, а также по кнопке [Edit on CodeSandbox] сразу загрузить ваш код в известную песочницу кода, проверить в ней дееспособность вашей сцены и получить URL для расшаривания.

Импорт. В Spline можно открывать некоторые форматы трехмерной графики: OBJ, FBX, STL, GLTF. Я попробовал FBX и GLTF, модели открываются как единое целое и текстуру можно наложить как на единую модель. Неплохое место для поиска моделей – sketchfab.com. В параметрах поиска выберите Downloadable (бесплатные) и скачайте FBX. Распакуйте загруженный архив, найдите в нем файл *.fbx (обычно он находится в папке source в еще одном архиве) и перетащите этот файл мышкой на сцену в Spline. После этого материал Color импортированной модели сделайте Image и назначьте файл изображения (обычно это JPG файл, лежащий рядом с FBX файлом).

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

Примеры сцен, сделанных в Spline

Кликните на картинку ниже, чтобы открыть страницу с интерактивной 3d сценой. Требует некоторого времени для загрузки.
Навигация: Вращение = левая кнопка мыши; Перемещение = правая кнопка мыши; Масштабирование = колёсико мыши.

Интерактив: наведите мышь на зонтики, кликните по столбику.

Обратите внимание, что земная поверхность и облака движутся не синхронно.

Интерактив: кликайте по кружочкам с цифрами последовательно.

Больше примеров вы можете найти на специализорованном сайте splinespiration.com и даже скачать оттуда проекты.

Хаотично

В этот раздел напишу свои наблюдения и результаты практики первой недели общения с программой. Чтобы самому не забыть.

Последовательная анимация одного и того же объекта. По умолчанию это не предусмотрено. Т.е., если одному и тому же объекту задать переходы в разные состояния последовательно с нужными Delay больше одного раза, то выполняться будет только один последний заданный переход. Есть выход: объект запихнуть в группу, пусть и состоящую из одного объекта. Задать первую анимацию группе продолжительностью, допустим, 1 с. Потом объекту в группе задать свою анимацию с задержкой 1 с. В итоге эти две анимации проиграются последовательно. Причем, родительских групп можно создать много и, т.о., осуществить несколько анимационных переходов в один присест по одному и тому же событию.

Дискретный поворот. Если при повороте выделенного объекта с помощью мыши держать нажатой клавишу Shift, то поворот будет производиться с шагом 5°, что очень удобно для точного поворота.

Сглаживание. У таких примитивов как куб или конус... есть параметр Corners. Он нужен для сглаживания ребер. Но если вы начнете объект редактировать по кнопке [Smooth & Edit], то этот параметр будет уже недоступен и ранее настроенная сглаженность пропадет. Еще не пугайтесь резкого видоизменения объекта при первом переходе в режим редактирования (он становится угловатым и бесформенным) – это вступил в силу новый параметр Level, выставляемый программой в 1. Чтобы вернуться к оригинальному виду примитива надо выставить этот параметр в 0. А если задать Level больше 1, то будет вполне удобоваримое сглаживание.

Выдавливание граней. В скульптинге бывает очень полезно. Если перейти в режим редактирования в подрежим Face, то за кончик направляющих стрелок можно вытягивать эту грань целиком с учетом всех соседних граней, которые тоже будут тянуться за стрелкой смежным ребром. Это не всегда бывает то, о чем мечтал пользователь, допустим, ему хочется вытягивать только эту грань не трогая соседние. Для этого надо выбрать инструмент Extrude. Появится новый тип направляющих – синий кружок, который и надо тянуть для независимого перемещения грани.

Игровые контролы. Уже после написания этого обзора в программе появился некоторый функционал для создания игр. Это Game Controls. Это новый тип события, который может принимать объект. В результате этим объектом можно управлять с помощью клавиатуры (W,A,S,D,Пробел = вперед,влево,вправо,прыжок), можно управлять сценой (кнопками-стрелками). При движении объекта по поверхности учитывается гравитация (объект падает в направлении Y) и коллизии (при столкновении с препятствием объект останавливается).

Скачать, почитать, посмотреть

📥 Скачать портабельную версию Spline 0.5.10 для Windows x64 (пароль для разархивирования newart.ru).
📥 Скачать установочные версии Spline для Windows, Linux, macOS с сайта разработчика.

📘 Руководство пользователя Spline (описание, видео, примеры проектов) help на русском.

📺 Ознакомительный урок по Spline – а русском, 1 час.
📺 Как сконструировать ракету в Spline и заставить ее лететь – очень наглядный ролик, вдохновляющий попробовать эту программу. На английском с индийским акцентом.
📺 Делаем железную дорогу в Spline и пускаем по ней паровозик – 20-минутный урок на русском.
📺 Как слепить аватар – ролик хоть и на английском, но в нем всё понятно и наглядно без слов. Хороший урок по скульптингу.
📺 Как добавить в сцену игровые функции – оказывается, и геймдев возможен!
📺 Как добавить логику – например, чтобы объект_2 претерпевал изменения при приближении к нему объекта_1.