Minko stage3d workshop_20130525

5,324 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,324
On SlideShare
0
From Embeds
0
Number of Embeds
4,222
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Minko stage3d workshop_20130525

  1. 1. Jean-Marc Le Roux@promethe42http://blogs.aerys.in/jeanmarc-leroux
  2. 2. Resources Sources https://github.com/aerys/minko Forum http://forum.minko.io Samples http://github.com/aerys/minko-examples Documentation http://doc.minko.io
  3. 3. @MINKO3DFollow us on Twitter! 
  4. 4. http://soccerpun.ch Full 3D game built with Minko in just 48h! http://www.youtube.com/watch?v=Hv0cp4NwSoY Your smartphone is the gamepad: up to 8 players! All assets hanlded through the editor Imported from 3DS Max Editor available for free on http://minko.io Physics rigging in a few clicks Extensive use of particles Designed with the new particles editor Running with a new C++ particles engine
  5. 5. Last time…
  6. 6. … and now! What are shaders? Why is AGAL hard to work with and whatsolutions does Minko provide? A few simple shader examples Hardware accelerated particles with shaders Particles engine and editor!
  7. 7. HDR RenderingDynamic lightsStatic lightsDynamic shadowsStatic shadowsDiffuse textureNoiseDiffuse texture
  8. 8. Hardware specific shader bytecodeProgram3DAGAL bytecodeVertex Shader Fragment ShaderGLSL/HLSLProgram3DPixelBender3D AGAL assemblyActionScript3FlashHardware
  9. 9. Program3D – Vertex Shaderva1.x va1.y 0 0 …x y z w …v0 …VaryingRegistersIndexBuffer3D-5 -5 0 0 1 0 5 0 0 0.5 5 -5 0 1 1 …x y z u v x y z u v x y z u v xVertexBuffer3D0 1 20 2 1 …InputProgramOutput0 (-5, -5, 0)1 (0, 5, 0)2 (5, -5, 0)
  10. 10. InputProgramOutputProgram3D – Fragment Shaderva1.x va1.y 0 0 …x y z w …v0 …VaryingRegistersTexture3D0 (0, 1) 2 (1, 1)1 (0.5, 0)
  11. 11. Kids, this is the story of how I met your shader…
  12. 12. 1992 2001 2004 2011Mortal Kombat GTA III Doom 3 Crysis 21996Evolution of shader languages
  13. 13. What about AGAL?1992 2001 2004 2011Mortal Kombat GTA III Doom 3 Crysis 21996Language Features
  14. 14. In 1992, Flash was called FutureSplash Animator and written by a single man: Jonathan Gay
  15. 15. Simple scene use caseHow many shaders?ShadowsLightsAnimations
  16. 16. How many « possible shaders » ? Handle 0 to 8 joints With normals With tangents Handle 0 to 5 lights With bump-mapping or not Handle shadows(9 x 3 x 6 x 2 x 2)²= 419904 different shaders!• To write• To test• To debug• To maintain• To distribute• To adapt• …
  17. 17. Shaders are« static »Theyhandle one« scenario »A lot ofshaders towrite…
  18. 18.  learning AGAL != learning GPU programming AGAL is awesome for 3D engines developers Low-level binary assembly code Cross-platform AGAL is a nightmare for 3D applicationsdevelopers
  19. 19. With Minko you can program the GPUusing ActionScript 3.0 !
  20. 20. Minko embedded JITCompilerShader ByteCodeActionScript ShaderCodepublic class MyShader{public function getVertexPosition() : SFloat{return localToScreen(vertexXYZ);}public function getPixelColor() : SFloat{return sampleTexture(meshBindings.getTextureParameter(‘texture’),interpolate(vertexUV));}}m44 vt0, va0, vc0m44 vt0, vt0, vc5mov oc, vt0mov v0, va1tex ft0, v0 <linear,2d>mov oc, ft0at runtime compilation
  21. 21. ActionScriptShader•Use all ActionScript 3.0 features•getOutputPosition => Vertex Shader•getOutputColor => Fragment Shader•OOP style•CPU/GPU balancingASG•Abstract Shader Graph•Optimizations•Constants and temporary registersallocation•Operations re-ordering for fasterexecution and optimal use of temporaryregistersAGAL•Direct bytecode generation at runtime•Custom compiler•Optional debug data•AGAL assembly output•Shader graph output•Memory allocation mapExecution Full AS3 workflow Conditionnals and loops Classes and methods Dynamic OOP coding style Exhaustive AGAL implementation Extra high-level operations set Re-usable « shader parts » Shaders compiled at-runtime Just like any other AS3 code Dynamic according to The scene properties The mesh properties/material Any constant, variable, etc… Redistributable as SWF/SWC files
  22. 22. public class RedShader extends Shader{override protected function getVertexPosition() : Sfloat{return worldToScreen(localToWorld(vertexXYZ));}override protected function getPixelColor() : SFloat{return float4(1, 0, 0, 1);}}RedShader – Step 1: AS3
  23. 23. RedShader – Step 2 : ASG
  24. 24. RedShader – Step 3 : AGAL- vertex shaderm44 vt0.xyzw, va0.xyzw, vc0.xyzwm44 vt0.xyzw, vt0.xyzw, vc4.xyzwmov op.xyzw, vt0.xyzw- fragment shadermov oc.xyzw, fc0.xyzw
  25. 25. AS Shaders WorkflowYesshaderSignature(scene, mesh)Does thesignaturealreadyexists ?NoSet streams, textures andconstants:• Vertex streams• Vertex constants• Fragment constants• TexturesvsGraph = shader.getVertexPosition();fsGraph = shader.getPixelColor();Optimize ASGMemory allocation• Vertex attributes• Vertex constants• Fragment constants• Resolving varyingDraw trianglesShader Compilationsave(signature, compiledBytecode)
  26. 26. ACTIONSCRIPT IS NOWTHE MOST POWERFULSHADER LANGUAGE
  27. 27. ACTIONSCRIPT IS NOWTHE MOST POWERFULSHADER LANGUAGE(as a language, but not GPU feature wise because of Stage3D limitations )
  28. 28. More about JIT shaders compilation… JIT shaders for better performance article onmy blog
  29. 29. EXAMPLES
  30. 30. Solid Redoverride protected function getPixelColor() : SFloat{return float4(1, 0, 0, 1);}
  31. 31. Solid Parametrized Coloroverride protected function getPixelColor() : SFloat{return meshBindings.getParameter(‘diffuseColor’, 4);}mesh.material.diffuseColor = Vector4(1., 0., 0., 1.);
  32. 32. Texture Mappingoverride protected function getPixelColor() : SFloat{var texture : Sfloat = meshBindings.getTextureParameter(‘diffuseMap’);return sampleTexture(texture, interpolate(vertexUV));}mesh.material.diffuseMap = TextureLoader.load(new URLRequest(‘texture.jpg’));
  33. 33. interpolate()Vertex ShaderValueFragment ShaderValueinterpolate()
  34. 34. interpolate()Fragment ShaderVarying RegistersVertex Shadervertex0x y r g bVertex Shader OutputVarying RegistersVertex Shadervertex1x y r g bVertex Shader OutputVarying RegistersVertex Shadervertex2x y r g bVertex Shader OutputPixel Shader OutputLinearInterpolationcolorx y z wLinearInterpolationvertex0vertex1vertex2
  35. 35. Particles1. Fill vertex buffer with batched « quads »2. (optional) Edit quads position on the CPU State-related animations3. Render all the quads in a single draw call Stateless position/size/rotation animation in thevertex shader Stateless color animation in the fragment shader
  36. 36. Particles – Quads?quadVertex = {particleId,x, y, z,offsetX, offsetY, offsetZ ,rotation}0 123(x, y, z)(offsetX, offsetY, offsetZ)rotationquad = { 0, 1, 2, 3}particleId ϵ * 0 … numParticles ]
  37. 37. Particles – Quads?quadVertex = {particleId,x, y, z,offsetX, offsetY, offsetZ ,rotation}0 123(x, y, z)(offsetX, offsetY, offsetZ)rotationFixed for the 4 vertex of a particule quad
  38. 38. Particles – Quads?01230 = {0,1., 4., 0.,-0.5, 0.5, 0.,1.4}1 = {0,1., 4., 0.,0.5, 0.5, 0.,1.4}2 = {0,1., 4., 0.,0.5, -0.5, 0.,1.4}3 = {0,1., 4., 0.,-0.5, -0.5, 0.,1.4}yx(1., 4., 0.)
  39. 39. Vertex shader logic1. Transform quad center to view space2. Add offset (~= corner position) to the view spacequad center3. Apply rotation4. Project on the screen
  40. 40. Particule Properties Each particle can have many properties! Start/end color Start/end velocity Start/end force … Particles design can be done with code… … but it is much more efficient with an editor!
  41. 41. Particle Editor Full WYSIWYG particles editor! http://www.youtube.com/watch?v=tyW2RUm2naI Stay tuned for the release (June) Follow @Minko3D Read http://minko.io
  42. 42. GLOBAL ILLUMINATION!Next time…
  43. 43. MERCI !

×