前言

WebGL是一种3D绘图协议，这种绘图协议允许javascript和openGL结合起来，WebGL可以为canvas提供3d硬件加速（使用GPU在浏览器渲染3d模型和场景）。WebGL是openGL的一种实现，是可以在支持WebGL的浏览器中进行3d渲染。由于浏览器的跨平台性，可以使用WebGL在多种设备多个平台展示3d效果。那么我们可以用WebGL做什么呢？

数据可视化

AR VR

3d游戏动画等

在现代前端技术发展中，使用WebGL创建3d效果是一种不可或缺的能力。由于webGL本身API只能绘制最普通的点、线、三角形，所以为了绘制大型场景和模型，我们需要选用一些框架帮助开发，比如three.js。

Three.js是对WebGL的API抽象化和封装化的js库，不必关心WebGL怎么渲染3d图形，并且在渲染中加入了各种优化，提高了性能。Three.js包含数学库，支持交互，扩展性强，还可以进行SVG,CSS3D等渲染，在WebGL不兼容的版本可以有回退解决方案。下图是three.js对WebGL做的封装:

勋章系统设计

勋章系统开发选型

勋章系统是对用户粘性提升的一种积极刺激行为，分为样式展示(简单图片)--行为触发(达到某种条件)--颁发勋章(提供3d勋章)--勋章升级(不同等级勋章提供不同展示)--趣味性(移动端控制旋转特效)。在开发勋章系统中有几个重点:

• 技术选型 因为是在app中展示，要考虑安卓和ios的差异性，同时还需要在web端展示，所以最好的选择就是用前端的WebGL方式来做3d勋章系统，在app中通过webview引入该勋章网页。在框架选择中，three.js的兼容性功能性都是接受过业界业务考验的，我们选择了three.js当我们的勋章系统框架。
• 模型选择 既然是3d勋章，3d模型的选择会影响开发周期和渲染效果，调研了three.js支持的3d模型格式：

加上ui组使用c4d软件能轻松导出dae文件，最终选择了以xml为基础的dae的3d模型。

运行Three.js

Three.js是3d渲染，在3d渲染编程中包括：场景，相机，渲染器（物体，光源，纹理）。下图是three.js的运行过程：

要想使用three.js很简单，通过简单的js引用或者npm包下载即可。然后通过加载相应的解析模块，来载入个人模型或者控制器。

import 'three';
import 'three/examples/js/loaders/ColladaLoader2';
import 'three/examples/js/loaders/MTLLoader';

在threejs中初始化场景，相机，灯光:

function init() {
   initRender()
   initScene()
   initCamera()
   initLight()
}

导入模型，并加载到场景:

function loadModel() {
   mesh = new THREE.Mesh()
   let mtl = new THREE.MTLLoader()
   let loader = new THREE.ColladaLoader()
   mtl.load("../model/yemaozi.mtl", function (result) {
       result.preload()
       let { materials } = result
       loader.load("../model/yemaozi.dae", function (dae) {
           for (let key in dae.library.materials) {
               let name = dae.library.materials[key].name
               if (materials[name]) {
                   Object.assign(dae.library.materials[key].build, materials[name])
               }
               if (name === 'font') {
                   dae.library.materials[key].build.blending = THREE.NoBlending
                   dae.library.materials[key].build.needsUpdate = true
               }
           }
           mesh = dae.scene.children[0].clone()
           scene.add(mesh)
       })
   })

}

最后是最关键的渲染（包含动效）：

// 动效
function animate() {
   requestAnimationFrame(animate)
   mesh.rotation.y +=0.01
   render()
}

展示效果如下：

勋章系统优化

支持换肤功能

• 多加入一个包含材质和纹理信息的mtl文件，通过不同的mtl材质提供换肤功能 ，接口传递的数据为:

{
   // 材质文件
   image3DMaterial: "http://xxx.mtl",
   // gzip压缩过的模型文件
   image3DMoudle: "http://xxx.gz",
   // 已获得图片
   imageGot: "http://xxx.png",
   // 未获得图片
   imageNotget: "http://xxx.png"
}

生成模型文件较大，下载时间过长

• 出于体验优化,一般大文件传输需要gzip处理，目前使用的cdn服务暂不支持文件的gzip（后期会迁移到新cdn）。所以前端用nodejs写一个预压缩脚本，将dae和mtl文件压缩并上传到cdn，同时同步更新到服务端的数据库中；拿到数据后，解压则是通过webWorker多线程，使用pako.js库进行gzip解压。

下载解析开销很大，并且3d模型占用内存过多

• 目前产品需求是只有等级5的勋章，分两步优化：

// 尝试从临时缓存中读取模型
if (models[currentMedalInfo.id]) {
scene.add(models[currentMedalInfo.id]);
modelsList.splice(modelsList.findIndex((id) => currentMedalInfo.id === id), 1);
modelsList.push(currentMedalInfo.id);
resolve();
return;
}

let medalDataMap, medalDataCache, modelData, materialData;
if (indexedDBSupport) {

medalDataMap = await localforage.getItem('medalDataMap');
medalDataMap = medalDataMap || {};
medalDataCache = medalDataMap[currentMedalInfo.id];
if (medalDataCache) {
// 如果材质地址没变则直接从indexedDB读取,否则清理掉
if (medalDataCache.image3DMaterial === materialUrl) {
materialData = await localforage.getItem(materialUrl);
} else {
localforage.removeItem(medalDataCache.image3DMaterial);
}
// 模型同上
if (medalDataCache.image3DMoudle === modelUrl) {
modelData = await localforage.getItem(modelUrl);
} else {
localforage.removeItem(medalDataCache.image3DMoudle);
}
}
// 储存最新的信息
medalDataMap[currentMedalInfo.id] = currentMedalInfo;
localforage.setItem('medalDataMap', medalDataMap);
}

// 如果不支持或indexedDB中没有则加载
if (!materialData) {
materialData = loadResource({ url: materialUrl });
}
if (!modelData) {
modelData = loadResource({
url: modelUrl, type: isDae ? 'text' : 'arraybuffer', onProgress: (progress) =>{
progressCB(progress.loaded / progress.total * (isDae ? 100 : 80));
}
});
}

• 内存中只会存储最近5次的解析过的模型,当有新的模型要加入，通过LRU策略，对于最长时间没有使用的模型内存会释放。
• 数据会存在IndexedDB，每次请求先从内存读取，内存中不存在从IndexedDB读取,都不存在走网络请求，并且会把新数据通过key-value存入IndexedDB。

有些过老机型不支持WebGL,模型加载失败

• 在获取数据时候，会返回两张图片(没获得等级勋章图片和获得等级勋章图片)，通过图片展示当做优雅降级处理方法。

用户体验

• 增加重力感应和粒子特效。

最终效果

总结

5G时代的来临，让网络传输和资源加载速度更胜一筹，在3D效果的制作可以采用WebGL这种跨平台兼容性高的方法。选用Three.js来快速开发WebGL项目，能为用户体验和业务需求提供多样化的选择。

作者简介

孙森 2018年加入网易传媒，高级前端开发工程师，目前主要做pc，移动端，小程序等版本迭代和升级优化工作，热爱足球和coding。

来源-微信公众号:网易传媒技术团队

出处:https://mp.weixin.qq.com/s/onxyXD1XMSOVaMKBPo12yQ