WebGL原生API及绘图基础

WebGL也是HTML5规范的一部分,从本质上讲它是一个增强型的图形绘制库,与HTML5的2D Canvas类似,只是WebGL是一个三维的绘图标准,并且同样使用了canvas元素。使用WebGL进行图形渲染至少要经历以下步骤:
1. 创建一个画布元素。
2. 获取画布的上下文。
3. 初始化视口。
4. 创建一个或多个包含渲染数据的数组(通常是顶点数组)。
5. 创建一个或多个矩阵,将顶点数组变换到屏幕空间。
6. 创建一个或多个着色器来实现绘制算法。
7. 使用参数初始化着色器。
8. 绘制。


一、画布元素与绘制上下文
使用WebGL只需要创建一个canvas元素,通过与该元素关联的DOM对象获取WebGL上下文:

function initWebGL(canvas){
    var gl;
    try{
        gl=canvas.getContex("expremental-webgl");
    }
    catch(e){
        var msg = "Error creating webgl context: "+ e.toString();
        alert(msg);
        throw  Error(msg);
    }
    return gl;
}

二、视口
获取了WebGL上下文就需要指定在哪里绘制图形,这就称为视口(viewport),调用gl的viewport()函数进行视口的初始化:

function initViewport(gl,canvas){
    gl.viewport(0,0,canvas.width,canvas.height);
}

其中的四个参数为画布左上角和右下角的坐标。
三、Buffer、ArrayBuffer和类型化数组
WebGL的绘制是由图元组成的,图元的种类包括三角形(三角形数组)、三角形带(triangle strip)、点和线。图元使用的数据数组被称为Buffer,定义了顶点的位置。以下代码定义了一个1×1的正方形顶点数组。

function createSquare(gl){
    var vertexBuffer;
    vertexBuffer = gl.createBuffer();//创建顶点缓冲区
    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);//将创建的缓冲区绑定到gl数组
    var vertex = [//定义四个顶点的位置
        .5, .5, 0.0,
        -.5,.5, 0.0,
        .5, -.5, 0.0,
        -.5, -.5, 0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertex),gl.STATIC_DRAW);//绑定位置数据到gl数组
    var square = {buffer:vertexBuffer,vertSize:3,nVerts:4,primtype:gl.TRIANGLE_TRIP};
    return square;
}

其中vertSize和nVerts分别定义了一个顶点中元素的个数和顶点的个数,此例中表明有4个顶点,每个顶点3个元素。Float32Array是为了WebGL专门引入浏览器的数据类型,称为类型化数组,是ArrayBuffer的一种,用于js中存储二进制数据。
四、矩阵
在绘制之前需要建立两个矩阵——模型视图矩阵(modelview matrix)和投影矩阵(projection martrix)。模型视图矩阵用于定义3D坐标系中正方形相对于相机的位置,投影矩阵用于在着色器中将相机空间中的3D坐标准环卫绘制视口的2D坐标。在本例中对模型的变换是沿-z轴平移3.333个单位,即远离相机3.333个单位,投影矩阵定义了一个45°的相机视野。

function initMatrices(){
    modelViewMatrix = new Float32Array(
        [1,0,0,0,
         0,1,0,0,
         0,0,1,0,
         0,0,-3.333,1
         ]);
    projectionMatrix = new Float32Array([
        2.41421,0,0,0,
        0,2.41421,0,0,
        0,0,-1.002002,-1,
        0,0,-0.2002002,0
    ]);
}

在一般开发中,很少有人会自己动手计算投影矩阵,因为一半计算非常复杂,大多都时通过框架来完成。比较有名的框架为glMatrix,专门在js中进行矩阵的运算。
五、着色器
着色器是一小段由类C的高级语言编写的,一般为GLSL ES语言,每个需要绘制的物体都要提供着色器,一个着色器可以应用于多个物体。在实际应用中通常只提供一个着色器,通过不同的参数多次复用。
着色器包括两个部分——顶点着色器(vertex shader)和片元着色器(fragment shader),后者也被称为像素着色器。顶点着色器负责将物体的坐标转换到2D空间去,片元着色器负责将颜色输出到每个转换后的顶点像素。颜色的输出可以为纯色、纹理、光源或者材质。

var vertexShaderSource =
    "   attribute vec3 vertexPos;\n"+
    "   uniform mat4 modelViewMatrix;\n"+
    "   uniform mat4 projectionMatrix;\n"+
    "   void main(void) {\n"+
    "       //返回变换并投影后的顶点数据\n"+
    "      gl_Position = projectionMatrix*modelViewMatrix*\n"+
    "          vec4(vertexPos,1.0);\n"+
    "   }\n";
var fragmentShaderSource =
    "   void main(void) {\n"+
    "       //返回像素颜色,这里为白色\n"+
    "      gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n"+
    "   }\n";

六、绘制图元
我们定义了一个函数draw()来完成图元的绘制,在该函数中我们将接管上面定义的WebGL上下文以及正方形对象。首先函数会清理一下画布并用黑色填充作为背景色。将顶点数组绑定到上下文中,使用着色器并把顶点数组和矩阵作为输入传给着色器。最后调用WebGL的drawArrays()绘制正方形。

function draw(gl,obj){
    //用黑色清空背景
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    //设置顶点数组
    gl.bindBuffer(gl.ARRAY_BUFFER,obj.buffer);

    //设置着色器
    gl.useProgram(shaderProgram);

    //设置着色器参数:顶点坐标、投影矩阵和模型视图矩阵
    gl.vertexAttribPointer(shaderVertexPositionAttribute,obj.vertSize,gl.FLOAT,false,0,0);
    gl.uniformMatrix4fv(shaderProjectionMatrixUniform,false,projectionMatrix);
    gl.uniformMatrix4fv(shaderModelViewMatrixUniform,false,modelViewMatrix);

    //绘制物体
    gl.drawArrays(obj.primtype,0,obj.nVerts);

}

最终的绘制结果如图所示:
这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值