山地人

Hello WebGL

山地人
山地人
2021-05-17

搭建环境

要搭建一个webgl的环境,我们需要做下面三个步骤:

  1. 准备一个canvas,webgl的绘制需要用使用canvas来绘制。
    <canvas id="glcanvas" width="640" height="480" />
  2. JavaScript代码中找到canvas元素,将其初始化为webgl
    const canvas = document.querySelector("#glcanvas")
    // 初始化WebGL上下文
    const gl = canvas.getContext("webgl")
  3. 使用glclear清理屏幕。
    // 使用完全不透明的黑色清除所有图像
    gl.clearColor(0.0, 0.0, 0.0, 1.0)
    // 用上面指定的颜色清除缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT)

通过这几步操作,我们得到了一个最基础的WebGL环境——右侧浏览器中的一片漆黑。