SlideShare uma empresa Scribd logo
1 de 24
COLLADA to WebGL
Experimenting using COLLADA to bring content from
 Unity to WebGL using Turbulenz and Fl4re exporter

                  Rémi Arnaud
                 remi@acm.org
Content creation

                          Physics
             Animations             Audio



    Images                                  Script




3D model                  game                       …
Content ‘Pipeline’
    Modeler
                     Object files      Multiple indexes, Quads
  Animations
                     Animation files   Clips, bézier, complex
                     + skins/bones     Transformation graph
Textures, Shaders
                     Shader files      Vertex / Fragment shaders
     Physics         + psd

                     Physics files     Convex Mesh, collliders
  Optimization
                     Binary files      Single index, triangles
   Packaging                           DXTs, simplified scene

                     package file      Compressed folder
COLLADA – intermediate format
      Modeler
                      COLLADA        Multiple indexes, Quads
    Animations
                      COLLADA        Clips, bézier, complex
                                     Transformation graph
  Textures, Shaders
                      COLLADA        Vertex / Fragment shaders
       Physics
                      COLLADA        Convex Mesh, collliders
    Optimization
                      COLLADA        Single index, triangles
     Packaging                       DXTs, compressed anims

                      package file   Compressed folder
COLLADA Refinery (2007)
                             COLLADA Refinery 2.0.3 conditionners

                             Axisconverter
                             Compress Transforms
                             Stipper
                             Image conversion
                             Axis transform
                             Coherencytest ** Use this !!
                             Copyrighter
                             Deindexer
                             Triangulate
                             Vertex cache optimization
                             Optimizer
                             Packager



https://collada.org/mediawiki/index.php/COLLADA_Refinery
COLLADA interchange?
    Modeler A                Modeler B


  Animations A              Animations B


Textures, Shaders A      Textures, Shaders B


     Physics A                Physics B


  Optimization A           Optimization B


    Packaging                Packaging
COLLADA interchange?
    Modeler A                       Modeler B
                      COLLADA


  Animations A                     Animations B
                      COLLADA


Textures, Shaders A             Textures, Shaders B
                      COLLADA


     Physics A                       Physics B
                      COLLADA


  Optimization A                  Optimization B
                      COLLADA


    Packaging                       Packaging
COLLADA interchange?
    Modeler A                Modeler B


  Animations A              Animations B


Textures, Shaders A      Textures, Shaders B


     Physics A                Physics B


  Optimization A           Optimization B


    Packaging                Packaging
COLLADA loader?
    Modeler A


  Animations A


Textures, Shaders A


     Physics A


  Optimization A


    Packaging
COLLADA loader?
    Modeler A         COLLADA   My modeler


  Animations A


Textures, Shaders A


     Physics A


  Optimization A


    Packaging
COLLADA loader?
    Modeler A

                      Polygons
  Animations A
                       multiple indexes
                         image format
Textures, Shaders A       mesh optimization, split
                            complex transform hierarchy
                              no shader programs
     Physics A                  no collision volumes
                                  verbose text (xml) parsing

  Optimization A


    Packaging                         My game
COLLADA – more tools available?
                                    Modeler

  Max            Maya     Blender              Modo        Cinema4D       XSI

                                   Animations

        Poser                        DAZ                         Mixamo

                                Textures, Shaders

    Photoshop                   FX Composer                   Render Monkey

                                     Physics

        Bullet                      PhysX                        Havok

                                  Optimization

  Simplygon             Okino                    Atangeo              MeshLab

                                   Packaging

                           WebGL packaging
Unity Editor
            Fbx or simple COLLADA (e.g. no
             physics, morphing, shaders..)
                       Modeler

Max     Maya       Blender             Modo   Cinema4D   XSI

                                                                          C
                          Animations
                                                                          o
                         Mecanim
                                                                          n
                                                                          t
                       Textures, Shaders
                                                                          e
                      Shader Factory                                      n
                                                                          t
                             Physics

                           PhysX                                          p
                                                                          i
                         Optimization
                                                                          p
                                                                          e
                          Built-in
                                                                          l
                                                                          i
                          Packaging
                                                                          n
            IOS, Andoid, PC, Web (plugin), Flash                          e
  Unity Engine
                                                               http://unity3d.com/
