WebGL 入门 – 原生API介绍
要把WebGL绘制到页面上，通常需要执行如下工作：1. 创建画布元素2. 获取呈现上下文3. 初始化视口4. 创建顶点数组5. 创建矩阵6. 加载着色器7. 绘制 创建画布元素并获取上下文WebGL都发生在Canvas 元素的上下文中，Canvs的上下文是一个JavaScript对象，它提供了完整的WebGLAPI，你可以爱屏幕上创建和操作图形。由于WebGL 规范仍在开发中，因此上下文仍处于“实验”阶段。当前，大部分浏览器都使用语法 canvas.getContext("experimental-webgl") 来获取WebGLRenderingContext。 //从Canvas中获取上下文function initWebGL(canvas) { var gl; try { gl = canvas.getContext("experimental-webgl") || canvas.getContext("webgl"); } catch (e) { //Fail quietly } return gl;}初始化视口获得Canvas的上下文后，我们就可以设置在哪块区域绘制WebGL了。在WebGL中，这被称为视口（viewport）。 //将WebGL的视口设置为整个画布的大小function initViewport(gl, canvas) { gl.viewport(0, 0, canvas.width, canvas.height);} 创建顶点数组WebGL的绘制由图元（primitive）组成。图元的数据数组称为Buffer，它定义了顶点的位置。 下面的代码展示了如何创建一个大小为1x1的正方形的顶点数据。返回的JavaSript对象存储了顶点数据信息、数组中每个顶点所占的尺寸(在这个实例中包含三个浮点数来存储x、y、z的值)、需要绘制的顶点的数据，以及用于绘制正方形的图元的类型。 顶点数组是 Float32Array 类型的类型化数组。这是一种为了WebGL专门引入的新数据类型。它相比传统数组速度更快并且占用更少的内存。 //创建用于绘制正方形的定点数据function createSquare(gl) {var vertexBuffer;
vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
var verts = [
.5,.5,0.0, -.5,.5,0.0, .5, -.5,0.0, -.5, -.5,0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, primtype:gl.TRIANGLE_STRIP};
return square;
} 创建矩阵在绘制正方形之前，我们需要先建立两个矩阵。首先我们需要一个矩阵来定义正方形在3D坐标系中相对于摄像机的位置，这个矩阵也被称为模型视图矩阵（modelview matrix）。第二个矩阵是投影矩阵（projection matrix），这个矩阵将被用于在着色器中将摄像机空间中的模型的3D坐标转换为绘制的视口的2D坐标。 function initMatrices(){
// 正方形的变换矩阵——相对与相机沿着z轴稍微后移一些
modelViewMatrix = new Float32Array(
[1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, -3.333, 1]);
// 变换矩阵*45度视野（
projectionMatrix = new Float32Array(
[2.41421, 0, 0, 0,
0, 2.41421, 0, 0,
0, 0, -1.002002, -1,
0, 0, -0.2002002, 0]);
}
着色器着色器由两部分组成：顶点着色器(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";
绘制图元现在我们开始真正绘制正方形。首先清理画布并设置黑色为背景色。然后将顶点数组绑定到上下文中，使用着色器，并把定点数组和矩阵作为输入传递给着色器。最后调用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);
} http://static.cdn.pcbeta.com/data/attachment/album/201401/02/144738408tbsg14m1ms333.png
页:
[1]