前提條件和預期結果

　　目前只有少數的瀏覽器支持 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