Web 3D 可視化開發(fā)中，模型動(dòng)畫、材質(zhì)質(zhì)感、渲染擴(kuò)展性是提升產(chǎn)品體驗(yàn)的關(guān)鍵，但其底層邏輯復(fù)雜，如骨骼蒙皮、光照計(jì)算，導(dǎo)致開發(fā)門檻高、效率低。圖撲軟件自研 HT for Web（簡(jiǎn)稱 HT）高性能 Web 3D 渲染框架，為 FBX/glTF 模型的骨骼動(dòng)畫、材質(zhì)切換及自定義 Shader 開發(fā)提供完善支持，可大幅降低開發(fā)門檻，提升 3D 應(yīng)用的開發(fā)效率與視覺呈現(xiàn)質(zhì)量。

FBX/glTF 模型骨骼動(dòng)畫實(shí)現(xiàn)

骨骼動(dòng)畫是復(fù)雜 3D 模型動(dòng)態(tài)交互的核心能力。HT 框架通過底層渲染邏輯封裝，大幅簡(jiǎn)化骨骼蒙皮、幀插值、動(dòng)畫調(diào)度等復(fù)雜流程，開發(fā)者可通過標(biāo)準(zhǔn)化流程快速實(shí)現(xiàn)模型動(dòng)畫。

建模與導(dǎo)出規(guī)范

設(shè)計(jì)師可在 3ds Max、Maya、Blender 等主流工具中完成模型構(gòu)建、骨骼綁定與權(quán)重繪制，并編輯關(guān)鍵幀動(dòng)畫（如機(jī)械運(yùn)動(dòng)、角色行走、設(shè)備動(dòng)作等）。

模型導(dǎo)出需遵循以下規(guī)范（確保動(dòng)畫數(shù)據(jù)完整、加載高效）：

• FBX：保留完整動(dòng)畫通道信息，確保骨骼與動(dòng)畫數(shù)據(jù)完整；
• glTF：優(yōu)先使用 .glb 二進(jìn)制格式，資源打包密度更高、網(wǎng)絡(luò)加載更快。

動(dòng)畫加載與播放

開發(fā)者無需關(guān)注底層渲染（如骨骼蒙皮計(jì)算、動(dòng)畫幀插值），通過簡(jiǎn)潔代碼即可實(shí)現(xiàn)動(dòng)畫，具體步驟如下：

1 創(chuàng)建 3D 視圖

初始化視圖并掛載到 DOM，為模型加載提供渲染容器。

var g3d = new ht.graph3d.Graph3dView();

g3d.addToDOM();

2 加載模型節(jié)點(diǎn)

FBX 與 glTF 僅 modelType 差異，glTF 支持 .gltf/.glb 格式。

var walkMan = new ht.Node();

// FBX配置（glTF設(shè)為modelType: "gltf"，url對(duì)應(yīng).gltf/.glb文件）

var modelJson = {

modelType: "fbx",

url: 'assets/graph3dView/fbx/walk.fbx',

cube: true,

center: true,

playAutomatically: true

};

walkMan.s('shape3d', modelJson);

g3d.dm().add(walkMan);

3 動(dòng)畫控制

支持播放、暫停、多片段切換，適配所有模型格式。

var animNames = walkMan.getAnimationNames(); // 獲取所有動(dòng)畫名（如["walk", "run"]）

// 播放指定動(dòng)畫：參數(shù)依次為動(dòng)畫名、速度（1=原速）、起始時(shí)間（0=從頭播）、循環(huán)模式

walkMan.playAnimation(animNames[0], 1, 0, 'repeat');

// 暫停動(dòng)畫（按需調(diào)用）

// walkMan.pauseAnimation();

// 切換動(dòng)畫（如從行走切到跑步）

// walkMan.playAnimation(animNames[1], 1.2, 0, 'repeat');

HT 框架封裝了底層骨骼蒙皮、幀插值等復(fù)雜計(jì)算邏輯，開發(fā)者無需編寫專業(yè)蒙皮算法，即可快速實(shí)現(xiàn)專業(yè)級(jí) 3D 動(dòng)畫，且支持與內(nèi)置動(dòng)畫系統(tǒng)無縫融合，輕松構(gòu)建復(fù)雜動(dòng)態(tài)場(chǎng)景。

