CSGrandeur的WebGL学习——WebGL教程

发表于 2015-05-20 更新于 2023-10-16

~~在线版本会及时更新，离线版本在有较大改动时更新。~~

内容来自 Learning WebGL ，他的网站是：http://learningwebgl.com。我修改了代码适用到gl-matrix 2.x的版本，把操作dom的代码改成jQuery了。教程没有纯翻译，看着原版理解着写着，不明白的问题在搜了之后补充上了，自己觉得太明白的问题删减掉了。

~~之后学习的内容会开辟新的章节更新。如有问题欢迎指正。~~

时光荏苒，造化弄人，我现在不搞这个了，也不会再更新了，大家加油^_^。

——————————以下是教程前言——————————

简介

WebGL是什么

HTML5是当前HTML的新标准，其中一个特性就可以用JavaScript写调用显卡的程序，在新的网页元素Canvas上显示华丽的3D效果，开发WebGL主要使用 JavaScript语言。

我学WebGL目前有两点目的：

Web应该是跨平台最舒服的手段了，没有哪个现代操作系统（哪怕手机系统）不配浏览器吧，HTML5的到来，感觉Web前途一片光明。 JavaScript开发3D好像舒服很多啊，用C++写OpenGL，编译老半天，调试一步一步扯得蛋疼。当然这两点目的可能很傻很天真，不过学点有用的东西总是好的，也不必太较真儿了。

学习WebGL需要什么基础

开始学习WebGL时我的基础：

具备一点PHP、HTML、JS的基础知识，做过几个Web的小项目。做过几年程序设计竞赛，对C/C++语言还算比较熟悉。跟着《OpenGL编程指南》第八版学过一点入门知识，懵懂了解可编程渲染管线的概念。建议：

至少具备一些基本的编程技能，理解变量、函数等基础知识。不必担心对Web相关领域的陌生，毕竟那不是重点，也不会成为学习WebGL过程中的难点。 WebGL的学习过程和OpenGL是相似相通的，所以也不必担心是否需要OpenGL的基础知识

这本书干什么

这本书是我学习WebGL过程的记录，会根据学习的经验写成教程的形式。

第一章是“Learning WebGL”的内容，部分是翻译，部分是自己不懂的地方查阅资料补充的，也省略了一些觉得不必解释过细的内容，可以理解为“Learning WebGL”的一个中文版。

这本书的GitBook主页：https://www.gitbook.com/book/csgrandeur/webgl-learn

对应的Github主页：https://github.com/CSGrandeur/csgrandeur-webgl-learn

代码演示：http://csgrandeur.github.io/WebGL_Learn_Code

参考

Learning WebGL 他的网站是：http://learningwebgl.com 。