Реализация 3D-графики с помощью рисования API

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

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

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

Методы использования 3D

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

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

Это наиболее простой способ, если у вас есть источники. Программы типа Electric Rain's Swift 3D посвящены созданию векторной графики для фильмов Flash. Electric Rain также производит надстройки для экспорта фильмов Flash из Discreet 3ds max, NewTek LightWave и Softimage. Electric Image Amorphium Pro также производит элементы Flash, которые могут быть применены напрямую в ваших фильмах. С помощью этих и других программ можно быстро прорисовывать изображения или наборы кадров анимации, и затем использовать ActionScript для управления изображениями внутри Flash. Недостатком этих программ является, конечно, их цена, а также размер файла экспортированного фильма, который в отдельных случаях может быть очень большим. Однако все эти программы позволяют получать изображения, которые выходят за рамки ограничений Flash, и чуть позже мы еще будем об этом говорить.

Приближенные иллюстрации

Поверьте мне, художники занимались трехмерной графикой задолго до появления микропроцессоров. Если вы хотите получить статическое трехмерное изображение, вам не имеет смысла гоняться за дорогим программным обеспечением для работы с трехмерной графикой. С помощью программы редактирования графики, такой как Adobe Photoshop, вы можете создавать псевдо-трехмерные изображения, которые выглядят вполне реалистично (посетите сайт Bert Monroy по адресу www.bertmonroy.com, чтобы ознакомиться с некоторыми потрясающими примерами). Даже работая во Flash, вы можете создавать интереснейшие 3D эффекты и рисунки, используя лишь средства для рисования и знания о перспективе и свойствах света.

3D в реальном времени

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

Загрузка процессора все еще актуальна при работе с 3D в Macromedia Flash MX, однако здесь уже есть способы упрощения для определенного содержимого. Например, не стоит пытаться создавать законченные анимированные трехмерные объекты с помощью одного лишь ActionScript. Вы же не собираетесь создавать голограмму! Если вы хотите изучать полностью интерактивные трехмерные миры, обратитесь к старшему брату Flash - Macromedia Director. Несмотря на дебаты в интерактивных форумах Flash на тему преимуществ Director над нашей любимой программой, Director просто более мощная программа. Возможности трехмерной графики ее последней версии просто фантастические и не могут быть реализованы во Flash.

Но подождите! Перед тем, как забрасывать эту книгу с мыслями о том, что вы приобрели ненужную программу, вспомните, что преимущества Flash 3D более весомы, чем Shockwave 3D (результат работы Director). Например, Flash Player гораздо более распространен, нежели Shockwave Player. Это означает, что больше людей сможет немедленно просматривать и наслаждаться результатами вашей 3D работы во Flash, в то время как им, вероятно, пришлось бы загружать значительно больший по размеру проигрыватель для просмотра вашего содержимого Shockwave 3D. Также, из-за сложности некоторых сред Shockwave 3D, его файлы намного больше, и, нередко, слишком велики для пользователей с низкоскоростным каналом доступа. До тех пор, пока будут распространены широкополосные сети, Flash будет в выигрыше.

Обзор концепций трехмерной графики

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

Оси

Экран монитора имеет две оси - x и y. Вы постоянно используете их при работе с параметрами _x, _y, _xscale и _yscale объектов. В трехмерной графике, как видно из ее названия, есть третье измерение, представляемое осью z, которая направлена перпендикулярно поверхности экрана. На этой оси располагаются точки, определяющие глубину и создающие иллюзию трехмерности. В нашем коде положительным значением на оси z является то, которое расположено ближе к наблюдателю.

Вершины

Наименьшим объектом в трехмерном мире является вершина, которая представляет из себя точку в трехмерном пространстве, имеющую три координаты x, y и z. Вершины являются составными частями трехмерных объектов.

Глубина

Так как мы имеем дело с двухмерным выводом информации (экран монитора), нам необходим способ преобразования 3D координат в 2D пространство. Это делается настройкой параметров _x и _y наших вершин (не путать с трехмерными координатами вершины x и y ) по значению z вершины. Чем больше значение z, тем ближе вершина находится к наблюдателю, и, следовательно, тем дальше вершина отодвинута от центра нашего пространства, играющего роль двумерной удаляющейся точки. Ниже приведена упрощенная схема этого процесса.

Несмотря на то, что у вершин 1 и 2 одинаковые 3D-значения x и y (вспомните, что трехмерные значения являются отдельными от координат экрана Flash), их z-значение изменяется, поэтому нам нужно моделировать глубину между двумя точками. Вершина 1, имеющая большее значение z, находится дальше от центра пространства. Так достигается моделирование глубины. Вот формула для выяснения того, каким образом перемещается вершина.

scale = focalLength/(focalLength-z);
_x = x*scale; 
_У = У*scale;

focalLength - это расстояние между наблюдателем и экраном. Для случая, описанного выше, мы установили focalLength на значение 100. Для вершины 2 переменная размера равна 1.33, при этом параметры _x и _y равны -66.5 и 133, соответственно. Это расстояние до вершины от центра в пикселях. Вершина 1 с переменной размера, имеющей значение 2, установит значения _x и _y на величины -100 и 200, соответственно. Координаты вершины (их координаты отличны от 3D-координат) заданы от центра пространства. Настраивая focalLength, мы можем увеличивать или уменьшать искажение перспективы.

Векторы

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

Матрицы

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

Это основные идеи и термины, которые вам необходимо знать. Теперь перейдем к реализации этих идей во Flash.