Three.js 法线贴图 normalMap - 文章教程

Three.js 法线贴图 normalMap

发布于 2021-10-10 字数 3262 浏览 748 评论 0

如果第一次接触 Three.js 法线贴图的概念,可能不太理解法线贴图是什么?有什么用?从哪里来?

相关案例代码可以参考本站的 Three.js 视频教程8.6节。阅读本篇文章之前建议先测试法线贴图的案例代码。

模型的几何体本质上都是由顶点构成,一个模型越复杂,顶点数量越多,也就意味着模型文件的体积越大,模型文件夹过大浏览器端的加载速度自然越慢,用户体验自然越差。这时候可以对模型进行减面,也就是减少模型顶点的数量,一般减面之后的模型称为简模,未减面之前的模型称为精模。

以一个球体几何体为例思考,顶点的数量越少,球体模型的模型曲面的光滑效果越差。只有点数足够多,显示效果才会更好,如果点数过少,视觉上就像一个正多面体。如果想减少模型顶点数量,同时又不影响模型曲面的显示效果,这时候就需要通过3dmax、substance painter等3D美术软件烘培导出法线贴图,烘培导出法线贴图都是3D美术的工作,对于程序员而言不需要深究法线贴图具体怎么得到的,只需要通过Three.js加载减过面的简模,然后配合法线贴图可以获得和精模一样的视觉效果。

关键词

美术相关关键词:简模、精模、法线贴图、3D 美术、次时代,如果你想深入了解法线贴图知识,可以百度相关的美术关键词。

图片 RGB 记录法线 xyz 分量

法线贴图normalMap和普通颜色贴图map一样是公用一套UV坐标,法线贴图通过UV坐标和三维模型几何体外表面建立一一对应的映射关系。

法线贴图通过RGB颜色值表征精模表面的法线信息,RGB分别表示法线的xyz分量。一般美术会对一个精模进行减面,得到一个简模,然后进行UV拆分,通过三维软件进行烘培得到一个法线贴图,法线贴图一般整体呈现为蓝紫色的效果。

大家应该都知道几何体表面的法线可以和光源进行光照计算,简模加上法线贴图在Three.js中就可以渲染出来精模的效果。

通过法线贴图记录几何体表面的几何细节,自然降低了模型文件的大小,提高了加载速度

材质对象 normalMap 属性和 normalScale 属性

法线贴图通过材质对象的 normalMap 属性设置,属性值是Texture对象,通过 normalScale 属性可以调节深浅程度,属性值是二维向量对象Vector2。

var geometry = new THREE.BoxGeometry(100, 100, 100); //立方体
var textureLoader = new THREE.TextureLoader();
// 加载法线贴图
var textureNormal = textureLoader.load('./法线贴图/3_256.jpg');
var material = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  normalMap: textureNormal, //法线贴图
  //设置深浅程度,默认值(1,1)。
  normalScale: new THREE.Vector2(3, 3),
});
var mesh = new THREE.Mesh(geometry, material);

材质支持情况

基础网格材质 MeshBasicMaterial 和 Lambert 网格材质 MeshLambertMaterial 不支持法线贴图normalMap功能,高光网格材质 MeshPhongMaterial、标准网格材质 MeshStandardMaterial 和物理网格材质 MeshPhysicalMaterial 支持法线贴图normalMap功能

协作

至于UV如何拆分,如何绘制简模,如何烘培出法线贴图都需要3D美术通过相应的三维软件烘培导出,一般程序员能够理解法线贴图,会使用即可,不需要去掌握美术的这些技能,虽然不用,为了更好地理解法线贴图,更好的理解美术与程序的协作,如果学习时间充足,去学习下这些美术技能也是有好处的。

学习建议

如果你只是为了应用Three.js加载一个有法线贴图的三维模型,只需要有一个简单的印象即可,如果你想深入法线贴图,可以学习下相关三维软件如何烘培出法线贴图,可以阅读下 three.js-master\src\renderers\shaders\ShaderChunk\normalmap_pars_fragment.glsl 有关法线贴图RGB信息提取转化为法线向量的着色器源码。

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

晚风撩人

这个人比较懒,什么都没有填写!

17 文章
1 评论
21105 人气
更多

推荐作者

坏尐絯

文章 0 评论 1003

qq_q3iGo

文章 0 评论 0

佚名

文章 0 评论 0

ternence_li

文章 0 评论 0

离去的眼神

文章 0 评论 979