开始WebGL程序之前,还是得进行一些理论上的知识,不然会让自己的代码写得不明不白。上一篇文章就是写得关于WebGL的一些基础知识http://nbcoders.com/detail/156
第一:首先获取WebGL上下文。
第二:编写顶点着色器
第三:开始一些自己的绘制工作(调用WebGL API)
这里我们就以画一个三角形为例子,开始我们的WegGL程序吧。
首先获取WebGL的上下文环境,也就是渲染环境,我们要利用HTML5的canvas元素。所以我们这里要新建一个Canvas元素,这里canvas可以对应一个WebGL的渲染环境,也可以对应一个canvas-2d的渲染环境。编写如下代码:
<html>
<body>
<canvas id="webglCanvas" style="border:1px solid blue;" width='600px' height='600px'></canvas>
</body>
</html>
可以简单运行试试效果,有个蓝色的细框。接下来我们要获取WebGL的渲染区域,然后操作WebGL渲染区域。这里通过canvas的getContext方法获取WebGL的上下文环境。
var webglContext = document.getElementById().getContex("experimental-webgl");
这里完整代码如下:
function initCanvas(canvasId) {
var canvas = document.getElementById(canvasId);
var context = null;
try{
context = canvas.getContext("experimental-webgl");
}catch(ex)
{
alert(ex.toString());