WebGL：构建和渲染单色点

2023-10-28 17:36:12

WebGL入门

WebGL是一个跨平台的JavaScript API，用于在网页上进行3D图形渲染。它允许您使用JavaScript和HTML5来创建和渲染交互式3D图形。WebGL基于OpenGL ES 2.0规范，这意味着您可以使用与OpenGL ES 2.0相同的着色语言和图形函数。

绘制单个点

要绘制单个点，我们需要遵循以下步骤：

创建WebGL上下文

首先，我们需要创建一个WebGL上下文。这是WebGL程序的绘图表面，它允许我们与图形硬件进行通信。我们可以通过调用WebGLRenderingContext类的getContext()方法来创建WebGL上下文。
创建着色器

接下来，我们需要创建顶点着色器和片元着色器。顶点着色器负责将顶点数据转换为裁剪空间中的位置，而片元着色器负责将裁剪空间中的位置转换为屏幕空间中的颜色。

我们可以通过调用WebGLRenderingContext类的createShader()方法来创建着色器。然后，我们可以使用WebGLRenderingContext类的shaderSource()方法来设置着色器的源代码，并使用WebGLRenderingContext类的compileShader()方法来编译着色器。
创建程序

接下来，我们需要创建一个程序。程序是顶点着色器和片元着色器的组合。我们可以通过调用WebGLRenderingContext类的createProgram()方法来创建程序。然后，我们可以使用WebGLRenderingContext类的attachShader()方法来将顶点着色器和片元着色器附加到程序，并使用WebGLRenderingContext类的linkProgram()方法来链接程序。
设置顶点数据

接下来，我们需要设置顶点数据。顶点数据是我们要绘制的点的坐标。我们可以通过调用WebGLRenderingContext类的createBuffer()方法来创建缓冲区，并使用WebGLRenderingContext类的bindBuffer()方法来绑定缓冲区。然后，我们可以使用WebGLRenderingContext类的bufferData()方法来设置缓冲区的数据。
设置着色器变量

接下来，我们需要设置着色器变量。着色器变量是顶点着色器和片元着色器中使用的变量。我们可以通过调用WebGLRenderingContext类的getUniformLocation()方法来获取着色器变量的位置，并使用WebGLRenderingContext类的uniform*()方法来设置着色器变量的值。
绘制点

最后，我们可以调用WebGLRenderingContext类的drawArrays()方法来绘制点。drawArrays()方法需要三个参数：第一个参数是绘制模式，第二个参数是起始索引，第三个参数是顶点数。

完整示例

以下是一个完整的示例，演示如何使用WebGL绘制单个点：

<!DOCTYPE html>
<html>
<head>
  
  <script src="webgl.js"></script>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

  <script>
    var canvas = document.getElementById('canvas');
    var gl = canvas.getContext('webgl');

    // Create the vertex shader
    var vertexShaderSource = `
      attribute vec3 position;
      void main() {
        gl_Position = vec4(position, 1.0);
      }
    `;

    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);

    // Create the fragment shader
    var fragmentShaderSource = `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(fragmentShader);

    // Create the program
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    // Create the vertex data
    var vertexData = new Float32Array([
      0.0, 0.0, 0.0
    ]);

    // Create the buffer
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

    // Get the attribute location
    var positionAttributeLocation = gl.getAttribLocation(program, 'position');

    // Set the attribute
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

    // Draw the point
    gl.useProgram(program);
    gl.drawArrays(gl.POINTS, 0, 1);
  </script>
</body>
</html>