本文通過圖文的方式詳細介紹了在淘寶App中如何使用3D相關技術，優化淘寶App中的數字藏品的展示。從背景介紹、方案設計、模型預處理，模型處理、腳本操作等過過程出發來介紹，同時重點分析了其中的一些核心技術問題的解法。希望通過這篇文章，能夠給初次接觸 blender 和 unity 的前端開發同學有一定的啟發和參考。

背景&挑戰

???業務背景

大淘寶技術為了優化淘寶App中的數字藏品的展示，為了凸顯數字藏品的虛擬價值，帶來營銷增益buff，所以考慮建設對應的3D渲染能力，目前針對3D渲染側有兩部分訴求，一部分是如何渲染商家給到的 3D 模型，另一個部分是使用通用的相框模型將商家發行的虛擬藏品（一個的圖片、視頻）等進行動態的貼圖展示，具體的相框模型如下：

最終需要能力定制出這樣的效果：

???方案設計

針對目前上述的訴求，需要的核心的特性為：模型中各個GameObject中的材質和紋理的動態修改，整個鏈路設計的接入流程如下：

當供應商提供模型落庫完成，通過對應的 mid（模型的oss地址索引），業務可以接入 對應的渲染組件進行渲染，過程中可以調用 setGameObjectInfo 這個函數進行動態紋理的修改，具體渲染組件中的 API 接口設計如下：

interface GameObjectInfo {/*** 圖片紋理url，淘寶 CDN 資源地址*/img?: string;/*** 視頻紋理url，淘寶CDN資源地址** @remarks* 如果img 和 videoSrc同時存在優先videoSrc*/videoSrc?: string;/*** 設定 gameObject 顏色*/color?: string;/*** 材質是否需要反光*/isShine?: boolean; }interface setGameObjectInfo {/*** 針對模型或者模型中sku的某一個面進行貼圖設置*/(midOrSkuName: string, data: Record<string, GameObjectInfo>,): Promise<void>; }

???技術挑戰

基于已有的模型渲染能力，結合本次的技術方案，這幾部分挑戰可能在這個后續的開發鏈路中需要重點關注：

針對通用相框模型需要預先處理，一個是mesh 的拆分，另一個是mesh 的合并，調整對應 mesh面的 UV 映射，這部分使用什么軟件進行處理？

如何將web 中標準的 gltf 相框模型供給到淘內App，淘內App 模型是需要通過unity 進行轉化，這中間的轉化鏈路應該是怎么樣？同時這個轉化過程中如何能夠保證兩個平臺中效果是一致的？

渲染腳本應該如何修改，整體的實現思路應該是怎么樣？在這個過程中如何保證模型的渲染效果？提高模型的渲染性能，提高C端的用戶體驗？

模型預處理

首先需要將給到的相框模型使用 Blender 進行處理，將模型拆分成三個物體，一個是對應的logo，一個是相框，另一個是相框需要貼圖的面。

???導入模型

???模型UV面拆分

首先將需要被貼圖的面融合成一個完整的面

然后將需要被貼圖的面拆分成一個單獨的面

UV面投射

針對mesh進行重命名，并檢查模型是否拆分完成

???創建 logo 圖層

添加平面網格，并添加「縮裹」修改器，使平面網格貼近命名的 back 面

貼圖進行預覽（不是必須的，可以在這里貼圖看下渲染效果，過程中需要調整下 uv 映射）

???導出處理完成的模型

模型處理

???導入FBX模型

按照供應商模型制作標準進行場景初始化操作，這里創建 NFT文件夾&場景并導入對應的asset。

供應商模型制作標準地址：https://www.yuque.com/mmdkz9/kzu1iw/znxr3h#8P29y

???導入對應的FBX模型

首先將模型導入：

導入之后記得導入對應的材質，然后將模型掛到相機下面進行預覽。

???材質的修改

因為unity中需要特定的材質，可以首先在unity中將模型的材質調整為大淘寶技術標準的材質。

因為原圖很高清，所以圖片可以替換成低清晰度的占位圖，或者直接去掉（這里為了標注先進行展示，后續通過渲染組件中的動態API進行替換）。

針對logo 部分，可以直接使用固定的貼圖，注意在unity中開啟下下面渲染（透明通道）。

???zip上傳到平臺，獲取modelCode

這部分的操作可以直接參考：https://www.yuque.com/mmdkz9/kzu1iw/znxr3h#8P29y

腳本操作

整體的思路比較清晰，找到對應 nam 的 GameObject，然后修改 GameObject 材質等基本數據，設計的 API 如下：

interface GameObjectInfo {/*** 貼圖url，淘內地址*/img?: string;/*** gameObject 顏色*/color?: string;/*** 材質是否需要反光*/isShine?: boolean; }interface setGameObjectInfo {/*** 針對模型或者模型中sku的某一個面進行貼圖設置*/(midOrSkuName: string, data: Record<string, GameObjectInfo>,): Promise<void>; }

???通過mid找到對應的GameObject

