7.PBR材质与纹理贴图

这篇具有很好参考价值的文章主要介绍了7.PBR材质与纹理贴图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

友情链接:threejs 中文文档

目录

1. PBR材质简介

光照模型

网格模型材质整体回顾

2. PBR材质金属度和粗糙度

金属度metalness

粗糙度roughness 

3. 环境贴图.enMap

环境贴图反射率.envMapIntensity

场景环境属性.environment

4. MeshPhysicalMaterial清漆层

清漆层属性.clearcoat

清漆层粗糙度.clearcoatRoughness

5. 物理材质透光率transmission

透光率(透射度).transmission

折射率.ior

1. PBR材质简介

所谓PBR就是,基于物理的渲染。Three.js提供了两个PBR材质相关的APIMeshStandardMaterialMeshPhysicalMaterial,其中MeshPhysicalMaterial是MeshStandardMaterial扩展的子类,提供了更多的功能属性。

光照模型

如果你有初高中最基本的物理光学知识,应该有折射镜面反射漫反射等基本光学概念,对于实际生活中的光学问题,Three.js会提供一些的光照模型来模拟物体表面的光照,光照模型就一种模拟光照的计算方法。MeshPhysicalMaterialMeshLambertMaterial一样都是渲染网格模型的材质,但是他们用的光照模型不同,具体点说就是材质模拟Mesh反射光照的代码算法不同,算法不同,自然模拟光照的真实程度也不同。

网格模型材质整体回顾

7.PBR材质与纹理贴图,threejs,前端

  • MeshLambertMaterial: Lambert光照模型(漫反射)
  • MeshPhongMaterial:Phong光照模型(漫反射、高光反射)
  • MeshStandardMaterial和MeshPhysicalMaterial:基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射...) 

PBR材质相比MeshLambertMaterial和MeshPhongMaterial可以提供更逼真的、更接近生活中的材质效果,当然也会占用更多的电脑硬件资源。

2. PBR材质金属度和粗糙度

金属度metalness

金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。 threejs的PBR材质,.metalness默认是0.5,0.0到1.0之间的值可用于生锈的金属外观

new THREE.MeshStandardMaterial({
    metalness: 1.0,//金属度属性
})

粗糙度roughness 

粗糙度roughness表示模型表面的光滑或者说粗糙程度,越光滑镜面反射能力越强,越粗糙,表面镜面反射能力越弱,更多地表现为漫反射。

粗糙度roughness,0.0表示平滑的镜面反射,1.0表示完全漫反射,默认0.5。

new THREE.MeshStandardMaterial({
    roughness: 0.5,//表面粗糙度
})

3. 环境贴图.enMap

通过前面学习大家知道,通过纹理贴图加载器TextureLoader的.load()方法加载一张图片可以返回一个纹理对象Texture。

立方体纹理加载器CubeTextureLoader的.load()方法是加载6张图片,返回一个立方体纹理对象TextureLoader。立方体纹理对象CubeTextureLoader的父类是纹理对象Texture。

// 加载环境贴图
const textureCube = new THREE.CubeTextureLoader()
    .setPath('./环境贴图/环境贴图0/')
    .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
new THREE.MeshStandardMaterial({
    metalness: 1.0,
    roughness: 0.5,
    envMap: textureCube, //设置pbr材质环境贴图
})    

环境贴图反射率.envMapIntensity

MeshStandardMaterial的.envMapIntensity属性主要用来设置模型表面反射周围环境贴图的能力,或者说环境贴图对模型表面的影响能力。

obj.material.envMapIntensity = 1.0;

场景环境属性.environment

网格模型可以通过材质的.envMap属性设置环境贴图,如果一个gltf模型中所有的Mesh都要设置环境贴图就需要递归遍历gltf模型,给里面每个Mesh的材质设置.envMap。

// 环境贴图纹理对象textureCube作为.environment属性值,影响所有模型
scene.environment = textureCube;

4. MeshPhysicalMaterial清漆层

MeshPhysicalMaterial和MeshStandardMaterial都是拥有金属度metalness、粗糙度roughness属性的PBR材质,MeshPhysicalMaterial是在MeshStandardMaterial基础上扩展出来的子类,除了继承了MeshStandardMaterial的金属度、粗糙度等属性,还新增了清漆.clearcoat、透光率.transmission、反射率.reflectivity、光泽.sheen、折射率.ior等等各种用于模拟生活中不同材质的属性。

清漆层属性.clearcoat

清漆层属性.clearcoat可以用来模拟物体表面一层透明图层,就好比你在物体表面刷了一层透明清漆,喷了点水。.clearcoat的范围0到1,默认0。

const material = new THREE.MeshPhysicalMaterial( {
	clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
} );

清漆层粗糙度.clearcoatRoughness

清漆层粗糙度.clearcoatRoughness属性表示物体表面透明涂层.clearcoat对应的的粗糙度,.clearcoatRoughness的范围是为0.0至1.0。默认值为0.0。

