Webgl入门笔记-画矩形

本人是三维可视化方向的研究生，最近因为时间比较多，想深入学习下webgl，这边推荐下b站的webgl入门教程。webgl入门视频
代码分为三个部分：

一、shader编写

分为fs和vs

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3  v3Position;
    void main (void){
        gl_Position=vec4(v3Position,1.0);
    }
</script>
<script id="shader-fs" type="x-shader/x-fragment">
    void main (void){
        gl_FragColor = vec4(1.0,1.0,1.0,1.0);
    }
</script>

二、初始化

function getShaderSource(scriptID){
        var shaderScript =  document.getElementById(scriptID);
        if(shaderScript==null){
            return "";

        }else{
            var sourceCode = "";
            var child = shaderScript.firstChild;
            while(child){
                if(child.nodeType == child.TEXT_NODE) sourceCode+=child.textContent;
                child = child.nextSibling;
            }
            return sourceCode;
        }
         
    }
var webgl =null;
    var vertextShaderObject = null;
    var fragmentShaderObject = null;
    var programObject  = null;
    var triangleBuffer = null;
    var v3PositionIndex  = 0;
function init(){
        var canvas = document.getElementById('myCanvas');  //获取canvas
        webgl = canvas.getContext('webgl');  //赋予webgl上下文
        webgl.viewport(0,0,canvas.clientWidth,canvas.clientHeight)  //设置窗体的大小
        vertexShaderObject  = webgl.createShader(webgl.VERTEX_SHADER);  //创建顶点shader
        fragmentShaderObject  = webgl.createShader(webgl.FRAGMENT_SHADER) //创建颜色shader
        webgl.shaderSource(vertexShaderObject,getShaderSource('shader-vs')); //和shader联系到一起
        webgl.shaderSource(fragmentShaderObject,getShaderSource('shader-fs'));//和shader联系到一起
        webgl.compileShader(vertexShaderObject); //编译shader
        webgl.compileShader(fragmentShaderObject);//编译shader
        if(!webgl.getShaderParameter(vertexShaderObject,webgl.COMPILE_STATUS)) {alert('error:vertexShaderObject'); return;} //判断编译是否出错
        if(!webgl.getShaderParameter(fragmentShaderObject,webgl.COMPILE_STATUS)) {alert('error:fragmentShaderObject'); console.log(webgl.getShaderInfoLog(fragmentShaderObject)); return;}//判断编译是否出错
        programObject = webgl.createProgram(); //创建程序
        webgl.attachShader(programObject,vertexShaderObject)//程序绑定shader
        webgl.attachShader(programObject,fragmentShaderObject)//程序绑定shader
        webgl.bindAttribLocation(programObject,v3PositionIndex,'v3Position'); 
        webgl.linkProgram(programObject); //关联上程序
        //判断是否link时候是否出错，出错后如何检测出来
        if(!webgl.getProgramParameter(programObject,webgl.LINK_STATUS)){
            alert('error:programObject')
            console.log(webgl.getProgramInfoLog(programObject));
           
            return
        } 
        webgl.useProgram(programObject)  //使用程序
        var jsArrayData= [
            0.0,1.0,0.0,
            -1.0,-1.0,0.0,
            1.0,-1.0,0.0
        ]
        triangleBuffer = webgl.createBuffer();    //创建缓冲区 并且关联上
        webgl.bindBuffer(webgl.ARRAY_BUFFER,triangleBuffer)
        webgl.bufferData(webgl.ARRAY_BUFFER,new Float32Array(jsArrayData),webgl.STATIC_DRAW);
        
    }

三、绘制渲染

        webgl.clearColor(1.0,0.0,0.0,1.0);  //创建背景颜色
        webgl.clear(webgl.COLOR_BUFFER_BIT);
        webgl.enableVertexAttribArray(v3PositionIndex);
        webgl.vertexAttribPointer(v3PositionIndex,3,webgl.FLOAT,false,0,0); //第一个参数是 索引值 第二个参数 指定每个顶点属性的组成数量，必须是1，2，3或4。 第三个参数 当转换为浮点数时是否应该将整数数值归一化到特定的范围。 第四个参数 类型 第四个参数 多少字节为一个点所对应的一组数据 最后一个参数 指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。
        webgl.drawArrays(webgl.TRIANGLES,0,3)   //第一个参数 是画什么形状 第二个参数 是 从第几个值开始 第三个数是指的 需要几个值