# WebGlStudy

**Repository Path**: gl-web/web-gl-study

## Basic Information

- **Project Name**: WebGlStudy
- **Description**: WebGL学习
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-23
- **Last Updated**: 2021-05-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### WebGL坐标系
又称笛卡尔坐标系
顶点在左上角，面向计算机屏幕
X：向右
Y：向下
Z：向外 

WebGL使用右手坐标系

### 主要流程
1. 获取canvas元素
2. 获取WebGL绘图上下文
3. 初始化着色器
4. 设置点的坐标信息
5. 设置canvas背景色
6. 清除canvas
7. 绘图



首先运行JavaScript程序，调用了WebGL的相关方法，然后顶点着色器和片元着色器就会执行，在颜色缓冲区内进行绘制，这时就清空了绘图区，最后，颜色缓冲区中内容会自动在浏览器的canvas上显示出来


### 着色器
定点着色器 用于描述顶点特性（位置、颜色） GLSL ES语言

```
var VSHADER_SOURCE = 
'void main() {\n' +
' gl_Position = vec4(0.5, 0.5, 0, 1.0);\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
```
`gl_Poitionon` 为奇次坐标 x,y,z,w 相当于三维坐标 x/w, y/w, z/w

片元着色器 进行逐片元处理过程和光照（像素） GLSL ES语言
```
var FSHADER_SOURCE = 
'void main() {\n' +
' gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n' +
'}\n';
```

### 函数
`clear` 函数
```
/**
   * COLOR_BUFFER_BIT 指定颜色缓存
   * DEPTH_BUFFER_BIT 指定深度缓冲区
   * STENCIL_BUFFER_BIT 指定模板缓冲区
   * 
   * 可以用 | 指定多个
   */
```

`drawArrays` 函数
```
/**
   * 第一个参数
   * POINTS
   * LINES
   * LINE_STRIP
   * LINE_LOOP
   * TRIANGLES
   * TRIANGLE_STRIP
   * TRIANGLE_FAN
   * 
   * 第二个参数
   * 那个顶点开始（整数）
   * 
   * 第三个参数
   * 绘制需要用到多少个顶点（整数）
   */
```

### 纹理与颜色

###### 使用缓冲区对象
```
var verticesColors = new Float32Array([
    0.0, 0.5, 1.0, 0.0, 0.0,
    -0.5, -0.5, 0.0, 1.0, 0.0,
    0.5, -0.5, 1.0, 1.0, 1.0
  ])
```

1. 创建缓冲区对象
```
const vertexColorBuffer = gl.createBuffer();
```

2. 将缓冲区对象绑定到目标
```
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
```

3. 向缓冲区对象中写入数据
```
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
```
备注：
+ STATIC_DRAW 写入一次，绘制很多次
+ STREAM_DRAW 写入一次，绘制若干次
+ DYNAMIC_DRAW 写入多次，绘制很多次

4. 将缓冲区对象分配给 `a_Position`
```
const FSIZE = verticesColors.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
```

5. 连接 `a_Position` 变量分配给它的缓冲区对象
```
gl.enableVertexAttribArray(a_Position);
```