const findResult: FindPrefabResult = this.findNode(mid);if (!findResult) return undefined;const skuGos: Node[] = [];forEachSkuGo(findResult.prefabObject, (node) => {skuGos.push(node); });const nftNames = Object.keys(data);const texList: Promise<void>[] = [];skuGos.forEach(sku => {sku.forEachChild(mesh => {if (nftNames.includes(mesh.name)) {texList.push(this.udpateNodeMaterial(mesh, data[mesh.name]));}}); });return await Promise.all(texList);

???根據參數修改GameObject對應的參數

private async udpateNodeMaterial(imgGo: Node, option: {img?: string; color?: string; isShine?: boolean}) {const { img, color, isShine = true } = option;const imgRender = imgGo.getComponent(MeshRenderer);const material = 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 = await this._assetManager.loadAsync(Texture2D, '', img);tex.samplerFlags |= SamplerFlags.MinAnisotropic | SamplerFlags.MagAnisotropic;material.texAlbedo = tex;} }

核心問題

實現之后，有兩個問題比較突出，這里進行統一記錄

模型轉動畸變很大，感覺不是圍繞中心點進行渲染。

貼圖之后，受到光照的影響，部分角度圖片顏色會有些許變化。

貼圖之后，夾角處觀察圖片的質量會很差，可以參考下面這張圖片示例。

???模型轉動畸變很大，感覺不是圍繞中心點進行渲染?

這是因為受到模型設定的Fov的影響，FOV越大，視角越大，轉動畸變越大，為了解決這個問題，需要在建模是修改對應的項目的FOV值，默認FOV為60，可以將這個值調整為30，具體效果可以參考下面：

同一旋轉角度下左邊為FOV=60 的效果，右邊為FOV=30 的效果：

???unity中兩種材質的對比，LitMaterial、UnlitMaterial區別

目前 acetiny-engine 引擎中，兩種材質都支持，兩個材質的區別是UnlitMaterial不會受到光照的影響，比較省資源，LitMaterial會受到光照的影響，針對業務的訴求，可以直接將以前使用的LitMaterial 變為 UnlitMaterial，即可滿足業務的訴求。

???各向異性過濾，提高從掠射角觀察時的紋理質量

各向異性過濾（英語：Anisotropic filtering，簡稱AF）是用來過濾、處理當視角變化導致3D物體表面傾斜時造成的紋理錯誤。如其名稱所示，它是對周圍各個方向上的像素進行取樣計算后映射到目標像素上的技術。與雙線性過濾和三線性過濾相比，它在大角度顯示方面具有更高的精度，令畫面更逼真，但計算量也更大，對顯示卡的要求也更高。在actiny中默認是關閉的，可以開啟并設置材質的采樣率，用于提高從掠射角觀察時的紋理質量。

tinyWeb.getApp().init({renderOptions: {anisotropy: true...},... });

修改之后，對應的效果有了明顯的提升，如圖所示：

常見問題

???blender 導出 fbx丟失 紋理

如果紋理丟失，應該是對應的資源沒有導出，在導出面板，需要將路徑模式修改為「復制」并且將選中「內嵌紋理」，這樣的話導出的模型就會有對應的圖像紋理。

???blender 導出 fbx 丟失材質

如果深度使用blender 的材質相關配置，比如應用變化，材質融合、顏色反轉等等，如果直接導出會發現對應的設置都失效，針對這個問題，通常需要在 blender 中將材質進行烘焙，然后保存到具體的 material中，然后在 unity 重新關聯進行配置，具體需要確定自己的業務使用場景確定。

首先安裝blender插件

按「N」喚出對應面板，設置素材存放地址

選中對象，創建集合，基于集合進行烘焙

選擇對應的屬性貼圖進行導出

查看已經導出的貼圖

unity中導入貼圖關聯材質進行使用

總結

過程中首先通過 blender 處理 gltf 相框模型，針對模型進行預處理，之后通過 belender 導出fbx 格式的模型，然后將 fbx 格式的模型導入到unity中進行材質的設定，最終導出為淘寶App渲染引擎支持的模型文件。將模型交付給業務進行使用，支持業務根據訴求動態設定模型上每個 mesh 的素材。這個過程中發現了幾個核心問題，比如模型的轉動畸變、unity 兩種模型材質的對比，兩種材質針對C端渲染的影響，以及影響夾角渲染效果的各向異性過濾概念，同時也詳細講了下 belender 中如何導出模型到 unity 中，并且在這個過程中保證效果是一致的。希望通過這篇文章，可以給初次接觸 blender 和 unity 的同學有一定的啟發和參考。

團隊介紹

我們是大淘寶技術技術行業與商家技術前端團隊，主要服務的業務包括電商運營工作臺，商家千牛平臺，服務市場以及淘系的垂直行業。團隊致力于通過技術創新建設阿里運營、商家商業操作系統，打通新品的全周期運營，促進行業垂直化運營能力的升級。

¤?拓展閱讀?¤

3DXR技術?|?終端技術?|?音視頻技術

服務端技術?|?技術質量?|?數據算法

總結

以上是生活随笔為你收集整理的3D技术在数字藏品中的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。