首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基础渲染系列(三)多样化的表现——组合纹理

本文重点内容: 采样多纹理 应用细节纹理 处理线性空间中的颜色 使用Splat 贴图 这是渲染系列的第三篇文章,上一节介绍了着色器和纹理。...(近距离没有和有细节纹理的区别) 1.5 线性颜色空间 现在的着色器在gamma颜色空间中渲染场景时,可以正常工作,但是如果切换到线性颜色空间,则着色器会出错。...在伽玛空间中渲染时,着色器直接访问原始颜色和纹理数据。这就是我们到目前为止所假设的。 但在线性空间中渲染时,这不再成立。GPU将纹理样本转换为线性空间。同样,Unity还将材质颜色属性转换为线性空间。...实际上,我们可以使用这些值在两个纹理之间进行线性插值。然后介于0和1之间的值表示两个纹理之间的混合。这使得平滑过渡成为可能。 这样的纹理称为splat贴图。就像你将多个地形要素溅撒到画布上一样。...但是,当在线性空间中进行渲染时,它们首先会转换为线性空间,然后进行混合,然后再转换回伽玛空间。结果略有不同。在线性空间中,混合也是线性的。但是在伽玛空间中,混合会偏向深色。

2.7K10

Unity通用渲染管线(URP)系列(十)——点光和聚光灯阴影(Perspective Shadows)

、使用透视投影渲染和采集阴影 4、使用自定义的立方体贴图 这是有关创建定制脚本渲染管道的系列教程的第十部分。...现在,我们可以在需要时在RenderShadows中同时渲染定向阴影和其他阴影。如果没有其他阴影,则需要为它们提供虚拟纹理,就像定向阴影一样。我们可以简单地使用定向阴影图集作为虚拟对象。 ?...我们稍后需要在每个Tile上发送更多数据,因此让我们添加_OtherShadowTiles向量数组着色器属性。...(前面的阴影渲染,法向偏差为0和1) 比较阴影贴图时,会很明显地发现,这改变了渲染阴影的方式。 ? ?...在渲染阴影时,我们可以通过增加视野(简称FOV)来减少这些伪影,因此我们绝不采样超出Tile边缘。

