Although WebGL is really a separate standard, I thought it appropriate to include a brief discussion of this spec. In my opinion it is not ready for prime time (browser support is spotty at best). For example, some browsers (such as Safari) do not activate WebGL features by default. Therefore, you may see a message like the following:
If you are using Safari (on a Mac), you can enable WebGL from the menu – Develop > Enable WebGL (see below).
Background: WebGL is based on OpenGL (this is used to power graphics libraries on Macs, iOS devices, and Android devices). It is analogous to DirectX for Windows devices. By default, WebGL requires a lot of code to generate even simple objects. For a more detailed explanation, refer to http://learningwebgl.com/blog/?p=28 for the code to generate a square and a triangle. Warning – if you follow the above link, you will be exposed to a significant amount of code. Since this code does not appear to be understandable by mere mortals, Mr. Doob created ThreeJS. This is a framework which should help one work with WebGL. This can be downloaded from GitHub and installed. It is used in the example demonstrated below (courtesy of Mark Shufflebottom).
In the example shown below, a Collada file is being used to provide the basic 3D shape.
Example: The following example was provided by Mark Shufflebotton at the Adobe Education Leaders Summer Institute (2012) ad is reproduced with permission.
- Working WebGL example (examine in various browsers). Not all browsers support WebGL at the time of this writing.
http://learning-html5.info/examples/WebGL/ - For those unable to view directly in a browser, I provide a screen capture below. Just click on the image to view a larger version.
References:
- WebGL specification
- ThreeJS (from GitHub)
- Collada Schema
Loading ...