0

我最近专注于在 HTML 5.0 画布中绘制一些很酷的形状。我想写一个可以在 JavaScript 中使用的 3D 图形引擎。我已经完成了一个旋转立方体。我想完成这个例子的形状：http: //gyu.que.jp/jscloth/touch.html。

谁曾在这个领域尝试过？

4

5 回答 5

4

大约一年前，我编写了一个 Javascript 3D 引擎，大约在 Google 发布了他们的 Chrome 浏览器和超快 V8 Javascript 引擎的时候。不幸的是，由于没有浏览器公开 3D 图形 API（例如 OpenGL 或 Direct3D），该引擎将位图图像扭曲到网页上，以实现仿射纹理映射三角形（不如透视正确的纹理映射三角形），这是很慢。

我使用我的 Javascript 3D 引擎构建了一个3D 模型库。（提示：不要查看第一个模型 - 它是最大且查看速度最慢的模型！）。在我的 PC 上的 Google Chrome 中，具有大约 1000 个三角形的 3D 模型的性能约为每秒 10 帧。

我考虑过开源这个引擎的源代码，但我从来没有这样做过。如果有足够的兴趣，我会把源代码放到 Google Code 上。

我目前的宠物项目是Silverlight 3D 引擎和模型查看器，它是一个软件 3D 引擎（即我的 C# 代码可以控制每个像素的颜色）。Silverlight 3 比 Javascript 快得多，但它是非标准的，是一个浏览器插件，并且仍然不支持 3D 硬件加速图形（没有太多开销）。

更新：自从我最初写这篇文章以来，我更新了上面提到的 Silverlight 模型查看器以使用 Silverlight 5 和硬件加速 3D。

于 2009-11-05T16:25:54.770 回答
3

编辑：这个问题是多年前提出的。从那时起，除了 IE 之外的所有浏览器（现在？）都添加了对 webgl 的支持。您可以在这里看到许多示例：http: //www.chromeexperiments.com/webgl/

我真的不想让您气馁，但是为了用 JavaScript 编写3D引擎，您必须非常精通并熟悉 3D 渲染背后的数学/逻辑。

由于您没有说明您目前的专业知识，我假设您没有……在这种情况下，我强烈建议您从其他地方开始。例如，XNA 游戏工作室。您用 C# 编写代码，并且已经有很多编写良好的 API 抽象了大部分（但绝对不是全部）困难部分。但这是学习 3D 渲染背后的许多概念和数学的好方法。

但是，如果您一心想开始使用 JavaScript，那么 Internet 上已经有很多关于此的资源。例如这个:-)
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/

祝你好运！

于 2009-10-30T17:18:30.967 回答
3

将预先存在的 3D 库绑定到 JavaScript 怎么样？像 OpenGL。

V8-GL将 80% 的 OpenGL API 暴露给 JavaScript：

替代文字

于 2010-10-28T21:24:55.803 回答
0

我不知道写一个会怎么样。但这里有一些存在。

于 2009-10-30T17:20:01.493 回答
0

为了写一个你需要首先决定你是否支持 Excanvas，所以 IE 可以使用它，或者不。

如果您支持 IE，这将对您可以做什么设置一些限制。

最好的办法是从创建一些主要形状开始，并且很可能您希望拥有可以构建其他所有东西的某些基元，因此，您可能希望查看 OpenGL 或 DirectX 的基元。

一旦你有了它，你就可以在 3D 空间中移动它们，然后你会想要开始考虑添加相机，但与第 1 步相比，这将相对容易。

不幸的是，所有这些在数学上都非常繁重，因此如果您创建多个必须频繁移动的 3D 对象，您的性能将会受到巨大影响。

我认为最好的选择是等待，因为在 2007 年末，Firefox 和 Opera 的博客在画布上支持 3D：http: //starkravingfinkle.org/blog/2007/11/animating-with-canvas/

原因是如果它被内置到浏览器中，那么大部分繁重的工作都会完成，尤其是如果它支持某种风格的 OpenGL。

于 2009-10-30T17:34:54.943 回答