WebGl-3.着色器

要使用WebGL进行绘图，就必须使用着色器，在代码中着色器是以字符串的形式嵌入到JavaScript文件中。WebGL需要两种着色器，顶点着色器和片元着色器。

顶点着色器

描述顶点特性（如位置、颜色等）

片元着色器

进行逐片元处理。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/common.css">
    <title>着色器</title>
</head>
<body>
    <canvas id="example" width="512" height="512">
        游览器不支持
    </canvas>
</body>
<script>

    // 顶点着色器
    var vertex_shader_source =
        'void main() {' +
        '   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);' + // 设置顶点坐标
        '   gl_PointSize = 10.0;' + // 设置顶点的大小，必须是float，如果是10，会报错
        '' +
        '}';

    // 片元着色器
    var fragment_shader_source =
        'void main(){' +
        '   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' + //设置顶点颜色
        '}';

    var canvas = document.getElementById('example');
    if(canvas==null){
    
    
        alert("获取失败")
    }

    // 获取 WebGL 上下文对象
    var gl = canvas.getContext('webgl');

    // 初始化着色器
    if (!initShader(gl, vertex_shader_source, fragment_shader_source)) {
    
    
        console.log('初始化着色器失败');
    }

    //指定清空<canvas>颜色,就是指定canvas的背景色，第四个参数是透明度，范围是（0-1）
    gl.clearColor(0.0,0.5,0.5,1.0)

    //清空<canvas>
    //gl.COLOR_BUFFER_BIT(颜色缓存)、gl.DEFTH_BUFFER_BIT（深度缓冲区）、gl.STENCIL_BUFFER_BIT（模板缓冲区）
    gl.clear(gl.COLOR_BUFFER_BIT);

    //开始画点
    gl.drawArrays(gl.POINTS, 0, 1);


        // 初始化着色器方法
    function initShader(gl, vertexShaderSource, fragmentShaderSource) {
    
    

        // 创建顶点着色器对象
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);

        // 创建片元着色器对象
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

        // 引入着色器代码
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.shaderSource(fragmentShader, fragmentShaderSource);

        // 编译顶点和片元着色器代码
        gl.compileShader(vertexShader);
        gl.compileShader(fragmentShader);

        // 创建程序对象
        var program = gl.createProgram();

        // 附着附着着色器到程序
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);

        // 链接程序
        gl.linkProgram(program);

        // 使用程序
        gl.useProgram(program);

        // 返回 program 对象
        return program;                                

    }
</script>
</html>

效果

在这里插入图片描述

着色器运行流程

例子

效果

猜你喜欢