3D to H5工作流应用手册——理论篇
嘿，设计师朋友们！你是否好奇过，那些酷炫的3D互动H5是如何在网页上“活”起来的？计算机到底怎么理解并实时渲染我们的3D创意？别急，今天我们就来一起拆解这个难题，打通从3D设计到H5落地的核心理论屏障。
前言
如今，3D视觉元素融入互动H5的需求激增，但如何将three.js与PBR工作流无缝结合，却一直缺乏系统梳理。在与前端伙伴们并肩作战的项目中，我们积累了不少宝贵经验——有碰撞，更有成长。这份手册旨在化天堑为通途，让3D创意在H5世界自由驰骋。
手册主体分为两大板块：
Part 1 理论篇：带设计师深入计算机如何解析并实时渲染3D项目，厘清three.js材质与设计预期的对应逻辑。
Part 2 实践篇：基于three.js的可行性，提供场景搭建、材质贴图制作思路及gltf工作流，并动态破解项目常见的还原难题。
本文专为初探3D图形学的设计师打造，聚焦最实用的核心理论。部分涉及技术美术或计算机图形学的表述力求易懂，欢迎大家一起交流指正！
无论H5开发采用哪种WebGL方案，材质制作基本遵循PBR思路。强烈推荐先阅读Substance官方宝典《The PBR Guide》，打好根基。
理论篇每位设计师在还原3D类互动H5时，都可能被这个“灵魂拷问”击中：为什么H5实现的3D效果，和C4D里渲染的差距那么大？
其实，这源于我们对实时渲染引擎（如UE、Unity、three.js）和离线渲染工具（如Redshift、Octane）的误解。离线渲染基于真实光照逐像素计算，效果细腻但耗资源；实时渲染为兼顾性能与兼容性，尤其在需适配低端设备的H5中，往往需在视觉精度上做权衡。UE5虽惊艳，但面对互动优先的H5场景，流畅体验仍是首位。
Octane离线渲染 vs three.js实时渲染：注意材质细节、全局光照与抗锯齿的差异
当渲染效果不如预期时，掌握基础图形学知识，能让你更高效地与开发同学协作，制定高性价比的视觉方案（还能多几分“谈判”底气哦）。
1. 着色器与着色算法差异（微硬核预警！）
简单说，计算机靠着色器（Shader）在2D屏幕绘制3D图像。它将3D模型与光照信息转换并光栅化为2D像素。WebGL常用像素着色器与顶点着色器：顶点着色器处理顶点位置、纹理坐标等，像素着色器则完成光栅化与色彩填充。
着色器如何工作？GPU通过着色算法实现。Per Vertex Lighting通过三角形插值计算，适合大三角但精度有限；Per Pixel Lighting逐像素计算，效果细腻但更耗资源。常见算法有三：
Flat、Gouraud、Blinn-Phong着色法对比 [ F1, ©️Stefano Scheggi ]
1）平直着色法 Flat Shading
视模型各面为平面，统一计算多边形颜色。效果类似低面模型，渲染快，但难以表现平滑高光。
2）高洛德着色法 Gouraud Shading
先计算顶点光照，再插值填充三角形。比Flat细腻，比Phong高效，但高光过渡可能不自然，可借模型细分或漫反射材质优化。
3）Phong着色法 Phong Shading
插值顶点法线后逐像素计算光照，效果精准却耗资源。Blinn-Phong是其优化版，高光更自然，性能更佳。
2. 基本光照模型 Illumination Model
了解绘制原理后，再来看看计算机如何“理解”3D场景。光照模型即计算物体表面光强的数学模型，决定像素颜色。它受材质光学特性与光源环境双重影响。
真实感渲染需遵循能量守恒：反射光不超过入射光。实践中，粗糙表面反射暗而散的高光，光滑表面则反之。
PBR光照模型遵循能量守恒 [ F2, ©️Joe Wilson ]
光照模型与着色组合，可应对多样渲染需求：
真实感渲染：模拟物理世界，追求逼真。非真实感渲染：风格化处理，如卡通、水墨等艺术效果。
真实感与非真实感渲染对比 [ F3, ©️Autodesk ]
1）真实感渲染 Photorealistic Rendering
WebGL多用局部光照模型（仅计算光源直照，物体互映靠贴图模拟）。经典模型包括：
Lambert 漫反射模型：模拟粗糙表面（如橡胶）各向均匀反射。
漫反射与其他模型对比 [ F4, ©️ViroCore ]
Phong 镜面反射模型：结合漫反射与镜面反射，但高光过渡存瑕。
Phong镜面反射构成 [ F5 ]
Blinn–Phong 模型：OpenGL/Direct3D默认模型，优化Phong，高光更平滑。
Phong与Blinn-Phong对比 [ F6 ]
Cook-Torrance/GGX 模型：引入微表面概念，考量粗糙度，高光弥散自然，广泛用于PBR管线。
Phong、Blinn-Phong与GGX对比 [ F7, ©️ridgestd ]
次表面散射模型 SSS：模拟光穿透半透明物体（如皮肤）的散射。WebGL支持有限，因计算需深度数据。
Unity中SSS模拟效果 [ F8, ©️Alan Zucconi ]
2）非真实感渲染 NPR
即风格化渲染，融合不同光照与着色技法，产出艺术化效果，广泛应用于动画游戏（如《双城之战》）。
真实感与NPR混合效果 [ F9, ©️Polygon Runway]
卡通着色 Cel/Toon Shading：以简色、渐变、轮廓线模拟扁平风格。
Blender中Toon Shader效果 [ F10, ©️Blendernpr]
想体验Toon Shading的互动魅力？试试日本开发者Misaki Nakano的H5页面：https://mnmxmx.github.io/toon-shading/dst/index.html
Misaki Nakano的Toon Shader互动网站 [ F11, ©️Misaki Nakano]
定制着色 Customized Shading：如冷暖着色、素描水墨等，赋能艺术化创作。
真实感贴图与NPR水墨风格对比 [ F11, ©️邓佳迪]
3. Three.js 材质着色对比
了解渲染差异后，聚焦Three.js材质。虽可定制，但原生材质更高效。下表对比特性、贴图与场景，助你快速选型：
Three.js材质对比表：按需组合，解锁多样视觉
4. 色彩描述与管理 Color Space
色彩管理是3D工作流的隐形关键。现实光强与亮度呈线性关系，但显示器因电压呈非线性输出（Gamma约2.2），导致暗部偏暗。为矫正，需伽马校正：将sRGB色彩空间（Gamma0.45）输入，经显示器Gamma2.2输出，还原真实亮度。
红色上曲线=Gamma0.45=sRGB Space绿色下曲线=Gamma2.2=显示器真实成像缺陷蓝色斜线=Gamma1.0=Linear Space 真实物理世界线性关系
人眼对暗部更敏感，Gamma0.45空间可增强暗部细节。着色器计算基于线性空间，若纹理输入sRGB（如多数贴图），需“去Gamma化”为Linear，渲染输出时再校正，确保显示真实。具体到Three.js，若贴图与模型分导，可循此流程：
1. 输入转换：色彩贴图设sRGB编码，数值贴图保Linear，统一数据。
2. 材质刷新：改编码后，设Material.needsUpdate为True。
3. 输出校正：渲染器设gammaOutput=true，gammaFactor=2.2。
想直观感受差异？参阅Unity文档：《Linear/Gamma渲染比较》：https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html
理论篇暂告段落。如果意犹未尽，不妨深度咀嚼延伸阅读。实战篇将解锁three.js场景搭建、贴图制作与gltf工作流，并破解项目还原难题。2022，让我们在需求战场上再见真章！
附录
1）着色器差异
① 像素着色器 Pixel Shader
即片元着色器，记录像素颜色、深度、透明度。常用于实现贴图效果，但无顶点信息，处理复杂效果受限。可基于屏幕坐标做后期增强，如卡通边缘强化。
② 顶点着色器 Vextex Shader
处理顶点位置、纹理坐标等，将3D坐标转2D屏幕坐标。是常见3D着色器，不增顶点。
③ 几何着色器 Geometry Shader
可生成新顶点转新图元，直接增添模型细节，减CPU负担。用于点精灵、细分曲面等。
④ 细分曲面着色器 Tessellation Shader
在图元内镶嵌三角体，通过控制与评估着色，快速细分模型，结合置换贴图可塑高精细节。
2）术语快解
GL：图形函数库。
webGL：HTML5的3D绘图协议，为Canvas提供3D API。
Z-Buffering：深度缓冲，存储像素深度，优先渲染近物，防重叠闪烁。
Rendering Pipeline：GPU渲染管线，处理图形着色。管线越多，画面越流畅精美。
渲染管线工作流 [ F12 ]
Rasterization：光栅化，将图元转像素，含拼装、遍历、处理与合并步骤。
3）参考文献+延伸阅读
[1]Hearn, D. and Baker, M.P., 2004. Computer graphics with OpenGL, 计算机图形学第四版 . Upper Saddle River, NJ: Pearson Prentice Hall,.
[2]Akenine-Möller, T., Haines, E. and Hoffman, N., 2019.Real-time rendering. Crc Press.
[3]锐萌瑞, 经典光照模型（illumination model）
https://blog.csdn.net/qq_34552886/article/details/79089418
[4]Krishnaswamy, A; Baronoski, GVG (2004). “A Biophysically-based Spectral Model of Light Interaction with Human Skin” (PDF).
[5] List of Common Shading Algorithm：
https://en.wikipedia.org/wiki/List_of_common_shading_algorithms
[6] 0向往0, 剖析Unreal Engine超真实人类的渲染技术Part 1 – 概述和皮肤渲染
https://www.cnblogs.com/timlly/p/11098212.html
[7] 毛星云, 【《Real-Time Rendering 3rd》 提炼总结】(十) 第十一章 · 非真实感渲染(NPR)相关技术总结
https://zhuanlan.zhihu.com/p/31194204
[8] 卜噪大仙，局部光照模型杂记【Lambert/Phong/Blin-Phong/BRDF/BSSRDF/Cook-Torrance】
https://www.jianshu.com/p/96ca495669d6
[9] puppet_masterm, Unity Shader-Matcap（材质捕获）
https://blog.csdn.net/puppet_master/article/details/83582477
[10] WestLangley, documentation on gamma correction incorrect? 11110
https://github.com/mrdoob/three.js/issues/11110
[11] donmccurdy, Best practise for color management
https://github.com/aframevr/aframe/issues/3509
https://github.com/mrdoob/three.js/issues/11337issuecomment-440795075
[12] alteredq, Questions about the use of Gamma Correction in the WebGL Renderer 1488
https://github.com/mrdoob/three.js/issues/1488
[13] Friksel, What’s this about gammaFactor?
https://discourse.threejs.org/t/whats-this-about-gammafactor/4264/3
[14] PZZZB，Linear Space Lightning、Gamma、sRGB详情讲解：
https://zhuanlan.zhihu.com/p/66558476
[15] Learn OpenGL, Gamma Correction
https://learnopengl.com/Advanced-Lighting/Gamma-Correction
[16] 柯灵杰，3D图形学基础：
https://zhuanlan.zhihu.com/p/27846162?source=post_page-----b1cde1f23adf----------------------
[17] Klayge游戏引擎，关于D3D11你必须了解的几件事情（三）
http://www.klayge.org/?p=1404
[18] 拓荒犬, GPU渲染流水线简介
https://zhuanlan.zhihu.com/p/61949898
[19] Steve Baker, Learning to Love your Z-buffer.
https://www.sjbaker.org/steve/omniv/love_your_z_buffer.html
[20] Steve Baker, Alpha-blending and the Z-buffer.
https://www.sjbaker.org/steve/omniv/alpha_sorting.html
[21] Microsoft, Direct3D 11 Graphics-Tessellation Stages
https://docs.microsoft.com/en-us/windows/win32/direct3d11/direct3d-11-advanced-stages-tessellationdomain-shader-stage
[F1] Stefano Scheggi, Flat shading vs. Gouraud shading vs. Blinn-Phong shading
https://www.youtube.com/watch?v=VRw3GuVdldo
[F2] Joe Wilson, Physically-Based Rendering, And You Can Too!
https://marmoset.co/posts/basic-theory-of-physically-based-rendering/
[F3] Autodesk, Apply Visual Effects
https://download.autodesk.com/us/mudbox/help2011_5/index.html?url=./files/WS1a9193826455f5ff5cf1d02511b1d000978-6b44.htm,topicNumber=d0e8759
[F4] Virocore, Lighting and Materials
https://virocore.viromedia.com/v1.0.0/docs/3d-scene-lighting
[F5] Wikipedia, Phong Reflection Model
https://en.wikipedia.org/wiki/Phong_reflection_model
[F6] Wikipedia, Blinn–Phong reflection model
https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_modelcite_note-4
[F7] Ridgestd，从Microfacet到GGX反射模型
http://ridgestd.github.io/2019/03/18/ggx-shader/
[F8] Alan Zucconi, Fast Subsurface Scattering in Unity (Part 2)
https://www.alanzucconi.com/tag/sss/
[F9] Polygon Runway, Toon Shading Tutorial for Blender 2.8 with Commentary
https://www.youtube.com/watch?v=kriKwtzZWFg
[F10] Blendernpr, Basic Toon Shaders with Blender
]http://blendernpr.org/basic-toon-shaders-with-blender-internal/
[F11] 邓佳笛，在Unity进行水墨风3D渲染的尝试
https://zhuanlan.zhihu.com/p/25346977
[F12] Wikipedia, Graphics_pipeline
https://en.wikipedia.org/wiki/Graphics_pipeline
本文由 @腾讯ISUX 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议。
相关问答
Web3D技术发展前景如何?-ZOL问答
6条回答:可以这么说,传统的图形开发技术如OpenGL、DirectX等已经发展得非常成熟,相关领域的人才也趋于饱和。如果不是专门从事该领域的研究,或者具备深厚的学术...
前端开发的未来在哪里?-ZOL问答
实际工作中用到的核心技术其实非常有限,但前端生态却极其活跃,各种新框架层出不穷。例如,打包工具从Gulp到Webpack再到Vite,几乎每年都会迭代一次;包管理...
Three.js与Web3D技术选型有何优劣?-ZOL问答
Three.js是对WebGL技术的一种封装,类似于jQuery对JavaScript的封装,它在一定程度上简化了3D图形在网页上的呈现。不过,从个人角度来看,虽然我非常看好...
视觉传达设计就业前景怎么样?薪资待遇高吗?申请方
[回答]数据与趋势告诉你答案1.核心就业领域及头部企业需求:视觉传达设计渗透率超73%的新经济领域,奥美、腾讯、WPP等企业年均招聘量增长28%。广告营销领域...
3DGS技术未来能否真正影响业界?-ZOL问答
甚至在WebGL等轻量级平台上也能实现较好的性能表现。然而,本质上3DGS仍属于隐...目前了解的一些国内团队在尝试3DGS应用时,也有先有技术,再找需求的趋势,缺乏明...
3D可交互网页展示产品效果-ZOL问答
5条回答:这个挺酷的,现在很多电商和设计公司都在用,用户体验确实好,特别是展示复杂产品的时候,比图片视频直观多了
前端技术为何总难火起来?-ZOL问答
今年这些技术是不是更冷清了?像是PWA、Wasm、WebGL,还有GraphQL,这些话题好像一直出现在每年的预测里,但什么时候真正热起来过?它们年年都被列入未来前端可能...
高德地图为何不如百度地图流畅?-ZOL问答
由于采用的技术不同,高德地图主要通过二维Canvas进行图形渲染,而百度地图则使用WebGL技术,相比之下,WebGL在性能表现上更为出色。逸美利晓可能是数据更新频繁...
学完JavaScript基础后如何进阶Node.js?-ZOL问答
4条回答:学习Node.js并不强制要求必须具备JavaScript基础,虽然掌握JS确实有助于理解许多相同的语法结构,因为它们共享同一套引擎。但真正关键的是对计算机基础知...
美工设计必备技能盘点-ZOL问答
4条回答:设计师的收入差异极大,有人月薪仅三千,也有人轻松过万。平面设计这一职业的特点是门槛低、上限高,对许多小型企业而言,只要掌握Photoshop的基础操作,便足...