Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >OpenGL 实现视差贴图与 UE 中的凹凸贴图偏移(Bump Offset)

OpenGL 实现视差贴图与 UE 中的凹凸贴图偏移(Bump Offset)

作者头像
音视频开发进阶
发布于 2022-10-31 03:15:26
发布于 2022-10-31 03:15:26
1.5K0
举报

UE 中提供了 凹凸贴图偏移 的贴图来实现修改 UV 坐标达到提升表面细节,使材质产生深度错觉。凹凸贴图偏移是 UE4 中的术语,其实就对应于 LearnOpenGL 网站上的 视差贴图

视差贴图原理

理解了视差贴图的含义就很容易明白凹凸贴图偏移的作用了,它的原理如下图所示:

首先需要提供一张代表高度图的纹理,这样每个像素点都对应一个高度值,上图中的红线可以理解成高度值分布,点 A 对应的高度值就是 H(A)。

以视线方向看向点 A 时,由于高度的遮挡实际看见的是点 B,所以在纹理采样时只要在点 A 的坐标基础上加上点 B 的坐标偏移就行了,但是实际上很难准确预测点 B 的存在,它只是粗略估算得到的。

所以在实际操作时,一般采样点 A 对应的高度值,然后在视线方向以高度值大小进行缩放,向量 P 就是缩放后的结果,这个时候再用点 A 的坐标加上向量 P 在坐标轴上的偏移就行了。

视差贴图存在一定的局限性,主要在于点 B 和向量 P 之间有时候变化很块导致预测误差较大,所以才有了后面的陡峭视差映射和视差遮蔽映射,在 UE 中也提供了视差遮蔽映射的计算,不过本篇先使用简单的视差映射。

理解了视差映射的基础概念后,就很容易明白 UE 中凹凸贴图偏移的对外参数含义了。

BumpOffset 使用

首先针对每个像素都要有个高度值,这一般用个高度图来表示就行了,对应 BumpOffset 中的 Height 节点,其实也可以用一个常量来表示高度值。

一般都是用一张高度度来表示每个像素的高度信息,不过 BumpOffset 并不接受 RGB 通道作为连接节点,因为高度信息使用 R、G、B 单个通道来表示就行了。

同时由于高度图要进行纹理采样,那么务必涉及到对纹理坐标 UV 的操作了,BumpOffset 中的 Coordinate 节点就是对应 UV 的调整。

最后的输入节点 HeightRationInput 就是对采样的高度值进行比例系数的缩放,可让外部调整放大的倍数。不光是 BumpOffset 有这系数操作,在涉及到纹理采样的操作中都会有对采样后的 RGB 数据进行相应的调节操作,比如对采样后的 RGB 数据乘以 1 保持原始状态,也可以把要乘的数作为参数暴露给外界进行调整。

根据视差贴图的原理可知,BumpOffset 的输出结果就是对纹理采样坐标的偏移,通过这个偏移实现深度错觉,所以要把输出节点连接到 Diffuse、Roughness、Normal 节点的 UV 上。

视差遮蔽映射

UE 还提供了视差遮蔽映射的方法,如下图所示:

它同样也是用来实现高度效果的,原理就是 LearnOpenGL 网站上的 视差遮蔽映射

其中输入参数 Heightmap Texture 对应高度图纹理对象,不再是纹理采样,而 Heightmap Channel 表示选择纹理对象的哪个通道作为高度值,UVs 表示对高度图纹理坐标进行相关操作

输入参数 Min Steps 和 Max Steps 表示分层最小和最大数目,输出参数 Parallax UVs 和 BumpOffset 的输出参数一致,表示对纹理采样的偏移值。

视差遮蔽映射会比简单的视差贴图实现更好的效果,但是性能上也会损耗多一些,不过它在移动端上是没有效果的。

最后欢迎大家加入 音视频开发进阶 知识星球 ,这里有知识干货、编程答疑、开发教程,还有很多精彩分享。