HT 框架材質(zhì)系統(tǒng)解析

材質(zhì)是決定模型物理質(zhì)感與場(chǎng)景氛圍的核心要素。HT 提供三層材質(zhì)體系，并在 FBX/glTF 模型上保持配置邏輯完全統(tǒng)一，具備超強(qiáng)的工程化復(fù)用能力。

核心材質(zhì)類型

1 PBR 物理渲染材質(zhì)（Physicallly-Based Rendering）

• 原理：基于物理規(guī)律模擬光線與物體表面的交互，支持金屬度（metalness）、粗糙度（roughness）、環(huán)境光反射（environmentMap）等參數(shù)；
• 優(yōu)勢(shì)：真實(shí)感強(qiáng)，在動(dòng)態(tài)光影、多光源場(chǎng)景下，仍能呈現(xiàn)真實(shí)質(zhì)感（如金屬反光、玻璃折射）；
• 適配：glTF 格式原生支持 PBR，導(dǎo)出時(shí)可直接攜帶 PBR 參數(shù)，F(xiàn)BX 需在 HT 中重新配置；
• 場(chǎng)景：數(shù)字孿生工廠（設(shè)備金屬外殼）、3D 產(chǎn)品展示（家電塑料/金屬部件）。

2 Blinn-Phong 材質(zhì)

• 原理：經(jīng)驗(yàn)光照模型，將光線分為環(huán)境光（ambient）、漫反射（diffuse）、高光（specular）三部分；
• 優(yōu)勢(shì)：計(jì)算開銷低、渲染效率高，適合低性能設(shè)備（如移動(dòng)端）；
• 場(chǎng)景：輕量化 3D 界面（如設(shè)備狀態(tài)圖標(biāo)）、簡(jiǎn)單模型展示（如立方體控件）。

3 litePhong 材質(zhì)（HT 自研）

定位：平衡性能與效果，簡(jiǎn)化 Blinn-Phong 計(jì)算，保留核心參數(shù)調(diào)整能力；

關(guān)鍵參數(shù)：

• 漫反射：diffuse（基礎(chǔ)顏色，默認(rèn) #fff）、map（漫反射貼圖，支持 .jpg/.png）
• 自發(fā)光：emissive（發(fā)光顏色，默認(rèn) #000000，設(shè)為 #ff0000 可實(shí)現(xiàn)紅色發(fā)光）；
• 透明：opacity（0-1 取值，0=完全透明，1=不透明）、transparent（需設(shè)為 true 才生效）；
• 粗糙度：roughness（0-1 取值，0=鏡面反射，1=漫反射）；

場(chǎng)景：指示燈（自發(fā)光）、半透明設(shè)備外殼（透明參數(shù)）。

材質(zhì)設(shè)置方式

1 材質(zhì)注冊(cè)·全局復(fù)用

通過 ht.Default.setMaterial 注冊(cè)材質(zhì)，支持直接傳入配置或 JSON 文件路徑，后續(xù)可通過名稱復(fù)用，避免重復(fù)編碼。

// 1. 直接傳配置（PBR材質(zhì)示例）

ht.Default.setMaterial('metalMat', {

type: 'pbr',

metalness: 0.9, // 高金屬度

roughness: 0.1, // 低粗糙度（鏡面效果）

environmentMap: 'assets/textures/env.jpg'// 環(huán)境貼圖（增強(qiáng)真實(shí)感）

});

// 2. 傳JSON文件路徑（復(fù)雜材質(zhì)配置，如多貼圖）

ht.Default.setMaterial('plasticMat', 'materials/plasticMat.json');

2 普通節(jié)點(diǎn)材質(zhì)設(shè)置

普通 3D 節(jié)點(diǎn)（如立方體、球體）可直接通過 shape3d.material 綁定材質(zhì)：

var cube = new ht.Node();

cube.s('shape3d', 'cube'); // 設(shè)節(jié)點(diǎn)為立方體

