uvod do 3d v as3 pomocí flare3d a away3d
TRANSCRIPT
Úvod do 3D v AS3s Away3D a Flare3DNikolaj Rýfr
Adobe User Group, Praha, 24. 2. 2011
Saturday,February 26, 2011
Nikolaj Rýfr
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
* 1980
Saturday,February 26, 2011
Pre-Molehill 3D Flash
SMOOTH HIGH POLY?!
NICE TEXTURES?!
Money For Nothing / Dire Straits, 1985
Pomalý + Ošklivý + Chybový + Zmatený
Saturday,February 26, 2011
Rozšířené knihovny† Papervision3D Away3D Flare3D - 500 Euro / rok
Alternativa3D - nyní creditware
Sophie3D - 330 Euro / stránka
Yogurt3D Sandy3D
Saturday,February 26, 2011
Stručné srovnání
Open-source
Složitější API
Velká komunita
Prefab3D
Collada formát
Away3D Lite ~ 25kb
Komerční licence
Přehlednější API
Dobrá dokumentace
3Ds MAX plugin + IDE
.f3d + Collada
Lepší správa paměti
Away3D Flare3D
Saturday,February 26, 2011
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, FyzikaKolize, Stínování, Zrcadla atd…
Saturday,February 26, 2011
Vytvoření scényAway3D Flare3Dscene = new Scene3D();
cam = new Camera3D();cam.z = 500;cam.lookAt( new Vector3D() );
view = new View3D();view.scene = scene;view.camera = cam;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(); }
scene = new Scene3D(this);
nebo
// prohlížecí mód při návrhuscene = new Viewer3D(this);
scene.camera.setPosition(0,0,500);scene.camera.lookAt(0,0,0);
Saturday,February 26, 2011
První objektAway3Dsphere = new Sphere();sphere.radius = 100;sphere.segmentsH = 12;sphere.segmentsW = 12;scene.addChild(sphere);
// do fnc processFrame vlozte:sphere.yaw(1); // otacetsphere.pitch(1); // kutaletsphere.roll(1); // obracet
Kam dál?package away3d.primitives
Flare3Dsphere = new Sphere ("koule", 100, 12 );scene.addChild(sphere);
// do handler fnc onEnterFrame:sphere.rotateX(1); // kutaletsphere.rotateY(1); // otacetsphere.rotateZ(1); // obracet
Kam dál?package flare3d.primitives
Saturday,February 26, 2011
Make-upAway3D Flare3Dmaterial = new BitmapFileMaterial ("mars.jpg");sphere.material = material;
A kde jsou stíny?
light = new DirectionalLight3D();scene.addLight(light);light.direction=new Vector3D(0,-300,100);// použili jsme přidání bitmapy pomocí [Embed]. pomocná třída Cast v Away3D jen natypovává bitmapDatamaterial = new PhongBitmapMaterial (Cast.bitmap(marsClass) );
mars:Texture3D = scene.addTextureFromFile("mars.jpg");
scene.addEventListener (Scene3D.COMPLETE_EVENT, allLoaded );
function allLoaded (e:Event) {marsMat = new TextureMaterial ("mars",mars);sphere = new Sphere ("koule", 100, 12, marsMat);}
A ty stíny?
Flare3D má úžasný exportér z 3Ds Max. Vážně!Ale dobře... vše se dozvíte v API. :)
http://bit.ly/fVjgDj
Saturday,February 26, 2011
InterakceAway3D
sphere.addEventListener (MouseEvent3D.MOUSE_UP, handler_fnc);
Interakce s objektem
sphere.addEventListener (MouseEvent3D.MOUSE_UP, handler_fnc);
// { handler_fnc(e:MouseEvent3D) }
var target:Vector3D = new Vector3D(e.sceneX,e.sceneY,e.sceneZ);target.scaleBy(2)cam.x = target.x;cam.y = target.y;cam.z = target.z;cam.lookAt( new Vector3D() );
Interakce s místem na objektu
Flare3D
mouse = new MouseCollision()mouse.addCollisionWith( sphere )scene.addEventListener ( Scene3D.RENDER_EVENT, renderEvent )
// renderEvent fnc (prevzato z tutorialu)if (mouse.test(Input3D.mouseX, Input3D.mouseY)) { var info:CollisionInfo = mouse.data[ 0 ]vector.setPosition (info.point.x, info.point.y, info.point.z)vector.setNormalOrientation( info.normal )vector.visible = true
Komplexní interakce rovnou
sphere.addEventListener (MouseEvent3D.CLICK, handler_fnc)
Interakce s objektem
Saturday,February 26, 2011
Práce s modelyAway3D
cld = new Collada;_loader = new Loader3D();_loader.addEventListener
(Loader3DEvent.LOAD_SUCCESS, _onLoadSuccess);
_loader.loadGeometry("../model.dae",cld);_view.scene.addChild(_loader);
cont:ObjectContainer3D = _loader.handle as ObjectContainer3D;animLib:AnimationLibrary = cont.animationLibrary;animator = animationLibrary.getAnimation ("default").animator as BonesAnimator;
_animator.play();
Import COLLADA .DAE modelu
Flare3D
scene.addChildFromFile( "model.f3d" );
// allLoaded handlerbiped:Pivot3D = scene.getChildByName( "model.f3d" );biped.addLabel( "walk", 0, 46 );biped.addLabel( "idle", 51, 290 );biped.setScale(.5,.5,.5);biped.z = 162;biped.x = -200;biped.setRotation(0,345,0);biped.playLabel("idle");biped.animationPrecision = true;// a rovnou přidáme kolize :)collisions = new SphereCollision(biped, 20 );collisions.addCollisionWith(smthng);// smthng je další Pivot3D
Nahrání .f3d modelu
Saturday,February 26, 2011
ZhodnoceníNež bude Molehill, je 3D ve Flashi jenom doplněk a vyžaduje velkou dávkupodvá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.
Saturday,February 26, 2011
Užitečné odkazy
http://bit.ly/dGZZyDSokoban v Away3D nebo Flare3D?
http://www.flare3d.com/tutorialsTakto si představuji stránku návodů:
http://www.bytearray.org/?p=2555Molehill for freaks
Saturday,February 26, 2011
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 [email protected]
Saturday,February 26, 2011