想要了解学习下
WebGL所以去搜索了相关问题，看到这个，想保存下来做个参考; 下面的答案来自：知乎相关链接
作者：Vinjn张静
链接：https://www.zhihu.com/question/19993499/answer/17755136
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
0 基础学习 WebGL 该看的 3 本书 - 黑客与画家 - 知乎专栏
WebGL 是以 OpenGL ES 2.0 为蓝本设计的，OpenGL ES 2.0 则是以 OpenGL 2.0 为蓝本设计的。
你别看表面上跑的是 js，真正运行的时候还是跑在 OpenGL 驱动上的（Windows平台是例外，使用Direct3D 9/11 来模拟的 WebGL）。
你要想真正学会 WebGL，必须懂 OpenGL 和图形学，以及 shader 语言。
当然了，由于 Three.js 这类游戏引擎的存在，即便你不懂 WebGL，也可以快速地进行开发，但是，一旦你遇到意料之外的问题了，还是得回过头来看 WebGL，甚至看 OpenGL 红宝书。
如果要学习 OpenGL，那么脱不了三本书
红宝书 OpenGL Programming Guide，出到第八版
蓝宝书 OpenGL SuperBible，出到第六版
橙宝书 OpenGL Shading Language，出到第三版
如果要学习OpenGL ES，那么只有一本，入门的话我最推荐的是这本，它与 WebGL 的关系也最近
OpenGL ES 2.0 Programming Guide
（2014-04-26更新，已经出到 OpenGL ES 3.0 版本了）
其实还有一本最靠谱的
WebGL Programming Guide，但是还没发售（2014-04-26更新，已发售）
2013-11-03 更新
WebGL高级编程:开发Web 3D图形 是一本非常全面的书籍，推荐作为第一本入门书。
最后更新真实的 WebGL 函数调用历史，通过 Chrome Developer Tools / Canvas Profile 得到的。看完后如果你觉得一头雾水那就对了，这就是为什么要学 OpenGL的原因。
disableVertexAttribArray(1)
disable(BLEND)
enable(SAMPLE_ALPHA_TO_COVERAGE)
depthMask(1)
disable(BLEND)
useProgram(WebGLProgram@1)
activeTexture(TEXTURE0)
bindTexture(TEXTURE_2D, WebGLTexture@1)
uniform1i(WebGLUniformLocation@4, 0)
bindBuffer(ARRAY_BUFFER, WebGLBuffer@2)
enableVertexAttribArray(0)
vertexAttribPointer(0, 3, FLOAT, false, 12, 0)
bindBuffer(ARRAY_BUFFER, WebGLBuffer@3)
enableVertexAttribArray(1)
vertexAttribPointer(1, 2, FLOAT, false, 8, 0)
bindBuffer(ARRAY_BUFFER, WebGLBuffer@1)
enableVertexAttribArray(2)
vertexAttribPointer(2, 3, FLOAT, false, 12, 0)
bindBuffer(ELEMENT_ARRAY_BUFFER, WebGLBuffer@4)
drawElements(TRIANGLES, 780, UNSIGNED_SHORT, 0)
王振 业余做网页的
48 人赞同了该回答
建议可以首先评估下自己属于什么水平，刚刚学了没多久的新手，谈谈自己的感受，先从three.js入手，学着用了一下camera，scence，render，以及什么first person controls之类的，我是从《webgl入门指南》开始的。然后，跑一下官方的three.js demo，以及这本书的demo。知道个大概，然后直接入手《webgl编程指南》。上面的demo很细致，细致到每个函数，以及它的参数都讲到，看完这本书你大概对图形图像的流程会有个比较完整的了解了。一边学习demo时候，一边认真了解下里面讲的原理，语焉不详的地方查查《OpenGL ES 3.0 Programming Guide》。顺便可以看看《计算机图形学》学习下（我是软件工程出身，大学甚至没有这门课程）。多的不说，因为我也就到这个阶段了
当时自己看见这个问题的时候，正好自己在学WebGL,随口回答了下，当时做这个方向的前端还很少。随口说了两句，现在看来越来越多的人在进入这个方向。进来这个方向的人很多，很多人困惑，我就继续以自己的学习经历，谈谈自己的经验。
一般前端出身的人很难做WebGL，以为本质上和前端根本就是两个不同的方向，知识领域重叠较少。只不错恰好都是在web平台上面而已，导致传统前端很难转移到WebGL开发(现在web前端开发已经发生翻天覆地的变化,WebGL转移到前端开发也很难)。
从自身经历来看，这个很难的原因其实有两个。
一，就是刚刚说的知识领域不一样，web前端更多的是做界面开发，做界面开发还分成了两个方向一个是强调数据交互的，比如现在的电商网站;另外一个是强调静态页面展示操作的，比如很多传媒公司。这么分的标准是从想学WebGL的前端人群角度出发的。无论怎么分很不幸，这个都不是他们擅长的领域。很多程序员老鸟，可能各种刷数据结构，但是毕业以后真的没几个人刷数学啊，因为真的没什么用途啊。webgl需要的解析几何大家应该都还记得，毕竟高中的知识。但是线代好像大家都不记得了。虽然并不需要什么高深的数学知识，毕竟只要个矩阵乘法，高深点的学个求逆转置矩阵就好了。但是很不幸学习了这些东西之后，并不满足webgl要求，因为最基本的SRT操作是建立在对于线代物理意义的理解上的。又一次很不幸国内的教材都弱化了（并不是没有）线代的物理意义讲解。。。。。还有很多坑，感觉自己已经跑题了。讲到大家会遇到哪些坑了
接着说说自己的学习经历，假设你现在已经跑了THREE的demo。这些demo差不多已经足够你解决所有的静态展示需求，前提是你明白：所有这些demo解决了具体哪些问题，而不是做出了什么效果。其实你看demo名称你就知道了，只不过你需要去学习这些demo名称代表的含义。没错!!!!**去学习这些demo所代表的含义，和解决的问题。 **我教了很多人这个方法，但是他们只有在我教了很多次的情况下，才学习到这个很简单但是很重要的方法。THREE的文档真的很不丰富，但是demo真的很丰富，而且个人感觉完全比干巴巴的文档靠谱。
以上是一条路。
还有一条路就是下载所有版本的THREE,现在是R80了，中间少了8个版本，实际上只有72个版本，同时只有在R25以后才有第一个demo，然后你就开始学习R25的renderer实现，加上注释才不到700行代码。对照着《webgl编程指南》的Initshader函数，你会发现原来整个THREE的核心一览无余啊！！！！很简单粗暴啊有木有！！虽然实现的很粗糙没有优化，但是简单已读，完全是用来学习的好素材啊
以上完全是一个自学者的自学经历
就说这么多吧