凹凸贴图`bumpMap`和法线贴图`.normalMap`

本文是Three.js电子书的8.6节

一个复杂的曲面模型，往往模型顶点数量比较多，模型文件比较大，为了降低模型文件大小，法线贴图.normalMap算法自然就产生了，复杂的三维模型3D美术可以通过减面操作把精模简化为简模，然后把精模表面的复杂几何信息映射到法线贴图.normalMap上。

凹凸贴图、法线贴图法线贴图凹凸贴图材质对象法线贴图通过RGB三个分量分别表示法向量的xyz三个方向通过图片保留几何体表面的几何细节绘制精模、简模通过精模烘培出法线贴图导出简模和法线贴图3D美术解析导出的模型和法线贴图程序员协作低模+法线贴图=高模降低模型大小，减少顶点的计算3D美术烘培使用精模导出给程序员使用简模节约顶点数量好处图片像素的灰度值表示几何表面的高低深度如果定义了法线贴图，则将忽略该贴图没有凹凸、法线贴图属性MeshLambertMaterial、MeshBasicMaterialmap属性颜色纹理贴图.bumpMap : Texture表示深浅程度，默认值1.bumpScale : Float凹凸贴图.normalMap : Texture表示深浅程度默认值是Vector2设置为（1,1）.normalScale : Vector2法线贴图属性MeshPhongMaterial

法线贴图

下面代码在没有设置法线贴图之前就是一个立方体网格模型Mesh,然后把一个携带圆形凹坑信息的法线贴图3_256.jpg设置到立方体网格模型的面上，你可以看到面上多个凹陷效果。你可以测试源码案例中法线贴图目录下的其它法线贴图文件，查看渲染效果。

法线贴图3_256.jpg

立方体设置法线贴图后的效果

// TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
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),
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

法线贴图:地球案例

地球表面法线贴图记录了地面表面的几何信息。

你可以对比两个地球的渲染效果，一个设置法线贴图，一个不设置法线贴图。

var geometry = new THREE.SphereGeometry(100, 25, 25); //球体
// TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
var textureLoader = new THREE.TextureLoader();
// 加载纹理贴图
var texture = textureLoader.load('./Earth.png');
// 加载法线贴图
var textureNormal = textureLoader.load('./EarthNormal.png');
var material = new THREE.MeshPhongMaterial({map: texture, // 普通颜色纹理贴图normalMap: textureNormal, //法线贴图//设置深浅程度，默认值(1,1)。normalScale: new THREE.Vector2(1.2, 1.2),
}); //材质对象Material

凹凸贴图

凹凸贴图和法线贴图功能相似，知识没有发现贴图表达的几何体表面信息更丰富。凹凸贴图是用图片像素的灰度值表示几何表面的高低深度，如果模型定义了法线贴图，就没有必要在使用凹凸贴图。

你可以对比两面墙一个使用凹凸贴图一个不使用凹凸贴图的视觉效果。

var textureLoader = new THREE.TextureLoader();
// 加载颜色纹理贴图
var texture = textureLoader.load('./凹凸贴图/diffuse.jpg');
// 加载凹凸贴图
var textureBump = textureLoader.load('./凹凸贴图/bump.jpg');
var material = new THREE.MeshPhongMaterial({map: texture,// 普通纹理贴图bumpMap:textureBump,//凹凸贴图bumpScale:3,//设置凹凸高度，默认值1。
}); //材质对象Material

Three.js凹凸贴图bumpMap和法线贴图.normalMap相关推荐

如何通过Photoshop根据纹理贴图轻松获得法线贴图
如果你有纹理贴图却没有对应的法线贴图,通过Photoshop可以轻松获取法线贴图. 1.首先使用Photoshop打开纹理贴图: 滤镜-3D-生成法线贴图: 直接点确定,也可以根据需要设置: 之后存储 ...
unity 材质球无法编辑_【每天一个Unity技巧】批量修改材质球的主贴图和添加法线贴图...
注释以后有空再写吧,加班到现在还没吃饭呢 using System.Collections; using System.Collections.Generic; using UnityEngine; ...
Unity Shader - 切线空间的法线贴图应用（T2W W2T）
法线贴图法线贴图(或是法线纹理)其实就是一张图片中的RGB通道分别存储着法线方向的纹理(有些为了数据压缩将X,Y存储在RG通道,Z是通过1-dot(xy,xy)来近似计算). 它的由来是因为高模运行 ...
Normal map (Bump mapping) 法线贴图(凹凸映射) Standard Shader系列10
Normal map (Bump mapping) 法线贴图(凹凸映射) 本文档主要是对Unity官方手册的个人理解与总结(其实以翻译记录为主:>) 仅作为个人学习使用,不得作为商业用途,欢迎转 ...
图形学基础真假位移（法线贴图、凹凸贴图和位移贴图、向量位移贴图的对比与区别）
写在前面: 本文是在阅读了知乎题目为<高度图,视差贴图(Bump-maps),置换贴图(displacement),法线贴图的本质>一文后,对翻译内容有些疑问,故而去查阅原文,做出的翻译. ...
Arnold材质节点篇-凹凸法线贴图圆角/置换曲面细分
[凹凸 & 法线贴图 & 圆角] 凹凸可以模拟表面的磨损,如纹理添加节点:bump 节点,输出到几何体法线:noise 增加嗓波节点,绽放20,20,20,可以看到物体光滑表面有了效 ...
unity shader法线贴图实现凹凸映射效果
法线贴图法线贴图是一张保存了物体法线信息的纹理,可以用来细化模型的光照效果. 例如一块石头表面坑坑洼洼的,如果全部用建模实现,需要非常多的顶点数和面数才能完成.但是做一个简单的模型,比如表面平整的一 ...
置换贴图(Displacement map)，凹凸贴图(Bump map)与法线贴图(Normal map)的区别
英文原文地址<Difference between Displacement , Bump and Normap Maps> By Pluralsight on August 14, 20 ...
深入了解3D模型相关知识（建模、材质贴图、UV、法线），置换贴图、凹凸贴图与法线贴图的区别
推荐几篇好文: 什么是3D建模?高低中模.法线贴图.低模拓扑都是啥? - 哔哩哔哩 [译文]置换贴图.凹凸贴图与法线贴图的区别 - 知乎 Difference between Displacement ...

Three.js凹凸贴图bumpMap和法线贴图.normalMap

凹凸贴图`bumpMap`和法线贴图`.normalMap`

法线贴图

法线贴图:地球案例

凹凸贴图

Three.js凹凸贴图bumpMap和法线贴图.normalMap相关推荐

最新文章

热门文章