给3D设计师读的Verge3D入门指南

原文:https://zjbcool.com/article/verge3d-guide-for-3d-artist.html

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结合到了一起。