参考资料及笔记摘录： 1）一个着色器实际上就是一个绘制东西到屏幕上的函数. 着色器运行在GPU中, 它对这些操作进行了很多的优化, 这样你就可以卸载很多不必要的CPU, 然后集中处理能力去执行你自己的代码. 顶点着色器操作3D空间的坐标并且每个顶点都会调用一次这个函数. 其目的是设置 gl_Position 变量 -- 这是一个特殊的全局内置变量, 它是用来存储当前顶点的位置: 片段 (或者纹理) 着色器 在计算时定义了每像素的 RGBA 颜色 — 每个像素只调用一次片段着色器. 这个着色器的作用是设置 gl_FragColor 变量, 也是一个GLSL内置变量: developer.mozilla.org/zh-CN/docs/…
2）WebGL 3D坐标系统 developer.mozilla.org/zh-CN/docs/…
3）每次您绘制内容时，WebGL都需要2个着色器：顶点着色器和片段着色器。每个着色器都是一个功能。顶点着色器和片段着色器链接在一起，成为一个着色器程序（或仅仅是程序）。一个典型的WebGL应用程序将具有许多着色器程序。 Vertex Shader的工作是生成剪辑空间坐标。每个顶点调用一次着色器。每次调用它时，都需要将特殊的全局变量设置gl_Position为某些剪辑空间坐标。 顶点着色器需要数据。他们可以通过3种方式获取该数据。 属性（从缓冲区中提取数据） 均匀（单个绘制调用的所有顶点的值均保持不变） 纹理（来自像素/纹理的数据） 片段着色器的工作是为要栅格化的当前像素提供颜色。片段着色器每个像素调用一次。每次调用它时，都需要将特殊的全局变量设置gl_FragColor为某种颜色。
片段着色器需要数据。他们可以通过3种方式获取数据 均匀度（在一次绘制调用中，每个像素的值保持不变） 纹理（来自像素/纹理的数据） 变化（从顶点着色器传递并插值的数据） webglfundamentals.org/webgl/lesso…
4）Building up a basic demo with Three.js/用Three.js创建的Demo程序 developer.mozilla.org/en-US/docs/…
5）The Book of Shaders/片段着色器入门指南 thebookofshaders.com/?lan=ch
6）Open GL历史介绍书籍 openglbook.com/chapter-0-p…
微小的WebGL帮助程序库 twgljs.org/
