刚才的绘制三角形的代码， 请抽离一个 webglRenderer 对象 来管理 创建webgl空间，链接program 和 绘制

好的，以下是一个简单的webglRenderer对象的代码示例：

class webglRenderer {
  constructor(canvas) {
    this.canvas = canvas;
    this.gl = canvas.getContext("webgl");

    if (!this.gl) {
      console.error("WebGL not supported");
      return;
    }

    this.program = this.createProgram();
  }

  createProgram() {
    const vertexShaderSource = `
      attribute vec3 aPosition;

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

    const fragmentShaderSource = `
      precision mediump float;

      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;

    const vertexShader = this.createShader(
      this.gl.VERTEX_SHADER,
      vertexShaderSource
    );
    const fragmentShader = this.createShader(
      this.gl.FRAGMENT_SHADER,
      fragmentShaderSource
    );

    const program = this.gl.createProgram();
    this.gl.attachShader(program, vertexShader);
    this.gl.attachShader(program, fragmentShader);
    this.gl.linkProgram(program);

    if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
      console.error("Program link error:", this.gl.getProgramInfoLog(program));
    }

    return program;
  }

  createShader(type, source) {
    const shader = this.gl.createShader(type);
    this.gl.shaderSource(shader, source);
    this.gl.compileShader(shader);

    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
      console.error("Shader compile error:", this.gl.getShaderInfoLog(shader));
    }

    return shader;
  }

  render() {
    this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
    this.gl.clear(this.gl.COLOR_BUFFER_BIT);

    const positionAttributeLocation = this.gl.getAttribLocation(
      this.program,
      "aPosition"
    );

    const positionBuffer = this.gl.createBuffer();
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, positionBuffer);

    const positions = [-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.5, 0.0];
    this.gl.bufferData(
      this.gl.ARRAY_BUFFER,
      new Float32Array(positions),
      this.gl.STATIC_DRAW
    );

    this.gl.enableVertexAttribArray(positionAttributeLocation);
    this.gl.vertexAttribPointer(
      positionAttributeLocation,
      3,
      this.gl.FLOAT,
      false,
      0,
      0
    );

    this.gl.useProgram(this.program);
    this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
  }
}

这个webglRenderer对象包含一个构造函数，它接受一个canvas元素作为参数，并创建了一个webgl上下文。它还包含了一个createProgram方法，用于创建着色器程序，并且包含了一个render方法，用于绘制图形。

在createProgram方法中，我们创建了一个简单的顶点着色器和片段着色器，并将它们连接为一个着色器程序。在render方法中，我们使用gl.drawArrays来绘制一个简单的三角形。

我们可以像这样使用webglRenderer对象来绘制图形：

const canvas = document.querySelector("canvas");
const renderer = new webglRenderer(canvas);
renderer.render();