HarmonyOS鸿蒙Next中Webgl如何初始化着色器

Webgl如何初始化着色器

步骤

在WebGL中，要初始化着色器，需要进行以下步骤：

创建着色器程序对象

使用WebGL的 createProgram() 方法创建一个着色器程序对象。

const shaderProgram = gl.createProgram();

创建顶点着色器和片段着色器

使用WebGL的 createShader() 方法创建顶点着色器和片段着色器。

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

编译着色器

使用WebGL的 shaderSource() 方法将着色器源代码传递给着色器对象，然后使用 compileShader() 方法编译着色器。

gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

将着色器附加到着色器程序对象

使用WebGL的 attachShader() 方法将顶点着色器和片元着色器附加到着色器程序对象上。

gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);

链接着色器程序

使用WebGL的 linkProgram() 方法链接着色器程序对象。

gl.linkProgram(shaderProgram);

使用着色器程序

使用WebGL的 useProgram() 方法将着色器程序对象设置为当前使用的着色器程序。

gl.useProgram(shaderProgram);

总结

相关WebGL API详情见：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

以下便是完整的WEBGL初始化着色器方案：

const initShader = (gl, vsource, fsource) => {
    const program = createProgram(gl, vsource, fsource);

    if (!program) {
        console.log('Failed to create program');
        return false;
    }

    gl.useProgram(program);
    gl.program = program;
    return true;
}

const createProgram = (gl, vsource, fsource) => {
    // Create shader object
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsource);
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsource);

    if (!vertexShader || !fragmentShader) {
        return null;
    }

    // Create a program object
    const program = gl.createProgram();
    if (!program) {
        return null;
    }

    // Attach the shader objects
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    // Link the program object
    gl.linkProgram(program);
    // Check the result of linking
    const linked = gl.getProgramParameter(program, gl.LINK_STATUS);

    if (!linked) {
        let error = gl.getProgramInfoLog(program);
        console.log('Failed to link program: ' + error);
        gl.deleteProgram(program);
        gl.deleteShader(fragmentShader);
        gl.deleteShader(vertexShader);
        return null;
    }

    return program;
};

const createShader = (gl, type, source) => {
    // Create shader object
    const shader = gl.createShader(type);

    if (shader == null) {
        console.log('unable to create shader');
        return null;
    }

    // Set the shader program
    gl.shaderSource(shader, source);
    // Compile the shader
    gl.compileShader(shader);
    // Check the result of compilation

    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!compiled) {
        let error = gl.getShaderInfoLog(shader);
        console.log('Failed to compile shader: ' + error);

        gl.deleteShader(shader);
        return null;
    }

    return shader;
}