| Lights Out Cube | VML Polygons | 3D VML Home | Home |
The 3D VML Library is a minimalist 3D library; it only renders collections of well-formed set of polygons. A polygon set cannot for example be rendered correctly if there are intersecting polygons.
VML is essentially a 2D graphics library, as a result the 3D VML library cannot make any use of your powerful 3D graphics card. Therefore it is unlikely to be useful for writing Quake like games. The 3D VML library is a useful way of creating 3D effects on your web pages, such as rotating 3D text or spinning geometric shapes.
One of the goals of the 3D VML library was to be small, so as to be quickly downloadable. The only way to create polygons is by defining them in an XML file. This is no too much of a constraint as defining polygons programmatically is a tricky task and ultimately involves transforming data anyway.
IE5 has a rather nice extension known as XML data islands. An XML data island can exist anywhere in a web page or as link to a downloadable file. Once loaded these objects can be accessed via the standard DOM API.
3D VML polygons are defined in XML data islands. The syntax consists of our XML consists of:
SCALE - this defines the scale of the polygon set.
POINTS - This the definition of the points that make up the polygon set.
FACES - This defines a face of the polygon the F Label has two attributes id and color. The id is an identifier that you can use to identify your face, this must be unique. The color is the color of the polygon. The content of the F tag should contain a list of faces separated by the V tag.
XML data islands are a really flexible feature of IE5; the cube example uses them to load the data on demand, to change the polygon without having to reload the web page.
To enable VML you must as your opening HTML tag have:
The 3D VML library needs a small amount of Script to tie the XML data island to the 3D VML library. Before the VML Library can be used you need insert some where in the HTML page:
The location in the Web page you want the 3D object, this is usually done with the DIV tag.
If you need to position the DIV use the position styles.
The XML data island.
The following JScript can tie the XML data island and the DIV:
The fnStartInit function is called every time the state of the XML file changes. We are only interested when it has completely loaded. As it's possible that the XML file may have finished loading before our HTML file, we are working over a network and strange things may happen after all, we do not allow the polyframe to load the object until the HTML file is also fully loaded. We call fnStartInit during the init function in case this series of events has occurred.
This short example ties these ideas together.
Click here to download the files needed to make the simple example work
Web site (c) 2000 Gareth Richards