3d-дизайн и иллюстрация: руководство для новичков

Как 3D-объекты вписывают на коммерческий сайт?

Фотореалистичные трехмерные модели различных предметов создаются в специализированных программах. Например, в Autodesk 3ds Max, Blender, SolidWorks, Cinema 4D, КОМПАС-3D, Autodesk Maya. Правильно подобрав программу, специалист сможет создать визуально объемный объект, задать параметры освещения материала, необходимые цвета и «оживить» разработку, если это входит в задачу.

Но перед тем как отдавать ТЗ в работу, вы должны разобраться в особенностях построения веб-сайтов. Если вы запланировали создание коммерческого веб-ресурса, и хотите добиться оптимальной скорости отдачи страниц и удобного функционала, вам потребуется маркетинговая структура. Именно в нее нужно будет грамотно вписать 3D-объекты.

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

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

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

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

Отличный пример использования трехмерных объектов можно увидеть на корпоративном сайте Челябинского трубопрокатного завода (ЧТПЗ). Некоторые устройства выглядят примерно одинаково и отличаются параметрами, в которых разбираются только специалисты. Поэтому модели отрисованы не для каждого товара, а для групп аналогичных устройств.

Какие навыки нужны 3D-визуализатору

Что должен уметь 3D-визуализатор, чтобы уверенно брать первые заказы?

Жесткие навыки: 

Владеть 3Ds Max — это основной рабочий софт визуализатора. Также вам может быть интересно освоить Blender. Также нужно знать движки для рендера: Vray, Corona Render, Octane, Lumion, Unreal Engine, FStorm.

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

• Знать чертежные и архитектурные программы: Autocad, Archicad, Sketchup, чтобы открывать и экспортировать чертежи и геометрию в 3Ds Max.
• Базовые навыки Photoshop для постобработки рендера. 
• Знание и понимание особенностей сферы, которую вы выбираете.

Алексей: «Профессионального исполнителя и фрилансера отличает то, что он понимает, что он делает: знание архитектуры и дизайна, основных габаритов и размеров, логики строительства и организации общественных пространств. Эти знания можно найти в программах архитектурных университетов или понять с опытом. Заказчики ценят людей, которым не приходится объяснять банальные вещи. Надо разбираться в том, с чем вы работаете».

Гибкие навыки: 

Коммуникация.

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

Важно обсуждать все рабочие моменты до начала работ. Лучший способ заранее застраховать все риски – это заключить договор»

Ответственность. 

Алексей: «Недоверие к фрилансерам – по-прежнему большая проблема для многих заказчиков, поэтому они чаще обращаются за услугой в бюро и агентства

Чтобы быть успешным 3D-визуализатором на рынке фрилансеров, важно не только показать красивую картинку, но и зарекомендовать себя: сдерживать обещания по срокам, не пропадать, вносить правки». 

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

Алексей: «В сфере очень ценится, когда вы не просто “карандаш”, не просто функция. Вы умеете решать задачи комплексно, делать ресерч. Вы понимаете, в чем проблема заказчика, зачем ему это нужно, и сами предлагаете варианты решения. К таким специалистам выстраивается очередь». 

Сколько зарабатывает 3D-визуализатор

Согласно , средняя зарплата 3D-визуализатора в регионах – до 60 тысяч рублей, в Москве – до 120 тысяч. Реалии фриланса и удаленной работы позволяют хорошим специалистам в любом городе рассчитывать на московский уровень зарплат.

Но как выйти на такой доход и посчитать ценник на свои работы?

Алексей: «Для интерьерной визуализации принято считать стоимость по квадратным метрам. Ценник начинается от 350 рублей за квадрат, все, что ниже – это демпинг. Хорошие визуализаторы берут 500-700 рублей за квадратный метр. 

Экстерьерная визуализация начинается примерно от шести тысяч рублей. Ценник может вырасти до 10, 20, 40 тысяч в зависимости от прокачанности визуализатора. 