Turbulenz SDK (WebGL)
                                    Modeler

Max            Maya         Blender             Modo   Cinema4D        XSI

                                   Animations

      Poser                           DAZ                     Mixamo

                                Textures, Shaders

  Photoshop                     FX Composer                Render Monkey
                      Imports COLLADA with physics
                                      Physics

      Bullet                        PhysX                     Havok

                                  Optimization

                                  dae2json

                                   Packaging

                      json2tar , mapping.json, cgfx2json


 WebGL Turbulenz engine
                                                            http://biz.turbulenz.com/developers
Unity Editor -> WebGL Turbulenz
                      using COLLADA !
Modeler




                    Editor




                                          Exporter




                                                               Converter




                                                                                      webG L engine
          Max                Unity                   COLLADA               dae2json                   Turbulenz
          Maya
          Blender
          …




                              http://u3d.as/content/fl4re/collada-dae-exporter-for-unity/3cC
WIP: Unity Editor -> WebGL
                     using COLLADA and glTF


          Max                  Unity              COLLADA                  COLLADA2GLTF           Turbulenz
Modeler




                      Editor




                                       Exporter




                                                               converter




                                                                                          WebGL
          Maya                                                                                    Threejs
          Blender                                                                                 ...
          …




                                                   https://github.com/KhronosGroup/glTF
WIP: Unity Editor -> WebGL
              using COLLADA , glTF and REST3D




                                                             converter
                                                                         glTF

                                                 REST3D                                 REST3D
Modeler




                    Editor




                                     Exporter




                                                                                WebGL
          Max                Unity              COLLADA                                 Turbulenz
          Maya                                                                          Threejs
          Blender                                                                       ...
          …


                                                 http://rest3d.org
Exporter UI
Animated Skinned mesh



                                            Turbulenz
                                            Yes!!
                                            (Picky on hierarchy, weapons
                                            attachment currently not by
                                            default in viewer app)

Unity



             Preview
             Yes!! (would love to select clip in preview)
Physics ?




Unity
- Need to have camera
and light to see physics
                                            Turbulenz
In ‘run’ mode
                                            Yes!!
                                            (some limitations
                                            getting resolved )


                           Preview
                           - No physics 
Lightmap (glow) ?




Unity                   Turbulenz
                        - user provided shader
                           mapping to enable
                           advanced lighting



            Preview
animations?




Unity
- SpiderRobots are ‘prefabs’
Sharing the same animations-                                 Turbulenz
                                                             Yes!!
                                                             - Some minor
                                Preview                      animation glitches
                                - Works only if animations
                                are shared!
Summary
• Unity -> COLLADA -> Turbulenz
  – COLLADA fulfill its promises:
     • game developer can combine tools from different
       vendors
  – Turbulenz does a great job importing COLLADA
     • Remaining issues are being worked on
  – glTF / REST3D
     • Those technologies will make it even easier and more
       efficient to bring COLLADA to WebGL apps
Thank you
• Links
     http://biz.turbulenz.com/developers
     https://collada.org/mediawiki/index.php/COLLADA_Refinery
     http://unity3d.com/unity/download/
     http://u3d.as/content/fl4re/collada-dae-exporter-for-unity/3cC
     https://github.com/KhronosGroup/glTF
     http://rest3d.org

• Questions?
                     remi (at) acm (dot) com

Mais conteúdo relacionado

Mais procurados

Discrete cosine transform
Discrete cosine transformDiscrete cosine transform
Discrete cosine transform
aniruddh Tyagi
 
A Multimodal Approach for Video Geocoding
A Multimodal Approach for   Video Geocoding A Multimodal Approach for   Video Geocoding
A Multimodal Approach for Video Geocoding
MediaEval2012
 

Mais procurados (6)

Discrete cosine transform
Discrete cosine transformDiscrete cosine transform
Discrete cosine transform
 
CS 354 GPU Architecture
CS 354 GPU ArchitectureCS 354 GPU Architecture
CS 354 GPU Architecture
 
