WebGL 简单范例 代码
setInterval( drawScene, 30 );
}
而在这边比较特别的,就是在编写 WebGL 程序时,必须先透过 DOM 来取得要使用的 Canvas、并透过他产生 WebGL rendering context,也就是函式一开始标示成黄色的区块。
其中,g_WebGLContext 是一个全域变量,是用来指向 WebGL rendering context 的。而在程序上,就是先透过 DOM 找到 id 为「canvas_object」的组件,再透过 canvas 的 getContext() 来取得 WebGL 的 rendering context;不过要稍微注意的是,目前是使用「experimental-webgl」,但是以后等到 WebGL 正式版的时候,应该会改成使用「webgl」。
而由于这是一个很简单的范例,所以在取得 WebGL 的 Context 后,就只有简单的设定 viewport 和 clear color,其它都使用 OpenGL ES 的默认值,然后就开始建立所需的 shader program 和对象数据、然后进入 main loop 了~
由于 OpenGL 3.0 / OpenGL ES 2.0 基本上已经将 fixed pipeline 的东西丢了,所以连同在 WebGL 环境里,都是一定要自己编写 Vertex Shader 和 Fragment Shader 的!
而在 WebGL 里,每一个 shader 程序,都是一个独立的 <script>、藉由不同的 id 和 type 来做区隔;