渲染管线

gl_Position 顶点在世界坐标系中的坐标；
gl_FragCoord 片元在以canvas画布窗口坐标系统中的坐标；默认是画布长和宽, 一般进行归一化后范围范围为[0, 1]，左下角(0, 0)，右上角(1, 1)；

uniform vec2 u_resolution;
void main() {
    vec2 p = gl_FragCoord.xy / u_resolution;
    gl_FragColor = vec4(p.xy, .0, .1);
}

归一化

可以将原点移动到中心位置，此时中心点为(.0, .0)；

uniform vec2 u_resolution;
void main() {
    vec2 p = gl_FragCoord.xy / u_resolution - vec2(.5, .5);
    gl_FragColor = vec4(p.xy, .0, .1);
}

移动原点至中心

gl_PointCoord 点域图元光栅化的片元，即gl_PointSize定义的区域内片元坐标；区间 [0，1]，左上角为(0, 0)，右下角(1, 1)；

uniform vec2 u_resolution;
void main() {
    gl_FragColor = vec4(gl_PointCoord, .0, .1);
}

截屏2023-01-09 21.44.53.png

gl_FragCoord与 gl_PointCoord的关系

关系

• 这两种类型的变量定义在 main函数外部，并且它们都不能在着色器中被重新赋值；
• uniform 是全局的，在顶点和片元着色器中使用，在着色器程序中是独一无二的；
• attribute 只能用在顶点着色器，表示逐顶点信息，顶点着色器一个个的获取顶点信息；
• varying 使顶点着色器能够向片元着色器传送数据，varying 变量从顶点着色器向片元着色器传递时会进行插值；

initShader

import { createBuffer } from "./createBuffer";

function createProgram(gl: WebGLRenderingContext, vshader: string, fshader: string) {
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vshader);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fshader);
    /**
     * vertexShader & fragmentShader 为编译后的中间码
     */
    if (!vertexShader || !fragmentShader) {
        return null;
    }
    
    const program = gl.createProgram();
    if (!program) {
        return null;
    }

    // 为程序对象分配定点着色器和片元着色器
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    // 链接program
    gl.linkProgram(program);

    // 检查连接状态
    const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (!linked) {
        const error = gl.getProgramInfoLog(program);
        console.error(`failed to link program: ${error}`);
        gl.deleteProgram(program);
        gl.deleteShader(vertexShader);
        gl.deleteShader(fragmentShader);
        return null;
    }
    return program;
}

function createShader(gl: WebGLRenderingContext, type: number, source: string) {
    const shader = gl.createShader(type);
    if (!shader) {
        return null;
    }
    // 设置着色器源代码
    gl.shaderSource(shader, source);

    // 编译着色器
    gl.compileShader(shader);

    // 检查编译状态
    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!compiled) {
        const error = gl.getShaderInfoLog(shader);
        console.error(`failed to compile shader: ${error}`);
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

export function initShader(gl: WebGLRenderingContext, vshader: string, fshader: string) {
    const program = createProgram(gl, vshader, fshader);
    if (!program) {
        console.log('failed to create program');
        return false;
    }
    gl.useProgram(program);
    return true;
}

VBO vertex buffer object 在GPU显存上开辟空间存储模型数据；
VAO vertex array object 记录VBO的锚定点；

function createPosition(gl: WebGLRenderingContext, program: WebGLProgram) {
    const data = new Float32Array([
        0.5, 0.5,
        -0.5, 0.5,
        -0.5, -0.5,
        0.5, -0.5
    ]);
    // const data = new Float32Array([.5, .5]);

    //获取顶点着色器的位置变量apos，即aposLocation指向apos变量。
    const aposLocation = gl.getAttribLocation(program, 'a_Position');
    // 归一化
    uniformization(gl, program);
    //创建缓冲区对象
    var buffer = gl.createBuffer();
    //绑定缓冲区对象,激活buffer
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    //顶点数组data数据传入缓冲区，STATIC_DRAW表示静态数据
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    //缓冲区中的数据按照一定的规律传递给位置变量apos
    gl.vertexAttribPointer(aposLocation, 2, gl.FLOAT, false, 0, 0);

    //允许数据传递
    gl.enableVertexAttribArray(aposLocation);

    gl.drawArrays(gl.POINTS, 0, 4);
}

reference

• https://blog.csdn.net/qq_15017307/article/details/126292739