Как сделать псевдо 3d

Добавил пользователь Morpheus
Обновлено: 04.10.2024

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

Активный участник

diwian, вы имеете ввиду отрисовка такого плана объектов в векторе? ну по-моему слишком заморочено. смотрите, то что можно выполнить в 2Д это да, но как это сделать чтобы не потерять в качестве. я вижу это только с помощью применения искажения а потом по готовой сетке заново переносить все элементы слой за слоем. возможно есть более просто способ? специализированные программы типа Sidewalk3D делают искажения быстро с учетом всех параметров, но искажение! согласитесь, я ведь не зря поднял эту тему именно для случая когда мы находимся уже в 3Д пространстве, как с 3д максом.

Андрей, это конечно можно, но суть вопроса в том, что с трудом верится, что в 3Д среде нет никаких средств для такой задачи, кроме как проецирование 2Д. ну как то непонятно))

=TARAS_=

Знаток

с трудом верится, что в 3Д среде нет никаких средств для такой задачи, кроме как проецирование 2Д. ну как то непонятно))

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

diwian diwian

Мастер

Активный участник

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

=TARAS_=

Знаток

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

diwian diwian

Мастер

Единственный выход из положения это вывод изображения в векторный формат ,но вот с этим как раз и возникает вопрос.Создать саму проекцию можно, да и "нанести" её на поверхность тоже не сложно.Вопрос трассировки в векторный формат пока не реализован ни в одной программе ( в том качестве как хотелось бы ).Всё равно приходиться "доводить" всё в ручную. В AI вроде не плохо получается.Но вообще было бы интересно, если у кого нибудь это получилось качественно.

Активный участник

diwian, по-моему в плагине Illustrate! есть такая возможность.

Уважаемый Тарас! Прочтите вопрос еще раз! Кто хочет сделать без проекции? я не хочу растр тянуть. я хочу чтобы при виде из камеры точки контура объекта, который мы планируем проецировать, автоматом проецировались на плэйн и внутри этого контура который уже спроецирован просчитывалось искаженное изображение объекта! но ПРОСЧИТЫВАЛОСЬ а не ТЯНУЛОСЬ В ФОТОШОПЕ! в следствие чего края будут ровные, изображение будет четкое и все такое. Тарас, что я непонятного объясняю?)
п.с. возьмите создайте плэйн, на нам цилиндр, и под углом поставите камеру и и нарисуйте сколь угодно много линий перпендикулярных плоскости камеры, пересекающих объект и плэйн, касательные к краям объекта на плэйне создадут форму цилиндра с учетом перспективы (только касательные к тем точкам, которые видны из камеры!), ну а внутри должно просчитываться изображение самого объекта. думаю понятнее не придумаешь.

Эта статья показывает, как использовать преобразования для создания и анимирования 3D объектов, используя только CSS .

CSS 3D преобразования быстро становятся признанным способом добавления глубины и интерактивности в веб-проекты.

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

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

Зачем использовать CSS?

Есть огромное количество способов создать 3D графику в HTML. На основе JS , Canvas, SVG , доступны даже решения на основе WebGL , и все они имеют свои достоинства, но есть еще и CSS .

Решение на базе CSS обходится без изображений и способно использовать графический процессор для ускорения обработки графики.

При этом не требуются плагины, и CSS может жить вне стен canvas на вашей странице:

Установка свойства perspective может произвести впечатляющий эффект

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

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

Не забудьте включить префиксы для Mozilla , Opera , MS , а также версии без префиксов в случае необходимости. Полные версии кода CSS (с префиксами) находятся в файлах проекта .

Основы: создание 3D куба

Для начала мы построим базовый 3D куб, разместив и анимировав его в 3D пространстве. Сначала напишем код HTML, который будет представлять части 3D куба:

Я задействовал элемент figure , но можно было использовать div , span или любой другой тип элемента на ваше усмотрение.

В этом HTML коде можно выделить две главные части: сцена, на которой все размещается, и куб, помещенный на сцену:

Слева – элемент div без применения преобразования. Справа – фигура повернута в 3D пространстве

Подготовка сцены

Первая вещь, которую необходимо сделать при построении 3D модели, это создать элемент, выступающий в качестве сцены.

