[前端与HTML]--初始webGL

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

---

Modern Graphics System

• 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
• 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
• 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
• CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
• GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。

CPU vs GPU

• GPU由大量的小运算单元构成
• 每个运算单元只负责处理很简单计算
• 每个运算单元彼此独立
• 因此所有计算可以并行处理

WebGL Startup

1. 创建WebGL上下文
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行WebGL程序，输出结果

Create WebGL Context

    const canvas=document.querySelector('canvas');
    const gl=canvas.getContext('webgl');
    
    
    function create3DContext(canvas,options){
    const names=['webgl','experimental-webgl','webkit-3d','moz-webgl'];
    if(option.webgl2).names.unshift('webgl2');
    let context=null;
    for(let li=0;li<names.length;++li){
    try{
    context=canvas.getContext(names[li],options);
    }catch(e){
    //no-empty
    }
    if(context){
    break;
    }
    }
    return context;
    }

The Shaders

1.Vertex Shader

    attribute vec2 position;
    
    void main(){
    gl_PointSize=1.0;
    gl_Position=vec4(position,1.0,1.0);
    }
   

2.Fragment Shader

precision mediump float;

void main(){
gl)FragColor=vec4(1.0,0.0,0.0,1.0);
}

Create Program

    const vertexShader=gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader,vertex);
    gl.complieShader(vertexShader);
    
    const fragmentShader=gl.createShader(gl.FRAGMENT_SHANDER);
    gl.shaderSource(fragmentShader,fragment);
    gl.compileShader(fragmentShader);
    
    const program=gl.createProgram();
    gl.attachShader(program,vertexShader);
    gl.attachShader(program.fragmentShader)l
    gl.linkProgram(program);
    
    gl.useProgram(program);
    

Data to Frame Buffer

    //Typed Array
    const points=new Float32Array([-1,-1
                                    0, 1
                                    1, -1]);
                                    
     const bufferId=gl.createBuffer();
     gl.binBuffer(gl.ARRAY_BUFFER,bufferId);
     gl.bufferData(gl/ARRAT_BUFFER,points,gl.STATIC_DRAW);

Frame Buffer to GPU

    attribute vec2 position;
    
    void main(){
    gl_PointSize=1.0;
    gl_Position=vec4(position,1.0,1.0);
    }
    const vPosition=gl.getAttribLocation(program,'position');//获取顶点着色器中的position变量的地址
    gl.vertexAttribPointer(vPosition,2,gl.FLOAT,false,0,0);//给变量设置长度
    gl.enableVertexAttribArray(vPosition)//激活这个变量
    

3D标准模型的四个齐次矩阵（mat4）

1. 投影矩阵
2. 模型矩阵
3. 视图矩阵
4. 法向量矩阵