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.



Published on

Published in: Technology, Art & Photos


  1. 1. COLLADA& WebGLWeb3D 2011(Paris)<br />Rémi Arnaud<br />Screampoint Inc<br />
  2. 2. Agenda<br />Déja-vu? (thx to Tony Parisi for the slides)<br />COLLADA<br />WebGL<br />Going from COLLADA to WebGL<br />
  3. 3. “History repeats itself, first as tragedy, second as farce.”<br />--Karl Marx<br />
  4. 4. Web 3D: A Brief History<br />Intermediate<br />Format<br />+ XML,<br />Skinning,<br />Programmable Pipeline,<br />Multitexturing, …<br />In-Browser Rendering<br />+ Animation,<br />Scripting,<br />Interactivity<br />Cautious Optimism<br />Built In<br />GPU<br />@mpesce #ZOMG #Winning!<br />Model +<br />Hyperlink in a Page<br />Raging Indifference<br />Competing Standards<br />Proprietary Platforms<br />“Virtual Worlds”<br />“Gaming” Redefined<br />More important stuff:<br />Web 2.0<br />Mass Disillusionment<br />No Broadband<br />No GPUs<br />No Killer App<br />Warring Factions<br />More important stuff: Web 1.0<br />Eager Enthusiasm<br />@mpesce #WTF? #Winning!<br />
  5. 5.<br />
  6. 6. WebGL and other technologies<br />3D with Java (HW accelerated)<br />OpenGL binding (JSR-231), OpenGL ES (JSR-184)<br />Did not prevail<br />3D with Flash<br />Papervision3D, Sandy3D, Away3D and now HW acceleration with Molehill (available)<br />Between 1 and 2 Billions installations of flash player<br />3D with plug-in<br />Unity extremely popular. +500,000 SDK downloads, +50 Millions of plug-in download<br />Cross platform (iOS, Android, Xbox, Wii, PS3, …)<br />Splendid world editing tool (includes scripting)<br />Google Native Client<br />Direct access (with a protection layer) to OpenGL ES HW acceleration<br />Other native apps… smartphones 600% growth, more and more users see internet only through their phone/tablet device.<br />
  7. 7. COLLADA<br />XML encoding for 3D assets <br />Geometry, Materials, Shaders, Animation, Skin/Bones, Physics, B-Rep*, IK*<br />Intermediate format – for the tool chain(including conditioning / optimizer)<br />Tool interchange format <br />COLLADA available for most if not all modeling tools<br />COLLADA & X3D white paper<br /><br />* COLLADA 1.5<br />
  8. 8.
  9. 9. COLLADA is everywhere<br />Max, Maya, Softimage (Autodesk dominance)<br />through fbx sub-standard support<br /> plug-ins<br />Cinema4D, Lightwave, Blender, Modo …..<br />Google warehouse, 3dvia<br />Google Earth, Sketchup<br />Microstation, AutoCAD, Catia …<br />But not very well implemented<br />Not a single adopter (conformance test)<br />
  10. 10.<br />COLLADA reference manuscript <br />
  11. 11. libraries<br />Data elements are grouped by feature. A document may contain one or more libraries. User is free to organize documents/collections.<br />geometries<br />materials, effects<br />images<br />animations<br />animation clips<br />controllers<br />cameras<br />lights<br />nodes<br />scenes<br />physics (models, materials, scenes)<br />
  12. 12. COLLADA reference card page 1<br />
  13. 13. assets<br />COLLADA defines where assets can be defined<br />The <COLLADA> element <asset> is mandatory, optional everywhere else<br />Assets are defined in their own coordinate system<br />COLLADA reference card page 1<br />
  14. 14. scenes<br />A COLLADA document can contain several scenes, or none. <br />Can contain physic scene<br />Only one ‘visual_scene’ reference the specific scene to be visualized by default. <br />This is because 99% of modelers do not know how to handle multiple scenes. <br />
  15. 15. nodes<br />Nodes define a local coordinate system, hierarchy transform<br />Nodes have no semantic, they do not convey a specific action.<br /> (i.e. no LOD, switch… nodes)<br />Maybe they should have been called ‘places’<br />Transforms in a node are to applied in the same order they appear.<br />
  16. 16. transform hierarchy<br /><node><br /> <rotate><br /> <translate><br /> <instance_geometry><br />.. Is same transform as ..<br /><node><br /> <rotate><br /> <node><br /> <translate><br /> <instance_geometry><br />COLLADA reference card page 2<br />
  17. 17. id and names<br />id are used to reference an element, when instancing for example. They have to be UNIQUE in a document<br />name are used to store human readable information. It’s like a <extra> tag. names are not unique, the type has been relaxed in 1.5 (xs:NCName has too many restrictions)<br />COLLADA reference card page 2<br />
  18. 18. Example 1: documents are tiles<br />tile_1.dae<br />tile_2.dae<br />Id = A<br />Id = A<br />tile_1.dae#A tile_2.dae#A <br />
  19. 19. Example 2: using name to group<br />tile_1.dae<br />id = A<br />name = arrow<br />id = B<br />name = arrow<br />arrow = tile_1.dae#A + tile_1.dae#B<br />
  20. 20. instances<br />Instances are basic building block of COLLADA<br />nodes define local coordinate system where geometry is instanced<br />nodes, with their attached geometry can be instanced. They can be stored in the node library rather than enumerated in the scene<br />Instanced elements can be modified at binding point<br />e.g. material bind is done when instancing a geometry<br />
  21. 21. Notice the <extra> element to store application specific data. <br />COLLADA reference card page 2<br />
  22. 22. techniques<br />technique_common is mandatory. Default rendering mode<br />other rendering techniques are optional, there can be many (glsl, hlsl, mobile, PS3…)<br />
  23. 23. Common rendering techniques<br />COLLADA reference card page 4<br />
  24. 24. Binding materials<br />(daenotepad)<br />
  25. 25. COLLADA reference card page 6<br />
  26. 26. Geometry – e.g. triangles<br />COLLADA reference card page 2<br />
  27. 27. dataflow<br />COLLADA reference card page 3<br />
  28. 28.<br />e.g. daenotepad<br /><br />
  29. 29. WebGL<br />WebGL is OpenGL ES 2.0 for javascript<br />Rendering with OpenGL ES 2.0 requires the use of shaders. Shadersmust be loaded with a source string (shaderSource), compiled (compileShader), and attached to a program (attachShader) which must be linked (linkProgram) and then used (useProgram).<br />
  30. 30. WebGL Reference Card page 2<br />
  31. 31. InitWebGL (J3DI.js)<br />function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)<br />{<br />var canvas = document.getElementById(canvasName);<br />vargl = canvas.getContext("webgl");<br /> if (!gl) {<br /> alert("No WebGL context found");<br /> return null;<br /> }<br /> // create our shaders<br />varvertexShader = loadShader(gl, vshader); *** see ‘Load Shader’ slide<br />varfragmentShader = loadShader(gl, fshader); *** see ‘Load Shader’ slide<br /> if (!vertexShader || !fragmentShader)<br /> return null;<br /> // Create the program object<br />gl.program = gl.createProgram();<br /> if (!gl.program)<br /> return null;<br /> // Attach our two shaders to the program<br />gl.attachShader (gl.program, vertexShader);<br />gl.attachShader (gl.program, fragmentShader);<br />
  32. 32. // Bind attributes<br /> for (var i in attribs)<br />gl.bindAttribLocation (gl.program, i, attribs[i]);<br /> // Link the program<br />gl.linkProgram(gl.program);<br /> // Check the link status<br />var linked = gl.getProgramParameter(gl.program, gl.LINK_STATUS);<br /> if (!linked) {<br /> // something went wrong with the link<br />var error = gl.getProgramInfoLog (gl.program);<br /> gl.console.log("Error in program linking:"+error);<br />gl.deleteProgram(gl.program);<br />gl.deleteProgram(fragmentShader);<br />gl.deleteProgram(vertexShader);<br /> return null;<br /> }<br />gl.useProgram(gl.program);<br />gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);<br />gl.clearDepth(clearDepth);<br />gl.enable(gl.DEPTH_TEST);<br />gl.enable(gl.BLEND);<br />gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);<br /> return gl;<br />}<br />
  33. 33. Load Shader<br />function loadShader(ctx, shaderId)<br />{<br />varshaderScript = document.getElementById(shaderId);<br /> if (!shaderScript) {<br /> ctx.console.log("*** Error: shader script '"+shaderId+"' not found");<br /> return null;<br /> }<br /> if (shaderScript.type == "x-shader/x-vertex")<br />varshaderType = ctx.VERTEX_SHADER;<br /> else if (shaderScript.type == "x-shader/x-fragment")<br />varshaderType = ctx.FRAGMENT_SHADER;<br /> else {<br /> ctx.console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");<br /> return null;<br /> }<br />
  34. 34. // Create the shader object<br />varshader = ctx.createShader(shaderType);<br /> if (shader == null) {<br /> ctx.console.log("*** Error: unable to create shader '"+shaderId+"'");<br /> return null;<br />}<br />// Load the shader source<br />ctx.shaderSource(shader, shaderScript.text);<br /> // Compile the shader<br />ctx.compileShader(shader);<br /> // Check the compile status<br />var compiled = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);<br /> if (!compiled) {<br /> // Something went wrong during compilation; get the error<br />var error = ctx.getShaderInfoLog(shader);<br /> ctx.console.log("*** Error compiling shader '"+shaderId+"':"+error);<br />ctx.deleteShader(shader);<br /> return null;<br /> }<br /> return shader;<br />}<br />
  35. 35. Array Buffers<br />function makeBox(ctx)<br />{<br />// vertex coords array<br />var vertices = new Float32Array(<br /> [ 1, 1, 1, -1, 1, 1, -1,-1, 1, 1,-1, 1, …..<br /> );<br /> // normal array<br />varnormals = new Float32Array(<br /> [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, ….<br /> // texCoord array<br />vartexCoords = new Float32Array(<br /> [ 1, 1, 0, 1, 0, 0, 1, 0 ,….<br /> // index array<br />var indices = new Uint8Array(<br /> [ 0, 1, 2, 0, 2, 3, ….<br /> );<br />varretval = { };<br />retval.normalObject = ctx.createBuffer();<br />ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);<br />ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);<br />retval.texCoordObject= ctx.createBuffer();<br />ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);<br />ctx.bufferData(ctx.ARRAY_BUFFER, texCoords, ctx.STATIC_DRAW);<br />retval.vertexObject = ctx.createBuffer();<br />ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);<br />ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);<br />ctx.bindBuffer(ctx.ARRAY_BUFFER, null);<br />retval.indexObject = ctx.createBuffer();<br />ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);<br />ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);<br />ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);<br />retval.numIndices = indices.length;<br /> return retval;<br />}<br />
  36. 36. Buffer Objects<br />WebGL reference card – page 1<br />
  37. 37. Typed Array<br /><br />
  38. 38. Texture<br />//<br />// loadImageTexture<br />//<br />// Load the image at the passed url, place it in a new WebGLTexture object and return the WebGLTexture.<br />//<br />function loadImageTexture(ctx, url)<br />{<br />var texture = ctx.createTexture();<br />texture.image = new Image();<br />texture.image.onload = function() { doLoadImageTexture(ctx, texture.image, texture) }<br />texture.image.src = url;<br /> return texture;<br />}<br />function doLoadImageTexture(ctx, image, texture)<br />{<br />ctx.bindTexture(ctx.TEXTURE_2D, texture);<br />ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, ctx.RGBA, ctx.UNSIGNED_BYTE, image);<br />ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);<br />ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);<br />ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);<br />ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);<br />ctx.bindTexture(ctx.TEXTURE_2D, null);<br />}<br />
  39. 39. WebGL reference card page 2<br />
  40. 40. Pointers<br /><br />Public email list<br /><br /><br /><br /><br />….<br />
  41. 41. Middleware<br /><br /><br /><br /><br /><br /><br />Lessons<br /><br />…..<br />
  42. 42. Going from COLLADA to WebGL<br />
  43. 43. Loading COLLADA (or X3D)<br />Spore COLLADA viewer (client XML parser)<br />xml.evaluate(XPATH)<br />Javascript XML cheat sheet<br />Google O3D – preprocessed to json<br /><br />O3D mod – (client XML parser)<br />2010<br />2011<br />Scene js – (server preprocessed)<br /> (server side python)<br /> (PyCollada)<br />X3dom – (client DOM)<br />X3D integrated in the Xhtml page<br />
  44. 44. Typical (COLLADA) xml ‘model’<br /><br />
  45. 45. XML & XHTML<br />varfloat_array=textValue.split(/s+/).map(parseFloat); <br />DOM (jquery) allow for fast tree parsing/modifications<br />Direct XML export (POST/PUT) to server<br />
  46. 46. Typical json ‘model’<br /><br />myData = JSON.parse(text, function (key, value) { <br />if (value && typeof value === 'object') {… return value; }});<br />Need convention for attributes vs value, not easy to go back to XML<br />
  47. 47. Typed Array loading<br />function onLoad(){   var canvas = document.getElementById("lesson01-canvas");   initGL(canvas);                                    varxmlhttp = new XMLHttpRequest();"GET", "", true);   xmlhttp.responseType = "arraybuffer";               xmlhttp.onload = function()    {      var buffer = xmlhttp.response;      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);                      // Reading Data      var v1 = new Float32Array(buffer);                     alert(v[0]);  // This works fine.   }   xmlhttp.send();                        }<br />
  48. 48.
  49. 49. Google Body<br />Javascript / WebGL / tdl library<br />Meshes grouped by texture – 63 draw calls, 1800+ elements<br />Index and attribute array merged (65K max)<br />16-bits fixed point for pos, normal, textcoords<br />Watch<br />
  50. 50. Simple, Fast, Compact Meshes for WebGL<br />Won Chun (@won3d on Twitter)<br />Google Web Search Infrastructure<br />JSON / XML        :-(<br />ASCII v. Binary    :-)<br />Quantization        :-)<br />Compression :-)<br />
  51. 51. What is REST ?<br />Roy Fielding dissertation (2000)<br />Representational State Transfer (REST) is an architecture, not a standard. <br />REST is based on http, xml, uristandards<br />REST is everywhere already<br />twitter API<br />Dropbox API<br />Google MAP API Web services<br />….<br />
  52. 52. 6 constraints for a RESTful API<br /><ul><li>Client–server Clients are separated from servers by a uniform interface. Clients are not concerned with data storage, Servers are not concerned with the user interface or user state. Servers and clients may also be replaced and developed independently, as long as the interface is not altered.
  53. 53. Stateless Client context is not stored on the server between requests. Each request from any client contains all of the information necessary to service the request, and any session state is held in the client. The server can be stateful; this constraint merely requires that server-side state be addressable by URL as a resource
  54. 54. Cacheable As on the World Wide Web, clients are able to cache responses. Responses must therefore, implicitly or explicitly, define themselves as cacheable, or not, to prevent clients reusing stale or inappropriate data in response to further requests. Well-managed caching partially or completely eliminates some client–server interactions, further improving scalability and performance.
  55. 55. Layered system A client cannot ordinarily tell whether it is connected directly to the end server, or to an intermediary along the way. Intermediary servers may improve system scalability by enabling load balancing and by providing shared caches. They may also enforce security policies.
  56. 56. Code on demand Servers are able to temporarily extend or customize the functionality of a client by transferring logic to it that it can execute. Examples of this may include client-side scripts such as JavaScript.
  57. 57. Uniform interface The uniform interface between clients and servers simplifies and decouples the architecture, which enables each part to evolve independently. The four guiding principles of this interface are:Identification of resources (e.g. URI), Manipulation of resources, Self-descriptive messages, Hypermedia as the engine of application state</li></ul>http://<br />
  58. 58. methods<br />PUT and DELETE are defined to be idempotent - multiple identical requests should have the same effect as a single request<br />POST is not necessarily idempotent, and therefore sending an identical POST request multiple times may further affect state or cause further side effects<br />See also HEAD, OPTIONS and TRACE methods<br />Potential use:<br /><br />
  59. 59. What is REST 3D ?<br />3D as a web service<br />http://rest3d request<br />Web Server<br />Client application<br />Response document<br />Cloud Storage<br />
  60. 60. Multiple services – same API<br />Web Server<br />Web Server<br />Web Server<br />Client application<br />Cloud Storage<br />Cloud Storage<br />Cloud Storage<br />
  61. 61. Multiple applications<br />Client application<br />Web Server<br />Web Server<br />Web Server<br />Client application<br />Cloud Storage<br />Cloud Storage<br />Cloud Storage<br />Client application<br />
  62. 62. rest 3d methods<br />Potential use model:<br /><br />
  63. 63. Use case 1 – content gathering<br />Program interface to content repositories. Current state requires human in the loop, and content creation tool to explore the model.<br /><br /><br /><br /><br /><br />…<br />
  64. 64. Use case 1 – content gathering<br /><ul><li>search – return models matching with metadata search
  65. 65. browse – Avoid downloading all the 3D models that matches the search, this feature provides information about the models such as number of polygons, date, tool used to create the model, …
  66. 66. traverse – explore the model hierarchy, and sub parts or/and categories.
  67. 67. dependencies - list all the dependencies, for instance the list of textures, shaders, or other parts of the model
  68. 68. filter – select only the parts needed by the client. Allows for texture/3D LOD selection, paging…
  69. 69. download – get selected subset of the model in a specific format. </li></li></ul><li>Use case 2 – collaborative browsing/viewing<br /><ul><li>search – return models matching with metadata search
  70. 70. scene – Create a scene and position the models in the scene
  71. 71. viewer – extend the client with a viewer application (<embed>) of the created scene.
  72. 72. collaborate – enable multiple applications/users to interact with the scene
  73. 73. store – store the created scene for others to discover
  74. 74. link– provide a URL to the scene</li></li></ul><li>Use case 3 – content repository<br />Content gathering API plus:<br /><ul><li>create– add models to the content repository
  75. 75. update – modify an existing model
  76. 76. version – server list all the different versions available, with metadata
  77. 77. diff / merge – provide tools to show the difference between versions
  78. 78. process – provide tools to process the models, mesh optimization, texture atlas,
  79. 79. convert – covert a model from one format to another as a web service.</li></li></ul><li>insert your use case here<br />Join the discussion:<br /><br /><br />
  80. 80. Leaving the REST to YOU?<br />Official web page<br /><br />Join the discussion:<br /><br />