Задаем глубину сцены с помощью CSS свойства perspective :

Задание большей величины для свойства perspective создает менее заметный 3D эффект, меньшей – делает его более выраженным.

Значение в 800 пикселей или около того подходит, как правило, для большинства маленьких объектов, но если вы создаете что-то большее (например, небоскреб) вы можете использовать меньшее значение для создания более выраженных углов.

При задании свойства perspective необходимо также установить perspective-origin (свойство, определяющее положение виртуальной камеры, обращенной на сцену), позиционируемое на осях X и Y.

Создание форм: пространственное мышление

Создание 3D форм при помощи HTML и CSS включает в себя представление объекта в виде набора двухмерных плоскостей.

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

Для начала придадим элементам figure форму и стиль:

На следующем шаге нужно указать, где они должны располагаться в 3D пространстве.

Время преобразований

Размещаем фигуры при помощи свойства transform . Преобразования в CSS состоят из последовательности инструкций, указывающих форме, как перемещаться, поворачиваться, наклоняться и изменяться в масштабе. Инструкции читают слева направо.

Обратите внимание на использование свойства transform-style : когда оно установлено в значении preserve-3d , преобразования над сторонами куба будут осуществляться в их собственном 3D пространстве.

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

Свойство transform-origin задает точку в X, Y, Z координатах, которая выполняет роль центра вращения (это середина передней части элемента):

Плоские элементы HTML в 3D пространстве

Передняя фигура смещена на 150 пикселей вперед, задняя – перевернута на 180 градусов и сдвинута на 150 пикселей к задней части сцены.

Порядок здесь имеет значение – правила преобразования применяются слева направо. Для второго преобразования задано положительное значение: после поворота передняя сторона обращена к задней части сцены.

Как и ранее порядок правил преобразований имеет значение. Если элемент повернут, его Z-ось будет находиться под другим углом, что повлияет на любое другое преобразование.

Теперь разместим другие стороны:

Теперь у нас полностью есть куб, расположенный на 3D сцене.

Двигай, двигай

Давайте повернем наше 3D творение на сцене с помощью CSS анимаций:

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

Анимация начинается с нулевого поворота и завершается полным поворотом элемента вокруг оси Y.

Примените это набор ключевых кадров со свойством animation :

Анимация поворота, примененная здесь, рассчитана на 10 секунд, повторяется бесконечно с постоянной линейной скоростью:

Готовый куб, созданный из шести HTML элементов

Затенение

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

Псевдо-селекторы – это что-то вроде дополнительных HTML элементов, которые можно вставить до и после содержимого элемента.

Они предоставляют нам дополнительные возможности и могут содержать градиенты, цвета или даже текст. Таким образом, мы можем анимировать затемнение на каждой стороне куба.

Нам нужно два градиента: один – для случая, когда поверхность поворачивается налево, другой – для поворота направо:

Элементы before и after в этом примере являются псевдо-селекторами, которые могут быть стилизованы и анимированы.

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

Применяем анимацию к каждому псевдо-селектору для определения времени отображения/скрытия этих градиентов:

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

Ниже приведены ключевые кадры, примененные к задней стороне:

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

Вершина и основание

Следующий шаг – вершина и основание куба. Для вершины нужен градиент, который выглядит так, как будто ничего не движется.

Добавьте градиент к элементу top и поверните его в противоположном направлении:

Основание куба не будет видно, но мы можем использовать его, чтобы добавить атрибут box-shadow :

Затенение добавляет чувство глубины в противоположность плоской сцене

Больше, чем просто цвет

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

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

Затенение, которое мы добавили раннее, все еще присутствует здесь, придавая сторонам куба более сильное ощущение глубины. Этот эффект будет работать для любого контента элемента figure .

Отражения

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

Куб с твитами

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

Настройка HTML

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

Используем следующие две текстуры с кубом:

Добавляем содержимое

Элемент figure с классом right должен содержать что-то вроде этого:

Добавление фоновых изображений к HTML элементам придает сцене более презентабельный вид

Размещаем твит на кубе

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

Мы можем стилизовать виджет и задать ширину, высоту и некоторые данные-значения в коде. Замените YOUR_WIDGET_ID на идентификатор, предоставленный в вашем коде для вставки:

Трансформации

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

Добавим несколько переходов к затенению псевдо-селекторов:

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

Псевдо-селектор right:after скрыт, так как мы не будем поворачивать куб на столько, чтобы он потребовался. Лицевой стороне придано затемнение, тем не менее, она светлее правой стороны, когда та поворачивается вперед:

Поворот 3D куба вокруг оси Y

Анимация при наведении

При наведении курсора куб поворачивается на 50 градусов влево. Это преобразование производится в виде плавного перехода путем применения свойства transition .

Одновременно с этим, непрозрачность псевдо-селекторов на передней и правой сторонах куба переходит в значение 0.2.

Результатом всех этих переходов является красивый эффект 3D поворота, позволяющий скрыть дополнительный контент – и показать его, если пользователь наведет курсор на куб.

Полный код HTML и CSS можно найти в файлах проекта:

Создание объектов из плоских HTML элементов имеет ряд ограничений: любой объект, который вы создаете, необходимо сделать путем комбинирования плоских форм, чтобы получить конечный результат.

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

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

Производительность и тестирование

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

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

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

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

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

В данном случае мы воспользуемся скриптом Modernizr для того, чтобы выяснить поддерживаются ли 3D преобразования, и если нет, отобразим статичное изображение.

Для начала подключите Modernizr в заголовке HTML:

При загрузке в тег будет вставлен класс csstransforms3d . Затем мы воспользуемся этой информацией для отображения или скрытия резервного варианта:

Текстуры, примененные к сторонам 3D куба с твитами

Следующие шаги

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

Можно создать эффект 3D перехода при наведении на логотип – броский способ продемонстрировать новый продукт – или использовать данные подходы для представления и навигации в комплексных данных. Использование Z оси в дизайне открывает двери для многих интересных и веселых идей.

Рисование на форме псевдо графика
Здравствуйте. Есть задача следующего характера. На вход программы подаётся множество координат.

Псевдо 3D
Здравствуйте. Начал изучение ActionScript 3.0. Более-менее разобрался с 2D играми, получил даже.

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

псевдо AI гонки
Ребята, подкиньте идею как сделать псевдо-ии для бота в гонках? Из данных есть только массив точек.

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

Что такое псевдо-стерео фотография

Псевдо-стерео фотография — это кодированная последовательность исходных ракурсов, полученных с помощью искусственного создания ненулевого параллакса для одного и более фотослоёв. Фотослоями в нашем случае будут являться фотографии, а так же наложенные на них рамки и другие фото-объекты. Каким же образом это становится возможным?

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

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

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

Этим эффектом можно виртуозно пользоваться, создавая целые шедевры из последовательности разноудалённых слоёв. За слой с нулевым параллаксом удобно брать фотографию. Другие слои, состоящие из фона, на который накладывается фотография, рамки и прочих элементов, удобно объединять в так называемые шаблоны — многослойные изображения, хранимые обычно в формате Photohop .psd.

Теперь же давайте приступим к самому интересному, к практике.

Изготовление псевдо-стерео фотографии.

Продолжим практическое изучение возможностей 3DMasterKit, попробовав создать псевдо-стерео фотографию. В общем случае для создания стереоизображения из обычной фотографии нам потребуется выполнить следующие этапы:

запустить программу 3DMasterKit, открыть шаблон и фотографию;
расположить слои желаемым образом;
дать команду на генерацию последовательности стерео-ракурсов;
закодировать стереофотографию, любого типа: растровую, анаглифную и т.д.

Для работы нам потребуется одна цифровая фотография (Рис. 1) и шаблон, состоящий из нескольких слоёв. В качестве шаблона возьмем один из psd-файлов, входящих в набор 3DMasterKit (Рис. 2). Шаблон можно создать и самостоятельно в программе Photoshop, а затем загрузить и использовать в программе 3DMasterKit.

Рис. 1 Исходная фотография Рис. 2 Шаблон

Начинаем работу с запуска программы 3DMasterKit и загрузки исходных изображений в качестве слоёв: выберем пункт меню Проект|Добавить слои (комбинация клавиш Shift+Ctrl+O).

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

Рис. 3 Диалог открытия файлов

