webgl编程指南_给3D设计师读的Verge3D入门指南

• 支持哪些三维软件？

• 如何使用Verge3D插件？

• 什么是拼图编程？

• 如何展示我的Verge3D应用？

点击文末阅读原文，以查看超链接

Verge3D是一套面向3D设计师的WebGL应用开发工具包。对于有三维软件经验的新手来说，使用Verge3D就是在三维软件上安装和使用一个插件，但是这个插件能提供强大的交互开发能力，设计师朋友几乎不用接触代码就能开发：3D产品展示、网页游戏、AR/VR应用等等。此外，Verge3D应用还能集成进微信小程序，桌面应用程序，安卓应用程序。

支持哪些三维软件？

Verge3D应用开发大体分为三个部分：界面、3D资产、交互。其中，部分界面和全部3D资产都是在三维软件中完成的。Verge3D没有提供3D建模的功能，它是以插件方式，通过对行业里流行的三维软件提供支持来实现的。所以，从一开始你就已经掌握大部分技能了。

Verge3D直接支持Blender、3dsMax、Maya；另外Cinema4D等其它三维软件可以导出标准gltf格式，或通过FBX、OBJ等格式导入上述3个软件，实现间接支持。

Verge3D核心功能之一是提供了从三维软件本地材质系统向WebGL材质系统的转换，这项工作是比较耗时的，目前Verge3D对Blender材质系统的支持是最先进的。

如何使用Verge3D插件？

如果是开发一个只有基础功能的3D产品展示，那么你只需要像开发网页游戏那样，按照通行的行业规范按部就班地完成建模、材质、灯光、动画，然后点击预览按钮就会在浏览器里打开一个可以360度查看的WebGL页面。

但是这只是上手而已。Verge3D最强大的地方是它的交互开发能力。这里，我们需要将3D场景导出为Verge3D的glTF格式，以用于下一步的交互开发。

什么是拼图编程？

让设计师完成交互开发，需要提供一套友好的可视化开发工具。目前流行的是节点式编程，比如UE4，unity3d，Godot的可视化脚本。但是节点式编程可读性差、不易维护。Verge3D采用的是Google开源的Blockly方案，这是一种常见于少儿编程产品的拼图式(Puzzle)编程方案，优势是生成的JS代码可读性强，易维护，编程方式接近文本式编程，便于设计师向程序员过渡。

从拼图编辑器界面可以看到，基本上常用的功能都以拼图块的形式归纳到相应的分类下面，需要的时候拖拽出来就可以。拼图块的连接是镶嵌式的，不像节点式编程那样额外穿插各种方向的线条。

拼图，以及背后开发团队的设计思想，都是让JavaScript和Three.js更好用。你可以用文本编辑器打开visual_logic.js文件，这里面的代码就是你用拼图写的JS代码，它们和拼图长得很相似，也许以后你会直接写出这样的代码。

如何展示我的Verge3D应用？

作为一名3D建模师，过去我要消耗大量时间用来渲染静帧图片。现在，耗时的渲染变成在浏览器中的实时渲染了，而且不再是单一角度的静帧，而是带动画，可以360度查看，可交互的网页！

你可以通过Verge3D网络(基于亚马逊云)，或者自有网站发布自己的作品——仅需一个网址。

关于如何搭建网站，这是另外一个专门的话题，如果你了解不多，可以阅读《3D建站全流程指南》，这篇文章将通用的建站技术与Verge3D结合到了一起。