RPDC吊卡玩具店设计(下)-项目落地


RPDC吊卡玩具店设计(下)-项目落地


在这里我们介绍RPDC吊卡玩具店项目是如何落地的,主要使用了WebGL技术,项目实现经历了很多挑战,因此我们将主要流程记录在这里,供大家参考。

?阅读预警

本文精简了3D相关概念,建议有3D经验的设计师和研发小伙伴观看。



RPDC吊卡玩具店设计(下)-项目落地
RPDC吊卡玩具店设计(下)-项目落地
项目如何落地

RPDC吊卡玩具店设计(下)-项目落地
实现方案的选择

本项目属于3D创意H5,交互复杂且3D场景较多。做完基本交互框架后,第一版本我们考虑用WebP、mp4 的方式实现。不过实现技术复杂,相关资源很多。
RPDC吊卡玩具店设计(下)-项目落地
△Webp、Mp4实现方案的资源预估

并且在之前小红书成长体系(RED CLUB)项目中研发和设计侧已经总结一套WebGL项目的模型制作交付流程。基于此我们考虑用WebGL实现。


RPDC吊卡玩具店设计(下)-项目落地
引擎的选择

我们考虑了一些WebGL引擎,最终选择了微软的 babylon.js 。
RPDC吊卡玩具店设计(下)-项目落地
△调研使用后对各引擎的对比参照



RPDC吊卡玩具店设计(下)-项目落地
RPDC吊卡玩具店设计(下)-项目落地
3D侧设计落地流程

由于3D流程复杂,为了将设计效果落地,需要推动一系列流程标准化,我们也参考了小红书成长体系设计交付流程,下图是我们整理的具体设计落地流程。
RPDC吊卡玩具店设计(下)-项目落地
△3D设计侧流程


RPDC吊卡玩具店设计(下)-项目落地
高模转低模

我们的高模人物设计,其面数因为细分达到了几十万面,这个在WebGL中是不可接受的,需要面数控制尽量在3-5W以内,所以在此项目中我们制作了低面数人物模型,同时也制定了模型的轴线点、法向、面数、比例关系等统一输出标准。

低面人物模型建模技巧?

1. WebGL实时渲染效果受场景中总面数影响,所以模型面数的合理分配很重要,因此需要在会发生动画(形变)的区域、重点表达的结构、细节处,分配更多的面数;

2. 很多零部件不需要制作双层封闭模型, 制作单面不封闭外壳即可,但要注意两个细节,首先外壳的边缘需要根据现实结构制作折边,提供倒角、高光、厚度等细节,其次要注意法线朝向正确。

RPDC吊卡玩具店设计(下)-项目落地
△低模人物布线


RPDC吊卡玩具店设计(下)-项目落地
展UV

对我们项目来说,主要是用于资源管理、材质纹理烘焙、添加人物细节等。
RPDC吊卡玩具店设计(下)-项目落地
△角色与道具UV分布图

展UV的技巧?:
1. 与模型计算的原理相似,一张贴图的分辨率是确定的,整个人物形象共用一张贴图,所以UV面积分布也需要合理;
1.1 重要的细节应分配更多的面积;
1.2 复杂纹理如花纹、字体,分配的面积需多于单色结构;
2. 切分线需要藏于不易察觉的结构处,
展部件UV时,需要考虑部件贴图纹理情况;

有些纹理需要UV平整,比如人物头部大多有渐变色,为了保证后期贴图绘制中的渐变效果,在分UV时要精细的处理,使UV符合要求;

3. 不推荐软件自动计算排布,根据贴图配色,手动合理排列、归纳,会使后续的纹理绘制更清晰便捷。



RPDC吊卡玩具店设计(下)-项目落地
贴图烘焙

为了提升实时渲染的效果,将贴图文件拖入自建的烘焙环境进行所有通道的复合烘焙,采用烘焙好的贴图来增强渲染效果。
RPDC吊卡玩具店设计(下)-项目落地
△角色、道具贴图资源整理
RPDC吊卡玩具店设计(下)-项目落地
△角色烘焙贴图


RPDC吊卡玩具店设计(下)-项目落地
骨骼绑定与权重修复

