СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Трехмерная графика

Категория: Информатика

Нажмите, чтобы узнать подробности

Просмотр содержимого документа
«Трехмерная графика»

Трехмерная графика

Трехмерная графика

Основы работы с трехмерной графикой Работать с графикой в принципе очень интересно, но работать с трехмерной - особенно интересно. И WPF предлагает нам удобный инструментарий для этого. Конечно, создавать суперсложные трехмерные сцены или игры на WPF - очень не простой процесс, и лучше для этого выбрать DirectX, OpenGl, либо специально заточенные под это фреймворки и движки на подобие Unity, Monogame и т.д.. Однако для относительно несложных в том числе бизнес-приложений трехмерные возможности WPF вполне сойдут.

Основы работы с трехмерной графикой

  • Работать с графикой в принципе очень интересно, но работать с трехмерной - особенно интересно. И WPF предлагает нам удобный инструментарий для этого. Конечно, создавать суперсложные трехмерные сцены или игры на WPF - очень не простой процесс, и лучше для этого выбрать DirectX, OpenGl, либо специально заточенные под это фреймворки и движки на подобие Unity, Monogame и т.д.. Однако для относительно несложных в том числе бизнес-приложений трехмерные возможности WPF вполне сойдут.
Для создания трехмерной сцены в приложении WPF требуется несколько компонентов: Окно просмотра (Viewport3D) , которое и содержит трехмерную сцену. Сам объект или геометрия . Камера , которая устанавливает, как сцена или объект будет отображаться. Освещение , которое и содержит трехмерную сцену. Материал , который вместе с освещением определяет внешний вид трехмерного объекта.
  • Для создания трехмерной сцены в приложении WPF требуется несколько компонентов:
  • Окно просмотра (Viewport3D) , которое и содержит трехмерную сцену.
  • Сам объект или геометрия .
  • Камера , которая устанавливает, как сцена или объект будет отображаться.
  • Освещение , которое и содержит трехмерную сцену.
  • Материал , который вместе с освещением определяет внешний вид трехмерного объекта.
Итак, контейнером верхнего уровня для трехмерной сцены является объект  Viewport3D . Формально это такой же объект со всеми свойствами, как кнопка или текстовое поле, которое мы можем позиционировать на форме как угодно. Для отображения трехмерной сцены в Viewport3D надо установить камеру с помощью свойства  Camera . Без камеры мы не сможем лицезреть трехмерные объекты.
  • Итак, контейнером верхнего уровня для трехмерной сцены является объект  Viewport3D . Формально это такой же объект со всеми свойствами, как кнопка или текстовое поле, которое мы можем позиционировать на форме как угодно.
  • Для отображения трехмерной сцены в Viewport3D надо установить камеру с помощью свойства  Camera . Без камеры мы не сможем лицезреть трехмерные объекты.
Для добавления самих трехмерных объектов в Viewport3D предусмотрено свойство  Children , в котором определяются один или несколько объектов  ModelVisual3D . А каждый из этих объектов ModelVisual3D, который добавляется в Viewport3D, имеет свойство  Content . Это свойство принимает в качестве значения один объект  GeometryModel3D , либо объект  Model3DGroup , который содержит группу объектов  GeometryModel3D , которые уже непосредственно устанавливают форму трехмерного объекта.
  • Для добавления самих трехмерных объектов в Viewport3D предусмотрено свойство  Children , в котором определяются один или несколько объектов  ModelVisual3D . А каждый из этих объектов ModelVisual3D, который добавляется в Viewport3D, имеет свойство  Content . Это свойство принимает в качестве значения один объект  GeometryModel3D , либо объект  Model3DGroup , который содержит группу объектов  GeometryModel3D , которые уже непосредственно устанавливают форму трехмерного объекта.
Рассмотрим использование Viewport3D и создание простейшей трехмерной фигуры:

Рассмотрим использование Viewport3D и создание простейшей трехмерной фигуры:

Фактически в этом коде мы можем выделить четыре узловые части: Определение камеры. Без камеры мы не сможем увидеть объект Определение источника света. Определение самого трехмерного объекта Определение материала (цвета) этого объекта
  • Фактически в этом коде мы можем выделить четыре узловые части:
  • Определение камеры. Без камеры мы не сможем увидеть объект
  • Определение источника света.
  • Определение самого трехмерного объекта
  • Определение материала (цвета) этого объекта
