3d数字技术应用发展，3d数字展示

在本文中，我们将详细介绍如何在淘宝应用中利用3D相关技术来优化淘宝应用中数字收藏品的照片和文字展示。背景介绍，介绍方案设计、模型预处理、模型处理、脚本操作等流程，同时重点分析一些核心技术问题的解决方案。希望这篇文章能为第一次使用Blender或者Unity的前端开发同学提供启发和参考。

背景问题

业务背景：为了优化数字藏品在淘宝APP上的展示，凸显数字藏品的虚拟价值，带来营销效益，淘宝科技正在考虑构建相应的3D渲染功能。目前3D渲染有两个需求：一部分是如何渲染卖家提供的3D模型，另一部分是如何使用通用相框模型动态显示卖家和其他人发布的虚拟收藏（照片、视频），以下是具体操作方法。具体相框型号如下。

最终，您需要能够自定义如下效果：

针对上述需求，方案设计需要的核心功能是： 动态修改模型中每个游戏对象的材质和纹理整个链路设计的接入流程如下：

当供应商提供的模型入库后，业务可以通过对应的Mid（模型的oss地址索引）访问对应的渲染组件进行渲染。您可以在此过程中通过调用setGameObjectInfo 函数来更改它。动态纹理的API接口的设计，特别是在渲染组件内，如下：

Interface GameObjectInfo { /** * 图片纹理URL，淘宝CDN资源地址*/img : string; /** * 视频纹理URL，淘宝CDN资源地址* * @remarks * 如果img和videoSrc同时存在，则videoSrc为*/videoSrc : string; /** * 设置游戏物体的颜色*/color : string; /** * 材质是否应该反光*/isShine : boolean;} Interface setGameObjectInfo { /** * 映射一个SKU在模型的特定表面或模型配置内*/(midOrSkuName: string, data: Record,): Promise;}

技术挑战基于现有的模型渲染能力，结合本技术方案，下一步的开发环节可能需要重点解决这些挑战。

一个典型的相框模型需要进行网格划分、网格合并、调整相应网格表面的UV贴图等预处理，但是这部分是用什么软件来处理的呢？如何从网络向淘内应用提供标准的gltf相框模型淘内应用中的模型必须通过Unity进行转换。它们之间有哪些转换环节？同时如何保证这个转换过程中对两个平台的影响一致？我的渲染脚本应该如何更改？还有，整体的实现思路应该是怎样的？这个过程中如何保证模型渲染效果呢？提高模型渲染性能，提高C端用户体验你要吗？

预处理模型需要首先使用Blender 处理提供的相框模型，并将模型拆分为三个对象。一张用于对应的标志，一张用于相框，一张用于相框需要纹理的表面。

进口型号

模型UV曲面分割：首先将需要贴图的曲面合并为一个完整的曲面，然后将需要贴图的曲面分割为另一个曲面。

重命名网格并检查模型是否分裂

创建徽标图层并添加平面网格并添加“收缩包裹”修改器以使平面网格更靠近命名背面

预览纹理（不是必需的，您可以使用此处的纹理来查看渲染效果；在此过程中您可能需要调整UV映射）

导出处理后的模型

模型处理

导入FBX模型，按照供应商的模型制作标准进行场景初始化操作。这里我们将创建一个NFT文件夹场景并导入相应的资源。

供应商模型制作标准地址：https://www.yuque.com/mmdkz9/kz1iw/znxr3h#8P29y

导入对应的FBX模型。首先，导入模型。导入后，一定要导入相应的素材，并将模型挂在相机下方进行预览。

更改材质：由于Unity需要特定的材质，您可以先将Unity中模型的材质调整为符合淘宝技术标准的材质。

由于原始图像的分辨率非常高，因此您可以将图像替换为较低分辨率的占位符图像或直接将其删除（先显示以进行注释，然后使用渲染组件的动态API。）。

固定纹理可以直接用于标志部分，但一定要在Unity中启用以下渲染（透明通道）。

上传zip到平台并获取modelCode

这部分操作可以直接参考https://www.yuque.com/mmdkz9/kz1iw/znxr3h#8P29y。

脚本操作

整体思路比较清晰：找到nam对应的GameObject，改变GameObject材质等基础数据。设计的API为：

Interface GameObjectInfo { /** * 纹理URL，淘宝地址*/img : string; /** * 游戏对象颜色*/color : string; /** * 材质是否反光*/isShine : boolean; } Interface setGameObjectInfo {/** * 在模型或模型内的SKU 的特定表面上设置纹理*/(midOrSkuName: string, data: Record,): Promise;}

找到对应的游戏对象直到mid。

