Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mochi London 2011

11,776 views

Published on

This is a presentation I gave as an introduction to Stage3D (aka "Molehill") at the Mochi Media community event in London on Saturday 27th September 2011.

Please note that the code sample shown was from an earlier build of Stage3D and will not work in the current version due to API changes

Published in: Technology, Art & Photos
  • Be the first to comment

Mochi London 2011

  1. 1. An Introduction <br />To Stage3D<br />
  2. 2. WHO AM I?<br />Mike Jones<br />Gaming Evangelist<br />blog.flashgen.com<br />@FlashGen<br />
  3. 3. GAMING EVANGELISM TEAM<br />Enrique Duvos<br />@eduvos<br />Mike Jones<br />@FlashGen<br />Tom Krcha<br />@tomkrcha<br />Lee Brimelow<br />@leebrimelow<br />
  4. 4. MAKING A MOUNTAIN OUT OF A MOLEHILL STAGE3D<br />
  5. 5. OVERVIEW OF STAGE3D<br />Stage3D aka "Molehill" is a new set of low-level, GPU-accelerated 3D APIs for the Flash Player.<br /><ul><li>Cross platform secure access to the GPU
  6. 6. Based on OpenGL ES 2 capabilities
  7. 7. Can be used for 3D
  8. 8. Or 2D
  9. 9. Relies on DirectX 9, OpenGL 1.3 and OpenGL ES 2</li></li></ul><li>DESIGN GUIDELINES<br />Stage3D was designed with the following criteria's in mind:<br /><ul><li>Mobile first
  10. 10. Programmable only (not FFP)
  11. 11. Minimal API
  12. 12. High performance
  13. 13. Non-standard</li></li></ul><li>FLASH PLAYER INTEGRATION<br />
  14. 14. STAGE3D DEMOS<br />
  15. 15. STAGE3D PSEUDO-CODE<br /><ul><li>Request a 3D context object
  16. 16. Create a vertex and index buffer
  17. 17. Create a 3D program (vertex and fragment shader)
  18. 18. Upload your 3D program
  19. 19. Draw (drawTriangles() and present())</li></li></ul><li>CODING FOR STAGE3D<br />// setup backbuffer (level 1 aa, z buffer on) <br />context3D.configureBackBuffer( stage.stage3Ds[0].viewPort.width, stage.stage3Ds[0].viewPort.height, 1, true );<br />// create a vertex buffer<br />vertexbuffer = context3D.createVertexBuffer( 3,6 );<br />vertexbuffer.uploadFromVector ( Vector.<Number>([ <br /> -1,-1,0, 255/255,0,0, <br /> 0,1,0, 193/255,216/255,47/255, <br /> 1,-1,0, 0,164/255,228/255 <br /> ]),0, 3 ); // start at offset 0, count 3 <br />// create an index buffer. this is just identity<br />indexbuffer = context3D.createIndexBuffer ( 3 );<br />indexbuffer.uploadFromVector ( Vector.<uint>( [ 0, 1, 2 ] ), 0, 3 ); // start at offset 0, count 3<br />// create a vertex and fragment program - from assembly<br />varvertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();<br />vertexShaderAssembler.assemble( Context3DProgramType.VERTEX, <br /> "m44 op, va0, vc0 n" + // 4x4 matrix transform <br /> "mov v0, va1 n" // copy stream 1 to fragment <br />); <br />varfragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler(); <br />fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, <br /> "movoc, v0" // output color <br />);<br />// upload the AGAL bytecode<br />program = context3D.createProgram();<br />program.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode ); <br />
  20. 20. CODING FOR STAGE3D<br />// clear the frame <br />context3D.clear ( 192/255, 181/255, 169/255, 1 );<br />// matrix constants update<br />var modelMatrix:Matrix3D = new Matrix3D();<br />var scale : Number = .4 + Math.sin ( t ) * 0.2; <br />modelMatrix.appendScale( scale, scale*(688/528), 1 ); <br />modelMatrix.appendRotation( t * 50, Vector3D.Z_AXIS );<br />context3D.setProgram( program );<br />context3D.setVertexBufferAt (0, vertexbuffer, 0, Context3DVertexBufferFormat.FLOAT_3 ); <br />context3D.setVertexBufferAt( 1, vertexbuffer, 3, Context3DVertexBufferFormat.FLOAT_3 ); <br />context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, modelMatrix, true );<br />context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 1, <br />Vector.<Number>( [ 0.3, 0.59, 0.11, 1 ] ) );<br />context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 2, <br />Vector.<Number>( [ 1.2, 1.0, 0.8, 1 ] ) );<br />// and draw<br />context3D.drawTriangles( indexbuffer, 0, 1 ); // offset 0, 1 triangle<br />// update it!<br />context3D.present ( );<br />
  21. 21. THERE IS AN EASIER OPTION<br />You can use one of the myriad 3D frameworks & tools that are being built on top of Stage3D such as:<br /><ul><li>Alternativa3D
  22. 22. Away3D*
  23. 23. Flare3D
  24. 24. Minko
  25. 25. Sophie3D
  26. 26. Yogurt3D
  27. 27. Yours...
  28. 28. Copper Cube
  29. 29. Prefab
  30. 30. Flare3D Studio
  31. 31. Unity 3D</li></ul>* open source<br />
  32. 32. WHAT ABOUT 2D?<br />
  33. 33. M2D<br /><ul><li>Framework for 2D accelerated content
  34. 34. Open source (so anyone can add to it)
  35. 35. Built on top of Stage3D</li></li></ul><li>M2D DEMOS<br />
  36. 36. ADDITIONAL RESOURCES<br />Stage3Dhttp://labs.adobe.com/technologies/flashplatformruntimes/incubator/<br />AGAL MiniAssemblerhttp://www.bytearray.org/wp-content/projects/agalassembler/com.zip<br />Pixel Bender 3Dhttp://labs.adobe.com/technologies/pixelbender3d/<br />M2Dhttps://github.com/egreenfield/M2D<br />http://www.flashrealtime.com/m2d<br />
  37. 37. THANK YOU<br />Mike Jones<br />Gaming Evangelist<br />blog.flashgen.com<br />@FlashGen<br />mike.jones@adobe.com<br />http://gaming.adobe.com<br />

×