Glypher3D: A graphics pipeline for directly rendering 3D scenes on browser (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

15. Results
www.di.ubi.pt/~agomes/glypher

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.

18. Questions?