Нарисованный нами треугольник вряд ли можно назвать трехмерным, но на самом деле так и есть. Треугольник является примитивом, из которых состоят все остальные более сложные трехмерные элементы. Например, квадрат состоит из двух треугольников. Из нескольких квадратов состоит куб. Также можно сферу и прочие объекты сложить из треугольников. Поэтому важно отработать всю механику трехмерных объектов WPF сначала на треугольниках, а потом переходить к более сложным объектам.
  • Нарисованный нами треугольник вряд ли можно назвать трехмерным, но на самом деле так и есть. Треугольник является примитивом, из которых состоят все остальные более сложные трехмерные элементы. Например, квадрат состоит из двух треугольников. Из нескольких квадратов состоит куб. Также можно сферу и прочие объекты сложить из треугольников. Поэтому важно отработать всю механику трехмерных объектов WPF сначала на треугольниках, а потом переходить к более сложным объектам.
Среди свойств Viewport3D следует отметить свойство  ClipToBounds , которое по умолчанию равно True. Из-за этого содержимое Viewport3D растягивается по горизонтали и вертикали , и если какая-то часть выходит за границы Viewport3D, то ее не видно. Если же свойство ClipToBounds, то трехмерный объект накладыватся поверх смежных элементов.
  • Среди свойств Viewport3D следует отметить свойство  ClipToBounds , которое по умолчанию равно True. Из-за этого содержимое Viewport3D растягивается по горизонтали и вертикали , и если какая-то часть выходит за границы Viewport3D, то ее не видно. Если же свойство ClipToBounds, то трехмерный объект накладыватся поверх смежных элементов.
Данный эффект можно увидеть, если, например, задать отступ для Viewport3D:
  • Данный эффект можно увидеть, если, например, задать отступ для Viewport3D:
Определение трехмерного объекта Для создания трехмерного объекта мы можем использовать различные виды элементов:

Определение трехмерного объекта

  • Для создания трехмерного объекта мы можем использовать различные виды элементов:
Объект  ModelVisual3D  предсталяет визуализируемый трехмерный объект. Для его установки используется свойство  Content . В качестве содержимого этого свойства устанавливается элемент  GeometryModel3D . Этот элемент объединяет два аспекта: геометрию трехмерного объекта и его материал. Для определения материала применяется свойство  Material , а для установки геометрии элемента - свойство  Geometry .
  • Объект  ModelVisual3D  предсталяет визуализируемый трехмерный объект. Для его установки используется свойство  Content .
  • В качестве содержимого этого свойства устанавливается элемент  GeometryModel3D . Этот элемент объединяет два аспекта: геометрию трехмерного объекта и его материал. Для определения материала применяется свойство  Material , а для установки геометрии элемента - свойство  Geometry .
В качестве геометрии устанавливается элемент  MeshGeometry3D , который преставляет собой  меш  - один из фундаментальных концептов разработки трехмерных объектов. Для определения самого трехмерного объекта у MeshGeometry3D доступны следующие свойства: Positions : определяет координаты вершин треугольников. В нашем случае фигура представляет один треугольник, поэтому для его определения потребуется всего три точки. Для каждой точки определяется три координаты x, y, z. TriangleIndices : определяет треугольник, принимая набор верши. Например, TriangleIndices=
  • В качестве геометрии устанавливается элемент  MeshGeometry3D , который преставляет собой  меш  - один из фундаментальных концептов разработки трехмерных объектов. Для определения самого трехмерного объекта у MeshGeometry3D доступны следующие свойства:
  • Positions : определяет координаты вершин треугольников. В нашем случае фигура представляет один треугольник, поэтому для его определения потребуется всего три точки. Для каждой точки определяется три координаты x, y, z.
  • TriangleIndices : определяет треугольник, принимая набор верши. Например, TriangleIndices="0,2,1" - треугольник строиться от первой вершины, далее к третьей и далее ко второй, которая соединяется с первой.
  • Normals : векторы нормалей, которые применяются для вычисления освещенности
  • TextureCoordinates : определяет, как двухмерная текстура будет накладываться на трехмерный объект
Затем с помощью свойства TriangleIndices мы устанавливаем, в какой последовательности эти вершины будут соединены линиями. В данном случае мы указываем, что сначала мы соединыем первую и третью вершины (точку -0.5,0,0 с точкой 0.5,0,0), потом от третьей вершины проводим линию до второй (до точки 0,0.5,0). Почему мы не написали TriangleIndices=
  • Затем с помощью свойства TriangleIndices мы устанавливаем, в какой последовательности эти вершины будут соединены линиями. В данном случае мы указываем, что сначала мы соединыем первую и третью вершины (точку -0.5,0,0 с точкой 0.5,0,0), потом от третьей вершины проводим линию до второй (до точки 0,0.5,0). Почему мы не написали TriangleIndices="0,1,2", что вроде было бы более логично? В WPF действует правило, согласно которому мы должны перечислять точки против часовой стрелки относительно оси Z, поэтому, если бы мы написали 0,1,2, то у нас бы ничего не получилось.
  • При этом надо отметить, что ось Z направлена на нас, то есть положительные значения после условного нуля будут ближе к нам, а отрицательные - дальше от нас.
