Uvod do 3D v AS3 pomocí Flare3D a Away3D

Úvod do 3D v AS3
s Away3D a Flare3D
Nikolaj Rýfr
Adobe User Group, Praha, 24. 2. 2011

nikolaj@nikolaj.cz
www.nikolaj.cz

Saturday,February 26, 2011

Nikolaj Rýfr
* 1980

Senior RIA developer, geewa.com
Ve Flashi od verze 3 (1998)
První 3D ostruhy (1994) www.povray.org

Twitter: @nikolajcz
Další informace: blog.nikolaj.cz


Pre-Molehill 3D Flash

SMOOTH HIGH POLY?!

NICE TEXTURES?!

Money For Nothing / Dire Straits, 1985

Pomalý + Ošklivý + Chybový + Zmatený


Rozšířené knihovny
† Papervision3D
Away3D
Flare3D - 500 Euro / rok
Alternativa3D - nyní creditware
Sophie3D - 330 Euro / stránka
Yogurt3D
Sandy3D


Stručné srovnání
Away3D Flare3D
Open-source Komerční licence
Složitější API Přehlednější API
Velká komunita Dobrá dokumentace
Prefab3D 3Ds MAX plugin + IDE
Collada formát .f3d + Collada
Away3D Lite ~ 25kb Lepší správa paměti


Co je to vlastně to 3D?
View - "televizor"
Scéna, Kamera, Renderer - "vykreslovač"

Objekty - "herci"
Drátěné modely, Povrchy - textury,
materiály

Doplňky - "efekty"
Světlo, Augmentovaná Realita, Fyzika
Kolize, Stínování, Zrcadla atd…


Vytvoření scény
Away3D Flare3D
scene = new Scene3D(); scene = new Scene3D(this);

cam = new Camera3D(); nebo
cam.z = 500;
cam.lookAt( new Vector3D() ); // prohlížecí mód při návrhu
scene = new Viewer3D(this);
view = new View3D();
view.scene = scene; scene.camera.setPosition(0,0,500);
view.camera = cam; scene.camera.lookAt(0,0,0);
view.x = stage.stageWidth / 2;
view.y = stage.stageHeight / 2;
addChild(view);

addEventListener (Event.ENTER_FRAME,
processFrame, false,0, true);

function processFrame (e:Event):void {
view.render();
}


První objekt
Away3D Flare3D
sphere = new Sphere(); sphere = new Sphere ("koule", 100, 12 );
sphere.radius = 100; scene.addChild(sphere);
sphere.segmentsH = 12;
sphere.segmentsW = 12;
scene.addChild(sphere);

// do fnc processFrame vlozte: // do handler fnc onEnterFrame:
sphere.yaw(1); // otacet sphere.rotateX(1); // kutalet
sphere.pitch(1); // kutalet sphere.rotateY(1); // otacet
sphere.roll(1); // obracet sphere.rotateZ(1); // obracet

Kam dál? Kam dál?
package away3d.primitives package flare3d.primitives


Make-up
Away3D Flare3D
material = mars:Texture3D
new BitmapFileMaterial ("mars.jpg"); = scene.addTextureFromFile("mars.jpg");
sphere.material = material;
scene.addEventListener
(Scene3D.COMPLETE_EVENT, allLoaded );

A kde jsou stíny? function allLoaded (e:Event) {
marsMat = new TextureMaterial ("mars",mars);
light = new DirectionalLight3D(); sphere = new Sphere ("koule", 100, 12, marsMat);
scene.addLight(light); }
light.direction=new Vector3D(0,-300,100);
// použili jsme přidání bitmapy pomocí A ty stíny?
[Embed]. pomocná třída Cast v Away3D jen
natypovává bitmapData Flare3D má úžasný exportér z 3Ds Max. Vážně!
material = new PhongBitmapMaterial Ale dobře... vše se dozvíte v API. :)
(Cast.bitmap(marsClass) );
http://bit.ly/fVjgDj


Interakce
Away3D Flare3D
Interakce s objektem Interakce s objektem
sphere.addEventListener sphere.addEventListener
(MouseEvent3D.MOUSE_UP, handler_fnc); (MouseEvent3D.CLICK, handler_fnc)

Interakce s místem na objektu Komplexní interakce rovnou
sphere.addEventListener mouse = new MouseCollision()
(MouseEvent3D.MOUSE_UP, handler_fnc); mouse.addCollisionWith( sphere )
scene.addEventListener
// { handler_fnc(e:MouseEvent3D) } ( Scene3D.RENDER_EVENT, renderEvent )

var target:Vector3D = // renderEvent fnc (prevzato z tutorialu)
new Vector3D(e.sceneX,e.sceneY,e.sceneZ); if (mouse.test(Input3D.mouseX, Input3D.mouseY)) {
target.scaleBy(2) var info:CollisionInfo = mouse.data[ 0 ]
vector.setPosition
cam.x = target.x;
(info.point.x, info.point.y, info.point.z)
cam.y = target.y;
vector.setNormalOrientation( info.normal )
cam.z = target.z; vector.visible = true
cam.lookAt( new Vector3D() );


Práce s modely
Away3D Flare3D
Import COLLADA .DAE modelu Nahrání .f3d modelu
cld = new Collada; scene.addChildFromFile( "model.f3d" );
_loader = new Loader3D();
// allLoaded handler
_loader.addEventListener
biped:Pivot3D =
(Loader3DEvent.LOAD_SUCCESS, scene.getChildByName( "model.f3d" );
_onLoadSuccess); biped.addLabel( "walk", 0, 46 );
_loader.loadGeometry("../model.dae",cld); biped.addLabel( "idle", 51, 290 );
_view.scene.addChild(_loader); biped.setScale(.5,.5,.5);
biped.z = 162;
biped.x = -200;
cont:ObjectContainer3D = biped.setRotation(0,345,0);
_loader.handle as ObjectContainer3D; biped.playLabel("idle");
animLib:AnimationLibrary = biped.animationPrecision = true;
cont.animationLibrary; // a rovnou přidáme kolize :)
collisions = new SphereCollision(biped, 20 );
animator = animationLibrary.getAnimation
collisions.addCollisionWith(smthng);
("default").animator as BonesAnimator; // smthng je další Pivot3D

_animator.play();


Zhodnocení
Než bude Molehill, je 3D ve Flashi jenom
doplněk a vyžaduje velkou dávku
podvádění a ústupků.
Away3D je dostupná platforma s velkou, živou základnou, ale Flare3D
poskytuje komfort a stabilitu ideální pro práci v komerčním prostředí.
Pro mne jasný vítěz, ale jak nám kartami zamíchá Adobe ještě uvidíme.

Dobré propojení se stávající 3D workflow se zdá být klíčové.

Poznámka: Alternativa3D je určitě taky skvělá knihovna. Na začátku mne odrazovala celkem
strohým API, velkou cenou, malou komunitou - proto v ní nedělám a vývoj sleduji jen zběžně.
Uvítám Vaše názory na mém blogu v komentářích k této slideshow.


Užitečné odkazy
Sokoban v Away3D nebo Flare3D?
http://bit.ly/dGZZyD

Takto si představuji stránku návodů:
http://www.flare3d.com/tutorials

Molehill for freaks
http://www.bytearray.org/?p=2555


Díky za Váš zájem.
Jsem hrozně zvědavý,
co vymyslíte za úžasné
a inspirující věci.

Pošlete mi nápady,
dotazy a hlavně ukázky na
nikolaj@nikolaj.cz


Uvod do 3D v AS3 pomocí Flare3D a Away3D

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (11)

Uvod do 3D v AS3 pomocí Flare3D a Away3D