当前位置：首页 >新媒易动态 >视频号购买

设计师需求中3D视觉平移到互动H5中的越来越多

2022-01-04

设计师需求中3D视觉平移到互动H5中的越来越多，three.js和PBR工作流的结合却一直没有被系统化地整理。

和各位前端神仙一起做项目，也一起磕磕碰碰出了爱与痛的领悟。小小总结，希望3D去往H5的道路天堑变通途。

本手册主要分为两大部分：

Part 1 理论篇：主要让设计师了解计算机到底是如何理解和实时渲染我们设计的3D项目，以及three.js材质和预期材质的对应关系。

Part 2 实践篇：基于three.js的实现性，提供场景、材质贴图的制作思路、以及gltf工作流，并动态讨论项目常常遇到的还原问题。

本文主要for刚接触3D图形学的设计师，仅截取了最常用的理论知识和大家一起学习。

部分涉及技术美术或计算机图形学的描述可能不甚严谨，希望大家多多交流讨论哈。

其实无论H5开发用到的是哪种webGL，设计相关的材质制作基本还是基于PBR思路进行的，所以这边建议各位亲可以先去阅读一下Substance官方宝册《The PBR Guide》。

理论篇

设计师在还原3D类型的互动H5项目的时候一定想过这个宇宙终极问题：为什么H5/Web实现的3D效果和C4D里渲染出来的差异那么大？

其实这是我们对实时渲染引擎（UE、Unity、three.js等）和离线渲染工具（Redshift、Octane、Vray等）的差异存在误解：一是离线渲染工具是基于真实光照环境来计算每颗像素的着色，实时渲染如果要实现这种效果需要耗费更多硬件基础和算力去模拟光照（没个好显卡都开不动光追）。

虽然UE5的实时渲染技术和硬件兼容性已经让大家大吃一惊，但在实际项目，尤其是需要兼容低端设备的H5来说，渲染能力还是相对有限的。二是对于游戏或H5互动网站实际应用来说，流畅的互动体验优先级往往高于画面精细度，所以牺牲视觉保性能也是常见情况。

Octane离线渲染效果 VS three.js 实时渲染效果

材质细节、全局光照及投影、以及抗锯齿表现差距明显

当实时渲染效果与设计预期差距过大时，设计师能多了解一些基础的计算机图形学，也许就能更好地和开发同学商讨性价比更高的视觉实现和资源优化方案（以及更多Battle的筹码）。

首先我们要知道计算机之所以能在2D屏幕上画出3D的图像，是因为有着色器（Shader）在绘制，它将我们三维空间里的模型与光照信息进行转换，并光栅化为二维图像。在计算机图形学中，着色器是用于对图像的材质（光照、亮度、颜色）进行处理的程式。

常用的着色器分为四种：像素/片元着色器（Pixel/Fragment Shader）、顶点着色器（Vertex Shader）、几何着色器（Geometry Shader）、细分曲面着色器（Tessellation Shader）。

像素/片元着色器与顶点着色器（Vertex Shader）在webGL处理过程中都有使用，顶点着色器先将模型中每个顶点的位置、纹理坐标、颜色等信息进行转换装配，再由片元着色器对3D信息光栅化并转换成2D屏幕信息。（关于着色器差异，感兴趣的同学可以直接跳到附录查看。）

着色器是怎么把顶点中所带有光照、纹理等信息转换并重建在二维图像的像素中呢？GPU中是透过不同的着色算法来实现的。

一种是获取每个三角形的插值（Interpolate）来实现，这种方法称作Per Vertex Lighting，但是当三角型很大的时候，插值往往不够精准。此时还可以引用另一种方法Per Pixel Lighting，计算每个像素的光照信息，获得更好的渲染效果，但是往往也带来更大的计算量。

一般常见计算机图形着色算法有三类：Flat Shading、Gouraud Shading、Phong Shading。这些算法虽然看起来和我们设计师没啥关系，但事实上在后面了解three.js材质时，就会发现他们在呈现时的差异。

1）平直着色法 Flat Shading

这种着色法认为模型中所有面都是平的，同一个多边形的上任意点的法线方向都相同。着色时，会优先选择多边形的第一个顶点或三角形的几何中心计算颜色。这种着色法实践上的效果很像低面模型，也比较适合使用在高速渲染的场景。值得注意的是，这种着色法难以做出平滑高光效果。