基本概念
- Shader 着色器，是存放图形算法的对象。相比于在 CPU 上单线程执行的 JS 代码，着色器在 GPU 上并行执行，计算出每帧数百万个像素各自的颜色。
- Resource 资源，是存放图形数据的对象。就像 JSON 成为 Web App 的数据那样，资源是传递给着色器的数据，包括大段的顶点数组、纹理图像，以及全局的配置项等。
- Draw 绘制，是选好资源后运行着色器的请求。要想渲染真实际的场景，一般需要多组着色器与多个资源，来回绘制多次才能完成一帧。每次绘制前，我们都需要选好着色器，并为其关联好不同的资源，也都会启动一次图形渲染管线。
- Command 命令，是执行绘制前的配置。WebGL 是非常有状态的。每次绘制前，我们都必须小心地处理好状态机。这些状态变更就是通过命令来实现的。Beam 基于一些约定大幅简化了人工的命令管理，当然你也可以定制自己的命令。
图形渲染管线
可编程渲染管线
- 顶点着色器输入原始的顶点坐标，输出根据你的需求变换后的坐标。
- 片元着色器输入一个像素位置，输出根据你的需求计算出的像素颜色。
既要见树木也要见森林。