Трехмерные графические преобразования

53

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

Напомним, что технология WPF ограничивается только пределами Windows, и поэтому ее прикладной интерфейс API может опираться на конкретные графические службы этой операционной системы, в том числе на Microsoft DirectX. Благодаря этому платформа WPF способна поддерживать полноценную трехмерную среду. С другой стороны, технология Silverlight является межплатформенной, а ее прикладной интерфейс API опирается на функциональные возможности браузеров. Поэтому в прикладном интерфейсе Silverlight API не поддерживается полноценная трехмерная среда, а вместо этого применяется ее "облегченный" вариант, называемый трехмерной графикой в перспективе.

В силу разной поддержки трехмерной графики на уровне упомянутых выше прикладных интерфейсов API в Expression Blend предоставляются отдельные инструменты для работы с трехмерной графикой для каждой из платформ WPF и Silverlight. Поэтому в представленном ниже примере будут рассмотрены основы работы с трехмерной графикой в контексте проекта WPF. А о поддержке трехмерной графики в Silverlight речь пойдет в следующей статье.

В Expression Blend отсутствует возможность формирования полноценной трехмерной модели с помощью встроенных в эту среду инструментов. Но в ней все же имеются средства для импорта модели трехмерного объекта, сформированной специально предназначенными для этой цели сторонними инструментальными средствами. Прежде чем рассматривать одно из таких средств (ZAM 3D), обратимся к примеру, наглядно показывающему, каким образом двухмерное изображение накладывается на трехмерную плоскость, чтобы затем манипулировать им на монтажном столе посредством кода.

Отмечу, что создание трехмерных объектов, анимаций и трансформаций на платформе WPF подробно рассматривалось в данном разделе http://professorweb.ru/my/WPF/graphics_and_animation/level12/graph_animation_index.php.

Создайте новый проект приложения WPF и назовите его wpf3DExample. Затем найдите на своем компьютере файл изображения, который хотели бы перенести в трехмерную систему координат. Найдя подходящее изображение, откройте панель Projects, щелкните правой кнопкой мыши на имени своего проекта и выберите команду Add Existing Item из всплывающего контекстного меню и выберите файл:

Добавление изображения в текущий проект

А теперь перетащите мышью файл изображения из его узла в иерархическом представлении на панели Projects непосредственно на монтажный стол. Измените размеры изображения таким образом, чтобы оно заняло верхнюю половину окна приложения WPF. Прежде чем двигаться дальше, просмотрите разметку, сформированную в коде XAML, обратив внимание на автоматически добавленный элемент управления типа Image (Изображение), в свойстве Source (Источник) которого установлено значение, указывающее на файл выбранного вами изображения, а иначе — на местоположение встроенных данных изображения, как показано ниже:

<Image Margin="15,50,17,58" Source="0124.jpg" Stretch="Fill"/>

Выберите сначала элемент управления Image на панели Objects and Timline, а затем команду Tools --> Make Image 3D из главного меню Expression Blend IDE. На монтажном столе вы не заметите никаких особых изменений, но если просмотрите разметку, сформированную в коде XAML, то обнаружите, что простой некогда элемент управления типа Image полностью преобразован в более сложный объект типа Viewport3D, часть которого составляет новый объект типа ImageBrush, построенный из файла исходного изображения.

Объем кода XAML, представляющего объект Viewport3D, слишком велик, чтобы приводить его здесь. Но если вы проанализируете содержимое панели Object and Timeline, то заметите, что объект Viewport 3D состоит из четырех подчиненных элементов: Camera, ModelContainer, AmbientContainer и DirectionalContainer. Разверните узел Camera, выберите подчиненный узел [PerspectiveCamera] и воспользуйтесь панелью Properties, чтобы присвоить этому объекту имя my3DCamera:

Иерархическая структура элемента Viewport3D

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

Camera

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

ModelContainer

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

AmbientContainer

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

DirectionalContainer

Позволяет добавлять, удалять и манипулировать "материалами", определяющими направление света, проецируемого из внешнего источника на трехмерное изображение

Выбрав объект типа Viewport3D на панели Objects and Timeline, активизируйте инструмент Camera Orbit (Вращение камеры по кругу) на панели Tools, как показало на рисунке:

Camera Orbit

Щелкнув на инструменте Camera Orbit, поместите курсор мыши на выбранном объекте типа Viewport3d и попробуйте изменить положение осей X, Y, Z рассматриваемого здесь графического элемента. С этой целью щелкните левой кнопкой мыши, перемещая ее курсор:

Изменение ориентации видового окна в трехмерном пространстве

Инструмент Camera Orbit полезен в том случае, если требуется быстро преобразовать данные в трехмерном пространстве, используя приблизительные размеры. Когда же требуется большая точность, следует обратиться к свойствам камеры, доступным в области Camera на панели Properties. С этой целью выберите сначала узел Camera, подчиненный узлу Viewport3D. на панели Objects and Timeline (напомним, что этот объект был переименован в my3DCamera). Как только вы выберете этот графический элемент он появится в области Camera на панели Properties:

Свойства объекта Camera

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

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

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

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

Помимо инструмента Camera Orbit и редактора камеры, непосредственно на монтажном столе можно также выбрать инструмент, изменяющий положение графических объектов в трехмерном пространстве. Для того чтобы активизировать этот инструмент, найдите и выберите узел Model ниже узла ModelContainer.

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

С помощью двух оставшихся составляющих объекта типа Viewport3D (AmbientContainer и DirectionalContainer) можно определить порядок визуализации графического содержимого видового окна с применением различных световых эффектов. Общий свет (элемент AmbientContainer) служит для освещения видового окна со всех сторон. Этим светом можно равномерно осветить все части объектов.

Если выбрать подчиненный узел Ambient на панели Objects and Timeline, то доступными станут свойства общего света в области Light на панели Properties. По умолчанию общий свет имеет нейтрально-серую окраску, но ее можно изменить, выбрав другой цвет в стандартном селекторе:

Изменение свойств общего света

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

Изменение местоположения источника света
Пройди тесты
Лучший чат для C# программистов