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>