渲染管線

gl_Position 頂點在世界坐標(biāo)系中的坐標(biāo)玖绿；
gl_FragCoord 片元在以canvas畫布窗口坐標(biāo)系統(tǒng)中的坐標(biāo)叁巨；默認(rèn)是畫布長和寬, 一般進(jìn)行歸一化后范圍范圍為[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定義的區(qū)域內(nèi)片元坐標(biāo)；區(qū)間 [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的關(guān)系

關(guān)系

• 這兩種類型的變量定義在 main函數(shù)外部，并且它們都不能在著色器中被重新賦值涌乳；
• uniform 是全局的甜癞，在頂點和片元著色器中使用，在著色器程序中是獨一無二的悠咱；
• attribute 只能用在頂點著色器，表示逐頂點信息躬贡，頂點著色器一個個的獲取頂點信息渡贾；
• varying 使頂點著色器能夠向片元著色器傳送數(shù)據(jù)雄右，varying 變量從頂點著色器向片元著色器傳遞時會進(jìn)行插值；

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;
    }

    // 為程序?qū)ο蠓峙涠c著色器和片元著色器
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    // 鏈接program
    gl.linkProgram(program);

    // 檢查連接狀態(tài)
    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;
    }
    // 設(shè)置著色器源代碼
    gl.shaderSource(shader, source);

    // 編譯著色器
    gl.compileShader(shader);

    // 檢查編譯狀態(tài)
    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顯存上開辟空間存儲模型數(shù)據(jù)囤屹；
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);
    //創(chuàng)建緩沖區(qū)對象
    var buffer = gl.createBuffer();
    //綁定緩沖區(qū)對象,激活buffer
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    //頂點數(shù)組data數(shù)據(jù)傳入緩沖區(qū)盲赊，STATIC_DRAW表示靜態(tài)數(shù)據(jù)
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    //緩沖區(qū)中的數(shù)據(jù)按照一定的規(guī)律傳遞給位置變量apos
    gl.vertexAttribPointer(aposLocation, 2, gl.FLOAT, false, 0, 0);

    //允許數(shù)據(jù)傳遞
    gl.enableVertexAttribArray(aposLocation);

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

reference

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