Shader语法 | WebGL中的着色语言艺术

前端

2023-11-17 14:40:44

引言

在计算机图形学中，着色器是一种计算机程序，用于处理图像的浓淡、光照、颜色等。在WebGL中，着色器同样发挥着重要的作用，它可以帮助我们实现各种各样的图形效果。

着色器语法

WebGL中的着色器使用一种叫做GLSL（OpenGL Shading Language）的语言编写。GLSL是一种类似于C语言的语言，它具有丰富的内置函数和数据类型，可以满足各种图形处理需求。

片段着色器

片段着色器用于处理单个像素的颜色。它接收来自顶点着色器的输出数据，并根据这些数据计算出该像素的最终颜色。

片段着色器的基本语法如下：

void main() {
  // 计算像素的最终颜色
  vec4 color = ...;

  // 输出像素的最终颜色
  gl_FragColor = color;
}

其中，main()函数是片段着色器的入口函数。vec4 color变量存储了像素的最终颜色。gl_FragColor变量是片段着色器的输出变量，它存储了像素的最终颜色。

顶点着色器

顶点着色器用于处理顶点的位置。它接收来自应用程序的数据，并根据这些数据计算出顶点的最终位置。

顶点着色器的基本语法如下：

void main() {
  // 计算顶点的最终位置
  vec4 position = ...;

  // 输出顶点的最终位置
  gl_Position = position;
}

其中，main()函数是顶点着色器的入口函数。vec4 position变量存储了顶点的最终位置。gl_Position变量是顶点着色器的输出变量，它存储了顶点的最终位置。

示例代码

以下是一个简单的WebGL程序，它使用着色器来渲染一个三角形。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    // 获取canvas元素
    var canvas = document.getElementById('canvas');

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

    // 顶点着色器源码
    var vertexShaderSource = `
      attribute vec3 a_position;

      void main() {
        gl_Position = vec4(a_position, 1.0);
      }
    `;

    // 片段着色器源码
    var fragmentShaderSource = `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;

    // 编译顶点着色器
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);

    // 编译片段着色器
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(fragmentShader);

    // 创建着色器程序
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

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

    // 获取顶点位置属性
    var a_position = gl.getAttribLocation(program, 'a_position');

    // 创建顶点缓冲区
    var vertexBuffer = gl.createBuffer();

    // 绑定顶点缓冲区
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    // 设置顶点数据
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.5, 0.0]), gl.STATIC_DRAW);

    // 启用顶点位置属性
    gl.enableVertexAttribArray(a_position);

    // 设置顶点位置属性指针
    gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 0, 0);

    // 清除画布
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 绘制三角形
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  </script>
</body>
</html>