A Multimodal Approach for Video Geocoding
A Multimodal Approach for   Video Geocoding A Multimodal Approach for   Video Geocoding
A Multimodal Approach for Video Geocoding
 
SIGGRAPH 2012: NVIDIA OpenGL for 2012
SIGGRAPH 2012: NVIDIA OpenGL for 2012SIGGRAPH 2012: NVIDIA OpenGL for 2012
SIGGRAPH 2012: NVIDIA OpenGL for 2012
 
Resource Oriented Architecture for Managing Multimedia Content by Florian
Resource Oriented Architecture for Managing Multimedia Content by FlorianResource Oriented Architecture for Managing Multimedia Content by Florian
Resource Oriented Architecture for Managing Multimedia Content by Florian
 
JDT
JDTJDT
JDT
 

Mais de Remi Arnaud (7)

rest3d Web3D 2014
rest3d Web3D 2014rest3d Web3D 2014
rest3d Web3D 2014
 
Rest3d BOF presentation at SigGraph 2013
Rest3d BOF presentation at SigGraph 2013Rest3d BOF presentation at SigGraph 2013
Rest3d BOF presentation at SigGraph 2013
 
rest3d - webGL meetup - SF 11/07/2012
rest3d - webGL meetup - SF 11/07/2012rest3d - webGL meetup - SF 11/07/2012
rest3d - webGL meetup - SF 11/07/2012
 
Collada exporter for unity
Collada exporter for unityCollada exporter for unity
Collada exporter for unity
 
COLLADA & WebGL
COLLADA & WebGLCOLLADA & WebGL
COLLADA & WebGL
 
6 10-presentation
6 10-presentation6 10-presentation
6 10-presentation
 
Keynote Net Games 09 - Rémi Arnaud
Keynote Net Games 09 - Rémi ArnaudKeynote Net Games 09 - Rémi Arnaud
Keynote Net Games 09 - Rémi Arnaud
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Último (20)

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

