IDC 2010 Conference Presentation

Glypher3DA Graphics Pipeline for Directly Rendering 3D

Scenes on Browserwww.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

[email protected]@it.ubi.pt [email protected]

August, 2010

http://www.di.ubi.pt/~agomes/glypher

mailto:[email protected]



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.

Glypher3DBuilding a 3D scene

Canvas 2D Rendering Context

3D Scene Creation

Modelling Transformations

Projection transformations

Hidden Surface Removal Algorithms

Colouring and Shading

Display



3D Scene Creation





Display

• Define geometry of objects using primitives:



3D Scene Creation





Display

• Model and manipulate objects through geometric transformations (in the X, Y, and Z axis):

• Rotation

• Translation

• Scaling

• Shearing



3D Scene Creation





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.



3D Scene Creation





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.



3D Scene Creation





Display

• Colouring methods:

• Background colour

• Wireframe colour

• Fill colour



3D Scene Creation





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.



3D Scene Creation





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.



3D Scene Creation





Display

Results

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

http://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?

IDC 2010 Conference Presentation

Software

Transcript of IDC 2010 Conference Presentation