WebGL是啥？

javascript
  目录
  1. 1. WebGL是啥？
    1. 1.1. 使用WebGL绘制一个点
    2. 1.2. 代码结构
    3. 1.3. HMTL和JavaScript
    4. 1.4. canvas
    5. 1.5. canvas元素
    6. 1.6. 返回3D绘图环境
    7. 1.7. 返回2D环境
    8. 1.8. 着色器语言 GLSL
    9. 1.9. 顶点着色器
    10. 1.10. 片元着色器

简单的介绍一下WebGL是什么

WebGL是啥？

为了让大家快速认识WebGL，先不讲解具体的知识点，我相信很多程序员希望通过一个麻雀虽小，但是五脏俱全的demo来认识一个新的技术领域。所以这里通过一个简单的案例来给大家展示WebGL技术，下面的代码完成的效果就是在canvas画布上绘制一个点。

使用WebGL绘制一个点

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用WebGL绘制一个点</title>
</head>
<body>
<!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
<canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>

</body>
<!-- 顶点着色器源码 -->
<script id="vertexShader" type="x-shader/x-vertex">

  void main() {
    //给内置变量gl_PointSize赋值像素大小
    gl_PointSize=20.0;
    //顶点位置，位于坐标原点
    gl_Position =vec4(0.0,0.0,0.0,1.0);
  }

</script>
<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">

  void main() {
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }

</script>

<script>
    //通过getElementById()方法获取canvas画布
    var canvas=document.getElementById('webgl');
    //通过方法getContext()获取WebGL上下文
    var gl=canvas.getContext('webgl');

    //顶点着色器源码
    var vertexShaderSource = document.getElementById( 'vertexShader' ).innerText;

    //片元着色器源码
    var fragShaderSource = document.getElementById( 'fragmentShader' ).innerText;

    //初始化着色器
    var program = initShader(gl,vertexShaderSource,fragShaderSource);
    //开始绘制，显示器显示结果
    gl.drawArrays(gl.POINTS,0,1);

    //声明初始化着色器函数
    function initShader(gl,vertexShaderSource,fragmentShaderSource){
        //创建顶点着色器对象
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        //创建片元着色器对象
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        //引入顶点、片元着色器源代码
        gl.shaderSource(vertexShader,vertexShaderSource);
        gl.shaderSource(fragmentShader,fragmentShaderSource);
        //编译顶点、片元着色器
        gl.compileShader(vertexShader);
        gl.compileShader(fragmentShader);

        //创建程序对象program
        var program = gl.createProgram();
        //附着顶点着色器和片元着色器到program
        gl.attachShader(program,vertexShader);
        gl.attachShader(program,fragmentShader);
        //链接program
        gl.linkProgram(program);
        //使用program
        gl.useProgram(program);
        //返回程序program对象
        return program;
    }
</script>
</html>

代码结构

整个代码是一个.html文件，里面包含JavaScript代码和着色器语言代码，通过JavaScript调用WebGL API来完成绘制操作。

HMTL和JavaScript

如果原来接触的是OpenGL，不了解WebGL，对浏览器的生态环境不了解，不了解前端知识，那么在学习WebGL之前，你应该先了解一下什么是HTML，什么是JavaScript语言。

canvas

canvas和div一样也是HTML的一个元素，只不过通过这个元素可实现三维场景的回执和渲染。通过canvas对象的getContext方法可以返回一个2D或3D环境

canvas元素

1
2
<!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
<canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>

返回3D绘图环境

通过返回的gl对象可以调用WebGL API，所有的WebGL API就是gl对象的方法。比如gl.linkProgram()

1
2
3
4
//通过getElementById()方法获取canvas画布
var canvas=document.getElementById('webgl');
//通过方法getContext()获取WebGL上下文
var gl=canvas.getContext('webgl');

返回2D环境

返回2D环境，就是大家平常说的canvas，通过canvas对象可以返回webgl绘图环境，也可以返回2D绘环境，不过大家在表达的时候，2D绘图环境通常表达为canvas，而canvas返回的3D环境，使用WebGL去表述。

1
var c=canvas.getContext('2d');

着色器语言 GLSL

顶点、片元着色器代码要通过着色器语言来编写，着色器语言在GPU中执行，而平时大家说的JavaScript、Python等语言都是在CPU中执行。在GPU中执行的着色器代码，需要先通过WebGL进行一定的处理然后传递到GPU才能执行，所以编写的着色器语言就是一段符合一定的规则的字符串。
如果你现在还不能理解着色器语言的语法规则，也没有关系，作为初学者你现在只需要有一个印象，然后慢慢去学习。

顶点着色器

内置变量gl_PointSize设置了顶点渲染后的显示大小，内置变量gl_Position决定了渲染的位置，你可以去修改位置变量的值，比如vec4(0.0,0.0,0.0,1.0)变成vec4(0.5,0.0,0.0,1.0)，你会发现渲染的点位置发生了变化。

1
2
3
4
5
6
7
8
9
<!-- 顶点着色器源码 -->
<script id="vertexShader" type="x-shader/x-vertex">
  void main() {
    //给内置变量gl_PointSize赋值像素大小
    gl_PointSize=20.0;
    //顶点位置，位于坐标原点
    gl_Position =vec4(0.0,0.0,0.0,1.0);
  }
</script>

片元着色器

内置变量gl_FragColor设置渲染结果的颜色值，vec4(1.0,0.0,0.0,1.0)表示红色，如果改成vec4(0.0,1.0,0.0,1.0)，你会发现渲染结果是绿色，vec4的四个分量分别表示RGBA。

1
2
3
4
5
6
7
<!-- 片元着色器源码 -->
<script id="fragmentShader" type="x-shader/x-fragment">

  void main() {
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }
  </script>

  基础知识