COLLADA to WebGL (GDC 2013 presentation)

  • 1. COLLADA to WebGL Experimenting using COLLADA to bring content from Unity to WebGL using Turbulenz and Fl4re exporter Rémi Arnaud remi@acm.org
  • 2. Content creation Physics Animations Audio Images Script 3D model game …
  • 3. Content ‘Pipeline’ Modeler Object files Multiple indexes, Quads Animations Animation files Clips, bézier, complex + skins/bones Transformation graph Textures, Shaders Shader files Vertex / Fragment shaders Physics + psd Physics files Convex Mesh, collliders Optimization Binary files Single index, triangles Packaging DXTs, simplified scene package file Compressed folder
  • 4. COLLADA – intermediate format Modeler COLLADA Multiple indexes, Quads Animations COLLADA Clips, bézier, complex Transformation graph Textures, Shaders COLLADA Vertex / Fragment shaders Physics COLLADA Convex Mesh, collliders Optimization COLLADA Single index, triangles Packaging DXTs, compressed anims package file Compressed folder
  • 5. COLLADA Refinery (2007) COLLADA Refinery 2.0.3 conditionners Axisconverter Compress Transforms Stipper Image conversion Axis transform Coherencytest ** Use this !! Copyrighter Deindexer Triangulate Vertex cache optimization Optimizer Packager https://collada.org/mediawiki/index.php/COLLADA_Refinery
  • 6. COLLADA interchange? Modeler A Modeler B Animations A Animations B Textures, Shaders A Textures, Shaders B Physics A Physics B Optimization A Optimization B Packaging Packaging
  • 7. COLLADA interchange? Modeler A Modeler B COLLADA Animations A Animations B COLLADA Textures, Shaders A Textures, Shaders B COLLADA Physics A Physics B COLLADA Optimization A Optimization B COLLADA Packaging Packaging
  • 8. COLLADA interchange? Modeler A Modeler B Animations A Animations B Textures, Shaders A Textures, Shaders B Physics A Physics B Optimization A Optimization B Packaging Packaging
  • 9. COLLADA loader? Modeler A Animations A Textures, Shaders A Physics A Optimization A Packaging
  • 10. COLLADA loader? Modeler A COLLADA My modeler Animations A Textures, Shaders A Physics A Optimization A Packaging
  • 11. COLLADA loader? Modeler A Polygons Animations A multiple indexes image format Textures, Shaders A mesh optimization, split complex transform hierarchy no shader programs Physics A no collision volumes verbose text (xml) parsing Optimization A Packaging My game
  • 12. COLLADA – more tools available? Modeler Max Maya Blender Modo Cinema4D XSI Animations Poser DAZ Mixamo Textures, Shaders Photoshop FX Composer Render Monkey Physics Bullet PhysX Havok Optimization Simplygon Okino Atangeo MeshLab Packaging WebGL packaging
  • 13. Unity Editor Fbx or simple COLLADA (e.g. no physics, morphing, shaders..) Modeler Max Maya Blender Modo Cinema4D XSI C Animations o Mecanim n t Textures, Shaders e Shader Factory n t Physics PhysX p i Optimization p e Built-in l i Packaging n IOS, Andoid, PC, Web (plugin), Flash e Unity Engine http://unity3d.com/
  • 14. Turbulenz SDK (WebGL) Modeler Max Maya Blender Modo Cinema4D XSI Animations Poser DAZ Mixamo Textures, Shaders Photoshop FX Composer Render Monkey Imports COLLADA with physics Physics Bullet PhysX Havok Optimization dae2json Packaging json2tar , mapping.json, cgfx2json WebGL Turbulenz engine http://biz.turbulenz.com/developers
  • 15. Unity Editor -> WebGL Turbulenz using COLLADA ! Modeler Editor Exporter Converter webG L engine Max Unity COLLADA dae2json Turbulenz Maya Blender … http://u3d.as/content/fl4re/collada-dae-exporter-for-unity/3cC
  • 16. WIP: Unity Editor -> WebGL using COLLADA and glTF Max Unity COLLADA COLLADA2GLTF Turbulenz Modeler Editor Exporter converter WebGL Maya Threejs Blender ... … https://github.com/KhronosGroup/glTF
  • 17. WIP: Unity Editor -> WebGL using COLLADA , glTF and REST3D converter glTF REST3D REST3D Modeler Editor Exporter WebGL Max Unity COLLADA Turbulenz Maya Threejs Blender ... … http://rest3d.org
  • 19. Animated Skinned mesh Turbulenz Yes!! (Picky on hierarchy, weapons attachment currently not by default in viewer app) Unity Preview Yes!! (would love to select clip in preview)
  • 20. Physics ? Unity - Need to have camera and light to see physics Turbulenz In ‘run’ mode Yes!! (some limitations getting resolved ) Preview - No physics 
  • 21. Lightmap (glow) ? Unity Turbulenz - user provided shader mapping to enable advanced lighting Preview
  • 22. animations? Unity - SpiderRobots are ‘prefabs’ Sharing the same animations- Turbulenz Yes!! - Some minor Preview animation glitches - Works only if animations are shared!
  • 23. Summary • Unity -> COLLADA -> Turbulenz – COLLADA fulfill its promises: • game developer can combine tools from different vendors – Turbulenz does a great job importing COLLADA • Remaining issues are being worked on – glTF / REST3D • Those technologies will make it even easier and more efficient to bring COLLADA to WebGL apps
  • 24. Thank you • Links http://biz.turbulenz.com/developers https://collada.org/mediawiki/index.php/COLLADA_Refinery http://unity3d.com/unity/download/ http://u3d.as/content/fl4re/collada-dae-exporter-for-unity/3cC https://github.com/KhronosGroup/glTF http://rest3d.org • Questions? remi (at) acm (dot) com

Notas do Editor

  1. All this content need to get in the game, somehow
  2. Typical content toolchain – it is a pipeline. Each stage has its own tools its own format.
  3. Ok, so no I can interchange tools, add more tools to pipeline, update tools. I don’t have to write exporters
  4. 6 years later, we are still doing the same things
  5. Exchanging physics with a texture tool ? Loading optimized data back in a modeler? Learning a modeler to use GLSL shaders?
  6. It’s really hard….
  7. Only provides final stage of COLLADA pipeline
  8. Turbulenz has limitations on the bone hierarchy
  9. Demo -> collisions.dae
  10. No glow map in turbulenz