WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js法线贴图.normalMap

如果第一次接触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信息提取转化为法线向量的着色器源码。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com