CS297 Proposal

3D Web Graphics without Plugins using SVG

Paungkaew Sangtrakulcharoen (paungkaew@hotmail.com)

Advisor: Dr. Chris Pollett

Description:Today in most common web browsers such as Internet Explorer or Netscape, we cannot view 3D objects without using a plugin or helper application. For example, to present VRML (Virtual Reality Modeling Language) [ANM97] documents, we need either a VRML helper application. The goal of this project is to present 3D graphic documents in Netscape without using plugins. In this project a stylesheet-transformation from X3D (Extensible 3D) [W3DC01] language to SVG (Scalable Vector Graphics) [W3C01] language using CSS (Cascading Style Sheets) [W3C98a] technology will be developed. This transformation would allow websites to display X3D without concerns about whether clients are able to download and install a plugin. X3D is a W3C open standard for 3D on the web. It is a version of VRML specified as an XML DTD. SVG is a XML language for describing vector graphics which will most likely be supported natively in future versions of Netscape. It is available now as a plug-in from Adobe.

Typically, 3D object are modelled as a mesh of 2D polygons. To present 3D objects as smooth surfaces these polygons are each shaded. The techniques used in this translation involve implementing several non-trivial graphic algorithms; therefore, it is important to understand the involved technologies. Part of the implementation will be to take X3D files and produce corresponding 2D meshes of particular views of the object. The 2D polygons in these meshes will be written in SVG format. Because SVG supports affine transformations and gradient painting on 2D shapes, it is possible to use SVG to render 3D objects. In many situations, the client wants to view 3D objects in different perspectives, so we must be able to recalculate and display the object correctly in those desired perspectives on the client side. Hence, another challenge of this project is that we have to optimize the size and speed of the translation process to be both fast and small enough as to be downloadable. This is needed so that the client will not become bored while manipulating the 3D objects.

The translation of this project will be written using a CSS2 (Cascading Style Sheets level 2) [W3C98a] stylesheet, which is currently supported by Netscape. CSS2 stylesheet is used to define the appearance of document: fonts, text sizes, and other aspects of document's visual design. It also allows tags to be replaced by ECMAscript (aka Javascript) [ECMA99] code, which in theory can produce SVG code. However, it is not technically easy to handle X3D tags in this context. Because ECMAscript code is only processed once in document bodies, we have to take care to leave hooks so that different orientations of the object can be computed on demand.

All the challenges that we encounter in this project make the job of writing the translator much harder than the writing of a standard rendering so this project rises to the level of Master's project.


Week 1 & 2: Jan 23 - Feb 1Scan [W3C01] + SVG handout.
Week 3: Feb 4-8Deliverable (1) due.
Week 4 & 5: Feb 11-22Read Ch.1-11 [ANM97]
Week 6: Feb 25-Mar 1Deliverable (2) due.
Week 7-8: Mar 4-Mar 15Read XML-XSLT handout
Week 9: Mar 18, Mar 20, Mar 22Deliverable (3) due.
Week 10: Mar 25, Mar 27, Mar 29Spring Recess
Week 11 - 14: Apr 3-Apr 24 Read Ch.1-6 [W00]
Week 15: Apr 29-May 3Deliverable (4) due.
Week 16 -17: May 6-May 15Deliverable (5) due.


The full project will be done when CS298 is completed. The following will be done by the end of CS297:

1. Become reasonably proficient at  SVG. This will be demonstrated by creating an image of a sunset that uses polygon's, rect's, ellipse's, path's, gradient's, viewBox's, group's, and transform's.

2. Become reasonably proficient at X3D/VRML. This will be demonstrated by creating a 3D mock-up of my appartment.

3. Create a DTD for ShML a language given in Dr. Pollett's CS146 Fall semester HW2. Write a XSL transform to render this language in SVG.

4. Get the X3D Shape tag to work using XSLT and SVG for Box, Cone, and Cylinder geometries and non-texture related support for the  appearance node attribute.

5. First semester report on project of length between 10-20 pages.


[ANM97] VRML 2.0 Sourcebook. 2nd ed. A. Ames, D. Nadeau, J. Moreland. Wiley. 1997.

[ECMA99] Standard ECMA-262 ECMAScript Language Specification 3rd ed. http://www.ecma.ch/ecma1/stand/ecma-262.htm. ECMA. 1999.

[GR00] 3D Interactive VML. http://www.gersolutions.com/vml/. Gareth Richards. 2000.

[MK01] LiveGraphics3D Documentation. http://wwwvis.informatik.uni-stuttgart.de/~kraus/LiveGraphics3D/documentation.html. Martin Kraus. 2001.

[W00] 3D Computer Graphics. 3rd ed. Allan Watt. Pearson Education Limited. (Addison Wesley). 2000.

[W3C97] Extensible Markup Language (XML). http://www.w3.org/XML. W3C.

[W3C98a] Cascading Style Sheets, level 2 CSS2 Specification. http://www.w3.org/TR/REC-CSS2. W3C.

[W3C98b] VML - the Vector Markup Language. http://www.w3.org/TR/NOTE-VML. W3C.

[W3C99] XSL Transformations (XSLT) Version 1.0. http://www.w3.org/TR/xslt. W3C.

[W3C01] Scalable Vector Graphics (SVG) Specification 1.0. http://www.w3.org/TR/SVG/. W3C.

[W3DC01] Extensible 3D (X3D) Graphics Working Group. http://www.web3d.org/x3d.html. Web 3D Consortium. 2001.