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是负数