在支持HTML5的浏览器上运行WebGL程序的方法

　　前提条件和预期结果

　　目前只有少数的浏览器支持 WebGL ，请看我的另外一篇文章：Can I use WebGL?.

　　下面的例子是在 Windows 下的 Chrome 16/23 以及 Android 下的 Firefox 17 进行测试。如果你使用的是非兼容浏览器访问则会弹出一个警告。

　　图1：包含 Hello world 文本的动画的 WebGL 立方体

　　在兼容 HTML5 的浏览器上，你将会看到如下图所示的带动画效果的立方体：

　　图2: 示例运行的屏幕截图

　　该代码基于 Lighting in WebGL - How to simulate lighting effects in your WebGL context - 非常感谢这篇教程。在该实例初始运行时，动画的立方体是通过一个静态的 Bitmap 图形对象渲染的。

　　下面的代码演示如何在程序中动态的渲染文本：

　　xml/HTML Code复制内容到剪贴板

　　// TODO #1 New method to create a texture

　　function createCubeTexture(text) {

　　...

　　}

　　在这里使用 gl.pixelStorei(gl.UNPACK_FLip_Y_WEBGL, true); 是非常重要的，用来确保写文本时不会前后颠倒。剩下的就很容易理解了：

　　XML/HTML Code复制内容到剪贴板

　　// TODO #2 Assign the created texture for display

　　cubeTexture = createCubeTexture("Hello World!");

　源码

// File #1: webgl-demo.htm