作者:vivo 官网商城前端团队-Ni Huaifa
一、 前言
二、 2D数据可视化
三、3D(2D+1D)数据可视化
1)JavaScript: 处理着色器需要的顶点坐标、法向量、颜色、纹理等信息,并为顶点着色器提供这些数据 2)顶点着色器: 接收 JavaScript 传递过来的顶点信息,将顶点绘制到对应坐标 3)光栅化阶段: 将图形内部区域用空像素进行填充 4)片元着色器: 为图形内部的像素填充颜色信息 5)渲染: 渲染到Canvas对象
四、vivo官网3D应用实战
1)OBJ模型对于动画的支持不是特别友好,而手机在做3D展示时需要进行一些模型的拆解动画展示。
2)FBX 由于不同引擎解析的规范不同,导致不同引擎渲染出的效果差别较大
3)GLTF(GLB) 模型格式扩展性较高,ThreeJs、Babylonjs等WebGL渲染引擎的支持性较好
let texture = await Loader.loadImg(panoramicImg)
texture.encoding = THREE.sRGBEncoding
let sphereGeometry = new THREE.SphereGeometry(3000, 160, 160)
sphereGeometry.scale(-1, 1, 1)
let sphereMaterial = new THREE.MeshBasicMaterial({ map: texture })
let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
// 设置材质对象的纹理贴图
this.bgMap = sphere
this.stage.scene.add(this.bgMap)
npm install -g gltf-pipeline
Converting a glTF to glb
gltf-pipeline -i model.gltf -o model.glb
gltf-pipeline -i model.gltf -b
// Instantiate a loader
const loader = new GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed mesh data
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
loader.setDRACOLoader( dracoLoader );
五、总结
END
猜你喜欢
vivo互联网技术
vivo移动互联网是基于vivo 智能手机所建立的完整移动互联网生态圈,围绕vivo大数据运营,打造包括应用、游戏、资讯、品牌、电商、内容、金融、搜索的全方位服务生态,满足海量用户的多样化需求。
点一下,代码无 Bug