3.8K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Unity通用渲染管线(URP)系列(四)——方向阴影(Cascaded Shadow Maps)

    (防止光线到达它不应该到达的地方) 1 渲染阴影 当进行物体渲染时,表面和灯光信息足以计算光照。但是在两者之间可能存在某些阻碍光线的东西,导致在我们需要渲染的表面上投射了阴影。...这有很多种方法可以实现, 最常见的方法是生成一个阴影贴图,该贴图存储光在击中表面之前离开其源的距离。任何在同一个方向上更远的距离都不能被同一个光源照亮。Unity的RP使用这种方法,我们也会这样做。...尽管确切的格式取决于目标平台,但这为我们提供了适合渲染阴影贴图的纹理。 ? 当获得临时渲染纹理时,我们还应该在完成处理后释放它。...在某个视觉距离处,阴影贴图纹理像素将映射到单个显示像素,这意味着阴影分辨率在理论上是最佳的。距离相机越近,我们需要的阴影分辨率就越高,而距离更低的分辨率就足够了。...完成此操作后,Unity将抱怨着色器的数组大小已更改,但无法使用新的大小。这是因为一旦着色器声明了固定数组,就无法在同一会话期间在GPU上更改其大小。我们需要重新启动Unity才能对其进行初始化。

    6.8K40

    3D 可视化入门:渲染管线原理与实践

    每点一次鼠标,就在图元数组中添加一个顶点,完成整个渲染的流程后,在画布上绘制出了一个白色的点。 那么怎么画线和三角形呢?...或者拿到一张全景照片,在预览时,需要将其贴在球面内。 这时,我们就需要更复杂的映射关系。找到几何体上的坐标 (x, y, z) 与 2D 贴图坐标 (u, v) 的对应关系,一般称为 uv 映射。...环境贴图与 2D 纹理类似,是在对象外侧围一个 球 或 立方体,并贴入对应纹理。当物体需要绘制反射或折射时,根据反射或折射光路寻找对应在立方体上的材质信息。...因为在局部渲染模型中,实时渲染它们的代价很高,因此,它们通常都是贴图!如果预先渲染的环境贴图或者阴影贴图上没有对应的元素,那自然就不能在反射效果或阴影中看到他们。...7.5 多通道渲染 - Multiple-pass Rendering 有这么多事情要做,一次性做完很难,因此我们可以通过多通道渲染,每次完成不同的工作后,通过某种算法合并起来。

    6.9K21

    【unity shaders】:Unity中的Shader及其基本框架

    shader和Material的基本关系 Shader(着色器)实际上就是一小段程序,它负责将输入的Mesh(网格)以指定的方式和输入的贴图或者颜色等组合作用,然后输出。...所以说Shader并没有什么特别神奇的,它只是一段规定好输入(颜色,贴图等)和输出(渲染器能够读懂的点和颜色的对应关系)的程序。而Shader开发者要做的就是根据输入,进行计算变换,产生输出而已。...#pragma surface surf lsyLightModel vertex:vert ENDCG 在Unity中如何区分以上三种着色器 没有嵌套CG语言,即代码中没有...嵌套CG语言,代码中有surf函数的为表面着色器 嵌套了CG语言,代码中有#pragma vertex name和 #pragma fragment frag声明的,就是顶点着色器&片段着色器。...Specular Color(R,G,B,A);对象反射高光的颜色 Emission Color 对象自发光 Shininess Number 取值在0-1之间表示加亮时的光泽度 对象完整光照的最终颜色是

    1.8K20

    memo、useCallback、useMemo的区别和用法

    react在渲染父子嵌套组件的时候,有时会发生不必要的渲染,根据经验总结出来,大致有四种情况需要处理: 父子组件嵌套,父组件未向子组件传值 父子组件嵌套,父组件向子组件传值,值类型为值类型 父子组件嵌套...const [ name, setName ] = useState('hi~') // 每次父组件渲染,返回的是同一个函数引用 const changeName = useCallback((...究其原因:useCallback() 起到了缓存的作用,即便父组件渲染了,useCallback() 包裹的函数也不会重新生成,会返回上一次的函数引用。...下面例子中,父组件在调用子组件时传递 info 属性,info 的值是个对象字面量,点击父组件按钮时,发现控制台打印出子组件被渲染的信息。...useMemo 有两个参数: 第一个参数是个函数,返回的对象指向同一个引用,不会创建新对象; 第二个参数是个数组,只有数组中的变量改变时,第一个参数的函数才会返回一个新的对象。

    2K30

    Unity通用渲染管线(URP)系列(六)——阴影遮罩(Shadow Masks)

    然后添加一个使用光照贴图UV坐标对贴图进行采样的SampleBakedShadows函数。就像常规的光照贴图一样,这仅对光照贴图的几何有意义,因此需要在启用了LIGHTMAP_ON时才做操作。...在循环灯光之前,Lighting可以在GetLighting中将阴影遮罩数据从GI复制到ShadowData。在这点上,我们还可以通过直接将阴影遮罩数据返回为最终的照明颜色来调试它。 ?...在这种情况下,我们需要将PerObjectData.ShadowMask添加到每个对象的数据中。 ? ? (采样阴影遮罩) 为什么每次更改着色器代码时Unity都会烘焙灯光?...2.3 只有烘焙阴影 当前,我们的方法仅在有实时阴影要渲染时才有效。如果没有,那么阴影遮罩也会消失。可以通过缩小场景视图直到所有内容都超出最大阴影距离来验证这一点。 ?...3.2 选择适当的通道 在着色器大小上,将阴影遮罩通道作为附加整数字段添加到“Shadows”中定义的DirectionalShadowData结构。 ?

    4.9K32

    ThreeJS实现船行效果

    最近确实业务上需要, 简单学习了ThreeJS的API 文章中代码不全, 需要了解的可以访问仓库: https://github.com/klren0312/threejs_ocean_ship..., 没有把自己内部的Mesh暴露出来 所以我们需要在模型导入后, 在onProgress回调中对其进行递归获取子Mesh, 将所有Mesh存在一个全局数组中....在鼠标事件触发时, 将全局数组提供给raycaster.intersectObjects, 即可识别 1....2D平面展示有两种, 一种是这个项目里的鼠标触碰直升机的提示牌, 时刻与摄像头在同一角度的2D平面; 另一种是只在一个方向上可见的2D平面 ? 多角度可见的2D平面 ?...我们需要用到CSS2DRenderer对其进行渲染, 即创建一个DOM, 将其赋给CSS2DRenderer, 下面代码没有设置坐标, 我是放在鼠标移动事件里设置的 var planeInfo =

    4.9K32

    3D 图形学基础 (下)

    当我们将一个纹理应用于一个图元时,它的纹理像素地址必须要映射到对象坐标系中。然后再被平移到屏幕坐标系或像素位置上。 ​ 6.2 纹理过滤 ​ 渲染一个图元时,会将三维图元映射到二维屏幕上。...如果图元有纹理,就必须用纹理来产生图元的二维渲染图象上每个像素的颜色。对于图元在二维屏幕上图象的每个像素来说,都必须从纹理中获得一个颜色值。...纹理的放大会导致许多像素被映射到同一个纹理像素上。那么结果看起来就会使矮矮胖胖的。纹理的缩小会导致一个像素被映射到许多纹理像素上。其结果将会变得模糊或发生变化。...6.3.3 镜像重复 ​ 图象在物体表面上不断重复,但是每次重复的时候对图象进行镜像或者反转。这样在纹理边缘处比较连贯。 ​...就像一般的影像一样,贴图的大小愈大,它的图像就愈精细。事实上,贴图往往需要比一般的影像更大。因为,在 3D 场景中,观察者可能会很靠近贴图,使得贴图需要放大很多倍,而造成模糊的现象。

    2.7K21

    连“捉阔”是什么都不知道就不要混了!如何优化看这里!

    在游戏运行时引擎是按照节点层级顺序从上往下由浅到深进行渲染的,理论上每渲染一张图像(文本最终也是图像)都需要一次 DrawCall。...简单点,就是减少让 CPU 工作的次数,但是每次都多给点活,不就可以省去一些“CPU 准备工具然后工作”和“工作结束叫 GPU 加工”的步骤了嘛,代价就是每次工作的时间会变长~ 明白了这个原理之后,下面让我们看看在实际游戏开发中应该如何操作吧...最重要的是「尽量将处于同一界面(UI)下的相邻且渲染状态相同的碎图打包成图集」,才能达到减少 DrawCall 的目的。 还记得游戏渲染时是按顺序渲染的吗,所以“相邻”很关键!要考,做笔记!...当渲染一张贴图的时候,动态合图系统会自动检测这张贴图是否已经被合并到了图集(图片集合)中,如果没有,并且此贴图又符合动态合图的条件,就会将此贴图合并到图集中。...静态图集也可以参与动态合图 在动态合图的官方文档中有提到: 当渲染一张贴图的时候,动态合图系统会自动检测这张贴图是否已经被合并到了图集(图片集合)中,如果没有,并且此贴图又符合动态合图的条件,就会将此贴图合并到图集中

    2.2K10

    基础渲染系列(二十)——视差(基础篇完结)

    本文重点: 1、根据视觉方向 浮动纹理坐标 2、使用高度场创建深度错觉 3、通过高度场追踪光线 4、近似或者搜索相交点 这是有关渲染的系列教程的第20部分。上一部分介绍了GPU实例化。...(一个近距离的四边形 ) 1 视差贴图 由于视角的原因,当我们调整观测点时,观察到的事物的相对位置会发生变化。这种视觉现象称为视差(透视)。在高速行驶时侧身看时最明显。...附近的物体看起来很大并且移动迅速,而远处的背景看起来很小并且移动较慢。 渲染时,至少在透视模式下使用相机时,我们已经考虑了透视。因此,几何会表现出视差。...(视差的高度贴图) 请确保在导入时禁用sRGB(彩色纹理),以便在使用线性渲染时不会弄乱数据。...如果我们能弄清楚射线实际上在哪里击中了高度场,那么我们就能始终找到真正的可见表面点。这不能用单个纹理样本完成。我们将必须沿着视线逐步移动,每次对高度场进行采样,直到到达表面为止。

    3.2K20

    2022年Unity 面试题 |五萬字 二佰道| Unity面试题大全,面试题总结【全网最全,收藏一篇足够面试】

    请简述GC(垃圾回收)产生的原因,并描述如何避免? 8. 贴图透明通道分离,压缩格式设为ETC/PVRTC 9. 关闭贴图的读写选项 10. Unity 在移动设备上的⼀些优化资源的方法 11....数组:声明 C# 数组和声明 C++ 数组的语法不同。在 C# 中,“[]”标记出现在数组类型的后面。...LightMap:就是指在三维软件里实现打好光,然后渲染把场景各表面的光照输出到贴图上,最后又通过引擎贴到场景上,这样就使物体有了光照的感觉。 51....LightMap:就是指在三维软件⾥实现打好光,然后渲染把场景各表⾯的光照输出到贴图上,最后⼜通过引擎贴到场景上,这样就使物体有了光照的感觉。 2. MipMap是什么,作用?...同时我们修改了NGUI的shader,在渲染时将第二张贴图的红色通道写到第一张贴图的透明通道里,恢复原来的颜色: fixed4 frag (v2f i) : COLOR fixed4 col

    23.8K1731

    Cocos Creator 性能优化:DrawCall

    在游戏运行时引擎是按照节点层级顺序从上往下由浅到深进行渲染的,理论上每渲染一张图像(文本最终也是图像)都需要一次 DrawCall。...简单点,就是减少让 CPU 工作的次数,但是每次都多给点活,不就可以省去一些“CPU 准备工具然后工作”和“工作结束叫 GPU 加工”的步骤了嘛,代价就是每次工作的时间会变长~ 明白了这个原理之后,下面让我们看看在实际游戏开发中应该如何操作吧...最重要的是「尽量将处于同一界面(UI)下的相邻且渲染状态相同的碎图打包成图集」,才能达到减少 DrawCall 的目的。 还记得游戏渲染时是按顺序渲染的吗,所以“相邻”很关键!要考,做笔记!...当渲染一张贴图的时候,动态合图系统会自动检测这张贴图是否已经被合并到了图集(图片集合)中,如果没有,并且此贴图又符合动态合图的条件,就会将此贴图合并到图集中。...静态图集也可以参与动态合图 在动态合图的官方文档中有提到: 当渲染一张贴图的时候,动态合图系统会自动检测这张贴图是否已经被合并到了图集(图片集合)中,如果没有,并且此贴图又符合动态合图的条件,就会将此贴图合并到图集中

    4.4K20

    基础渲染系列(十)——更复杂的复合材质

    本文重点: 1、烘焙自阴影到材质中 2、给表面的某些部分增加细节 3、支持更多的效果变体 4、一次性编辑多个材质 这是关于渲染的系列教程的第十部分。上一次,我们使用了多个纹理来创建复杂的材质。...较高的零件应该在较低的区域上投射阴影,但现在不会发生。当法线贴图存在小孔,凹痕或裂缝时,这一点最为明显。 假设有人在向我们的电路板射击。但没有穿过电路板,留下了明显的凹痕。...当遮挡强度为零时,贴图完全不会影响光线,因此,该函数需要返回1。当处于全强度时,结果恰好是贴图中的结果。我们可以通过基于滑块在1和贴图之间进行插值来实现。 ?...它用于增强场景的深度感。由于它是一种后处理效果,因此在渲染所有灯光之后将其应用于图像。这意味着阴影会同时应用于间接和直接光。结果,这种效果也不真实。...这是一个细节遮罩,可以防止细节出现在金属零件上。为了增加种类,它还减少甚至完全消除电路板的下部区域。而且,无论在板子上打出什么凹痕,细节都会被抹去。 ?

    2.4K30

    3D网格体组成原理

    ,实现数据库与虚幻引擎(UE)解耦,目的是仅仅将UE作为一个渲染器,让数据与渲染分离,以适应千万级构件的项目需求。...所以3维网格体看上去是由若干个三角形组成,存储时都是一些点而已。...一个完整的网格体(mesh)可以由一系列基本的几何信息描述,它们包含: 中心点:网格体唯一的中心坐标 顶点数组:相对于中心点的相对坐标 三角形数组:各个顶点的下标索引,长度是3的倍数 纹理贴图:贴到所有三角形表面上的...2维图片 UV坐标数组:网格体降维映射到贴图上的坐标,长度等于顶点数 备用UV坐标数组:网格体可以存储多个UV,适应不同贴图 材质属性:除了纹理之外表面的物理属性 切线数组:顶点相切于表面的切线,...所以存储在PostGIS或者MongoDB中的每个网格体至少需要以下3个字段: 顶点:网格体的顶点坐标列表 三角形:顶点之间组成的面,以及由三角顺序决定的朝向(朝内/朝外) UV坐标+贴图:决定网格体纹理的拉伸和平铺

    1K30

    基础渲染系列(八)——反射

    硬件立方体贴图采样基本上完成了我们刚才所做的事情。它找出向量指向的面,然后进行除法以找到与立方体贴图面的交点。使用此点的适当坐标来采样脸部纹理。...除此之外,当针对低于3.0的着色器模型时,UnityStandardConfig会将它们设置为0。 ? 5 嵌套反射 当两个镜子彼此面对时,最终会出现看似无止尽的嵌套反射级联。...球体应该保持动态,因为否则探针将无法再看穿它们,从而产生怪异的反射。 ? (静态地面镜子,黑色反射) 反射镜现在显示在我们的单反射探头中,但显示为纯黑色。那是因为渲染探针时,它的环境图还不存在。...(bounces设置为2) 置为两次反弹时,Unity首先以正常渲染每个反射探针开始。然后,使用现在可用的反射数据再次渲染它们。结果,来自地板反射镜的初始反射现在包含在环境贴图中。...这需要大量渲染,因此你绝对不想在运行时使用它!要查看实际效果,请复制地板镜并将其变成天花板镜。 ? (镜像的地板和天花板,有五次反弹) 因此可以在Unity中获得嵌套反射,但是它们是有限的。

    4.1K30

    Unity通用渲染管线(URP)系列(五)——烘焙光(Baked Light)

    (光照场景,单个混合光和一些自发光物体) 1、烘焙静态光 在这一节前面,我们已经能够在渲染的时候计算出所有的光照信息了,但这不是必选项。光照信息同样可以提前计算然后存储在一张光照贴图和探针里。...展开图将按比例缩放并放置在光照贴图中的每个对象上,因此每个实例都有自己的空间。就像缩放和平移应用于base UV一样。我们也必须将其应用于光照贴图UV。...我让它们为全局光照做些贡献,并在“Lightmap ”中将它们的Scale 加倍,以避免发出有关重叠UV坐标的警告。...当顶点在光照贴图中最终靠得太近时,就会发生这种情况,因此它们必须共享同一纹理像素。 ? (发光立方体;没有环境照明。) 5.2 烘焙自发光 自发光 通过单独的通道进行烘焙。...我们还需要为所有实例手动生成内插值的光探针,并将它们添加到材质属性块中。这意味着在配置块时我们需要访问实例位置。可以通过获取转换矩阵的最后一列来检索它们并将它们存储在一个临时数组中。 ?

    8.9K20

    大型 3D 互动项目开发和优化实践

    ,最后在渲染前需要解压,相当于一张贴图需要在内存中占 3072 x 3072 x 3Byte = 27MB,解压后还需要传到 GPU,在多张贴图同时渲染时很可能占用大量的内存。...经过和设计侧的沟通,同意在一些展示距离不可能很近的模型上替换较低分辨率的贴图。...模型减面— 模型在 WebGL 中渲染的流程是先用模型的顶点信息确定三角面,再在每个三角面上计算需要展示的颜色。 所以如果能减少模型面的数量,能减少每次渲染的计算量,减少每帧需要的渲染时间。...在模型文件中,相同材质的面,可能不是定义在同一个模型中,这样 CPU 会把这些面拆分成不同的画图指令,令 draw call 数量增加。...实时光影— 在使用以上的分级渲染策略后,可以在性能较好的设备上加上实时光影的特效,动态替换预烘焙贴图。

    40220

    Threejs入门之十六:纹理贴图和纹理材质

    顶点UV坐标的(0,0)点对应贴图的左下角,(1,1)点对应贴图的右上角,(1,0)点对应贴图的右下角,(1,1)点对应贴图的左上角 通过设置类型数组来定义顶点UV坐标const uv = new Float32Array...贴图geometry.attributes.uv = new THREE.BufferAttribute(uvs, 2); //2个为一组,表示一个顶点的纹理坐标 如果我们不想将整个图片都贴到物体上,我们只需要左下角的四分之一贴到物体上...//图片右上角 0, 0.5, //图片左上角]) Texture纹理的阵列 Texture纹理有两个属性定义了其在水平和垂直方向上贴图如何显示, .wrapS : 这个值定义了纹理贴图在水平方向上将如何包裹...默认值是THREE.ClampToEdgeWrapping,即纹理边缘将被推到外部边缘的纹素。 wrapT : 这个值定义了纹理贴图在垂直方向上将如何包裹,在UV映射中对应于V。...MirroredRepeatWrapping, 纹理将重复到无穷大,在每次重复时将进行镜像 如设置一个平面平铺上面的木头材质,可以设置贴图的wrapS 和wrapT 为RepeatWrapping, 通过设置

    2.6K10

    【Unity面试篇】Unity 面试题总结甄选 |Unity性能优化 | ❤️持续更新❤️

    在预处理阶段,把一些材质相同的模型的顶点统一变换到世界空间坐标下,并且新构建一个大的VB把数据保存下来,在绘制时,就会把这个大的VB提交上去,只需要设置一次渲染状态,再进行多次drawcall绘画出每个子模型...原理:Unity会检测哪些GameObject使用了同一个共享材质,然后去合并这些使用了同一个共享材质的网格顶点数据,形成一个新的大网格,然后传给显存,直接渲染这个大网格就相当于渲染了所有的被合并的小网格...同时我们修改了NGUI的shader,在渲染时将第二张贴图的红色通道写到第一张贴图的透明通道里,恢复原来的颜色: fixed4 frag (v2f i) : COLOR fixed4 col...一般游戏运行时不会有这样的需求,因此我们对所有贴图都关闭了这个开关,只在编辑中做贴图导入后处理(比如对原始贴图分离透明通道)时打开它。...Unity 在移动设备上的⼀些优化资源的方法 使⽤assetbundle,实现资源分离和共享,将内存控 制到200m之内,同时也可以实现资源的在线更新 顶点数对渲染⽆论是cpu还是gpu都是压⼒最⼤的贡

    2K32
    领券