我们主要使用了Mixamo的自动绑定方案,因其较为简单且骨骼数目恰好满足需要(如需做复杂骨骼,仍建议手动绑定)。在骨骼绑定后,需要对骨骼进行运动测试,来验证权重、破面等问题,如需调节建议采用雕刻等无损方式。
RPDC吊卡玩具店设计(下)-项目落地
△Mixamo自动骨骼,生成全身关节控制器
RPDC吊卡玩具店设计(下)-项目落地
△针对肩膀处的权重修复(仅示例,需调节多个顶点组)

角色动画制作技巧?:
1,角色动画运动自然,不仅需要关注运动部位的动作,也要调整全身动作;
2,某些关节容易出现万向节锁死问题,可以通过调整旋转轴计算顺序解决;
3,尽量只对发生变化的参数K帧,减少干扰,也便于调整动画曲线;
4,动画曲线不一定都是缓动样条,有些动画曲线更适合采用线性;
5,后续流程不识别C4D的效果器,变形器等工具,所以一些形变、颤动效果需要手动K帧制作。



RPDC吊卡玩具店设计(下)-项目落地
  动画切片制作

为了实现复杂的动画内容,经过反复测试,使用Blender导出最终的多段动画。
在该项目中,我们对整个流程进行了拆解,将首页模型和角色流程进行了拆分。
其中首页模型采用了动画切片的方式制作,将主要的模型摆动动画分成6个,当摄像机滑到该位置的时候播放该动画。
RPDC吊卡玩具店设计(下)-项目落地
△首页吊卡玩具摆动动画切片

角色流程则包含从拆卡动画到最终的彩蛋动画,整个文件大小在2-3M内(在角色模型内未使用动画切片的方式制作,具体原因在于未寻找到类似于Unity的动画切片打组的方式),因此我们将整个动画文件作为一个组导出并设定了1600帧的总时间轴,1-200帧为吊卡玩具入场动画、201-400帧为吊卡玩具拆卡动画、401-600帧为吊卡玩具闲置状态、601-1100帧为第一个道具动画、1101-1600帧为第二个道具动画,研发以时间段选择进行动画播放。
RPDC吊卡玩具店设计(下)-项目落地
△需关闭Blender导出NLA轨道分组


RPDC吊卡玩具店设计(下)-项目落地
WebGL引擎效果预览

当文件制作完成后,需要输出到WebGL预览,这里使用glTF 2.0格式,可以采用Draco压缩方式降低资源大小;
这里需要注意文件的正确命名、工程文件层级设置、文件大小,清理不相关资源;
由于该效果即为最后上线效果,所以可进行材质及光照的调节,尽量调试到较好效果,同时也可以对资源文件再次调节。



RPDC吊卡玩具店设计(下)-项目落地
RPDC吊卡玩具店设计(下)-项目落地
研发侧交互的实现

本项目的玩法流程如图,接下来介绍每个流程的一些重点实现。
RPDC吊卡玩具店设计(下)-项目落地
△简易研发侧流程


RPDC吊卡玩具店设计(下)-项目落地
Loading转场视频的实现

首页呼吸Loading及转场视频的实现采用了一层DOM图片、一层图片纹理和一层视频纹理。采用视频纹理是解决video标签在微信中初始加载卡顿的问题。呼吸效果是使用css transfrom改变上层DOM图片的透明度来实现的。底层的WebGL层在Loading显示期间已经准备完成,再点击进入视频转场的时候仅删除DOM层图片并让WebGL显示视频纹理,如此可以实现无缝衔接的效果。


RPDC吊卡玩具店设计(下)-项目落地
滑动吊卡列表的实现

吊卡列表的手势滑动采用相机动画插值的方式实现。插值的过程需要如下的信息: 待插值的变量(比如相机的位置、相机的朝向、几何平面的重心坐标等等) 。变量的初始值、变量的结束值、变化的时间、决定中间过程数值的函数(缓动函数)。
具体插值过程:每一帧记录已经经过的时间, 然后计算结束值与初始值的差值与缓动函数的乘积加上初始值即得到实时的被插值变量的值。
RPDC吊卡玩具店设计(下)-项目落地
△主页面相机滑动插值函数(其他交互均以插值方式实现)