更多内容可以在星球菜单中找到,随着时间推移,干货也会越来越多!!!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-09-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 音视频开发进阶 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
基础渲染系列(六)——凹凸
(温馨提示:本系列知识是循序渐进的,推荐第一次阅读的同学从第一章看起,链接在文章底部)
放牛的星星
2020/07/10
4.2K0
基础渲染系列(六)——凹凸
基础渲染系列(二十)——视差(基础篇完结)
这是有关渲染的系列教程的第20部分。上一部分介绍了GPU实例化。在这一部分中,我们将添加到目前为止尚不支持的标准着色器的最后一部分,即视差贴图。
放牛的星星
2020/07/10
3.6K0
基础渲染系列(二十)——视差(基础篇完结)
灰度图,法线贴图,置换贴图和位移贴图
先自我介绍……你要是说这是自我炒作我也认了。首先说明,FXCarl是一个对3D美术一窍不同的家伙。虽然很想往技术美工方向发展了。因为是学程序出身,眼下能做的也就是写写Shaders。等到手上的项目做完,会公开始用的实时光照模型……不过那是后话了。现在只是想配合一下这两天大家讨论的热火朝天的Normal Map,在这里和占大多数的美术人员从另外一个角度来谈谈“凹凸贴图技术”
全栈程序员站长
2022/06/24
2K0
29.opengl高级光照-视差贴图
上一篇法线贴图使用了法线纹理,通过法线的变化来控制漫反射和镜面反射的强度,加强了纹理渲染的层次感,明暗渐变更符合实际情况。视差贴图在法线贴图之上,增加物体表面的凹凸感。
公号sumsmile
2020/07/28
9620
29.opengl高级光照-视差贴图
《Unity Shader入门精要》笔记:初级篇(3)
本篇博客主要为个人学习所编写读书笔记,不用于任何商业用途,以及不允许任何人以任何形式进行转载。 本篇博客会补充一些扩展内容(例如其他博客链接)。 本篇博客还会提供一些边读边做的效果截图。文章内所有数学公式都由Latex在线编辑器生成。 本篇博客主要提供一个“glance”,知识点的总结。如有需要请到书店购买正版。 博客提及所有官方文档基于2022.2版本,博客会更新一些书中的旧的知识点到2022.2版本。 如有不对之处欢迎指正。 我创建了一个游戏制作交流群:637959304 进群密码:(CSGO的拆包密
[Sugar]
2022/09/21
7240
UnityShader 表面着色器简单例程集合
0.前言 这些简单的shader程序都是写于2015年的暑假。当时实验室空调坏了,30多个人在实验室中挥汗如雨,闷热中学习shader的日子还历历在目。这些文章闲置在我个人博客中,一年将过,师弟也到了学shader的时候,这些例程虽然很简单,刚接触shader时却可以练练手,所以从个人博客中中搬了出来。而对于有一个月以上shaderLab编程经验的同学来说,这篇文章可以不用看了:-) 1.表面着色器概述 表面着色器只存在于Unity中,算是Unity微创新自创的一套着色器标准。它使得shader的书写门槛降
Tencent JCoder
2018/07/02
3.3K1
【笔记】《计算机图形学》(11)——纹理映射
这系列的笔记来自著名的图形学虎书《Fundamentals of Computer Graphics》,这里我为了保证与最新的技术接轨看的是英文第五版,而没有选择第二版的中文翻译版本。不过在记笔记时多少也会参考一下中文版本
ZifengHuang
2020/12/08
4.8K0
进阶渲染系列(七)——三向贴图(任意表面纹理化)【进阶篇完结】
执行纹理映射的通常方法是使用网格中每个顶点存储的UV坐标。但这不是唯一的方法。有时,没有可用的UV坐标。例如,当使用任意形状的过程几何时。在运行时创建地形或洞穴系统时,通常无法为适当的纹理展开生成UV坐标。在这些情况下,我们必须使用另一种方式将纹理映射到我们的表面上。其中一种方法是三向贴图。
放牛的星星
2020/07/13
2.8K0
Unity通用渲染管线(URP)系列(八)——复杂的贴图(Masks, Details, and Normals)
这是有关创建自定义可编程渲染管道的系列教程的第八部分。通过增加对遮罩,细节和法线贴图的支持,可以创建复杂的表面。
放牛的星星
2020/12/24
4.8K0
UE4地编基础-材质蓝图篇[通俗易懂]
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/10
2.7K0
UE4地编基础-材质蓝图篇[通俗易懂]
Three.js贴图技巧:优化性能与效果
在当今数字化的时代,WebGL 技术为开发者们打开了一扇通往交互式 3D 图形世界的大门,而 Three.js 作为JavaScript库中的佼佼者,凭借其简单易用的 API 和丰富的功能,在创建3D场景和交互应用方面得到了广泛应用。在Three.js构建的虚拟世界中,贴图扮演着至关重要的角色。从赋予模型逼真的材质质感,到增强场景的视觉吸引力,贴图的质量直接影响着用户的体验。然而,随着场景复杂度的增加和贴图数量的增长,如何在保证贴图效果的同时优化性能,成为了开发者们必须面对的重要课题。本文将深入探讨Three.js贴图的相关知识,分享一系列优化性能与效果的实用技巧,并通过丰富的代码示例进行详细说明,帮助读者更好地理解和应用这些技巧,从而提升Three.js项目的品质。
Front_Yue
2025/03/11
4910
Three.js贴图技巧:优化性能与效果
unity3d:Shader知识点,矩阵,函数,坐标转换,Tags,半透明,阴影,深度,亮度,优化
这些代码不需要包含在任何Pass语义块中,在使用时,我们只需要在Pass中直接指定需要使用的顶点着色器和片元着色器函数名即可。CGINCLUDE类似于C++中头文件的功能。由于高斯模糊需要定义两个Pass,但它们使用的片元着色器代码是完全相同的,使用CGINCLUDE可以避免我们编写两个完全一样的frag函数。
立羽
2024/07/08
9020
unity3d:Shader知识点,矩阵,函数,坐标转换,Tags,半透明,阴影,深度,亮度,优化
Unity 水、流体、波纹基础系列(一)——纹理变形(Texture Distortion )
如果液体不动时,在视觉上是无法与固体区分开的。你看的到底是水,果冻还是玻璃杯呢?水池是结冰的吗?但可以肯定的是,如果干扰它并观察它是否会变形,以及变形多少就可以区分。仅从创建上看起来像流体的材质是远远不够的,实际上它必须要能动起来。否则,它就是看起来像是水的玻璃雕塑或已经结冰的水。当然,这对于一张照片来说已经足够了,但对于电影或游戏来说远远足够。
放牛的星星
2020/08/28
4.7K0
Unity Shader常用函数,标签,指令,宏总结(持续更新)
UnityObjectToClipPos(v.vertex); 最基本的顶点变换,模型空间 ==》裁剪空间 mul(unity_ObjectToWorld, v.vertex); 顶点:模型空间 ==》世界空间,多用于顶点着色器 UnityObjectToWorldNormal(v.normal); 法线:模型空间 ==》世界空间,多用于顶点着色器,float3(归一化后fixed3) UnityWorldSpaceLightDir(i.worldPos.xyz); 仅前向渲染,世界空间顶点位置 ==》世界空间光源方向,多用于片元着色器,一般会顺带归一化(fixed3) UnityWorldSpaceViewDir(i.worldPos.xyz); 世界空间顶点位置 ==》世界空间视线方向,多用于片元着色器,一般会顺带归一化(fixed3) P.S.一般[0,1]范围内的尽量用低精度fixed类型,如单位矢量,颜色等 Tags{"lightmode"="forwardbase"}(字符串不区分大小写,编译时会自动转为所有字母大写) 指示光照模型为前向渲染的基本模式 #include "UnityCG.cginc"(字符串不区分大小写,编译时会自动转为所有字母大写) 包含大量基本内置函数,宏等,一般自带 #include "lighting.cginc"(字符串不区分大小写,编译时会自动转为所有字母大写) 包含基本光照属性,如 _LightColor0 UNITY_LIGHTMODEL_AMBIENT(使用大写) 环境光,一般取前三个分量rgb(xyz);基本光照模型需要有环境光,漫反射,高光等 基本纹理&法线贴图: TRANSFORM_TEX(v.uv, _MainTex); 基本纹理变换,用于顶点着色器,相当于v.uv*_MainTex_ST.xy + _MainTex_ST.zw;(其中xy存缩放,zw存偏移,对应面板参数);_MainTex_ST需额外定义 tex2D(_MainTex, i.uv); 基本纹理采样,用于片元着色器;一般会定义染色属性并与之相乘得到反射率(albedo),反射率作为环境光和漫反射计算的因子 UnpackNormalWithScale(packedNormal, _BumpScale); 反映射法线贴图采样结果得到顶点空间中的法线方向,同时计算凹凸映射的缩放;packedNormal为法线贴图直接采样结果,_BumpScale为凹凸缩放值;法线贴图必须进行导入设置为Normal Map UnityObjectToWorldDir(v.tangent.xyz); 方向(切线):模型空间 ==》世界空间,多用于顶点着色器 cross(worldNormal, worldTangent)*v.tangent.w 计算副法线,cross(,)两个向量叉积,用于得知两个坐标轴求第三个坐标轴朝向,w控制朝向的正负;知道三个朝向就可以构造变换矩阵了 TANGENT_SPACE_ROTATION 得到从模型空间到顶点空间的变换矩阵rotation,随后可直接进行如下计算,例如: mul(rotation, ObjSpaceLightDir(v.vertex)); 模型空间顶点位置 ==》模型空间光源方向==》顶点空间光源方向 mul(rotation, ObjSpaceViewDir(v.vertex)); 模型空间顶点位置 ==》模型空间视线方向==》顶点空间视线方向 多光源&前向渲染&光照衰减: Tags{"lightmode"="forwardbase"}(第一个Pass,全局性通用计算,只计算一次,不用开启混合) Tags{"lightmode"="forwardadd"}(第二个Pass,根据光源数目不同可能多次计算,需开启混合) 前向渲染的两种标签,分别位于不同的两个Pass,指示每个Pass的光照模式 #pragma multi_compile_fwdbase #pragma multi_compile_fwdadd 前向渲染的两种指令,只有每个Pass配置正确指令才可能得到正确的光照变量,如光照衰减值 UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos.xyz); 用于第二个Pass分别计算每个光源的衰减,atten为输出的衰减值,i为片元着色器的输入结构体,其内部数学运算根据各个光照的类型不同复杂度不一,具体可参考:https://github.com/candycat1992/Unity_Shaders_Book/issues/47 接收投影: SHADOW_COORDS(idx) 声明阴影纹理采样的坐标,用于顶点着色器输出结构体,idx为下一个可用插值寄存器(TEXCOORD)的索引值 TRANSFER_SHADOW(o); 用于在顶点着色器
汐夜koshio
2020/03/19
2.1K0
Shader经验分享
流水线 1.应用阶段:(CPU)输出渲染图元,粗粒度剔除等 比如完全不在相机范围内的需要剔除,文件系统的粒子系统实现就用到粗粒度剔除。 2.几何阶段:(GPU)把顶点坐标转换到屏幕空间,包含了模型空间 到世界空间 到观察空间(相机视角view) 到齐次裁剪空间(投影project2维空间,四维矩阵,通过-w<x<w判断是否在裁剪空间) 到归一化设备坐标NDC(四维矩阵通过齐次除法,齐次坐标的w除以xyz实现归一化) 到屏幕空间(通过屏幕宽高和归一化坐标计算)。 a.顶点着色器:坐标变换和逐顶点光照,将顶点空间转换到齐次裁剪空间。 b.曲面细分着色器:可选 c.几何着色器:可选 d.裁剪:通过齐次裁剪坐标的-w<x<w判断不在视野范围内的部分或者全部裁剪,归一化。 e.屏幕映射:把NDC坐标转换为屏幕坐标 3.光栅化阶段:(GPU)把几何阶段传来的数据来产生屏幕上的像素,计算每个图元覆盖了哪些像素,计算他们的颜色、 a.三角形设置:计算网格的三角形表达式 b.三角形遍历:检查每个像素是否被网格覆盖,被覆盖就生成一个片元。 c.片元着色器:对片元进行渲染操作 d.逐片元操作:模板测试,深度测试 混合等 e.屏幕图像 ------------------------------------------------------- 矩阵: M*A=A*M的转置(M是矩阵,A是向量,该公式不适合矩阵与矩阵) 坐标转换: o.pos = mul(UNITY_MATRIX_MVP, v.vertex);顶点位置模型空间到齐次空间 o.worldNormal = mul((float3x3)_Object2World,v.normal);//游戏中正常的法向量转换,转换后法向量可能不与原切线垂直,但是不影响游戏显示,而且大部分显示也是差不多的。一般用这个就行了。 o.worldNormal = mul(v.normal, (float3x3)_World2Object);顶点法向量从模型空间转换到世界空间的精确算法,公式是用_Object2World该矩阵的逆转置矩阵去转换法线。然后通过换算得到该行。 ------------------------------------------------------- API: UNITY_MATRIX_MVP 将顶点方向矢量从模型空间变换到裁剪空间 UNITY_MATRIX_MV 将顶点方向矢量从模型空间变换到观察空间 UNITY_MATRIX_V 将顶点方向矢量从世界空间变换到观察空间 UNITY_MATRIX_P 将顶点方向矢量从观察空间变换到裁剪空间 UNITY_MATRIX_VP 将顶点方向矢量从世界空间变换到裁剪空间 UNITY_MATRIX_T_MV UNITY_MATRIX_MV的转置矩阵 UNITY_MATRIX_IT_MV UNITY_MATRIX_MV的逆转置矩阵,用于将法线从模型空间转换到观察空间 _Object2World将顶点方向矢量从模型空间变换到世界空间,矩阵。 _World2Object将顶点方向矢量从世界空间变换到模型空间,矩阵。 模型空间到世界空间的矩阵简称M矩阵,世界空间到View空间的矩阵简称V矩阵,View到Project空间的矩阵简称P矩阵。 --------------------------------------------- _WorldSpaceCameraPos该摄像机在世界空间中的坐标 _ProjectionParams _ScreenParams _ZBufferParams unity_OrthoParams unity_Cameraprojection unity_CameraInvProjection unity_CameraWorldClipPlanes[6]摄像机在世界坐标下的6个裁剪面,分别是左右上下近远、 ---------------------------- 1.表面着色器 void surf (Input IN, inout SurfaceOutput o) {}表面着色器,unity特殊封装的着色器 Input IN:可以引用外部定义输入参数 inout SurfaceOutput o:输出参数 struct SurfaceOutput//普通光照 { half3 Albedo;//纹理,反射率,是漫反射的颜色值 half3 Normal;//法线坐标 half3 Emission;//自发光颜色 half Specular;//高光,镜面反射系数 half Gloss;//光泽度 half Alpha;//alpha通道 } 基于物理的光照模型:金属工作流Surfa
bering
2019/12/03
2.3K0
Shader-基础纹理-凹凸映射
基础纹理: 美术人员通常在建模软件中利用纹理展开技术,将纹理映射坐标存储在每个顶点上。纹理映射坐标定义了该点在纹理中对应的2D坐标。这个坐标通常被称为UV坐标用uv表示。
祝你万事顺利
2019/05/28
9190
表面着色器(Surface Shader)的写法(一)
而这个结构体的用法,其实就是对这些需要用到的成员变量在surf函数中赋一下值,比如说这样: [cpp] view plain copy
bering
2019/12/03
2.4K0
ISUX译文 | The PBR Guide基于物理的渲染指引(下)
腾讯ISUX isux.tencent.com 社交用户体验设计 近日在研究3D-TO-H5工作流及学习PBR的过程中,发现Substance官方新版的《The PBR Guide》尚未有完整的中文翻译,所以把心一横,斗胆翻译了一波,希望能抛砖引玉,让大家更深入浅出地了解3D材质贴图及PBR技术。 PBR,Physically-Based Rendering,意为基于物理的渲染,是一种能对光在物体表面的真实物理反应提供精确渲染的方法,也是近年来极其生猛的3D工业趋势。 《The PBR Gu
腾讯ISUX
2020/03/23
1.6K0
WebGL进阶——走进图形噪声
导语:大自然蕴含着各式各样的纹理,小到细胞菌落分布,大到宇宙星球表面。运用图形噪声,我们可以在3d场景中模拟它们,本文就带大家一起走进万能的图形噪声。
Y.one
2020/03/18
2.8K3
WebGL进阶——走进图形噪声
Threejs入门之十六:纹理贴图和纹理材质
Texture 用于创建一个纹理贴图,将其应用到一个物体的表面,纹理对象可以通过TextureLoader(纹理加载器)的load()方法来加载一个图片。要使用纹理贴图,首先要创建一个纹理加载器,纹理加载器返回一个Texture 纹理对象,通过纹理加载器加载贴图材质 然后通过设置材质的颜色贴图map属性的值为上面的Texture来调用,下面我们创建一个立方体,并给这个立方体贴上木头材质的贴图,使其变为一个木箱
九仞山
2023/04/30
2.9K0
Threejs入门之十六:纹理贴图和纹理材质
推荐阅读
相关推荐
基础渲染系列(六)——凹凸
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档