// 方式1：用已注冊(cè)的材質(zhì)名

cube.s('shape3d.material', 'metalMat');

// 方式2：直接傳臨時(shí)材質(zhì)配置（不復(fù)用）

cube.s('shape3d.material', {

type: 'litePhong',

diffuse: '#409EFF',

emissive: '#1E90FF'

});

g3d.dm().add(cube);

3 FBX/glTF 模型材質(zhì)設(shè)置

FBX/glTF 模型需依賴設(shè)計(jì)師在建模軟件中預(yù)留的材質(zhì)通道（如通道名 body、arm），通過 matDef 為指定通道綁定材質(zhì)，實(shí)現(xiàn)“局部材質(zhì)修改”：

var robot = new ht.Node();

robot.s('shape3d', { modelType: 'gltf', url: 'assets/robot.glb' });

// 為通道"body"設(shè)metalMat，"arm"設(shè)plasticMat

robot.s('matDef', {

"body": "metalMat",

"arm": "plasticMat"

});

// 也可直接傳材質(zhì)配置

// robot.s('matDef', { "body": { type: 'pbr', metalness: 0.8 } });

g3d.dm().add(robot);

4 單獨(dú)節(jié)點(diǎn)材質(zhì)修改·避免復(fù)用沖突

若多個(gè)節(jié)點(diǎn)復(fù)用同一材質(zhì)，直接修改材質(zhì)會(huì)導(dǎo)致所有節(jié)點(diǎn)同步變化，需通過“復(fù)制材質(zhì)”實(shí)現(xiàn)單獨(dú)修改（以調(diào)整透明度為例）：

// 單獨(dú)修改節(jié)點(diǎn)透明度（FBX/glTF通用）

functionsetNodeOpacity(node, targetOpacity) {

// 1. 獲取節(jié)點(diǎn)當(dāng)前材質(zhì)定義（matDef）

var matDef = node.s('matDef');

// 若節(jié)點(diǎn)未自定義matDef，從模型默認(rèn)配置中獲取

if (!matDef || Object.keys(matDef).length === 0) {

matDef = ht.Default.getShape3dModelMap()[node.s('shape3d')].matDef;

}

// 2. 深拷貝材質(zhì)配置（避免修改原材質(zhì)）

var matDefCopy = {};

for (var key in matDef) {

// 克隆已注冊(cè)的材質(zhì)（ht.Default.clone確保深拷貝）

matDefCopy[key] = ht.Default.clone(ht.Default.getMaterialMap()[matDef[key]]);

// 3. 修改材質(zhì)參數(shù)（設(shè)透明）

matDefCopy[key].transparent = true;

matDefCopy[key].opacity = targetOpacity;

}

// 4. 重新綁定材質(zhì)到節(jié)點(diǎn)

node.s('matDef', matDefCopy);

}

// 調(diào)用：將機(jī)器人模型透明度設(shè)為0.6（半透明）

setNodeOpacity(robot, 0.6);

HT 框架自定義 Shader 開發(fā)

Shader（著色器）可突破固定渲染管線限制，HT 支持自定義頂點(diǎn)著色器（Vertex Shader）與片段著色器（Fragment Shader），實(shí)現(xiàn)卡通渲染、溶解、輝光等個(gè)性化效果，且 FBX/glTF 模型的適配邏輯統(tǒng)一。

Shader 職責(zé)劃分

■頂點(diǎn)著色器：處理頂點(diǎn)的幾何信息，如坐標(biāo)變換（模型→視圖→投影）、法線計(jì)算，輸出最終屏幕坐標(biāo)；

■片段著色器：處理像素顏色，如紋理采樣、光照計(jì)算、透明度疊加，決定模型最終視覺呈現(xiàn)。

自定義 Shader 實(shí)現(xiàn)流程

格式規(guī)范

■文件后綴：.glsl；

■代碼分隔：用 // FS 區(qū)分頂點(diǎn)著色器與片段著色器；

■編譯選項(xiàng)：通過 // Hints 指定，如 glsl3（使用 WebGL 2.0 語法）、bloomSelective（支持獨(dú)立輝光）。