RPDC吊卡玩具店设计(下)-项目落地
旋转吊卡和拆卡转场的实现

旋转吊卡和拆卡转场同样采用相机插值动画实现。在本项目中,仅能水平旋转。
RPDC吊卡玩具店设计(下)-项目落地
△水平旋转模型

旋转过程中相机位置与角度的转化代码如下:
RPDC吊卡玩具店设计(下)-项目落地
△alpha转相机坐标

RPDC吊卡玩具店设计(下)-项目落地
△相机坐标转alpha

在用户松手后,会有惯性滚动。需要注意的是交互要求吊卡停止的位置永远是正面或背面向前。所以当惯性插值最终结果小于最近回正位置需要更改惯性插值结束位置为最近回正位置,否则需要进行回正插值动画。
拆卡转场过程中除了播放拆卡动画外。还有俯仰角度变化, 此处是插值四元数实现的旋转, 原理如图:
RPDC吊卡玩具店设计(下)-项目落地
△模型拆卡转场角度变化

四元数插值部分实现如下:
RPDC吊卡玩具店设计(下)-项目落地
△拆卡转场运镜



RPDC吊卡玩具店设计(下)-项目落地
RPDC吊卡玩具店设计(下)-项目落地
项目遇到的实际问题

项目实际落地需要设计与研发共同参与,在模型导入后,需检查模型是否存在问题,其次是基于离线渲染效果的调整,这里展开讲述一下项目遇到的一些实际问题和解决办法。


RPDC吊卡玩具店设计(下)-项目落地
效果后期

我们在该项目中面临的主要挑战是如何提升实时渲染效果到接近离线渲染的效果。
提升实时渲染的效果,可对曝光/饱和度/对比度/曲线等调节,如:WebGL效果比软件离线渲染暗,离线渲染的光线反射次数比WebGL要多要亮,简单的解决办法是使用Shader提升渲染饱和度。


RPDC吊卡玩具店设计(下)-项目落地
材质制作

玻璃材质在WebGL中不支持全局反射和多光线反射,可使用其他材质通道配合来模拟;
次表面材质不支持,如果要表现这种细节,建议使用烘焙贴图的方式。


RPDC吊卡玩具店设计(下)-项目落地
光影

实现辉光的方式有两种,其一是代码编写,利用Shader来实现,其二设计师可以采用透明面片的方式来实现假辉光效果;
阴影实现,以Shadow Mapping方式实现(资源消耗严重),后更换为透明面片方式实现阴影。


RPDC吊卡玩具店设计(下)-项目落地
3D软件与WebGL的差异

XPresso在WebGL中不支持,需更换为骨骼方式实现形变动画;
制作动画时,在骨骼下尽量不增加物体子集,因模型在关键帧切换时有闪现问题;
需注意3D建模软件与WebGL引擎的坐标系有一定的差异。


RPDC吊卡玩具店设计(下)-项目落地
平台兼容性

Android端灯光环境异常,主要表现为Roughness丢失,经排查在于其他平台不支持HDR环境关照,因此在之后进行了灯光环境修复,使用了默认灯光+平行灯光的方式;
视频纹理在安卓平台支持度不友好。



?
展望

在小红书WebGL的技术积累上,设计师与研发共同参与,并且沉淀了内部的落地流程。目前来看3D可实时交互正在成为未来的设计趋势之一,因此我们将项目落地过程分享给大家,希望大家可以开放交流,共同进步!



项目指导– 斯内普
玩法流程 – 觉晓 阿福
视觉设计 – 空松
3D设计 – 魄罗 觉晓 阿福 空松
研发 – 仓助 皮杰 艾德
编辑 – 阿福 一万


RPDC吊卡玩具店设计(下)-项目落地
RPDC吊卡玩具店设计(下)-项目落地


?点击左下方的“阅读原文”体验RPDC吊卡玩具店H5哦~


本篇文章来源于微信公众号: 小红书DER

UI/UX

怎样借助故事化思维做好活动设计

2021-9-30 11:22:19

UI/UX

设计师版《天上飞》,带劲!

2021-9-30 14:37:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索