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

10/24/2015来源:HTML教程人气:892

  前提条件和预期结果

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

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

2015618155306361.png (418×380)

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

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

2015618155324527.jpg (600×404)

  图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

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