После нажатия кнопки Открыть, фотография и слои шаблона будут показаны в списке слоёв, находящемся в правой части экрана (Рис. 4).

Рис. 4 Список слоёв

Рис. 5 — фотография меньше, чем шаблон

Такая ситуация может возникнуть из-за того, что у фотографии и у шаблона разные разрешения. Необходимо отрегулировать размеры фотографии таким образом, чтобы она пропорционально входила в шаблон. Для этого выберем пункт меню Правка|Трансформация|Масштабирование (комбинация клавиш Alt+S). После этого, вокруг текущего изображения сразу же появится бегущая рамка (или, как ещё её называют, муравьиная дорожка). Нажмём левую кнопку мыши в любом месте экрана, и, не отпуская её, отрегулируем новые пропорции масштабируемого изображения. Только после этого отпускаем левую кнопку мыши. Масштабирование проводится относительно центра изображения. Если вас не устраивает масштаб — повторите этот этап.

Теперь сместим слой с фотографией ближе к центру шаблона. Войдём в режим перемещения — для чего просто щёлкнем правой кнопкой мыши в любом месте экрана. Нажимаем на фотографии левой кнопкой мыши и тащим к нужному месту, после чего отпускаем кнопку.

Таким же образом можно изменять положение любого слоя. Достаточно выделить его в списке и переместить в нужную позицию. Команда Правка|Трансформация|Поворот (комбинация клавиш Alt+R) позволяет повернуть слой на произвольный угол. Выход из режима масштабирования или поворота — клавиша Esc или щелчок правой кнопкой мыши.

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

Результат редактирования фотографии и шаблона показан на Рис. 6. На тот случай, если вам захочется сохранить достигнутый результат, это можно сделать выбрав из меню команду Проект|Сохранить…, или нажав Ctrl+S, и задать имя файла.

Рис6. Подготовленный к генерации проект

Этап подготовки проекта закончен. Теперь можно приступить к самому процессу генерации последовательности кодируемых ракурсов. Для этого выберем пункт меню Правка|Слои|Генерировать псевдо-стерео… (или нажмём комбинацию клавиш Alt+G). На экране появится окно настроек параметров генерации псевдо-стерео последовательности ракурсов (Рис. 7).

Рис7. Окно настроек параметров генерации

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

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

Посчитать оптимальное количество кадров при создании растровой стерофотографии можно по следующей формуле:

Nкадров = Res / L

где Nкадров — количество генерируемых кадров, Res — разрешение принтера (в точках на дюйм dpi), а L — количество линз на дюйм (lpi) для лентикулярных растров. Результатов расчётов округляется до целых и записывается в четвёртый параметр. Обычно это 10-12 кадров.

Мы видим, что у всех элементов в списке слоёв убралась галочка справа — они теперь не отображаются на экран в главном окне.

Если вам по каким-то причинам не понравился набор генерированных изображений (например, была допущена ошибка в параметрах), то можно отменить проведённую генерацию, нажав Ctrl+Z, или выбрав из меню пункт Правка|Отменить, или же выделить не нужные кадры и нажать кнопку Del.

Работа со списками в программе 3DMasterKit похожа на работу со списками Windows — групповое выделение мышью, с использованием клавиши Shift, и выборочное выделение, с нажатой клавишей Ctrl. Используя эти маленькие хитрости, можно значительно ускорить работу со списками. Сделать все слои невидимыми можно так: выбрать крайний слой в списке, затем нажать клавишу Shift и щёлкнуть мышкой по галочке справа слоя, находящегося с другого края

Быстро оценить полученный стереоэффект можно, переключившись в анаглифный режим просмотра и используя цветные очки для просмотра (Рис. 9).

Рис. 9 Анаглифный режим просмотра серии кадров

Рис. 10 Стереопара для прямого просмотра (параллельный метод)

Можно сохранить сгенерированную последовательность кадров на диск, выбрав пункт меню Проект|Сохранить генерированные изображения… (комбинация клавиш Shift+Ctrl+S).

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

Например, на Рис. 11 показано создание анаглифной стереофотографии.

Рис. 11 Анаглифная стереофотография

Рис. 12 Кодированное изображение для растровой стереофотографии

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

Читайте также: