WebGL小知识 | 青训营笔记

Canivores
138 阅读4分钟

WebGL小知识 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的的第17天。

WebGL是前端开发中涉及到的一项技术，它可以在Web浏览器中呈现高性能的3D图形，从而为Web前端开发带来了全新的可能性和机会。

我们可以使用WebGL创建令人印象深刻的交互式图形效果，包括游戏、数据可视化、虚拟现实和增强现实等。

WebGL是什么

WebGL是一种用于在Web浏览器中呈现3D图形的JavaScript API

现代图形系统：

image.png
  • 光栅(Raster) ∶几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
  • 像素(Pixel) ：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
  • 帧缓存（Frame Buffer) ︰在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
  • CPU (Central Processing Unit) ：中央处理单元，负责逻辑计算。
  • GPU (Graphics Processing Unit)：图形处理单元， 负责图形计算。

图形绘制过程：

image.png
  1. 轮廓提取/meshing
  • 轮廓提取是将三维模型表面的轮廓提取出来，以便于进一步处理。
  • Meshing则是将三维模型转换为网格模型，即将三维模型中的点、线、面等元素转换为网格模型的点、线、面等元素，以便于进行后续的处理和渲染。
  1. 光栅化
  • 光栅化是将3D场景中的几何体元素（如三角形、线段等）转换为2D像素的过程。
  • 在光栅化过程中，图形系统将每个几何体元素与像素网格进行交互，并将每个像素的颜色值、深度值等信息计算出来，以生成最终的2D图像。
  1. 帧缓存
  • 帧缓存是用来存储计算机图形渲染过程中生成的图像数据的内存区域。
  • 每一次渲染完成后，生成的图像数据将被存储在帧缓存中，以便于后续的显示或者处理。
  1. 渲染
  • 渲染是将3D场景转换为2D图像的过程，其中包括几何处理、着色处理、光照处理、深度测试、纹理映射等多个步骤。
  • 通过渲染，计算机可以生成高质量的2D图像，并为各种应用场景（如游戏、虚拟现实、工业设计、科学可视化等）提供支持。

使用 WebGL

WebGL Startup

  1. 创建 WebGL 上下文（通过获取 WebGL 的上下文对象）。
  • canvas.getContext("webgl") 或 canvas.getContext("experimental-webgl")
  1. 编译和链接 WebGL Program（即着色器程序）。
  • gl.createShader(type)：创建指定类型的着色器对象（参数 type 可以为 gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER）。
  • gl.shaderSource(shader, source)：为指定的着色器对象指定 GLSL 着色器代码。
  • gl.compileShader(shader)：编译指定的着色器对象。
  • gl.getShaderParameter(shader, pname)：获取着色器编译状态。
  • gl.getShaderInfoLog(shader)：获取着色器编译错误信息。
  • gl.createProgram()：创建 WebGL 程序对象。
  • gl.attachShader(program, shader)：将编译好的着色器对象附加到 WebGL 程序对象上。
  • gl.linkProgram(program)：链接 WebGL 程序对象。
  • gl.getProgramParameter(program, pname)：获取 WebGL 程序链接状态。
  • gl.getProgramInfoLog(program)：获取 WebGL 程序链接错误信息
  1. 将顶点数据存入缓冲区（通过创建缓冲对象，并将数据写入缓冲区）。
  • gl.createBuffer()：创建缓冲区对象。
  • gl.bindBuffer(target, buffer)：绑定缓冲区对象。
  • gl.bufferData(target, data, usage)：将数据写入缓冲区对象中。
  1. 将缓冲区数据读取到 GPU 中（通过绑定缓冲区对象，并使用 gl.bufferData() 方法将数据传递给 GPU）。
  • gl.bindBuffer(target, buffer)：绑定缓冲区对象。
  • gl.bufferData(target, data, usage)：将数据写入缓冲区对象中。
  1. 设置绘制参数（通过设置视口大小、清空颜色缓冲区等）。
  • gl.viewport(x, y, width, height)：设置视口大小。
  • gl.clearColor(red, green, blue, alpha)：设置清空颜色缓冲区的颜色。
  • gl.clear(mask)：清空指定的缓冲区。
  1. GPU 执行 WebGL 程序，输出结果（通过调用 gl.drawArrays() 或 gl.drawElements() 方法进行绘制）。
  • gl.drawArrays(mode, first, count)：按顺序绘制一组图元（图元类型由 mode 参数指定）。
  • gl.drawElements(mode, count, type, offset)：按顺序绘制一组图元（图元类型由 mode 参数指定），每个图元的顶点从索引数组中读取。
avatar
文章
阅读
粉丝