Материалы Кроме геометрии в объекте GeometryModel3D мы еще должны определить материал. Материалы бывают нескольких видов: DiffuseMaterial . Создает матовую поверхность объекта, на которой свет распространен равномерно во всех направлениях. Яркость же объекта зависит от угла, под которым свет падает на поверхность. SpecularMaterial . Имитирует блестящую поверхность, отражая свет зеркально в противоположном направлении. Зачастую он используется для наложения бликов на темной поверхности, к которой ранее применялся DiffuseMaterial

Материалы

  • Кроме геометрии в объекте GeometryModel3D мы еще должны определить материал. Материалы бывают нескольких видов:
  • DiffuseMaterial . Создает матовую поверхность объекта, на которой свет распространен равномерно во всех направлениях. Яркость же объекта зависит от угла, под которым свет падает на поверхность.
  • SpecularMaterial . Имитирует блестящую поверхность, отражая свет зеркально в противоположном направлении. Зачастую он используется для наложения бликов на темной поверхности, к которой ранее применялся DiffuseMaterial
MaterialGroup . Создает комбинацию нескольких материалов. Кроме свойства Material в объекте GeometryModel3D определено свойство BackMaterial, которое настраивает внешний вид также с помощью материалов для задней поверхности предмета. Но поскольку в данном случае нас задняя поверхность треугольника не интересует, мы не используем это свойство. Но оно в принципе аналогично свойству Material.
  • MaterialGroup . Создает комбинацию нескольких материалов.
  • Кроме свойства Material в объекте GeometryModel3D определено свойство BackMaterial, которое настраивает внешний вид также с помощью материалов для задней поверхности предмета. Но поскольку в данном случае нас задняя поверхность треугольника не интересует, мы не используем это свойство. Но оно в принципе аналогично свойству Material.
Освещение Установив геометрию и настроив внешний вид объекта, мы можем задать освещение. Без освещения мы бы не могли увидеть объект, кроме того, освещение также влияет на внешний вид, а именно на цвет объекта, наравне с материалами. В WPF система освещения призвана имитировать свет в окружающем нас мире. В то же время эта имитация все-таки далека от реальной. Так, свет отраженный от одного объекта, не будет виден на другом объекте. Также объекты не обрасывают на другие объекты тени. Свет в WPF определяется следующим образом: сначала вычисляется освещенность для отдельной вершины треугольника, а затем эта освещенность интерполируется на весь треугольник, сглаживаясь с освещенностью двух других вершин.

Освещение

  • Установив геометрию и настроив внешний вид объекта, мы можем задать освещение. Без освещения мы бы не могли увидеть объект, кроме того, освещение также влияет на внешний вид, а именно на цвет объекта, наравне с материалами. В WPF система освещения призвана имитировать свет в окружающем нас мире. В то же время эта имитация все-таки далека от реальной. Так, свет отраженный от одного объекта, не будет виден на другом объекте. Также объекты не обрасывают на другие объекты тени.
  • Свет в WPF определяется следующим образом: сначала вычисляется освещенность для отдельной вершины треугольника, а затем эта освещенность интерполируется на весь треугольник, сглаживаясь с освещенностью двух других вершин.
Для определения света в WPF используется базовый класс Light, но в реальности мы будем работать с производными от него классами: DirectionalLight : создает прямые параллельные лучи, которые идут в направлении, указанном в свойстве Direction. В качестве примера подобного источника света можно привести солнце. AmbientLight : создает источник рассеянного света. Свет исходит со всех сторон и равномерно покрывает поверхность объекта PointLight : создает точечный источник света. SpotLight : создает источник, который испускает свет на трехмерную сцену по конусу.
  • Для определения света в WPF используется базовый класс Light, но в реальности мы будем работать с производными от него классами:
  • DirectionalLight : создает прямые параллельные лучи, которые идут в направлении, указанном в свойстве Direction. В качестве примера подобного источника света можно привести солнце.
  • AmbientLight : создает источник рассеянного света. Свет исходит со всех сторон и равномерно покрывает поверхность объекта
  • PointLight : создает точечный источник света.
  • SpotLight : создает источник, который испускает свет на трехмерную сцену по конусу.
DirectionalLight

DirectionalLight

AmbientLight

AmbientLight

PointLight

