WebGL的shader（着色器）有2种：vertexShader（定点着色器）和 fragmentShader（片段着色器）
顶点着色器：定义点的位置、大小
片元着色器：定义画出来的物体的材质（颜色、反光度等...） 着色器定义有自己的一套语言：GLSL(Graphics Library Shading Language) 推荐阅读：https://blog.csdn.net/qq_37338983/article/details/78556063http://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>