示例（紅色純色 Shader）：

// Hints: glsl3, bloomSelective

// 頂點(diǎn)著色器（處理頂點(diǎn)坐標(biāo)）

attribute vec3 aPosition; // HT內(nèi)置：頂點(diǎn)位置

uniform mat4 uModelViewMatrix; // HT內(nèi)置：模型視圖矩陣

uniform mat4 uProjectMatrix; // HT內(nèi)置：投影矩陣

voidmain() {

// 計(jì)算頂點(diǎn)最終屏幕坐標(biāo)

gl_Position = uProjectMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

}

// FS（分隔標(biāo)記）

// 片段著色器（處理像素顏色）

uniform vec4 uColor; // 自定義：顏色參數(shù)

voidmain() {

gl_FragColor = uColor; // 設(shè)像素顏色

}

內(nèi)置變量（無需手動(dòng)傳遞）

HT 為 Shader 提供豐富內(nèi)置變量，直接聲明即可使用，避免手動(dòng)傳參繁瑣，常用變量及作用如下：

Shader 注冊(cè)與調(diào)試

通過 ht.Default.setShader 注冊(cè) Shader，支持文件路徑或代碼字符串，同時(shí)提供錯(cuò)誤調(diào)試工具，便于排查問題：

// 1. 按文件路徑注冊(cè)（復(fù)雜Shader，如卡通渲染）

ht.Default.setShader('toonShader', 'assets/shaders/toon.glsl');

// 2. 按代碼字符串注冊(cè)（簡(jiǎn)單Shader，如紅色純色）

ht.Default.setShader('redShader', `

// Hints: glsl3

attribute vec3 aPosition;

uniform mat4 uModelViewMatrix, uProjectMatrix;

void main() {

gl_Position = uProjectMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

}

// FS

uniform vec4 uColor;

void main() {

gl_FragColor = uColor;

}

`);

// 3. 調(diào)試：獲取Shader編譯錯(cuò)誤（若報(bào)錯(cuò)）

console.log(ht.Default.getShaderErrorLog());

// 4. 監(jiān)聽Shader加載完成（異步加載時(shí)用）

ht.Default.handleShaderLoaded = function(name, resource) {

console.log(`Shader "${name}" 加載完成，可使用`);

};

Shader 使用-結(jié)合材質(zhì)

自定義 Shader 需與材質(zhì)綁定，通過 type 指定 Shader 名稱 / 路徑，同時(shí)傳遞自定義參數(shù)（uniform），適配所有模型格式：

let redMat = {

type: 'redShader', // 指定已注冊(cè)的Shader名稱

renderMode: 'triangles', // 繪制模式（默認(rèn)triangles，支持lines/points等）

transparent: false, // 是否透明

cullFace: false, // 是否背面裁切（默認(rèn)false，復(fù)雜模型可設(shè)為true優(yōu)化）

// 自定義uniform參數(shù)（傳遞給Shader的uColor）

uColor: [1, 0, 0, 1] // RGBA：紅色不透明

};

// 綁定到節(jié)點(diǎn)（FBX/glTF通用）

robot.s('matDef', { "body": redMat });

實(shí)戰(zhàn)案例-溶解效果

通過 uTime（時(shí)間）控制紋理采樣，實(shí)現(xiàn)模型溶解：

1 Shader 代碼-溶解核心邏輯

// Hints: glsl3

attribute vec3 aPosition;

attribute vec2 aUv; // UV坐標(biāo)

uniform mat4 uModelViewMatrix, uProjectMatrix;

uniform float uTime; // 時(shí)間參數(shù)

uniform sampler2D uNoiseTex; // 噪聲紋理

varying vec2 vUv; // 傳遞UV到片段著色器

voidmain() {

vUv = aUv;

gl_Position = uProjectMatrix * uModelViewMatrix * vec4(aPosition, 1.0);

}

// FS

uniform float uTime;

uniform sampler2D uNoiseTex;

uniform vec4 uDissolveColor; // 溶解邊緣顏色

varying vec2 vUv;