PointLight

SpotLight

SpotLight

Свойства InnerConeAngle и OuterConeAngle определяют форму конуса, используемого для определения освещенности. Если эти свойства равны, то фактически мы получаем стандартный точечный свет PointLight. А свойства Position и Direction также указывают соответственно на положение источника света и направление света.
  • Свойства InnerConeAngle и OuterConeAngle определяют форму конуса, используемого для определения освещенности. Если эти свойства равны, то фактически мы получаем стандартный точечный свет PointLight. А свойства Position и Direction также указывают соответственно на положение источника света и направление света.
Камера От настроек камеры зависит, как трехмерная сцена будет отображаться на экране.

Камера

  • От настроек камеры зависит, как трехмерная сцена будет отображаться на экране.
В WPF имеются три типа типа камер: PerspectiveCamera . Создает перспективную проекцию трехмерной сцены. В итоге те предметы, которые находятся дальше, выглядят меньше. А те, которые ближе, выглядят больше - в принципе как и в реальной жизни. OrthographicCamera . Создает ортогональную проекцию сцены, в которой не применяется перспектива. И предметы сохраняют свои размеры. MatrixCamera . Позволяет задать матрицу преобразования трехмерной сцены в двухмерное содержимое для вывода на экран.
  • В WPF имеются три типа типа камер:
  • PerspectiveCamera . Создает перспективную проекцию трехмерной сцены. В итоге те предметы, которые находятся дальше, выглядят меньше. А те, которые ближе, выглядят больше - в принципе как и в реальной жизни.
  • OrthographicCamera . Создает ортогональную проекцию сцены, в которой не применяется перспектива. И предметы сохраняют свои размеры.
  • MatrixCamera . Позволяет задать матрицу преобразования трехмерной сцены в двухмерное содержимое для вывода на экран.
NearPlaneDistance . Это свойство задает переднюю плоскость отсечения. А все та часть сцены, которая находится к камере ближе значения этого свойства, отображаться не будет. По умолчанию имеет значение 0.125 FarPlaneDistance . Это свойство задает заднюю плоскость отсечения. А все та часть сцены, которая находится к камере дальше значения этого свойства, отображаться не будет. По умолчанию имеет значение Double.PositiveInfinity Кроме этих свойств камеры имеют еще свойство, которое задает ширину обзора или угол обзора. Только для различных камер оно называется по разному. Для PerspectiveCamera это свойство  FieldOfView . Для OrthographicCamera это свойство  Width . Чем больше значение этого свойства, тем угол обзора камеры.
  • NearPlaneDistance . Это свойство задает переднюю плоскость отсечения. А все та часть сцены, которая находится к камере ближе значения этого свойства, отображаться не будет. По умолчанию имеет значение 0.125
  • FarPlaneDistance . Это свойство задает заднюю плоскость отсечения. А все та часть сцены, которая находится к камере дальше значения этого свойства, отображаться не будет. По умолчанию имеет значение Double.PositiveInfinity
  • Кроме этих свойств камеры имеют еще свойство, которое задает ширину обзора или угол обзора. Только для различных камер оно называется по разному. Для PerspectiveCamera это свойство  FieldOfView . Для OrthographicCamera это свойство  Width . Чем больше значение этого свойства, тем угол обзора камеры.
Трехмерные трансформации

Трехмерные трансформации

Viewport2DVisual3D Элемент Viewport2DVisual3D позволяет помещать на поверхности трехмерного объекта двухмерный интерактивный контент, например, кнопки или текстовые поля. При этом данный интерактивный контент может реагировать на действия пользователя. Например, кнопка может реагировать на нажатия.

Viewport2DVisual3D

  • Элемент Viewport2DVisual3D позволяет помещать на поверхности трехмерного объекта двухмерный интерактивный контент, например, кнопки или текстовые поля. При этом данный интерактивный контент может реагировать на действия пользователя. Например, кнопка может реагировать на нажатия.
У элемента Viewport2DVisual3D можно выделить следующие свойства: Geometry : определяет меш, который устанавливает поверхность трехмерного объекта Visual : определяет двухмерные элементы, которые будут помещаться на трехмерный объект Material : материал, используемый для рендеринга двухмерных элементов Transform : трасформация, применяемая к 3D-объекту
  • У элемента Viewport2DVisual3D можно выделить следующие свойства:
  • Geometry : определяет меш, который устанавливает поверхность трехмерного объекта
  • Visual : определяет двухмерные элементы, которые будут помещаться на трехмерный объект
  • Material : материал, используемый для рендеринга двухмерных элементов
  • Transform : трасформация, применяемая к 3D-объекту