I've been lazy for the items related to the graphics including OpenGL ES and OpenCL. I have yet to put some materials on those topics on my site. Adding to the backlog, I feel I need to do something on WebGL. I could put WebGL related stuff on HTML5 but decided to leave it separate from other topics which are related to the WebGL.
Put your mouse on the teapot and rotate.
On Chrome, this will work. But not sure on Firefox, it may depend on HW acceleration or disabled WebGL settings.
Borrowed from https://github.com/KhronosGroup/WebGL/tree/master/sdk/demos
Actually, the files needed are in demo.zip. Also we need the following script as we can see from the view-source of this html file:
In the head section, we need the following script:
<script type="text/javascript" src="demo/teapot/webgl-utils.js"></script>
<script type="text/javascript" src="demo/teapot/webgl-debug.js"></script>
<script type="text/javascript" src="demo/teapot/matrix4x4.js"></script>
<script type="text/javascript" src="demo/teapot/cameracontroller.js"></script>
<script type="text/javascript" src="demo/teapot/teapot-streams.js"></script>
<script type="text/javascript" src="demo/teapot/demo.js"></script>
Also, we need the script below in the body section where we want to put the teapot:
<div id = "teapot">
<!-- Couldn't figure out how to get this effect without using
the "center" tag -->
<center>
<canvas id="c" style="width: 600px; height: 450px;" class="centeredcanvas">
</canvas>
</center>
</div>
The primary objective of this site is to draw anything on the web whatever it is without any plug-ins. WebGL and Canvas are the main player to serve that purpose.
Join Linkedin Group WebGL.
Also look at the following article from "http://www.theverge.com/" July 16, 2012, Play this: 'GL Invasion,' a shoot 'em up exercise in frustration built with WebGL