初识WebGL|青训营笔记

用户6355229625017
61 阅读2分钟

这是我参与【第四届青训营】笔记创作活动的第15天。今天 的课程让我们简单了解了一下WebGL。

WebGL是什么？

  • WebGL（全写Web Graphics Library）是一种3D绘图协议，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型。但其
  • GPU ≠ WebGL ≠ 3D 这三者不是对等关系。

现代图像系统：

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

CPU和GPU还是有很大不同的：

  • GPU由大量的小运算单元构成
  • 每个运算单元只负责处理很简单的计算
  • 每个运算单元彼此独立
  • 因此所有计算可以并行处理

image.png

现代图像的渲染过程：

image.png

WebGL Startup

  • 创建WebGL上下文
  • 创建WebGL Program
  • 将数据存入缓冲区
  • 将缓冲区数据读取到GPU
  • GPU执行WebGL程序，输出结果 image.png

使用createProgram() 创建 WebGLProgram对象

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);

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

gl.useProgram(program);

Data to Frame Buffer

webGL的坐标系是以绘制画布的中心点为原点，正常的笛卡尔坐标系。

image.png

Frame Buffer to GPU

image.png

output

gl.clear(gl.COLOR_BUFFER_BIT);  //清除缓冲的数据
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

总的流程就是：

  • 创建WebGL Program
  • 创建顶点着色器和片元着色器代码
  • 将数据存到缓冲区中（Data to Frame Buffer）
  • 读取缓冲区数据到GPU（Frame Buffer to GPU）
  • 输出结果（Output）
avatar
文章
阅读
粉丝