Blend4Web 半年前首次公开发布。在这篇文章中，我将介绍 Blend4Web 是什么，它如何发展以及它如何用于 Web 开发。

什么是 Blend4Web？

简而言之，Blend4Web 是一个用于创建 3D Web 应用程序的开源框架。它使用 Blender - 广受欢迎的开源 3D 建模套件 - 作为主要创作工具。3D 图形通过 WebGL 进行渲染，WebGL 也是一项开放标准技术。这里有两个主要关键词 - Blender 和 Web(GL) - 完美地解释了该引擎的目的。

Blend4Web 的完整源代码以及一些使用示例在 GitHub 上根据 GPLv3 许可证发布（也提供商业许可选项）。

3D 网页

6 月 2 日，苹果发布了他们的新操作系统 - OS X Yosemite 和 iOS 8 - 两者都在 Safari 浏览器中支持 WebGL。这标志着一个为期 5 年的周期的结束，在这个周期中，WebGL 技术一直在发展，从第一个不稳定的浏览器版本开始（如果有人还记得 Firefox 3.7 alpha？）。现在，所有主要浏览器在所有桌面和移动系统上都支持这种开放标准，用于在任何地方渲染 3D 图形，无需任何插件。

这是一条漫长而艰难的道路，Blend4Web 的开发一直跟随 WebGL 的发展。渲染中断、选项卡崩溃、来自 一些大公司 的安全“警告”、公共浏览器版本中不可用、各种恐惧、不确定性和疑问。所有这些都不重要，因为我们有机会在浏览器中进行 3D 图形（和声音）！

Blender

第一个 Blender 2.5x 版本出现在 2010 年夏季。那时，我们这些编程极客，被来自同名 开源电影 的美丽的 Sintel 所吸引，被迫学习 3D 建模的基础知识。选择 Blender 后，我们尽可能地独立，在 Linux 平台上组织了一个完整的开源管道。Blender 使我们能够制作自己的 3D 场景，后来帮助我们吸引了来自其精彩社区的才华横溢的艺术家加入我们。

Blend4Web 在演示中的发展

我们的演示场景随着 Blend4Web 的开发而成熟。第一个是低多边形且几乎不交互的演示，名为 The Island。它是在 2011 年创建的，并在公开发布之前经过了一些改进。在这个演示中，我们引入了基于 Blender 的管道，其中所有资产都存储在单独的文件中，并链接到主文件以进行关卡设计和进一步导出（出于这个原因，一些 Blend4Web 用户将其称为“免费 Unity Pro”）。

在 Fashion Show 中，我们开发了布料动画技术。一些后期处理效果、动态反射和粒子系统后来被添加进来。在 Blend4Web 公开发布后，我们在 其中一篇教程 中总结了这些与布料相关的技巧。

The Farm 是一个巨大的场景（以浏览器的规模）：超过 25 公顷的土地、建筑物、动画动物和植被。我们在这个场景中添加了一些游戏开发元素，包括第一人称行走、与物体互动、驾驶车辆的能力。该演示具有空间音频（通过 Web Audio）和物理（通过 Bullet 和 Asm.js）。Freedesktop 的人员在测试 Mesa 驱动程序时将其作为基准测试（并遇到了“大规模崩溃”）。

我们也尝试了一些可视化，并创建了 Nature Morte。在这个场景中，我们使用了精心制作的纹理和材质，以及后期处理效果来提高真实感。然而，用于这个演示的技术是
相当简单且老派，因为我们还没有支持可视化着色器编辑。

当 Blender 的节点材质对我们的艺术家可用时，事情发生了变化。他们为 Sports Car 模型创建了超过 40 种不同的材质：镀铬金属、油漆金属、玻璃、橡胶、皮革等。

在我们最新的版本中，我们通过添加对用户动画控制的支持更进一步。现在可以实现交互，而无需任何编码。为了展示新的开放可能性，我们展示了交互式 轻型直升机的信息图表。

这个简单而有效的工具（称为 NLA 脚本）的其他可能的应用包括：交互式 3D Web 设计、产品推广、学习资料、可以根据不同的故事情节进行选择的动画、点击式游戏以及以前使用 Flash 创建的任何其他应用程序。

使用 Blend4Web

开始使用 Blend4Web 非常简单 - 只需下载并安装 Blender 插件，如本视频教程所示

最棒的是，您的 Blender 场景可以导出到一个自包含的 HTML 文件中，可以将其通过电子邮件发送，上传到您自己的网站或云 - 简而言之，您可以随意共享。这种自由是与许多 3D Web 发布服务之间的一个根本区别，因为我们不会以任何方式将我们的用户锁定在我们的技术中。

对于想要创建高度交互式 3D Web 应用程序的用户，我们提供 SDK。一些使用 Blend4Web API 可以实现的显著示例在我们的 编程教程 中进行了演示，从 Web 设计到游戏不等。

使用 Blend4Web 编程 3D Web 应用程序并不比构建普通的 RIA 更难。与其他一些野生 WebGL 框架不同，我们试图将所有图形、动画和音频任务转移到各自的专业人员手中。程序员只需加载场景…

var m_data = require("data");
m_data.load("example.json", load_cb);

…然后编写逻辑，该逻辑触发由艺术家“硬编码”的 3D 场景更改，例如播放用户选择对象的动画

var m_scenes = require("scenes");
var m_anim = require("animation");

var myobj = m_scenes.pick_object(event.clientX, event.clientY);
m_anim.apply_def(myobj);
m_anim.play(myobj);

如您所见，API 以 CommonJS 方式构建，我们认为这对创建紧凑且快速的 Web 应用程序至关重要。

未来

互联网和 IT 的发展有很多可能性，但毫无疑问，3D Web 的强劲而稳定的发展已经到来。我们预计越来越多的用户将改变他们对 Web 内容应该是什么样的外观和感觉的期望。我们将通过改进可用性和性能以及实现新的有趣图形效果来帮助 Web 开发人员满足这些需求。

我们也关注 WebGL 2.0 的发展（感谢 Mozilla 的工作），并期望在此基础上创造更多美好的事物。

敬请关注

阅读我们的 博客，加入我们在 Twitter、Google+、Facebook 和 Reddit，观看我们的 YouTube 频道 上的演示和教程，在 GitHub 上为 Blend4Web 分支。