На европейском рынке цену ставят за картинку, они не понимают, что такое квадратный метр. В среднем стоимость заказа начинается от 100 евро, средняя цена – 200-300 евро за изображение. Экстерьер – 200-500. Если вы работаете на студию, можете получать до 1000 евро за проект. 

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

Вера: «На рынке 3D-визуализации есть определенный порядок цен, но разброс очень большой. Ценник часто занижают те, кто просто не умеет искать заказы. Единственный способ быть конкурентоспособным для них – это снизить цену.

Я рекомендую всегда считать по трудозатратам и не забывать учитывать регулярные расходы на обновление оборудования, покупку софта и готовых 3D-моделей (например, чтобы сделать какой-то сложный предмет интерьера с нуля, может понадобится много времени и сил, иногда проще купить готовую модель и доработать под свои нужды). 

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

Если выйти на иностранный рынок, можно легко зарабатывать от 1000 евро в месяц». 

3D для коммерческих проектов: проблемы

Почему в рунете веб-проекты с качественным использованием 3D можно по пальцам пересчитать?

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

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

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

Где изучать 3D-дизайн?

Исторически сложилось, что основным “поставщиком” кадров в нише  3D-дизайна стали художественные и архитектурные вузы. С развитием видеоигр и 3D-кино, профильных факультеты появились в кино-вузах и частных школах дизайна. 

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

На онлайн курсах по 3Д-моделированию студентов научат работать в популярных программах (Blender, 3D Max, Photoshop и др.), для прохождения обучения потребуется только мощный компьютер и выход в интернет. Сейчас программы по 3D и анимации для начинающих предлагают многие онлайн-школы: 

Как 3D-модель на сайте работает на имидж компании?

Даже если посетитель сайта не разбирается в тенденциях веба, он отметит, что 3D-объект выглядит необычно и дорого, а также встречается на веб-ресурсах не так часто. Поскольку вы – компания, которая вкладывается в качественный и дорогой сайт, значит, с вами можно сотрудничать. Серьезный подход к созданию веб-сайта говорит о том, что вы не фирма-однодневка, которая завтра исчезнет. 

Подобная презентация товара говорит о том, что вы ответственно подходите к ведению бизнеса и вам можно доверять.

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

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

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

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

Демонстрация подействует на публику гораздо сильнее, чем текст. Графики, статистика, научные исследования произведут определенное впечатление, но только «живой» товар вызовет сильный эмоциональный отклик и останется в памяти. Не каждый участник бизнес-встречи найдет время и силы, чтобы подробно изучить вашу документацию по будущему проекту. А вот если вы разместите на промосайте трехмерный объект, с которым можно будет взаимодействовать – вероятность получить финансирование возрастает.

Трехмерный в двухмерном контейнере

содержимое трехмерной графики в WPF инкапсулируется в элемент Viewport3D , который может участвовать в структуре двумерного элемента. Графическая система рассматривает Viewport3D как двумерный визуальный элемент, как и многие другие в WPF. Viewport3D функции в виде окна — окна просмотра — трехмерной сцены. Точнее, это поверхность, на которой проецируется трехмерная сцена.

В традиционном двухмерном приложении используйте Viewport3D , как и другой элемент контейнера, например Grid или Canvas. Несмотря на то, что можно использовать Viewport3D с другими 2D-объектами на одном графе сцены, нельзя сочетать 2D-и трехмерные объекты в Viewport3D

В этом разделе основное внимание уделяется рисованию трехмерной графики внутри Viewport3D

Камеры и проекции

Разработчики, работающие в 2D, привыкли к размещению примитивов рисования на двухмерном экране

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

CameraКласс позволяет указать эту точку представления для трехмерной сцены.

