Javascript is required
WebGL编程指南
前端

《WebGL编程指南》读书笔记——第二章、WebGL入门

清空绘图区

<script>
    /***
     * 1. 获取canvas元素
     * 2。 获取WebGL绘图上下文
     * 3。 设置背景色
     * 4。 清空canvas
     * */
    const canvas = document.querySelector('canvas')
    // 换取WebGL绘图环境
    const gl = canvas.getContext('webgl');

    // 设置清空颜色缓冲（背景色）时的颜色。
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // 使用预设值清空颜色缓冲
    gl.clear(gl.COLOR_BUFFER_BIT);
</script>

image-20210605232932237

Canvas

HTML5 引入 canvas标签。

着色器

WebGL需要两种着色器：

Vertex shader

顶点着色器用来描述顶点特性（如位置、颜色等）的程序

Fragment shader

进行逐片元处理的程序

image-20210605233703558

image-20210606003331909

void main(){
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // (*)点的位置 
  gl_PointSize = 10.0;
}

必须包含一个main函数，void表示没有返回值。gl_Position表示顶点的位置，gl_PointSize表示大小。

image-20210606003950687

绘制一个点

image-20210605234202238

WebGL的坐标系统

image-20210605234352897

Attiribute变量

将位置信息从Js传给顶点着色器。

at tribute 与 uniform变量

image-20210606000551411

区别

attribute变量是一种GLSL变量，从外部向顶点内传输数据，只有顶点着色器能使用它。

如何使用？

1. 顶点着色器声明attribute变量
2. 将attribute变量赋值给gl_Position变量
3. 传输数据

uniform 变量

image-20210606005903599

定义

image-20210606010257551

获取uniform变量

gl.getUniformLocation(program, name)函数获取uniform变量的存储地址

传值uniform

gl.uniform[1234][fi][v]()族函数向uniform变量传值

三角形

构成三维模型的基本单位是三角形。不管三维模型多么复杂，都是由三角形组成的，只不过更多了而已。