SlideShare a Scribd company logo

IDC 2010 Conference Presentation

•
•
Gonçalo Amador
Gonçalo Amador

Glypher3D: A graphics pipeline for directly rendering 3D scenes on browser (IDC 2010 Conference Presentation)

1 of 18
Download to read offline
Glypher3D A Graphics Pipeline for Directly Rendering 3D Scenes on Browser www.di.ubi.pt/~agomes/glypher E. Pinto and G. Amador and A. Gomes Instituto de Telecomunicações, Departamento de Informática, Universidade da Beira Interior 6201-001 Covilhã, Portugal head_gar@msn.comgamador@it.ubi.pt agomes@di.ubi.pt August, 2010
Presentation Overview • Web3D Overview • Glypher3D – Graphics Pipeline • Results • Conclusions and Future Work
What is Web3D? • All the protocols, technologies, languages, and file formats that allow the development of 3D web content. • Examples: • Standards: ISO VRML and X3D, WebGL. • Non-Standards: Java3D, Flash3D, C3DL, Ajax3D, 3DMLW, O3D, etc. • Not widely used due to several limitations in most Web3D technologies.
Web3D Technologies • Advantages: • Easy to integrate files or 3D scenes into a web page. • 3D models can be imported from external files. • The possibility to create 3D real-time interactive environments. • Disadvantages: • The creation of 3D content is not an intuitive, simple, and fast process. • Their usage often requires the knowledge and usage of specific (non-general purpose) web programming languages and tools. • Most Web3D technologies require of the installation of some sort of browser add-ons or plugins.
• An easy to use library written entirely using JavaScript together with the HTML5 <canvas> element. • Intended to facilitate the creation, manipulation, and rendering of 3D Web contents directly on the browser, without the need to install any plug-ins or add-ons. • Client-side architecture, i.e., all files and library functions are loaded and ran directly on the clients browser. Glypher3D
• 2D rendering area where the scene will be draw. • Specify the width and height of the area. • Specify the area location on the web page. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display • Define geometry of objects using primitives:
Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display • Model and manipulate objects through geometric transformations (in the X, Y, and Z axis): • Rotation • Translation • Scaling • Shearing
Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display • Map the 3D scene and objects onto a virtual plane in 3D. • Supported projections: • Parallel: depth (z coordinate) is ignored. i.e., all points are projected along parallel lines, that intersect at infinity. • Perspective: depth (z coordinate) is not ignored, i.e., all points are projected along parallel lines, that intersect at a finite distance from the observer's.
• Backface Culling: • Removes hidden lines and facets. • Only need to process and shade the visible geometry. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
• Painters algorithm: • Reorders the facets so that they can be drawn from back to front as an oil painter does. • Allows a proper view of the object. • Solves a potential problem of overlapping colours. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
• Colouring methods: • Background colour • Wireframe colour • Fill colour Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
• Shading methods: • Flat shading: for each face of the object, calculates the intensities, based on each face's normal and light vector position. • Gourand shading: for each pixel of each face of the object, calculates the intensities. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
• Final step. • Consists in drawing and representing the scene and respective 3D objects (either only the object's vertexes or the object wireframed, with colour filling, or with shading) in the <canvas> 2D area. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
Results www.di.ubi.pt/~agomes/glypher
Conclusions • Glypher3D is an effective way to develop, manipulate, and draw 3D objects directly on the browser. • Glypher3D is simpler and more intuitive than most other Web3D technologies. • Glypher3D does not require the installation of any kind of plugins or add-ons. • Web pages with Glypher3D content are faster to load than with other Web3D technologies. • Rendering complex objects can become slower than OpenGL, since all algorithms are written in Javascript and all the calculations are done on the client-side.
Future Work • Load/Import 3D models from files. • Allow the usage of textures for the construction of more realistic 3D scenes. • Improve the Gouraud shading, to give a more realistic look of the object without lowering the rendering performance.
Questions?

More Related Content

IDC 2010 Conference Presentation

  • 1. Glypher3D A Graphics Pipeline for Directly Rendering 3D Scenes on Browser www.di.ubi.pt/~agomes/glypher E. Pinto and G. Amador and A. Gomes Instituto de Telecomunicações, Departamento de Informática, Universidade da Beira Interior 6201-001 Covilhã, Portugal head_gar@msn.comgamador@it.ubi.pt agomes@di.ubi.pt August, 2010
  • 2. Presentation Overview • Web3D Overview • Glypher3D – Graphics Pipeline • Results • Conclusions and Future Work
  • 3. What is Web3D? • All the protocols, technologies, languages, and file formats that allow the development of 3D web content. • Examples: • Standards: ISO VRML and X3D, WebGL. • Non-Standards: Java3D, Flash3D, C3DL, Ajax3D, 3DMLW, O3D, etc. • Not widely used due to several limitations in most Web3D technologies.
  • 4. Web3D Technologies • Advantages: • Easy to integrate files or 3D scenes into a web page. • 3D models can be imported from external files. • The possibility to create 3D real-time interactive environments. • Disadvantages: • The creation of 3D content is not an intuitive, simple, and fast process. • Their usage often requires the knowledge and usage of specific (non-general purpose) web programming languages and tools. • Most Web3D technologies require of the installation of some sort of browser add-ons or plugins.
  • 5. • An easy to use library written entirely using JavaScript together with the HTML5 <canvas> element. • Intended to facilitate the creation, manipulation, and rendering of 3D Web contents directly on the browser, without the need to install any plug-ins or add-ons. • Client-side architecture, i.e., all files and library functions are loaded and ran directly on the clients browser. Glypher3D
  • 6. • 2D rendering area where the scene will be draw. • Specify the width and height of the area. • Specify the area location on the web page. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
  • 7. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display • Define geometry of objects using primitives:
  • 8. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display • Model and manipulate objects through geometric transformations (in the X, Y, and Z axis): • Rotation • Translation • Scaling • Shearing
  • 9. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display • Map the 3D scene and objects onto a virtual plane in 3D. • Supported projections: • Parallel: depth (z coordinate) is ignored. i.e., all points are projected along parallel lines, that intersect at infinity. • Perspective: depth (z coordinate) is not ignored, i.e., all points are projected along parallel lines, that intersect at a finite distance from the observer's.
  • 10. • Backface Culling: • Removes hidden lines and facets. • Only need to process and shade the visible geometry. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
  • 11. • Painters algorithm: • Reorders the facets so that they can be drawn from back to front as an oil painter does. • Allows a proper view of the object. • Solves a potential problem of overlapping colours. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
  • 12. • Colouring methods: • Background colour • Wireframe colour • Fill colour Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
  • 13. • Shading methods: • Flat shading: for each face of the object, calculates the intensities, based on each face's normal and light vector position. • Gourand shading: for each pixel of each face of the object, calculates the intensities. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
  • 14. • Final step. • Consists in drawing and representing the scene and respective 3D objects (either only the object's vertexes or the object wireframed, with colour filling, or with shading) in the <canvas> 2D area. Glypher3D Building a 3D scene Canvas 2D Rendering Context 3D Scene Creation Modelling Transformations Projection transformations Hidden Surface Removal Algorithms Colouring and Shading Display
  • 16. Conclusions • Glypher3D is an effective way to develop, manipulate, and draw 3D objects directly on the browser. • Glypher3D is simpler and more intuitive than most other Web3D technologies. • Glypher3D does not require the installation of any kind of plugins or add-ons. • Web pages with Glypher3D content are faster to load than with other Web3D technologies. • Rendering complex objects can become slower than OpenGL, since all algorithms are written in Javascript and all the calculations are done on the client-side.
  • 17. Future Work • Load/Import 3D models from files. • Allow the usage of textures for the construction of more realistic 3D scenes. • Improve the Gouraud shading, to give a more realistic look of the object without lowering the rendering performance.