学习 WebGL 和 three.js [关闭]答案

【问题标题】：Learning WebGL and three.js [closed]学习 WebGL 和 three.js [关闭]
【发布时间】：2012-08-11 14:23:01
【问题描述】：

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

使用three.js需要WebGL知识吗？
使用three.js 与WebGL 相比有哪些优势？

【问题讨论】：

使用 Three.js。时期。这正是 West 下面所说的，虽然理论上很简单，但从头开始编写 WebGL 是一种痛苦。几乎每个 WebGL 应用程序都需要/想要做很多事情。这些东西可以从你身上抽象出来。此外，Three.js 已经成熟为一个了不起的库。如果您在此处查看 Google 趋势或 SO Questions 的数量，您会发现它已经远远领先于竞争对手。
@GeorgeStocker 实际上，这个问题的答案主要基于观点，而是基于事实、参考资料和特定专业知识。对于 there.js 社区来说，这是一篇有价值的帖子，问题的第 (2) 部分当然是可以接受的。你会如何建议改写它以便你可以接受——也就是说，不改变问题的含义/意图？
@WestLangley 除了给出的答案中的意见外，我什么也没听到；更不用说“使用任一 [库] 的优缺点”对于 Stack Overflow 来说有点过于宽泛了。
@GeorgeStocker 您的回复本身就是一种观点，我强烈反对。您如何建议对帖子进行重新措辞以便您可以接受？
也许这些问题可以改写为学习 WebGL 对使用 Three.js 有什么好处。这个问题的答案将得到事实、参考资料和专业知识的支持。

标签： webgl three.js

【解决方案1】：

我个人的想法如下：

如果时间充裕，可以同时学习两者，但请注意，WebGL 的级别远低于 Three.js。
对于第一个 3d 项目，专家建议使用 Three.js 之类的库，以便习惯术语和通用 3d 模型。

【讨论】：

我同意这一点。在这一点上，将两者都放在您的工具带中似乎是一件好事。我会从学习 Three.JS 开始，然后用 GLSL 做一些着色器，并一直尝试更多地了解 WebGL。

【解决方案2】：

既然你有远大的抱负，你就必须花时间学习基础知识。这不是你先学什么的问题——如果你愿意，你可以同时学习它们。（这就是我所做的。）

这意味着你需要了解：

WebGL 概念
三个.js
基础数学概念

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

WebGL。如果你使用 Three.js，你不需要知道如何在 WebGL 中编程，你只需要了解 WebGL 的概念。这意味着，您只需要能够阅读其他人的 WebGL 代码并理解您阅读的内容。这比预期自己从头开始编写 WebGL 程序要容易得多。您可以使用网上的任何教程很好地学习 WebGL 概念，例如 WebGLFundamentals.org 和 Learning WebGL 的初学者教程。

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

3D Math Primer for Graphics and Game Development 由 Fletcher Dunn 和 Ian Parberry 撰写
Essential Mathematics for Games and Interactive Applications: A Programmer’s Guide James M. Van Verth 和 Lars M. Bishop
Mathematics for 3D Game Programming and Computer Graphics Eric Lengyel

【讨论】：

用简单的英语从头到尾了解 webgl 概念的最佳网站是什么。或者至少每当作者使用某个“词”时，他/她都是在之前描述过一次之后才这样做的。
查看文章正文中的学习 WebGL 教程的链接。

【解决方案3】：

无论你选择哪个方向，我建议你学习/磨练你的线性代数技能。然后继续学习或加深您对 MVP 维度（模型视图投影） 的理解。 Three.JS 可以将其中的大部分内容抽象出来，但我认为在认真对待任何 3D 开发之前理解这些概念非常重要。

当我第一次学习使用 OpenGL 进行 3D 编程时，我写了一个introductory article about MVP。我意识到，在我能够解释这些转换矩阵是什么以及它们与各种维度/空间的关系之前，我真的根本不知道任何 3D 编程，尽管我可以渲染对象到屏幕上。

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

【讨论】：

死链接，你能修复它吗？我有兴趣阅读那篇文章。
感谢archive.org。这里：web.archive.org/web/20171010042037/http://rodrigo-silveira.com/…

【解决方案4】：

“WebGL 是 2D API 而不是 3D API”

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

本文描述了 WebGL 和 3d 库（如 three.js）之间的根本区别。
这让我在 WebGL 或 Three.js 之间做出选择变得轻而易举。

【讨论】：

引用不是来自链接页面的正文。不过，我确实部分接受了链接页面中所述的论点。不是关于成为 2D API，而是关于成为光栅化 API（适用于 2D 和 3D 图形）。

【解决方案5】：

在 THREE.js 的 https://www.udacity.com/course/cs291 上有一个非常好的在线课程 - 交互式 3D 图形。本课程还包括获得实践经验的作业。它涵盖了 Three.js 和计算机图形学的所有基本概念

【讨论】：

【解决方案6】：

我学习了three.js，但也跳入了GLSL，并用three.js shaderMaterial做了很多实验。一种解决方法——three.js 仍然为您抽象了大部分内容，但它也为您提供了对所有渲染（投影、动画）功能的非常干净、低级的访问。

这样，您甚至可以关注this awesome open-gl tutorial 之类的内容。您不必设置矩阵、类型化数组，因为三个已经为您设置好了，并在需要时更新它们。虽然着色器，您可以从头开始编写 - 简单的颜色渲染将是两行 GLSL。还有一个用于three.js 的后处理插件，它设置了所有缓冲区、全屏四边形和制作效果所需的东西，但着色器可以非常简单地开始。

由于可编程着色器是现代 3D 图形的精髓，我希望我的回答没有漏掉重点 :) 迟早，任何这样做的人都需要至少了解幕后发生的事情，这是兽。此外，了解齐次空间中的第 4 维可能也很重要。

This book is good for WebGL.

【讨论】：

【解决方案7】：

这两个我都学了一点，感觉了解webgl的基础，我觉得webgl的介绍就够了，然后跳入三个js。一旦您了解了 WebGL 的基本概念，这将非常容易。有用的链接：

我读过的最佳简介： http://dev.opera.com/articles/view/an-introduction-to-webgl/
综合教程： http://www.johannes-raida.de/tutorials.htm

【讨论】：

【解决方案8】：

我以前有 Unity3D 和 Papervision3D 的背景，所以我对如何处理 3D 空间有很好的了解。 Three.js 是您开始学习如何处理 WebGL 项目的途径。该 api 非常好，非常强大，如果您来自其他 3D 技术，您将在很短的时间内启动并运行。

我花了很多时间研究 Threejs.org 的示例 - 它们有很多，它们非常擅长让你离开并朝着正确的方向前进。这些文档足够好，尤其是当您将它们与其他 webGL 3D api 进行比较时。

您也可以考虑从他们的应用商店 (Window>App store) 获取免费版本的 Unity3D 和免费的 collada（我得到它时是免费的）导出器。我发现在 Unity 中设置我的场景并将其导出到 Collada 以与 Three.js 一起使用很容易。

另外，我发布了这个与 Three.js 一起使用的名为 neo (http://rockonflash.com/webGL/three/neo.js) 的类。只需将其添加到您的项目中，然后调用 Neo.JackIntoThree()，它就会将方法/属性添加到 Object3D 以在您的项目中使用。在调试场景等时，DrawAllAxis() 之类的东西非常宝贵。

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

【讨论】：