学习 WebGL 和 three. js

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

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

  2. 使用 three. js 和 WebGL 的优势是什么？

61315 次浏览
小开

我个人的想法如下:

  • 如果您有足够的时间，您可以同时学习这两个知识，但是请注意，WebGL 的级别比 Three. js 低得多。
  • 对于第一个3D 项目，专家建议使用像 Three.js 这样的库，以便适应术语和一般的3D 模型。
小开
最佳答案

既然你有雄心壮志，你就必须投入时间学习基础知识。这不是你先学什么的问题——如果你愿意，你可以同时学习它们。(我就是这么做的。)

这意味着你需要明白:

  1. WebGL 概念
  2. 三个 J
  3. 潜在的数学概念

三个 J。Three. js 在抽象出 WebGL 的许多细节方面做得非常好，所以我个人建议在您的项目中使用 Three. js。但是请记住，Three. js 在 阿尔法中，并且它经常变化，所以您必须对此做好准备。大多数人通过学习示例来学习 Three. js。避免过时的书籍和教程，避免从网络链接到图书馆的旧版本的例子。

WebGL.如果您使用 Three. js，您不需要知道如何在 WebGL 中编程，您只需要理解 WebGL 的概念。这意味着，您只需要能够读取其他人的 WebGL 代码并理解您所读取的内容。这比自己从头开始编写 WebGL 程序要容易得多。您可以充分利用网上的任何教程来学习 WebGL 的概念，比如 Webglfundamentals.org和 学习 WebGL的初学者教程。

同样，你至少需要理解这些概念。三本好书是:

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

  2. 游戏与互动应用基础数学: 程序员指南

  3. 3 d 游戏编程与计算机图形学数学作者: Eric Lengyel

小开

无论你选择哪个方向，我建议你学习/润色你的 线性代数技巧线性代数技巧。然后继续学习或者提高你对 MVP 维度(模型视图投影)的理解。JS 可以将这些概念抽象出来，但我认为，在认真对待任何3D 开发之前，很好地理解这些概念是关键。

当我第一次使用 OpenGL 学习3D 编程的时候，我写了一个 关于最有价值球员的介绍性文章。我意识到，直到我能够解释这些变换矩阵是什么，以及它们如何与各种维度/空间相关联，我才真正意识到我根本没有 知道任何3D 编程，尽管我可以把对象渲染到屏幕上。

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

小开

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

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

本文描述了 WebGL 和3d 库(如 three. js)之间的根本区别。
这使得我在 WebGL 和 Three. js 之间的选择显而易见。

小开

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

小开

我拿起了 three. js，但也跳进了 GLSL，并用 three. js shaderMaterials 做了很多实验。一种方法是，three. js 仍然为您抽象了大部分内容，但是它也为您提供了对所有呈现(投影、动画)功能的非常干净、低级的访问。

这样，你甚至可以跟随像 这个很棒的 open-gl 教程这样的东西。您不必设置矩阵，类型化数组，因为三个已经为您设置了它，并在需要时更新它们。然而，着色器，你可以从头开始写-一个简单的颜色渲染将是两行 GLSL。还有一个用于 three. js 的后期处理插件，它可以设置所有的缓冲区、全屏四边形和你需要做的效果，但着色器可以非常简单。

由于可编程着色器是现代3D 图形的本质，我希望我的答案没有错过要点:)迟早，任何人谁这样做需要至少了解发动机罩下发生了什么，这是野兽的本质。此外，理解齐性空间的第四维可能也很重要。

这本书对 WebGL 很有用。

小开

我刚刚学到了一点，我觉得了解 webgl 的基础知识，我认为一个关于 webgl 的介绍就足够了，然后跳转到三个 js。一旦理解了 WebGL 的基本概念，就会非常容易。 有用连结:

  1. 我读过的最好的简介: Http://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. 综合教程: Http://www.johannes-raida.de/tutorials.htm
小开

我来自 Unity3D 背景以及 Papervision3D 回到过去，所以我有一个很好的理解如何处理3D 空间。Js 是学习如何处理 WebGL 项目的最初跳跃。API 非常好，非常强大，如果你使用的是另一种3D 技术，你只需要很少的时间就可以启动并运行。

我花了很多时间研究 Threejs.org 上的例子——有很多这样的例子，它们非常善于帮助你脱离困境，朝着正确的方向前进。这些文档足够体面，特别是如果你将它们与其他 webGL 3D api 进行比较的话。

你也可以考虑从他们的应用程序商店(Window > App store)获得免费的 Unity3D 版本和免费的 colada (当我得到它时是免费的)导出程序。我发现在 Unity 中设置场景并将其导出到 Collada 以便与 three. js 一起使用非常简单。

此外，我还发布了这个类，我在 Three. js 中使用它来命名 neo (http://rockonflash.com/webGL/three/neo.js)。把它加到你的项目里，然后打电话给尼欧。JackIntoThree () ，它将向 Object3D 添加方法/属性，以便在项目中使用。类似 DrawAllAxis ()这样的东西在调试场景时是非常宝贵的。

毫无疑问，Three. js 是一个很好的选择——它足够灵活，可以让你编写自己的着色器/对象等，而且功能强大，可以帮助你实现目标。


提交答案