WebGL学习笔记（一）
一个最简单的webgl程序
*引入的js文件是简单的webgl辅助函数 *
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
canvas {
margin: 0 auto;
}
</style>
<script src="../lib/webgl-debug.js" charset="utf-8"></script>
<script src="../lib/webgl-utils.js" charset="utf-8"></script>
<script src="../lib/cuon-matrix.js" charset="utf-8"></script>
<script src="../lib/cuon-utils.js" charset="utf-8"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
//顶点着色器
var VSHADER_SOURCE =
'void main(){ \n' +
'gl_Position = vec4(0.0,0.0,0.0,1.0);\n' +
'gl_PointSize = 10.0;\n' +
'}\n';
//片元着色器
var FSHADER_SOURCE =
'void main(){ \n' +
'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
'}\n';
function main() {
var canvas = document.getElementById('canvas');
var gl = getWebGLContext(canvas);
if (!gl) {
console.log("sorry");
return;
}
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log("failed");
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
}
main();
</script>
</body>
</html>
程序中有一段着色器程序。
着色器程序有两种：顶点着色器和片元着色器
- 顶点着色器。顶点着色器是用来描述顶点信息的，包括位置、颜色。顶点是指二维或三维中的一个点，比如二维图形或三维图形的端点或交点
- 片元着色器。进行 逐片元处理过程如光照的程序。可以理解为像素。
上面这段代码的执行过程：
执行过程
下面是简版的
简单过程
| initShaders(gl,vshader,fshader) | 在webgl系统内部建立和初始化着色器 | |
|---|---|---|
| 参数 | gl | 指定渲染上下文 |
| vshader | 指定顶点着色器的代码 | |
| fshader | 指定片元着色器的代码 | |
| 返回值 | true | 初始化着色器代码成功 |
| false | 初始化着色器代码失败 |
着色器代码和C语言一样，有一个main（）入口函数，他没有返回值
顶点着色器的内置变量
| 类型和变量名 | 描述 | 是否必需 |
|---|---|---|
| vec4 gl_Position | 表示顶点位置 | 是 |
| float gl_PointSize | 表示点的尺寸（像素数） | 否，默认为1.0 |
GLSE ES是一种强类型的语言，必须明确指明变量的类型，下面是几种类型
| 类型 | |
|---|---|
| float | 表示浮点数 |
| vec4 | 表示由四个浮点数组成的 矢量 |
其中，由四个分量组成的矢量被称为齐次坐标，它能够提高运算效率，虽然齐次坐标是四维的，但如果最后一个分量是1.0，这个齐次坐标就可以表示为“前三个分量为坐标值”的那个点；
齐次坐标如果用（x,y,z,w）,就等价于三维坐标（x/w,y/w,z/w）。
片元着色器的内置变量
| 类型和变量名 | 描述 |
|---|---|
| vec4 gl_FragColor | 指定片元颜色（RGBA格式） |
绘制操作
使用`gl.drawArrays(gl.POINTS,0,1); 该函数规范如下：
| gl.drawArrays(mode,first,count) | ||
|---|---|---|
| 执行顶点着色器，按照mode参数指定的方式绘制图形 | ||
| 参数 | mode | 指定绘制的方式，可接受以下常量符号：gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP, gl.TRIANGLES, gl.TRIANGLE_STRIP ,gl.TRIANGLE_FAN |
| first | 指定从哪个顶点开始绘制（整型数） | |
| count | 指定绘制需要用到多少个顶点（整型数） | |
| 返回值 | 无 | |
| 错误 | INVALI D_EN UM | 传入的mode参数不是前述参数之一 |
| INVALID_VALUE | 传入的first或count是负数 |
当程序调用gl.drawArrays()时，顶点着色器将被执行count次，每次处理一个顶点。一旦顶点着色器着色器执行完毕，片元着色器将开始执行。最后一个基本图形就绘制在屏幕上了。
