学习WebGL和three.js [关闭]

142

我是新手，开始学习Web浏览器中的3D计算机图形。我对在浏览器中制作3D游戏感兴趣。对于同时学习WebGL和three.js的任何人...

  1. 使用three.js是否需要WebGL知识？

  2. 使用three.js与WebGL相比有什么优势？

webgl  three.js 
— r1nzler
source
10
使用Three.js。期。正是West在下面说的，尽管从理论上讲很简单，但是从头开始编写WebGL是一件痛苦的事情。有太多的事情，几乎每个WebGL应用程序都需要/想要做。这些东西可以从您身上抽象出来。而且，Three.js已发展成为一个了不起的库。如果您在此处查看Google趋势或SO问题数，您会发现它已经远远领先于竞争对手。
— theblang 2013年
4
@GeorgeStocker实际上，该问题的答案并非主要基于观点，而是基于事实，参考和特定的专业知识。这对于There.js社区来说是很有价值的帖子，问题的第二部分当然是可以接受的。您如何建议重新措词，使它为您所接受-也就是说，无需更改问题的含义/意图？
— WestLangley 2014年
@WestLangley除了给出的答案外，我什么都没听到。更不用说“使用这两个库的优缺点”对于Stack Overflow来说太宽泛了。
— 乔治·斯托克2014年
2
@GeorgeStocker您的回复本身是一种观点，我非常不同意。您如何建议改写该帖子，以便您可以接受？
— 2014年
1
也许可以将问题改写为：学习WebGL对使用Three.js有何好处。事实，参考和专业知识将支持这一答案。
— zz85 2014年

Answers:

203

由于您有雄心壮志，因此您必须花费时间来学习基础知识。这与您首先学习的内容无关，您可以同时学习它们。（这就是我所做的。）

这意味着您需要了解：

  1. WebGL概念
  2. Three.js
  3. 基本的数学概念

Three.js。Three.js在抽象WebGL的许多细节方面做得非常出色，因此我个人建议在您的项目中使用Three.js。但是请记住，Three.js在alpha中，并且它经常更改，因此您必须为此做好准备。大多数人通过研究示例来学习Three.js。避免使用过时的书籍和教程，并避免使用网络中链接到旧版本库的示例。

WebGL。如果您使用Three.js，则无需了解如何在WebGL中进行编程，只需了解WebGL概念即可。这意味着，您只需要能够阅读他人的WebGL代码并理解您所阅读的内容。这比从头开始编写WebGL程序要容易得多。您可以使用网上的任何教程（例如，WebGLFundamentals.org上的初学者教程和Learning WebGL）来充分学习WebGL概念。

数学。同样，您至少需要了解概念。三本好书是：

  1. Fletcher Dunn和Ian Parberry的图形和游戏开发3D数学入门

  2. 游戏和互动应用程序的基本数学： James M. Van Verth和Lars M. Bishop的程序员指南

  3. Eric Lengyel的3D游戏编程和计算机图形学数学

希望对您有帮助。祝好运。

— 西兰吉
source
从头到尾用简单的英语学习Webgl概念的最佳网站是什么。或至少在作者使用某个“单词”的任何时候，他/她在对单词进行一次描述之后才这样做。
— 穆罕默德·乌默
请参阅文章正文中指向Learning WebGL教程的链接。
— WestLangley
13

我个人的想法如下：

  • 如果有足够的时间，您可以同时学习两者，但请注意，WebGL的级别比Three.js低得多。
  • 对于第一个3d项目，专家建议使用Three.js之类的库，以便习惯术语和通用3d模型。
— 丹丁
source
3
我同意这一点。在这一点上，将两者都包含在工具带中似乎是一件好事。我将从学习Three.JS开始，然后使用GLSL做一些着色器，并一直尝试不断学习有关WebGL的更多信息。
— 科里·格罗斯
11

无论您选择哪个方向，我都建议您学习/磨练线性代数技能。然后继续学习或完善对MVP尺寸的理解（“模型视图投影”）。Three.JS可以将其中的大部分抽象出来，但是我认为在认真对待任何3D开发之前，对这些概念有所了解是关键。

第一次学习OpenGL 3D编程时，我写了一篇有关MVP的介绍性文章。我意识到，直到我能够解释这些转换矩阵是什么，以及它们如何与各种维度/空间联系起来，我才真正不知道任何3D编程，尽管我可以将对象渲染到屏幕上。

由于您的目标是创建游戏，因此即使您最终使用Three.js之类的框架来帮助您以后编写代码，我认为如果您首先学习一些原始的WebGL也会从中受益匪浅。

— 罗德里戈·西尔维拉
source
6

那天我既来自Unity3D背景，也来自Papervision3D，所以我对如何处理3D空间有很好的了解。Three.js是您初步了解如何处理WebGL项目的方法。该API非常好，它非常强大，如果您使用其他3D技术，则只需很少的时间即可启动并运行。

我花了很多时间在Threejs.org的示例上-有很多示例，它们非常擅长引导您朝正确的方向前进。这些文档足够不错，尤其是当您将它们与其他webGL 3D api进行比较时。

您可能还考虑从他们的应用程序商店（“窗口”>“应用程序商店”）获得免费版本的Unity3D和免费的collada（我领取时是免费的）导出程序。我发现在Unity中设置场景并将其导出到Collada以与Three.js一起使用非常容易。

另外，我发布了与Three.js一起使用的此类类，称为neo（http://rockonflash.com/webGL/three/neo.js）。只需将其添加到您的项目中，然后调用Neo.JackIntoThree（），它将把方法/属性添加到Object3D中以在您的项目中使用。调试场景等时，诸如DrawAllAxis（）之类的东西是无价的。

不过，Three.js是一个不错的选择-它足够灵活，可以让您编写自己的着色器/对象等，并且功能强大，可以帮助您实现目标。

— 新来的
source
3

我选择了three.js，但同时也跳入GLSL，并尝试了Three.js shaderMaterial。一种解决方法-three.js仍为您抽象了很多内容，但它还为您提供了一种非常干净的低级访问所有渲染（投影，动画）功能的方法。

这样一来，您甚至可以遵循类似这个很棒的open-gl教程的内容。您不必设置矩阵，类型数组，因为三个已经为您设置好了，可以在需要时进行更新。不过，着色器可以从头开始编写-简单的彩色渲染将是两行GLSL。还有一个针对Three.js的后期处理插件，用于设置所有缓冲区，全屏四边形以及您需要用来制作效果的内容，但着色器一开始可能非常简单。

由于可编程着色器是现代3D图形的本质，因此我希望我的答案不会错过重点：)迟早要这么做的人至少需要了解引擎盖下发生的事情，这就是野兽的本质。同样，了解均匀空间中的第四维也可能很重要。

这本书对WebGL有好处。

— 桶头
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.