voidmain() {

// 采樣噪聲紋理

float noise = texture2D(uNoiseTex, vUv).r;

// 計(jì)算溶解閾值（隨時(shí)間增加，模型逐漸消失）

float threshold = 0.5 + sin(uTime) * 0.3;

// 溶解邏輯：噪聲值小于閾值則丟棄像素

if (noise < threshold) discard;

// 溶解邊緣：接近閾值的像素設(shè)為邊緣色

float edge = smoothstep(threshold, threshold + 0.1, noise);

gl_FragColor = mix(uDissolveColor, vec4(1), edge);

}

2 材質(zhì)配置

var dissolveMat = {

type: 'dissolveShader',

uNoiseTex: 'assets/textures/noise.png', // 噪聲紋理

uDissolveColor: 'rgb(255,85,0)'// 溶解邊緣橙紅色

};

robot.s('matDef', { "body": dissolveMat });

HT 框架技術(shù)優(yōu)勢(shì)總結(jié)

開發(fā)效率與工程化能力突出

封裝底層邏輯：無需編寫骨骼蒙皮、光照計(jì)算代碼，動(dòng)畫加載 3 步完成，材質(zhì)與 Shader 配置通過簡(jiǎn)潔 API 實(shí)現(xiàn)，大幅降低 3D 開發(fā)技術(shù)門檻；

復(fù)用機(jī)制：材質(zhì)、Shader 支持全局注冊(cè)與復(fù)用，適配大型項(xiàng)目與團(tuán)隊(duì)協(xié)作；

調(diào)試工具：提供 Shader 編譯日志、模型包圍盒調(diào)試、加載監(jiān)聽等功能，快速定位問題，減少調(diào)試時(shí)間。

視覺表現(xiàn)力與場(chǎng)景覆蓋全面

材質(zhì)覆蓋全場(chǎng)景：PBR/Blinn-Phong/litePhong 三級(jí)材質(zhì)體系兼顧真實(shí)感與性能；

動(dòng)畫控制靈活：支持播放速度調(diào)節(jié)、循環(huán)模式切換（repeat/once）、多動(dòng)畫切換（如行走→跑步），滿足復(fù)雜交互需求；

自定義渲染無限制：通過 Shader 實(shí)現(xiàn)卡通渲染、溶解、輝光等個(gè)性化效果，突破固定渲染管線，適配虛擬展廳、教育仿真等創(chuàng)意場(chǎng)景。

模型格式兼容性與一致性強(qiáng)

支持主流 3D 格式：原生支持 FBX、glTF 2.0、glb 等主流格式；

配置邏輯統(tǒng)一：動(dòng)畫、材質(zhì)、Shader 在不同格式下接口完全統(tǒng)一，降低跨格式開發(fā)與維護(hù)成本。

Web 端性能優(yōu)化到位

輕量化渲染：litePhong 材質(zhì)簡(jiǎn)化光照計(jì)算，Blinn-Phong 模型減少 GPU 負(fù)載，適配移動(dòng)端、嵌入式、低性能設(shè)備；

資源加載優(yōu)化：資源壓縮、異步加載、背面裁切、光照烘焙等優(yōu)化手段完善；

渲染效率提升：復(fù)雜數(shù)字孿生場(chǎng)景可穩(wěn)定保持高幀率運(yùn)行。

圖撲軟件 HT 框架通過封裝底層 3D 渲染邏輯，為 Web 3D 開發(fā)提供高效、靈活、高性能的解決方案，降低開發(fā)門檻，推動(dòng) 3D 可視化技術(shù)在各行業(yè)落地。無論是數(shù)字孿生、3D 產(chǎn)品展示，還是虛擬仿真等場(chǎng)景，開發(fā)者均可基于 HT 框架快速實(shí)現(xiàn)專業(yè)級(jí)三維可視化效果，同時(shí)兼顧 Web 端的兼容性與流暢性。隨著 WebGL 技術(shù)的發(fā)展，HT 框架還將持續(xù)優(yōu)化對(duì) glTF 2.0 新特性（如動(dòng)畫片段、頂點(diǎn)顏色）的支持，進(jìn)一步降低 Web 3D 開發(fā)門檻。

審核編輯 黃宇