zxy的前端日志

# WebGL 入门

# 第一个 WEBGL 小程序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="web01" height="500" width="500"></canvas>
  </body>
  <script>
    var canvas = document.getElementById("web01");
    var gl = canvas.getContext("webgl");
    gl.clearColor(0.0, 1.0, 1.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • 获取 canvas 元素，设置成 webgl 模式
  • clearColor用来设置背景色，clearColor(red,green,blue,alpha)。颜色设置是浮点型的，不带小数点会报错，第四位是透明度
  • clear(buffer),用来清除 canvas 对象

# 着色器

为了帮助我们理解光源、材质与相机之间的关系

绘制一个点操作步骤：

  1. 获取 canvas 元素
  2. 获取 webgl 绘制上下文
  3. 初始化着色器
  4. 设置背景色
  5. 清除 canvas
  6. 绘图
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>绘制一个点</title>
  </head>
  <body>
    <canvas id="web02" height="500" width="500"></canvas>
  </body>
  <script>
    var canvas = document.getElementById("web02");
    var gl = canvas.getContext("webgl");

    // 顶点着色器
    var VERTEX_SHADER =
      "" +
      "void main(){" +
      "gl_Position=vec4(0.0,0.0,1.0,1.0);" +
      "gl_PointSize=10.0;" +
      "}";
    // 片源着色器
    var FRAG_SHADER =
      "" + "void main(){" + "gl_FragColor=vec4(1.0,0.0,0.0,1.0);" + "}";

    // 初始化着色器---------------------------------------------------------

    // 创建着色器
    var vertex = gl.createShader(gl.VERTEX_SHADER);
    var frag = gl.createShader(gl.FRAGMENT_SHADER);
    // 指定着色器对象
    gl.shaderSource(vertex, VERTEX_SHADER);
    gl.shaderSource(frag, FRAG_SHADER);
    // 编译着色器
    gl.compileShader(vertex);
    gl.compileShader(frag);
    // 创建对象
    var program = gl.createProgram();
    // 为对象分配着色器对象
    gl.attachShader(program, vertex);
    gl.attachShader(program, frag);
    // 连接程序对象
    gl.linkProgram(program);
    // 告诉webgl使用程序对象
    gl.useProgram(program);
    // 初始化结束-----------------------------------------------------------

    // 清屏
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 绘制
    gl.drawArrays(gl.POINTS, 0, 1); // 参数：画点，从0点开始，画1个
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

3d

# 使用 attribute、uniform 变量

attribute

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="web03" width="500" height="500"></canvas>
  </body>
  <script>
    var canvas = document.getElementById("web03");
    var gl = canvas.getContext("webgl");

    // 定义着色器
    var VERTEX_SHADER =
      "" +
      "attribute vec4 a_pos;" +
      "void main(){" +
      "gl_Position=a_pos;" +
      "gl_PointSize=25.0;" +
      "}";
    var FRAG_SHADER =
      "" + "void main(){" + "gl_FragColor=vec4(1.0,0.0,0.0,1.0);" + "}";

    // 创建着色器
    var vertex = gl.createShader(gl.VERTEX_SHADER);
    var frag = gl.createShader(gl.FRAGMENT_SHADER);
    // 指定着色器对象
    gl.shaderSource(vertex, VERTEX_SHADER);
    gl.shaderSource(frag, FRAG_SHADER);
    // 编译着色器
    gl.compileShader(vertex);
    gl.compileShader(frag);
    // 创建对象
    var program = gl.createProgram();
    // 为对象分配着色器对象
    gl.attachShader(program, vertex);
    gl.attachShader(program, frag);
    // 连接程序对象
    gl.linkProgram(program);
    // 告诉webgl使用程序对象
    gl.useProgram(program);

    var a_position = gl.getAttribLocation(program, "a_pos");
    gl.vertexAttrib4f(a_position, 0.0, 0.0, 1.0, 1.0);

    gl.drawArrays(gl.POINTS, 0, 1);
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

uniform

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="web03" width="500" height="500"></canvas>
  </body>
  <script>
    var canvas = document.getElementById("web03");
    var gl = canvas.getContext("webgl");

    // 定义着色器
    var VERTEX_SHADER =
      "" +
      "attribute vec4 a_pos;" +
      "void main(){" +
      "gl_Position=a_pos;" +
      "gl_PointSize=25.0;" +
      "}";
    var FRAG_SHADER =
      "" +
      "precision lowp float;" +
      "uniform vec4 u_color;" +
      "void main(){" +
      "gl_FragColor=u_color;" +
      "}";

    // 创建着色器
    var vertex = gl.createShader(gl.VERTEX_SHADER);
    var frag = gl.createShader(gl.FRAGMENT_SHADER);
    // 指定着色器对象
    gl.shaderSource(vertex, VERTEX_SHADER);
    gl.shaderSource(frag, FRAG_SHADER);
    // 编译着色器
    gl.compileShader(vertex);
    gl.compileShader(frag);
    // 创建对象
    var program = gl.createProgram();
    // 为对象分配着色器对象
    gl.attachShader(program, vertex);
    gl.attachShader(program, frag);
    // 连接程序对象
    gl.linkProgram(program);
    // 告诉webgl使用程序对象
    gl.useProgram(program);

    var a_position = gl.getAttribLocation(program, "a_pos");

    var u_color = gl.getUniformLocation(program, "u_color");
    gl.vertexAttrib4f(a_position, 0.0, 0.0, 1.0, 1.0);
    gl.uniform4f(u_color, 0.0, 1.0, 0.0, 1.0);
    gl.drawArrays(gl.POINTS, 0, 1);
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

← threejs 入门（一） →