webgl入门笔记(一) 基本结构和知识

canvas

以左上角为原点；
右边是x正轴，左边是y正轴

webgl坐标系

x轴最左边是-1，最右边是1；
y轴最下面是-1，最上面是1；
远离自己的方向最大值是-1，向自己的方向最大值是1；
（与canvas的长宽比无关）

webgl渲染管线

图元装配：相当于告诉电脑你要做什么形状的东西
光栅器：将图像按像素划分
顶点着色器：形状的渲染
片元着色器：加入纹理，颜色等信息

webgl关键词

attribute

顶点着色器单独的存储限定符，数据从着色器外传入着色器内

uniform

全局的存储限定符，片元和顶点着色器都能使用

一般格式

入口函数（onload执行）

function init() {
            initWebgl();
            initShader();
            initBuffer();
            draw();
        }

webgl初始化

getContext函数是为了获取webgl的上下文
viewport的四个参数：原点坐标，宽和高
ortho投影坐标系，前六个参数分别是xyz三个轴的最末端，最后一个是返回的投影矩阵
注意定义时要var projMat4 = mat4.create();因为直接mat4.ortho或者webgl.ortho会报错，因为这个ortho是外部文件里的方法（glMatrix-0.9.6.min.js)

var webgl;
var projMat4 = mat4.create();
function initWebgl() {
            let webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
            mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
        }

初始化shader

shadersourse，就是让shader能执行定义的shader代码，绑定shader和shader代码
compileshader：编译shader
createProgram()是创建项目，创建完后要与shader进行绑定attachShader(program, vsshader);

let vertexstring = `
        attribute vec4 a_position;
        uniform     mat4    proj;
        void main(void){
            gl_Position =proj *  a_position;
            gl_PointSize=60.0;
        }
        `;
let fragmentstring = `
        void main(void){
          gl_FragColor = vec4(0,0,1.0,1.0);
        }
        `;
function initShader() {

            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)

            webgl.linkProgram(program);
            webgl.useProgram(program);

            webgl.program = program
        }

shader流程总结：

一、shader
	1.先创建shader（createShader）
	2.绑定shader和shader代码
	3.编译shader
二、program
	1.创建项目（createProgram）
	2.绑定program和shader
	3.连接webgl和program
	4.webgl使用program
	5.设置webgl的program属性

初始化缓冲区

getAttribLocation：获取属性坐标，第一个参数是webgl的属性，第二个参数是这个属性中的坐标参数
vertexAttrib4fv：4fv表示4个参数的数组，这个函数的意思是把pointPosition赋值到aPsotion中
uniformMatrix4fv：跟vertexAttrib4fv一样也是赋值，但是中间那个bool值表示是否转置，一般都是false

function initBuffer() {
            let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]);
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            webgl.vertexAttrib4fv(aPsotion, pointPosition);
            let uniformProj = webgl.getUniformLocation(webgl.program, "proj");
            webgl.uniformMatrix4fv(uniformProj, false, projMat4);
        }

绘制（这里示例是绘制一个点）

clearColor：先用一种颜色冲刷一下，可以理解为背景色
webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);这个是颜色的检测可以加可以不加
drawArrays（webgl.POINTS：绘制点，0：从数组下标0开始，1：绘制一个点）

function draw() {
            webgl.clearColor(0.0, 0.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
            webgl.drawArrays(webgl.POINTS, 0, 1);
        }

下一篇: webgl入门笔记(二)