Векторный рендеринг: 3д-графика в дизайне иконок

    Предлагаю вашему вниманию научно-популярную статью от нашего тридешника Андрея Пушкина (push) про способы превращения 3д в вектор. Так как проблем с этим очень много, то это только первая статья целого цикла.

    image

    За последние несколько лет технологии в 3д-графике развивались бешеными темпами. Алгоритмы расчета фотореалистичных изображений, увеличение ядер процессора и объемов оперативной памяти (а также новая технология рендеринга с использованием GPU) сделали возможным в «домашних» условиях получать изображения высокого качества. 3д стал мощным инструментом графического дизайна. Есть ряд неоспоримых преимуществ использования «трехмерного» подхода, и самое главное и существенное — скорость работы.

    Возникает резонный вопрос: а можно ли использовать 3д-графику в дизайне иконок, логотипов и пиктограмм? Ведь эти отрасли графического дизайна традиционно «векторные». Кроме преимуществ 3д-подхода (скорость работы, легкость смены ракурсов, правильная перспектива и т.д.), есть ряд серьезных недостатков, которые делают рисование иконок только в 3д-редакторе практически невозможным:

    1. Очень сложно точно попасть в цвета или получить «чистые» цвета. Часто в дизайне иконок требуется следовать заданной гамме. Все дело в том, что 3д-графика предназначена для получения фотореалистичных изображений. А цвет любого реального объекта зависит от освещения окружающим рассеянным и прямым светом. Так что даже задав точные цвета в редакторе материалов, на выходе мы почти никогда не получим нужный цвет.
    image

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

    2. Невозможно попасть в пиксели.
    image

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

    3. Сложно получить точный размер объекта. Все понимают, что при рендеринге можно спокойно задавать размеры фрейма. Но вот попробуйте отрендерить прямоугольник точно в размер 127?84 пикселя. Практически все нужно делать «на глаз».
    image

    Как видно, даже в программе 3ds max (одной из самых мощных программ для 3д графики) есть возможность настройки только размеров фрейма, а не отдельных объектов.

    4. Достаточно трудоемко строить точную перспективу. Этот пункт выглядит спорно и всегда вызывает недоумение у людей, которые не работают в 3д. Можно построить правильную и естественную перспективу, можно построить 2-хточечную. Но часто в гайдлайнах заданы точные углы построения, и следовать им — нетривиальная задача для 3дешника.
    image

    Тут на иллюстрации показаны точные линии построения перспективы. Во многих руководствах по рисованию иконок (например для Windows XP) указаны точные углы, по которым строится сетка перспективы. Чтобы попасть в них при рендеринге, нужно очень постараться сделать это, как я с иллюстрацией кошелька (видно что дальняя грань так и не стала полностью вертикальной:)).

    5. Фотореализм :) В 3д намного проще сделать фотореалистичное изображение, чем наоборот. Избавиться от ощущения «3дешности в иконках сложно.
    image

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

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

    6. Невозможность векторного рендеринга

    Решение последней 6-й проблемы сразу же отбросило бы все остальные. Современные технологии рендеринга очень сложны и по своей сути работают «попиксельно». Все те решения, которые сейчас существуют для получения вектора на выходе, являются лишь аналогом трассировщиков. А если до сих пор нет вменяемого алгоритма трассировки растровых изображений — можно забыть и о векторном рендеринге. А главная проблема тут одна: на данный момент ни один алгоритм трассировки не умеет вменяемо строить градиенты. Самые продвинутые разбивают объект на векторный мэш и в каждую ячейку назначают определенную заливку. Никаких градиентов. Это значит, что получение фотореалистичных векторных изображений — дело далекого будущего.

    Так как же интегрировать 3д в дизайн иконок? Сейчас существует всего 3 основных способа сделать это. Каждый из них заслуживает отдельной статьи, тут же пробежимся по ним кратко.

    1. Непосредственная трассировка изображения в AI (или в других внешних программах трассировки). Единственное чем может помочь такой метод — построить правильную перспективу и форму объекта. Тут есть пара тонкостей. Во-первых, перед трассировкой необходимо отделить изображение от фона. Во-вторых, для грамотной трассировки необходимо отрендерить объект без отражений, бликов и прозрачностей. Лучший вариант — использовать любой NPR-рендер. Фотореалистичность — враг трассировки:)
    image

    На иллюстрации 2 изображения трактора. Слева — рендер с отключенными настройками отражений, справа — трассированное векторное изображение в AI.

    2. Обводка растрового рендера в AI (или наложение векторных шейпов в PS). Самый «низкотехнологичный», но, к сожалению, самый действенный метод. По сути — это единственный серьезный способ внедрить 3д в техпроцесс создания иконок. Для этого нужно отрендерить изображение, максимально приближенное к желаемому результату. Все блики, рефлексы, цвета. А дальше по готовому изображению дизайнер рисует векторную картинку.
    image

    Результаты этого процесса видны на картинке — слева изображен «голый» рендер, справа — отрисованная по нему векторная иконка.

    Подход дает хорошие результаты в сложных и больших иконках (например, при отрисовке техники, особенно с колесами:))

    3. Программы и плагины векторного рендеринга. Сегодня есть 2 основных инструмента, которые развивают это направление. Это Illustrate! и Swift 3D. Обоими продуктами я пользуюсь в виде плагинов и внешних рендеров к 3ds max. Также стандартный рендер 3ds max’а — Mental Ray позволяет рендерить грани и контуры объектов прямо в EPS. Хоть эти направления и развиваются достаточно активно (от версии к версии Swift 3d становится все лучше), все еще очень далеко от настоящего векторного рендеринга. На данный момент все, что может сделать Swift3D, — векторный мэш со сгруппированными по цвету объектами. Работать дальше с ним практически неаозможно. Единственный вариант использования — рендеринг в 2 цвета, когда все изображение раскладывается на 2 основных цвета, и каждый из них становится отдельным объектом с заливкой.
    image

    На картинке первая шестерня отрендерена фотореалистичным визуализатором (растровое изображение). Вторая — Swift3D с настройкой рендеринга в 2 цвета (Cartoon Two Color Fil) в формате EPS. Открыв этот файл в AI мы получим 2 объекта: серого и черного цвета. Последняя — с 1 наложенным градиентом на серый объект в AI. Как видно, если поработать с этим дальше, то можно получить вполне приемлемый результат.

    Сегодня у нас нет универсального способа, и каждый их этих трех хорош в конкретных ситуациях. Резюмируя, скажу одно — смысл применять 3д в дизайне иконок есть только в тех случаях, когда размер превышает 128х128 пикселей либо имеется много деталей со сложной формой. А пока не появилась новая революционная технология векторного рендеринга, AI так и останется основным инструментом дизайнера иконок:)

    P.S.: Я работаю в 3ds max, modo и mudbox. Возможно, в других редакторах дело обстоит немного не так, но общие принципы и проблемы актуальны для 3д-подхода в дизайне иконок во всех программах. Немного могут отличаться способы получения векторных заготовок, например в Rhinoceros есть возможность получать вектор прямо импортом из программы. Но это по своей сути то же самое, что и рендеринг в EPS формат с помощью Mental Ray.
    Фестиваль 404
    44.62
    Company
    Share post

    Comments 55

      +16
      Интересно было почитать
        –48
        3D != 3Д
        3D = 3И
          +50
          Знаете почему минусуют?
          Вы перепутали оператор сравнения и присвоения!
            +6
            Странно, что у вас ник не кириллический.
              0
              Может тогда 3М?
                +4
                Что такое зд и зи?
                  0
                  3Д — неизвестно. 3И — три измерения.
                0
                Красотища!
                  +14
                  Хорошая статья, спасибо.
                  В пятом пункте — вопрос мнения. Отрендеренный конус смотрится круче на мой взгляд.
                    +1
                    Скорее вопрос задачи. Фотографическое качество на какой-нибудь кнопке зачастую не очень нужно, а нужна именно стилизация.
                    +5
                    Смотрел, смотрел, в результате, не понял зачем первоначально делать в 3d. Простите не дизайнер, но интересно.
                      +1
                      Не всякий дизайнер может правильно рисовать сложные объекты (а иногда даже и не очень сложные), на помощь приходит заготовка-реф (от слова reference), по которой можно работать, здесь основной момент – получение формы или контура и дальнейшей работы с ним.
                      –4
                      Хорошая статья, я только не понял, зачем внедрять 3d в процесс создания иконок? 3d ради 3d?

                      И еще, в статье написано, что нет вменяемых векторных рендереров, но что мешает отрендерить во всех популярных разрешениях или уже потом сделать ресайз?
                        +2
                        Потому что объемные модели в разы дешевле делать в 3D. Менять потом расположение, освещение, материалы. Все это проще именно в 3D.
                        +3
                        > 2. Обводка растрового рендера в AI (или наложение векторных шейпов в PS)
                        Я так делал однажды! :)
                        Вообще я в иконках совсем-совсем не спец, но пару раз приходилось соображать «нечто» на коленке. Для сейфа нарисовал общий каркас в Компасе (это оточественная САПР), а потом раскрасил в ФШ. Вручную, как ни старался, при всей аккуратности, форма получалась какая-то неествественная.
                        Он и сейчас не идеален, но в сравнении с ручным вариантом просто отлично.
                          +1
                          Имхо, 3d-иконки — это такой же тренд, как и глянцевые логотипы стартапов с отражениями, а значит он скоро может исчезнуть, либо выродиться во что-нибудь другое.

                          А вообще по делу, все зависит от самой иконки:

                          16x16 — 32x32 считаю что нужно рисовать руками;
                          Если объект сложный, а иконка крупная — тогда легче обрисовать рендер.
                          То что у вас в посте вообще не иконки, а иллюстрации скорее :)
                            –20
                            Тонко тролите, глупости пишите.
                              +3
                              Действительно статья интересная.
                              Жду продолжения.
                                +3
                                Вот человек — ему небезразлично!
                                А некоторые просто сидят и херачат в Иллюстраторе, как обезьяны, и хоть бы хны.
                                  +2
                                  Как некоторые непоняли — 3д в иконках для ускорения процесса. Простой пример: Набор из 30-40 одностильных иконок, нужно поменять ракурс и сделать увсех более мягкую тень.
                                  Решение в идеальном будущем- все иконки 3д — просто поворачиваем и рендерим. Решение сейчас — перерисовываем.
                                  Так вот если хотя бы основные объекты повернуть в Иллюстраторе — съэкономит уйму времени
                                    0
                                    cel-shading только в играх есть, через кастомные рендереры, которые широко не доступны, или он не решает проблемы?
                                      0
                                      какую именно проблему? Сэл-шейдинг можно сделать и Swift3D и Illustrate! и еще много какими рендерами. Да, его будет проще трассировать в вектор, так как в картинке не будет ни отражений, ни бликов и т.д.
                                        0
                                        точные цвета по крайней мере появятся

                                        для точных размеров объекта и точных углов перспективы наверное надо соответствующий плагин дорабатывать или новый создавать
                                        в принципе, объем работы не очень большой, может community поможет
                                          0
                                          да, я слышал о подобных оупенсорс разработках NPR рендеров с похожим функционалом, но найти так и не смог. либо проект уже сдох, либо я не там слышал)
                                      –4
                                      Я вот что еще думаю. Есть к примеру MacosX Dock, фактически это 3D объект, было бы нереально круто, если бы и иконки в нем были в 3D формате.
                                        –1
                                        Было бы уродливо. 3D в миниатюре смотрится страшно.
                                          0
                                          Док в ОСХ не 3д объект
                                          +4
                                          Проблема мне кажется надуманной — любой из примеров отрисовывается за 15 минут в фотошопе с нуля или по хреновой фотке. Ровно как и аргументация про изменение света, перебросить готовые блики/тени/поменять температуру освещения — ещё максимум пять минут, что может стать проблемой, если у нас 500 иконок, но тут и 3Д слабо поможет, как мне кажется. Более сложную иконку и рендерить придётся дольше, так что лёгкость примера тут, в общем, ни при чём.

                                          Тем более все эти танцы с бубнами займут тупо больше времени, отрендерить, отрисовать в илле, чёрт, мы не попали в пиксели, подправили в фотошопе. Проще векторами в фотошопе сразу набросать в нужный размер и подправить под нужный размер.

                                          Получается 3Д ради 3Д, как-то это не здорОво.
                                            +3
                                            Кстати, на картинке в примере про ручную обводку в Илле у автора явные проблем с чувством перспективы, о чём красноречиво свидетельствуют зелёные стрелки, в этом случае понятно зачем ему нужен трёхмерный исходник для отрисовки, но это какой-то паллиатив, правильное решение — тренировать чувство перспективы, а не пользоваться костылями.

                                            Простите за многословность =)
                                              +4
                                              Одна из главных «противностей» в иконках — что часто нужна особая перспектива :) И например нужно нарисовать автомобиль. Найти фотку в нужной перспективе с точностью до углов не получится. а вот быстренько найти готовую модель, правильно поставить и обвести в люстре намного проще и быстрее чем с нуля отрисовывать.
                                                +2
                                                В случае с машиной — возможно, но положа ногу на ногу — как часто нужна конкретная модель в конкретном ракурсе? Чаще всего нужна или «спортивная машина сбоку», или «внедорожник спереди» и напрячь гугл — занятие минуты, тем более фотки машин обычно есть в высоком качестве.

                                                Кстати, хинт, на сайтах многих автопроизводителей сейчас есть 360-view актуального модельного ряда =)

                                                А если это не машина, а скворешник, как в примере, то его и нарисовать можно в любой перспективе — коробка она и есть коробка.
                                              0
                                              finalRender + finalToon — для вектора ОК.
                                                0
                                                Спасибо, очень интересно.

                                                Также хотелось бы например видеть что-то типа туториала с примером работы в 3д.
                                                И с программами под Мас ос =)
                                                  +4
                                                  Вот, один умный человек (Vitsly) предлагает рендерить таким образом: bit.ly/99AaZS, цитирую: "… пиксель-аккурейт 3д :)"
                                                    0
                                                    спасибо, хороший вариант. Попробуем :)
                                                      0
                                                      Ничего так 3д-иконки, и смотрятся хорошо:


                                                        +3
                                                        аааа, оно шевелится, ааааа

                                                        А если серьезно, то куда их?
                                                      0
                                                      Есть такой графический пакет — Corel Designer technical suite, в комплекте с ней поставляется (начиная с версии X4) замечательная программа Deep Exploration. Так вот, эта программа открывает файлы популярных 3D и CAD программ, а затем может передать их в Corel Designer. А дальше уже дело техники — Corel Designer это почти CorelDraw, то есть векторизованную модель можно раскрашивать либо в самом Дизайнере, либо экспортировать в другие векторные форматы, например AI, SVG и т.д. и работать в привычных для вас векторных редакторах. Не знаю как этот совет подойдет вам, а я так и делаю.
                                                        –3
                                                        О Боже, это какой-то параллельный мир, неужели Корелом ещё кто-то пользуется? Начиная с CS3 в экстендед-версии фотошопа тоже есть поддержка 3Д, опять же проще быть надо )
                                                          0
                                                          Не вижу ничего плохого в Кореле, но если он все-таки Вам не нравится, как я уже писал можно из Дизайнера экспортировать в Люстровый формат, или СВГ и т.д.
                                                            0
                                                            Только у нас в стране могут предложить использовать пакет за 15 килорублей в подобных целях. Сенсей Оккам категорически против.
                                                              +1
                                                              А в Китае могут такое предложить? А в Мексике? А в Белоруссии? А в Индии? А в Тайланде? А в Украине? А в Польше?

                                                              Может уже хватит про «только у нас в стране»? Больше путешествуйте, меньше смотрите Задорнова.
                                                                0
                                                                Хорошо:
                                                                «Только у нас в стране и в других странах, где пиратстсво считается нормой жизни, а предложение заплатить деньги за инструмент, с помощью которого зарабатываешь на жизнь — нонсенс.» Так более политкорректно? Ничьих чувств не задел?
                                                                  0
                                                                  Менталитет мешает вам вникнуть в суть поста. 15 тысяч рублей это не так много за инструмент профессионального дизайнера. Плюс, многие не считают пиратство нормой. Вы попробуйте абстрагироваться от быта (который определяет сознание) и вникните лучше в тонкости 3d и вектора. Это полезнее.
                                                                    0
                                                                    15 тысяч за интсрумент, безусловно, не много. Я говорю о том, что пользоваться инструментом за 15к для этих целей мне кажется сродни забиванию гвоздей микроскопом. Кстати, этого чУдного пакета нет на маке, то есть многим придётся ещё и виртуальную машину корячить ради этого. Собственно, именно поэтому я вспомнил про Оккама и про экстендед версию фотошопа.
                                                                      0
                                                                      Ну для векторизации 3Д иконок Корел Дизайнер + Дееп Эксплорейшн наверное действительно как гвозди микроскопом забивать, но если например нужно сделать векторную иллюстрацию двигателя внутреннего сгорания в разрезе (или еще чего посложнее), то тут конечно альтернатив мало. Двигатель можно «порезать» еще в CAD-программе, а затем передать в Дизайнер уже в векторе. Ради такого удобства можно и с виртуальной машиной покорячиться; затраты времени меньше чем на отрисовку рендера, и даже меньше чем на доводку до ума результатов работы автоматических трассировщиков.
                                                                        0
                                                                        Я не спорю, что могут быть какие-то специфические задачи, которые лучше решать этим набором и тогда и 15 и 50 тысяч будет не жалко. Но к теме поста эти задачи имеют весьма опосредованное отношение =)
                                                                0
                                                                Что, уже приняли закон о запрете пользования триальным софтом? Все продукты Корел (Адобе, да еще много каких) можно вполне легально использовать в течении 30 дней. Да и к тому же программы эти далеко не любительские, с их помощью можно зарабатывать деньги вполне покрывающие стоимость такого софта. Посмотрите например на стоимость услуг того же Турбомилка.
                                                                  0
                                                                  Я планирую заниматься дизайном существенно дольше, чем 30 дней, да. Про зарабатывание денег — на конвертации иконок из 3д в вектор 15к, мне кажется, никогда не отобьются, хотя бы потому, что как я выше написал проще всё сразу сделать в фотошопе, а не париться с кучей программ, каждую из которых надо сначала купить, а потом вместо того, чтобы экономить время (а значит в потенциале больше зарабатывать) перебрасывать файл из одной в другую, парясь с различиями в интерфейсе разных производителей и тратить время на их запуск.

                                                                  А ирония про закон о запрете триала в силу кривости ГК-4 звучит как издевательство, ознакомьтесь на досуге.
                                                        • UFO just landed and posted this here
                                                            +2
                                                            Кстати, есть такой графический пакет — Photoshop. Там уже несколько лет есть работа с 3D. там достаточно возможностей чтобы использовать трёхмерные фигуры (которые конечно удобнее делать в другом редакторе), красить их по текстуре, бампу, делать свет и другие специфические штуки. Там можно легко попадать в пиксели. При этом тут же поверх использовать 2D слои чтобы сразу отретушировать.

                                                            Конечно, при этом пропускается фаза векторизации. Сразу из 3Д в растр. Но и цель то не в том чтобы получить именно векторное изображение, а в том чтобы получить качественную, масштабируемую картинку за быстрый срок. Всё это в этом способе есть.

                                                            Ну вот я потратил 12 минут, например:

                                                              +1
                                                              Полосочки, простите, как-то криво легли. А так да, интересно.
                                                                0
                                                                Вы молодец, что знаете такой графический пакет, как Photoshop. И знаете, что туда можно импортировать трехмерные объекты. А вы пробовали хоть раз это реально сделать с более-менее сложным объектом? И вопросу сразу отпадут :)
                                                                  0
                                                                  ох неее, Фотошопу ещё 3д пилить и пилить (хотя лучше бы вообще его бросить). Начиная с отсутсвия многих банальных функций для удобства рисования по модели (Bodypaint FTW!), заканчивая адовыми тормозами, если поликов больше 30-40к (курам на смех)
                                                                  Ну а на картинке и полосочки криво легки, и границы очень мыльные, и контрового света нет
                                                                  0
                                                                  Хм. Для «восстановления» перспективы с нужными углами есть замечательный инструмент в google sketch up, который позволяет ну практически любые углы задать.

                                                                  Ссылку на гугловский туториал дать не выйдет, там ajax, а вот на видеотуториалы их — пожалуйста.
                                                                  www.youtube.com/watch?v=fhzpqf7fywM&feature=player_embedded
                                                                  www.youtube.com/watch?v=fw4TDjjDYYE&feature=player_embedded

                                                                  Only users with full accounts can post comments. Log in, please.