Oops, your browser does not support the canvas element.

Controls:

This WebGL program tessellates a polygon using recursive bisecting of triangle edges. The resulting triangle mesh can be rotated with an optional “twist” which amplifies rotation for vertices further from the origin.

We provide 5 controls:

• Theta: Slider for the angle to rotate the polygon
• Subdivide: Slider for the number of recursions
• Twist?: Radio button to include the twist feature
• Shape: Drop-down menu for polygon type
• Resize: Resize the canvas by resizing the browser

Theta:	0
Subdivide:	4
Twist?:	yes no

Triangle Square Pentagon Hexigon

Notes

WebGL usage has a surprisingly broad set of requirements. Not only is Javascript required, HTML/HTML5, CSS, DOM (Document Object Model), Browser quirks, Browser Events, and the current state of the WebGL/GLES standard are also needed. Toss in Markdown for easy HTML generation, and you’re go!

The return is rich: the promise of an absolutely universal OpenGL deployment platform. Alas, the current standard is a moving target, and currently only Google Chrome and WebKit (the Safari developer nightly builds) support both WebGL and the HTML5 advanced UI components. Firefox supports WebGL but lacks the HTML5 latest features. This is likely to change within the next few months.

    HTML5:   webgl  slider  spinbox
    Firefox:   +       -       -
    Safari:    -       +       +
    WebKit:    +       +       +
    Chrome:    +       +       +
    

Another plus: the resulting model can be self-documenting rather than simply a bare 3D display with possible UI elements. Also, the integration of HTML with WebGL could provide quite interesting. One experiment uses a 2D canvas context (rather than the 3D context WebGL uses) to draw large text fragments with spline fonts, then use the result as textures within WebGL.

It appears that most, if not all, the GLUT and other OpenGL library features are available within the browser itself. The community is very active and are narrowing in on standards that not only help WebGL, but can be used by other HTML elements. The animation facility used in this model, for example, can also be used anywhere within an HTML page where efficient animation is needed — in 2D canvases, and in browser “special effects”.