Другим способом понять, как трехмерная сцена представлена на двумерной плоскости, является описание сцены в качестве проекции на поверхность просмотра. ProjectionCameraПозволяет указать различные проекции и их свойства для изменения того, как наблюдатель видит трехмерные модели. PerspectiveCameraУказывает проекцию, форешортенс сцену. Иными словами, объект PerspectiveCamera предоставляет перспективу точки исчезновения. Можно указать положение камеры в пространстве координат сцены, направление и поле зрения камеры и вектор, определяющий направление «вверх» в сцене. На следующей схеме показана PerspectiveCamera проекция.

NearPlaneDistanceСвойства ProjectionCamera и FarPlaneDistance ограничивают диапазон проекции камеры. Поскольку камеры могут быть расположены в любом месте сцены, фактически можно расположить камеру внутри модели или очень близко от нее, что усложняет правильное распознавание объекта. NearPlaneDistance позволяет указать минимальное расстояние от камеры, после которого объекты не будут нарисованы. И наоборот, FarPlaneDistance позволяет указать расстояние от камеры, за которой объекты не будут нарисованы, что гарантирует, что объекты, которые не удается распознать, не будут включаться в сцену.

Позиция камеры

OrthographicCamera Задает ортогональную проекцию трехмерной модели для двухмерной визуальной поверхности. Подобно другим камерам, она указывает позицию, направление просмотра и направление «вверх». Однако OrthographicCamera , в отличие от PerspectiveCamera , описывает проекцию, которая не включает перспективу ракурс. Иными словами, OrthographicCamera описывает окно просмотра, стороны которого параллельны, а не один, стороны которого соответствуют точке на камере. На следующем рисунке показана та же модель, которая просматривается с помощью PerspectiveCamera и OrthographicCamera .

Перспективная и ортогональная проекции

В следующем коде показано несколько обычных параметров камеры.

Применение материалов к модели

Чтобы сетка выглядела как объект в трехмерном пространстве, к ней необходимо применить текстуру, которая покрывает поверхность, определенную ее вершинами и треугольниками. В этом случае можно осветить эту поверхность и создать ее проекцию с помощью камеры. В двухмерном классе класс используется Brush для применения цветов, узоров, градиентов или другого визуального содержимого к областям экрана. Однако внешний вид трехмерных объектов — это функция модели освещения, а не только цвет или применяемый к ним шаблон. Реальные объекты отражают свет неодинаково, в зависимости от качества поверхностей: гладкие и глянцевые поверхности выглядят иначе, чем неровные и матовые, также одни объекты поглощают свет, в то время как другие — отражают. К трехмерным объектам можно применить все те же кисти, которые можно применить к 2D-объектам, но нельзя напрямую применить их.

Чтобы определить характеристики поверхности модели, WPF использует Material абстрактный класс. Конкретные подклассы класса Material определяют некоторые характеристики внешнего вида поверхности модели, и каждый из них предоставляет свойство Brush, которому можно передать значение SolidColorBrush, TileBrush или VisualBrush.

• DiffuseMaterial Указывает, что кисть будет применена к модели, как будто модель была освещена диффузией. Использование DiffuseMaterial наиболее похоже на использование кистей непосредственно в двумерных моделях; поверхности модели не отображают освещение, как будто блестящие.

• SpecularMaterial Указывает, что кисть будет применена к модели, как будто поверхность модели была жесткой или блестящий, способная отражать основные характеристики. Можно задать степень, до которой текстура предложит это отражающее качество, или «тонкое», указав значение для SpecularPower Свойства.

• EmissiveMaterial позволяет указать, что текстура будет применяться, как если бы модель была выделена относительно цвета кисти. Это не делает модель светящейся; однако это иначе влияет на затенение, чем если бы текстура была создана с помощью класса DiffuseMaterial или SpecularMaterial.

Для повышения производительности обратные стороны GeometryModel3D (те, которые находятся вне представления, поскольку они находятся на противоположной стороне модели от камеры) исключаются из сцены. Чтобы указать объект Material , применяемый к лицевой стороне модели, такой как плоскость, установите свойство модели BackMaterial .

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

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