Pull to refresh

Трехмерный движок для Флеша — Papervision3D. Как и с чем его едят

Reading time 6 min
Views 12K


Papervision3D — это библиотека классов для ActionScript 3.0, которая позволяет создавать полноценные 3D флеш-ролики.
Таким образом пользователю не требуется качать какие-то альтернативные плагины (как это было с VRML, например), кроме собственно Flash Player'a.

Итак, что же повзоляет нам Papervision3D:

— Добавлять во флеш-ролик встроенные примитивы: Plane, Sphere, Cylinder, Cone, Cube, Paperplane, Arrow
— Импортировать модели созданные в 3D-редакторах, вместе с анимацией.
— Накладывать на объекты в качестве материалов однородные цвета, битмапы, мувиклипы и даже потоковое видео
— Использовать источники света
— Накладывать встроенные во флеш фильтры (Blur, Glow и т.п.) на 3D объекты
— Управлять отдельными вершинами и фейсами объектов. Пример
— Назначать на 3D объекты и материалы обработчики событий (клик, наведение мышки и т.п.)

Не стоит забывать, что Papervision3D требователен к ресурсам пользователя, так что не стоит загружать ролик большим количеством моделей и придерживаться максимального количества фейсов 3000

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


Установка Papervision3D

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

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



Затем в настройках флеша у меня добавлен путь к этой глобальной папке с классами:



Таким образом мне не приходится копировать дополнительные классы в папку с каждым новым проектом (конечно, если только мне не нужно переслать кому-то исходники)

Теория

Перед тем, как приступить непосредственно к коду, давайте разберемся с теорией, чтобы понять, как работает Papervision3D.

Как известно, во флеше используется двумерное пространтство и лево-рукая декартова система координат («Left-handed cartesian coordinate system») — это, когда начало координат начинается в левом-верхнем углу экрана, т.е. чем выше значение «Y», тем ниже объект располагается на сцене, а чем выше координата «X», тем он правее:



В Papervision3D пространство трехмерное, а значит добавляется новая координата — «Z». И весь отчет начинается с середины экрана, правда в отличии, например, от 3dsmax'a, координата «Y» отвечает за «высоту», а «Z», за «глубину»:



Итак, каждый наш новый проект в Papervision3D состоит из следующих частей:
1. Scene — некий контейнер, в котором находятся все наши объекты.
2. Camera — «глаза», которыми мы смотрим на сцену (по-умолчанию, располагается по координатам x: 0, y: 0, z: -1000)
3. Viewport — окно проекции, сквозь которое видна наша сцена. Можно провести аналогию с 3dsmax, в котором присутствуют 4 окна проекции: «Top», «Left», «Front» и «Perspective»
4. Objects — собственно то, что мы видим на сцене — 3D объекты — примитивы (Plane, Sphere, Cube и т.п.) или загружаемые модели, созданные в 3D пакетах (в Papervision3D известны, как ASCollada Object)
5. Materials — текстуры, которые накладывается на наши 3д объекты (WireframeMaterial, ColorMaterial, MovieMaterial и т.п.)
6. Render Engine — движок, который отрисовывает наши объекты на сцене.

Кстати говоря, процесс рендеринга состоит из трех этапов: инициализация (определение сцены, камер, объектов и т.п.), проекция (расположение вершин объектов так, чтобы мы их видели трехмерными на двумерной плоскости) и собственно сама отрисовка (соединение вершин между собой и «натягивание» материалов на объект). Называется весь этот увлекательный прооцесс — «Rendering pipeline»

Думаю теории на этом хватит. Так что перейдем к практике :)

Практика

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

package {
    import flash.events.Event;

    import org.papervision3d.view.BasicView;

    public class PV3DClass extends BasicView {

        public function PV3DClass() {

            stage.frameRate = 40;
            init();
            startRendering();

        }

        private function init():void {
            //Здесь мы будем создавать наши 3D объекты
        }

        override protected function onRenderTick(e:Event=null):void {
            //Этот метод вызывается каждый раз при ENTER_FRAME
            super.onRenderTick();
        }

    }
}


* This source code was highlighted with Source Code Highlighter.


Я сохранил данный класс, как сниппет и при создании нового файла просто копирую его, заменя имена класса и конструктора. Панельку для сниппетов можно скачать отсюда для Flash CS4 theflashblog.com/?p=771, для Flash CS3: theflashblog.com/?p=346

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

Конструктор создания сферы выглядит следующим образом:
Sphere(material:MaterialObject3D = null, radius:Number = 100, segmentsW:int = 8, segmentsH:int = 6)
material — материал, которым будет покрыта наша сфера. Если оставить значение null, что мы и сделаем в нашем примере, то будет использоваться стандарный материал WireframeMaterial
radius — радиус нашей сферы
segmentsW — количество сегментов по горизонтали
segmentsH — количество сегментов по вертикали

Итак, наш обновленный класс выглядит следующим образом (новые строки в полужирном начертании):

package {
   import flash.events.Event;
  
   import org.papervision3d.view.BasicView;
   //Импортируем класс, позволяющий создавать сферы:
   import org.papervision3d.objects.primitives.Sphere;
  
   public class FirstPV3D extends BasicView {
     //Инициализируем переменную класса для нашей сферы:  
     private var sphere:Sphere;
    
     public function FirstPV3D() {

        stage.frameRate=40;
        init();
        startRendering();

     }
    
     private function init():void{
        //Создаем новую сферу с радиусом в 300px:
        sphere = new Sphere(null, 300);
       //Добавляем нашу сферу на сцену:
        scene.addChild(sphere);
     }
    
     override protected function onRenderTick(e:Event=null):void {
          //Добавляем вращение сферы по локальным осям X, Y:
          sphere.localRotationY++;
          sphere.localRotationX++;

         
          super.onRenderTick();
     }
   }
}


* This source code was highlighted with Source Code Highlighter.


Тестим ролик и получаем нашу сферу:



Заключение

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

Исходники этой флешки тут (зеркало)

И на последок ссылки:

Страница Papervision3D на Google Code
Документация (зеркало)
Официальный блог движка
Блог John Lindquist по Papervision3D

Галереи флеш-сайтов с использованием Papervision3D:
www.papervisionshowcase.com
dailypv3d.wordpress.com

Почитать о Papervision3D:
Книга «Papervision3D Essentials» by Paul Tondeur and Jeff Winder
Статьи на InsideRIA

Follow me on twitter
Tags:
Hubs:
+63
Comments 49
Comments Comments 49

Articles