Page 1 of 1

Beginning Stage3D - Part 1

#1 stayscrisp  Icon User is offline

  • フカユ
  • member icon

Reputation: 928
  • View blog
  • Posts: 3,998
  • Joined: 14-February 08

Post icon  Posted 16 December 2011 - 03:38 AM

Beginning Stage3D part 1

Some of you may have realized that I’m pretty excited about the capabilities of Stage3D. Yes there are other web based 3D engines around like Unity but Flash is so ubiquitous that it won’t be long before most people have Flash player 11 and the capabilities of running 3D games in-browser.

"But stayscrisp, what the heck is Stage3D?"

Stage3D is Adobe’s latest Flash technology designed to take advantage of hardware accelerated 3D graphics cards. Anyone who has used Flash in the past will know just how processor hungry rendering a few things on screen is. First flash renders vector graphics into 2D bitmaps and then blits them onto the screen as pixels. Stage3D takes this rendering process and moves it onto the GPU, leaving the CPU free to do everything else. Sounds great doesn’t it? Well that’s because it is. Flash games can now render a ridiculous number of sprites etc. with minimal effort and no slowdown. There are even sites on the web saying that Stage 3D can render full 3D scenes with over 150,000 polygons in full screen HD at 60fps, all with less than 10% CPU usage!

Stage3D deals exclusively with 3D rendering, in that regard it is like OpenGL. It doesn’t include functionality for anything else. Luckily all of the usual Flash functionality is still there outside of the Stage3D API, so sound, input etc. is already taken care of.

Sweet, how do I get started?


There are a few IDE’s available that can get you started in your Stage3D adventures but I am going to show you how to get it set up and running in FDT 5. FDT 5 is an eclipse based IDE so getting it set up on your own flavour of eclipse will be essentially the same process. I won’t cover setting it up in Flash CS5 because it really isn’t an ideal development environment for something like this.

So first let's get the parts we need to build a Stage3D dev environment.

If you are using FlashDevelop then Atli has written a tutorial on creating a Stage3D project in that environment. It is located here : http://www.dreaminco...d-applications/

First download the latest flex open source SDK

Now let’s download FDT 5. You have the choice of the free version and the paid version, choose whichever you want. Once it's installed open it and create a default workspace. Now open FDT preferences and browse to FDT > installedSDK's, here you can add the SDK you have just downloaded. Simply click add and browse to the SDK's folder, FDT will do the rest.

Now create a new FDT > AS3 project, let's call it HelloStage3D. Click next and choose your SDK and also set the player version to 11.0. Click next again and choose SDK library, make sure that the playerglobal.swc's location is the 11.0 folder you created earlier. Click finish.

Almost done!

There are some classes that are not included with the playerglobal.swc (weird I know) but they are available here. Download them and then in your project properties > FDT build path add a linked location and browse to the downloaded classes.

Now we need to go to the FDT compiler settings which are also located in the project properties and add this line to the compiler arguments
-swf-version=13


We are now all set up and can try to create a Stage3D context :)

So let's just create a small test application just to ensure that everything is working and linked as intended. So open up your Main.as and paste the following code

package 
{
	import flash.events.*;
	import flash.display.*;
	import flash.display3D.*;

	public class Main extends Sprite
	{
		private var context3D:Context3D;
		
		public function Main()
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onCreation);
			stage.stage3Ds[0].requestContext3D();
		}
		
		private function onCreation(e:Event):void
		{
			var tempStage:Stage3D = e.target as Stage3D;
			context3D = tempStage.context3D;
			
			context3D.configureBackBuffer(500, 500, 0);
			
			addEventListener(Event.ENTER_FRAME, draw);
		}
		
		private function draw(e:Event):void
		{
			context3D.clear(0,0,0);
			
			context3D.present();
		}
	}
}


This will not do anything except create a Stage3D context and display a black background. To ensure your application runs you will need to embed it correctly using an html file, FDT5 does not come with an .html file for you to use but other IDEs such as flash builder or flash develop probably will. In any case I will provide one here.

Here's the html file:
Spoiler


and the javascript file
Spoiler



Place this inside your bin folder or whichever folder contains your Main.swf, now you can run this .html file and hopefully you will have a working Stage3D context. If you already have an html file then it is simply a case of adding the following line to your parameters

params.wmode="direct";


So that's it for now, the next part will be here very soon and we will start drawing stuff!

Any questions, feel free to ask.

Happy coding!

Is This A Good Question/Topic? 4
  • +

Replies To: Beginning Stage3D - Part 1

#2 aaron1178  Icon User is offline

  • Dovakiin, Dragonborn
  • member icon

Reputation: 99
  • View blog
  • Posts: 1,178
  • Joined: 22-October 08

Posted 16 December 2011 - 04:30 AM

Wow :) I really didn't see that one coming. Thanks for the news Stayscrisp. I like keeping up-to-date of the latest tech that adobe pours out. Though I would like to see an actual desktop 3D engine produced. I am sure they would get a lot of purchases.
Was This Post Helpful? 0
  • +
  • -

#3 stayscrisp  Icon User is offline

  • フカユ
  • member icon

Reputation: 928
  • View blog
  • Posts: 3,998
  • Joined: 14-February 08

Posted 16 December 2011 - 04:39 AM

Well you could just use AIR to develop a desktop application. You can use stage3D and AIR.
Was This Post Helpful? 0
  • +
  • -

#4 aaron1178  Icon User is offline

  • Dovakiin, Dragonborn
  • member icon

Reputation: 99
  • View blog
  • Posts: 1,178
  • Joined: 22-October 08

Posted 16 December 2011 - 05:15 AM

Even Better. I was not awaire of this :)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1