const material = new THREE.MeshPhysicalMaterial( {
	clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
	clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );

5. 物理材质透光率transmission

透光率(透射度).transmission

为了更好的模拟玻璃、半透明塑料一类的视觉效果,可以使用物理透明度.transmission属性代替Mesh普通透明度属性.opacity。

使用.transmission属性设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。

物理光学透明度.transmission的值范围是从0.0到1.0。默认值为0.0。

const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
    transmission: 1.0, //玻璃材质透光率,transmission替代opacity 
})

折射率.ior

非金属材料的折射率从1.0到2.333。默认值为1.5。

new THREE.MeshPhysicalMaterial({
    ior:1.5,//折射率
})

7.PBR材质与纹理贴图,threejs,前端

 文章中部分素材选取自Threejs中文网:Three.js中文网文章来源地址https://www.toymoban.com/news/detail-524979.html

到了这里,关于7.PBR材质与纹理贴图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • PBR贴图基础知识

    基于物理的渲染(Physically Based Rendering , PBR)在高质量实时渲染中应用广泛,其主要知识体系在闫老师的games101中已经铺垫学习过了。 Blinn-Phong 反射模型 BRDF和渲染方程 微平面理论–Cook-Torrance模型计算BRDF IBL(Image-Based Lighting 基于纹理的光照) 主要以颜色贴图(diffuse map),反射

    2024年02月05日
    浏览(53)
  • PBR材质理解整理

    草履虫都能看懂的PBR讲解(迫真) 先前看了很多遍类似的了,结合《Unity Shader 入门精要》中的内容整理了下便于以后理解,以后有补充再添加。 光与材质相交会发生 散射和吸收 ,散射改变光的方向,吸收改变光的能量。 在均匀介质中,光沿直线传播。传播过程中材质的折

    2024年02月13日
    浏览(43)
  • PBR材质背光面太暗优化

    图形学中漫反射光照遵循 兰伯特光照模型 ,它的公式如下 其中:          :漫反射光颜色          :入射光颜色          :材质的漫反射系数          :法线方向          :光源方向 由于背光面的法线方向和光源方向的点积为负数,因此光线无法

    2024年01月18日
    浏览(36)
  • threejs贴图系列(一)canvas贴图

    threejs不仅支持各种texture的导入生成贴图,还可以利用canvas绘制图片作为贴图。这就用到了CanvasTexture,它接受一个canas对象。只要我们绘制好canvas,就可以作为贴图了。这里我们利用一张图片来实现这个效果。 基础代码: 最后的展示效果如下:  这里特别要注意贴图异步问题

    2024年02月11日
    浏览(30)
  • 【Filament】纹理贴图

    ​ 本文主要介绍使用 Filament 实现纹理贴图,读者如果对 Filament 不太熟悉,请回顾以下内容。 Filament环境搭建 绘制三角形 绘制矩形 绘制圆形 绘制立方体 ​ Filament 纹理坐标的 x、y 轴正方向分别朝右和朝上,其 y 轴正方向朝向与 OpenGL ES 和 libGDX 相反(详见【OpenGL ES】纹理贴

    2024年03月09日
    浏览(52)
  • 图片纹理贴图

    2024年01月19日
    浏览(40)
  • Three.js纹理贴图

    目录 Three.js入门 Three.js光源 Three.js阴影 Three.js纹理贴图 纹理是一种图像或图像数据,用于为物体的材质提供颜色、纹理、法线、位移等信息,从而实现更加逼真的渲染结果。 纹理可以应用于 Three.js 中的材质类型,如 MeshBasicMaterial 、 MeshLambertMaterial 、 MeshPhongMaterial 、 MeshSt

    2024年02月13日
    浏览(47)
  • 纹理贴图和渲染

    纹理映射(也就是纹理图或者叫做纹理贴图)是一种在计算机图形学中常用的技术,它可以将二维的图像(纹理)映射到三维物体的表面上,以增强视觉效果。“atlas”通常是指纹理图集,也就是将多个纹理图放在一张大图上,以便更高效地使用图形硬件。 而“rendering resol

    2024年02月14日
    浏览(45)
  • 3D 纹理贴图基础知识

    在线工具推荐: 3D数字孪生场景编辑器  -  GLTF/GLB材质纹理编辑器  -  3D模型在线转换  -  Three.js AI自动纹理开发包  -  YOLO 虚幻合成数据生成器  -  三维模型预览图生成器  -  3D模型语义搜索引擎 纹理贴图是创建模型时离不开的最后一块拼图。同样,如果没有纹理贴图的

    2024年02月03日
    浏览(41)
  • Three.js加载简单纹理贴图并应用到网格(凹凸贴图、法向贴图、移位贴图)

    纹理最基础的用法就是作为贴图被添加到材质上,当用这种方法创建网格时,网格的颜色就来源于纹理 UV贴图实质上就是指定模型上的哪一部分需要被映射到纹理的相应位置 可以用如下方法加载纹理 使用THREE.TextureLoader()从指定位置加载图片,图片格式可以是png,jpg或jpeg 纹理

    2024年02月05日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包