我分享技术,你专注艺术。

使用Verge3D开发移动端Web3D应用

使用Verge3D开发Web3D应用程序中,如果目标平台是PC端浏览器,那几乎可以“为所欲为”,因为PC端浏览器已经不用考虑兼容IE了,而主流的chrome、firefox等现代浏览器具有良好的WebGL兼容性。但是如果目标平台是移动端,那就需要谨慎了。

使用Verge3D开发移动端应用程序会涉及:3D资产创建、交互功能开发、HTML界面开发三个方面的内容。以下按开发过程来介绍这三个方面需要注意的事项。

一、3D资产数量限制

严格来说移动端Web3D应用程序开发并没有一个明确的资产数量指标,但是由于手机型号多种多样,性能各不相同,开发的应用程序需要能够满足在多数设备上流畅运行,所以在数量上会有一个大致的范围。以下指标是Verge3D开发团队建议开发者采用的,其中每个项目限制的数量为最大数量。

  • 模型-每个场景30-50万三角面
  • 材质-每个场景25-30个
  • 贴图-单个材质球5张
  • 灯光-每个场景3-4盏
  • 阴影-只开1盏灯光

二、开发

1. 3D资产导出限制

3D资产导出主要取决于glTF2.0支持导出的数据类型,具体可去github查看:https://github.com/KhronosGroup/glTF

以下列出的是最需要注意的几项(blender2.8版本)。

  • 模型尽量三角面化后导出
  • 并非所有eevee节点都支持
  • 贴图的格式和尺寸限制
  • HDR贴图仅适用于支持的硬件
  • 并非所有约束都能导出
  • 文字和修改器一般需要烘焙后导出
  • 不支持IK骨骼,骨骼动画一般需要烘焙后导出
  • 不支持世界背景
  • 不支持后期效果

2. 交互方式

Verge3D的事件分两种类型,一种是三维场景中的事件,一种是HTML页面事件,在开发过程中需要注意有些事件类型在移动端是不支持的。另外,在交互设计中,关于相机的类型选择也需要注意,它不仅直接影响到交互方式,甚至还会影响材质表现等方面。

  • 3D场景事件
  • HTML页面事件
  • 相机的交互(类型、运动)

3. 兼容性

移动端浏览器的兼容性主要是屏幕问题,HTML设计UI时要考虑页面自适应,另外相机也存在一个窗口自适应问题。还有一些已知的兼容性问题,比如苹果设备上声音播放的问题,这些问题基本都有对应的解决方法。

  • HTML页面的适配
  • 相机的自适应
  • 苹果声音播放等问题

4. 性能优化

移动端设备性能有限,需要考虑CPU性能、电池耗电等情况。有很多优化的方法,比如通过模型代理、贴图整合,以及通过拼图功能实现资产的按需加载,临时禁用渲染等,都能达到优化性能的目的。

  • 3D资产优化
  • 贴图按需加载
  • 静止时禁用渲染

5. 与后端的数据交换

很多应用程序都需要与后端进行数据交换,通常后端会提供一份接口说明文档,会说明接口调用方式,数据结构,示例等。与后端的数据交换都会采用JSON的形式,Verge3D有一些针对数据处理的拼图,可以满足这方面的需求。如果开发中拼图功能受限,也可以用Javascript进行开发。

  • 接口文档
  • JSON

三、测试

1. 实机调试的方法

浏览器的设备调试功能不能发现实机测试中的所有问题,所以实机测试是非常有必要的。方法可以采用本地IP或USB调试,哪种快捷用哪种。方法参见:https://zjbcool.com/docs/v3d_user_manual/general-topics/testing-mobile-browsers

  • 本地IP地址
  • 本地IP+二维码
  • USB调试(安卓)

2. 测试内容

这里需要重点说一说非功能测试,这是一项很重要的测试,程序好不好用其实很大一部分在这里。可以让你的女朋友试用你的程序,看她的体验如何,如果你能哄好女朋友,那么你也能哄好用户。

  • 非功能测试
  • 功能测试
  • 性能测试
  • 兼容性测试

四、集成

我们开发的H5应用可以与小程序完美集成,使用web-view组件就能嵌入。这里是微信web-view的开发文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

五、部署

由于我们负责的这部分都是静态资源,部署没有什么好说的,直接传到服务器就行了。

以上是我个人开发过程中的一些心得,难免有遗漏,欢迎留言补充。

zjbcool

zjbcool
关闭菜单