WebGL的shader（着色器）有2种：vertexShader（定点着色器）和 fragmentShader（片段着色器）
顶点着色器：定义点的位置、大小
片元着色器：定义画出来的物体的材质（颜色、反光度等...）
着色器定义有自己的一套语言：GLSL(Graphics Library Shading Language)
推荐阅读：https://blog.csdn.net/qq_37338983/article/details/78556063
http://www.alloyteam.com/2017/03/teach-you-to-use-webgl-to-quickly-create-a-small-world/
例如用WebGL画一个点：
<head> <!-- 顶点着色器 定义代码 --> <script type='x-shader/x-vertex' id='shader-vs'> void main(){ gl_Position=vec4(100,0.0,0.0,1000); gl_PointSize=10.0; } </script> <!-- 片元着色器 定义代码 --> <script type='x-shader/x-fragment' id='shader-fs'> void main(){ gl_FragColor=vec4(0.0,0.0,1.0,1.0); } </script> </head> <body> <canvas id='webgl' width='400' height='400'></canvas> </body> <script> // 获取webgl的上下文 var canvas = document.getElementById('webgl'); var gl = canvas.getContext('webgl'); // 设置清空颜色 gl.clearColor(0, 1, 1, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // 初始化着色器（定点着色器和片段着色器） // 顶点着色器：就是定义点的位置、大小 // 片元着色器：定义画出来的物体的材质（颜色、反光度等...） var vs_source = document.getElementById('shader-vs').innerHTML, fs_source = document.getElementById('shader-fs').innerHTML; // 创建顶点着色器对象 var vertexShader = gl.createShader(gl.VERTEX_SHADER); // 给顶点着色器对象绑定定义代码 gl.shaderSource(vertexShader, vs_source); // 编顶点译着色器对象 gl.compileShader(vertexShader); // 创建片元着色器对象 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 给片元着色器对象绑定定义代码 gl.shaderSource(fragmentShader, fs_source); // 编译片元着色器对象 gl.compileShader(fragmentShader); // 创建一个着色器程序 var glProgram = gl.createProgram(); // 把前面创建的二个着色器对象添加到着色器程序中（顶点和片段着色器都需要） gl.attachShader(glProgram, vertexShader); gl.attachShader(glProgram, fragmentShader); // 把着色器程序链接成一个完整的程序 gl.linkProgram(glProgram); // 使用这个完整的程序 gl.useProgram(glProgram); // 绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); </script> </html>