const findResult: FindPrefabResult=this.findNode(mid);if (!findResult) 返回未知；const skuGos: Node[]=[];forEachSkuGo(findResult.prefabObject, (node)={ skuGos.push(node);});const nftNames=Object.keys(data);const texList: Promise[]=[];skuGos.forEach(sku={ sku.forEachChild(mesh={ if (nftNames.includes(mesh.name)) { texList.push(this. udpateNodematerial(mesh, data[mesh.name])); } });});返回等待Promise.all(texList);

根据参数改变游戏对象对应的参数

private async udpateNodematerial(imgGo: Node, option: {img : string; color : string; isShine : boolean}) { const { img, color, isShine=true }=option; const imgRender=imgGo.getComponent(MeshRenderer); constmaterial=isShine new Litmaterial() : new Unlitmaterial(); imgRender.materials.clear(); imgRender.materials.add(material); if (color) {material.color.set(color); } if (img) {material.offset . set(0, 1);material.scale.set(1, -1); const tex=wait this._assetManager.loadAsync(Texture2D, '', img); tex.samplerFlags |=SamplerFlags.MinAnisotropic | SamplerFlags.MagAnisotropic ;材质.texAlbedo=tex; }}

重要问题

实施后，有两个悬而未决的问题，我将在这里记录下来。

模型的旋转畸变很大，感觉中心点周围的区域没有画出来。贴图后，由于光照效果，图像的颜色会根据角度略有变化。映射后，从某个角度观看时图像质量会变得很差。请参见下面的示例图片。

模型的旋转扭曲太大，感觉不是围绕中心点渲染的。这是因为它受到模型设置的FOV 的影响。 FOV越大，视角越大，为了解决这个问题，需要改变建模过程。对应项目的FOV值，默认FOV为60，但可以将该值调整为30以达到一定的效果。我已经提到了以下内容：

相同旋转角度下，左侧是FOV=60的效果，右侧是FOV=30的效果。

Unity中两种材质的对比，Litmaterial和Unlitmaterial的区别。这两种材料目前均由Acetinyl Engine 引擎支持。两种材料的区别在于Litmaterial不受光的影响，从而节省了资源。您可以根据您的业务需求，直接将之前使用的Litmaterial更改为Unlitmaterial。

各向异性过滤可提高从不同视角观看时的纹理质量各向异性过滤(AF) 过滤并处理由于习惯视角变化而导致3D 对象表面倾斜时出现的纹理错误。顾名思义，它是一种对周围像素进行全方位采样、计算并映射到目标像素的技术。与双线性和三线性滤波相比，它提供了更准确的广角显示和更真实的图像，但需要更多的计算，并且需要更高的显卡。它在actiny 中默认处于关闭状态，但打开它并设置材质的采样率可以提高从某个角度观看时的纹理质量。

tinyWeb.getApp().init({ renderOptions: { anisotropy: true . }, }); 更改后，相应的效果得到了很大的提升，如图。

常见问题 导出FBX 时，Blender 中的纹理会丢失。如果纹理丢失，则相应的资源可能尚未导出。在导出面板中，您需要将路径模式更改为“复制”并选择“嵌入纹理”。在这种情况下，导出的模型将包含相应的图像纹理。 Blender 导出fbx 时材质会丢失。如果您使用Blender的材质相关设置，例如更改应用程序、合并材质或反转颜色，您会发现直接导出时相应的设置被禁用。通常需要更改Blender中的材质。烘焙它，将其保存到特定材质，然后在Unity 中重新关联和配置它。您需要确定您的业务使用场景。

首先安装Blender插件，按“N”调用对应面板，设置材质存储地址，选择对象，创建集合，根据集合进行烘焙，导出对应的属性图，选择查看导出的图。创建地图，将地图相关材质导入Unity，总结一下如何使用。首先，在Blender中处理gltf相框模型，对模型进行预处理。接下来，用belender导出fbx格式模型。接下来，将fbx格式模型导入Unity，创建材质，最后导出为淘宝App渲染引擎支持的模型文件。我们将模型交付给企业使用，并帮助他们根据需求动态设置模型上每个网格的材质。在此过程中，解决了几个核心问题，包括模型的旋转扭曲、两种unity模型材质的对比、两种材质对C端渲染的影响，以及影响角度渲染效果的各向异性过滤的概念等。我们还详细介绍了如何将Belender 模型导出到Unity 并确保在此过程中效果一致。希望这篇文章能为第一次尝试Blender或Unity的同学提供启发和参考。

作者： 李根（云墨） 来源： 微信公众号： 大淘宝技术来源：https://mp.weixin.qq.com/s/Rv_DBasjNJEmYZzN6u4PLg