学习WebGL和three.js
我是新来的，开始在网页浏览器上学习3D计算机graphics。 我有兴趣在浏览器中制作3D游戏。 对于已经学习WebGL和three.js的人…
-
WebGL的知识是否需要使用three.js？
-
使用three.js和WebGL有什么好处？
既然你有雄心壮志，就得花时间学习基础知识。 这不是你先学什么的问题 – 如果你愿意，你可以同时学习。 （这就是我所做的）
这意味着你需要了解：
- WebGL概念
- three.js所
- 基本的math概念
three.js所。 Three.js在抽象WebGL的许多细节方面做得非常出色，所以我个人build议在项目中使用Three.js。 但请记住，Three.js是alpha版本 ，经常变化，所以你必须为此做好准备。 大多数人通过学习例子来学习Three.js。 避免过期的书籍和教程，并避免链接到旧版本库的networking示例。
WebGL的。 如果你使用Three.js，你不需要知道如何在WebGL中编程，你只需要了解WebGL的概念。 这意味着，你只需要能够阅读别人的WebGL代码，并理解你读的东西。 这比从头开始编写WebGL程序要容易得多。 您可以使用网上的任何教程充分了解WebGL概念，例如WebGLFundamentals.org上的初学者教程和Learning WebGL 。
math。 再一次，你至less需要了解这些概念。 三本好书是：
-
用于graphics和游戏开发的3Dmath入门由Fletcher Dunn和Ian Parberry完成
-
游戏和交互式应用程序的基本math：由James M. Van Verth和Lars M. Bishop编写的“程序员指南”
-
3D游戏编程和计算机graphics学的mathEric Lengyel
我希望这对你有帮助。 祝你好运。
有一个很好的在线课程 – 交互式三维graphics在THREE.js https://www.udacity.com/course/cs291 。 本课程还包括分配，以获得实践经验。 它涵盖了Three.js和Computer Graphics的所有基本概念
我个人的想法如下：
- 如果你有足够的时间，你可以同时学习，但是请注意，WebGL比Three.js要低得多。
- 对于第一个3D项目，专家build议使用像Three.js这样的库来习惯术语和一般的3D模型。
无论你select哪个方向，我build议你学习/打磨你的线性代数技巧 。 然后继续学习或提高你对MVP维度的理解（Model View Projection） 。 三.JS可以抽象出很多，但我认为在认真对待任何3D开发之前，理解这些概念是关键。
当我第一次使用OpenGL学习3D编程时，我写了一篇关于MVP的介绍性文章 。 我意识到，直到我能够解释这些转换matrix是什么，以及它们如何与各种维度/空间相关时，我根本不知道任何3D编程，尽pipe我可以将对象呈现在屏幕上。
既然你的目标是创build游戏，那么即使你最终使用像Three.js这样的框架来帮助你编写你的代码，你也会从学习一些原始的WebGL中受益匪浅。
“WebGL是2D API而不是3D API”
http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html
本文将介绍WebGL和3D库（如three.js）之间的基本差异。
这使我在WebGL或Three.js之间做出了select。
我在Unity3D的背景以及Papervision3D当天都是如此，所以我对如何处理3D空间有了很好的了解。 Three.js是你学习如何处理WebGL项目的第一步。 api非常好，function非常强大，如果你是从另一个3D技术来的，那么你就可以在很短的时间内运行起来。
我花了很多时间用Threejs.org的例子 – 这里有很多，他们很擅长让你走向正确的方向。 这些文档是足够的，尤其是如果你把它们和其他的webGL 3D api比较的话。
你也可以考虑从他们的app store（Window> App Store）获得Unity3D的免费版本和免费的collada（当我得到它的时候是免费的）导出器。 我发现很容易在Unity中设置我的场景，并将其导出到Collada以与Three.js一起使用。
另外，我发布了这个与Three.js一起使用的类neo（ webGL/three/neo.js ）。 只需将它添加到您的项目，然后调用Neo.JackIntoThree（），它会将方法/属性添加到Object3D用于您的项目。 像DrawAllAxis（）这样的东西在debugging场景时是无价的
尽pipe如此，Three.js是一个很好的select – 它足够灵活，可以让你编写自己的着色器/对象等，而且function强大，可以帮助你实现目标。
我拿起three.js，还跳入GLSL，并用three.js shaderMaterial进行了很多实验。 一种解决方法 – three.js仍然为你提供了很多东西，但是它也为你提供了一个对所有渲染（投影，animation）function非常干净，低层次的访问。
这样，你甚至可以跟随这样的真棒开放式教程 。 您不必设置matrix，键入数组，因为三个已经为您设置，在需要时更新它们。 虽然着色器，你可以从头开始写 – 一个简单的颜色呈现将是两行GLSL。 还有一个用于three.js的后期处理插件，用于设置所有的缓冲区，全屏四边形和您需要做特效的东西，但着色器可以非常简单地开始。
由于可编程着色器是现代3Dgraphics的本质，所以我希望我的答案不要错过这个观点:)迟早，任何这样做的人至less需要了解引擎盖下发生了什么，这是兽的本质。 而且，理解同质空间中的第四维也是重要的。
本书适合WebGL。
我只是学到了一点点，我觉得理解webgl的基础知识，我认为webgl的介绍是足够的，然后跳入三个js。 一旦你理解了WebGL的基本概念，这将是非常容易的。 有用的链接：
- 最好的介绍我已阅读： http : //dev.opera.com/articles/view/an-introduction-to-webgl/
- 综合教程： http ： //www.johannes-raida.de/tutorials.htm
