Cocos Creator:图像纹理资源

Cocos Creator:图像纹理资源
推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT 编辑器

纹理资源

纹理资源是用于程序采样的资产,例如模型上的纹理精灵上的 UI。渲染UI或模型时,对相应的纹理进行采样,然后在模型网格上填充,再加上照明等一系列处理来渲染整个场景。

纹理资源可以从图像资产生成。一些常见的图像格式,包括 、 等。可以在图像资产中使用。.png.jpeg

纹理2D

Texture2D 是一种纹理映射资源,通常用于渲染 3D 模型,例如模型材质中的反射映射、环境光遮罩映射等。

将图像资源导入 Creator 后,可以在检查器面板中将其设置为纹理类型,纹理类型为 Texture2D 资源。

纹理2D

性能

导入图片资源时,编辑器默认设置为纹理类型,导入的图像资产下会自动创建一个或多个子资源,在资源管理器中点击图片资源左侧的三角形图标展开即可看到所有子资源,如下图所示:

子纹理

选择生成的 Texture2D 子资源后,可以在“检查器”面板中设置相关属性。

纹理2D 子资源
性能描述
各向异性各向异性值,应用各向异性滤波算法的最大阈值
过滤模式过滤模式,选项包括最近(无)、双线性、带 mipmap 的双线性、带 mipmap 的三线性高级,请参阅下面的过滤模式以获取更多信息
环绕模式设置寻址模式,选项为重复钳位镜像高级
选择“高级”时,在 S(U)/T(V) 方向上设置纹理寻址模式,即在 S(U) 或 T(V) 方向上设置像素到纹理映射模式,有关详细信息,请参阅下面的寻址模式
: 由于默认的环绕模式在渲染图像的透明边缘时可能会显示黑边,因此在将图像资源类型设置为精灵帧时,Creator 会自动将纹理资源的环绕模式 S 和环绕模式 T 属性调整为夹边到边缘。如果开发人员有特殊需求,他们可以更改此设置。

接下来,我们简要解释一些属性。

过滤模式

过滤模式

当 Texture2D 的原始大小与映射到屏幕的纹理图像的大小不匹配时,纹理单元到像素映射的不同纹理过滤方法会产生不同的结果。

Texture2D 中的最小滤镜和磁滤镜属性分别用于设置缩小或放大映射时要使用的纹理过滤方法。

近东

近东过滤是使用的默认纹理过滤方法。中心位置最接近采样点的纹理单元的颜色值用作该采样点的颜色值,而不考虑其他相邻像素的影响。
应该注意的是,使用邻近滤波可能会导致边缘不均匀和锯齿更明显。

线性

线性滤波使用最靠近采样点的 2 x 2 纹理单元矩阵进行采样。取四个纹理单元格颜色值的平均值作为采样点的颜色,像素之间的颜色值过渡将更加平滑。
请注意,使用线性过滤方法可能会导致黑边,对于基于像素的游戏,可能会导致模糊。

生成 Mipmap

为了加快 3D 场景渲染并减少图像锯齿,映射被处理为一系列预先计算和优化的图像,称为 mipmap。mipmap 是 mipmap 每个级别的原始图像的缩小详细副本,当映射按比例缩小或只需要从远处查看时,mipmap 将转换为适当的级别。

生成-mipmap

选中“生成 Mipmap”属性或将纹理的“过滤模式”选为“使用 mipmap 的双线性”或“使用 mipmap 的三线性”时,将通过在两个相似图层之间进行插值来自动生成 mipmap。渲染远处物体时,mipmap 映射比原始图像小,提高了显卡采样时的缓存命中率,因此渲染速度得到了提高。同时,mipmap 映射不太精确,这减少了摩尔纹并减少了屏幕上的锯齿。此外,由于额外的mipmap生成,mipmap占用了大约三分之一的内存空间。

Texture2D 可以在运行时动态选择 mipmap 的范围。设置 mipmap 范围后,只能使用该范围内的 mipmap。这使我们能够通过跳过低级别来节省带宽,并避免使用过多的高级别来减少影响。

Texture2D 的 mipmap 级别范围可以设置如下。

texture.setMipRange(minLevel, maxLevel);

其中 指定最小限制并指定最大限制。minLevelmaxLevel

注意
  1. 限制不能超过现有的 mipmap 级别。 此方法不适用于 WebGL 和 GLES2 后端。

环绕模式

通常,水平 (U) 和垂直 (V) 轴中的纹理坐标在 .当传递的顶点数据中的纹理坐标超出范围时,可以使用不同的寻址模式来控制超出范围的纹理坐标的映射方式。[0, 1][0, 1]

Texture2D 中的环绕模式 S 和环绕模式 T 属性分别用于在 UV 方向上设置纹理的寻址模式

重复

重复寻址模式是使用的默认纹理寻址模式。对于范围外的纹理坐标,重复内部纹理坐标的内容,即纹理映射反复放置在纹理坐标范围之外。[0, 1][0, 1]

: 在 WebGL 1.0 上,当纹理宽度和高度不是 2 的幂时,将禁用寻址模式。运行时会自动将其切换到寻址模式,这将禁用材质等属性。repeatclamp-to-edgetilingOffset

当 Texture2D 的环绕模式 S 和环绕模式 T 属性都设置为 时,效果如下所示。repeat

重复

夹具到边缘

将纹理坐标限制为 0 到 1 之间,仅复制一次纹理坐标。对于 外部的部分,将使用边的纹理坐标内容进行延伸,从而产生类似于被拉伸的边的效果。[0, 1][0, 1]

当两个属性都设置为 时,效果如下所示。clamp-to-edge

夹紧到边缘

镜像重复

与重复寻址模式类似,不同之处在于映射是镜像和重复的。

当两个属性都设置为 时,效果如下所示。mirrored-repeat

镜像重复

使用纹理2D

Texture2D 是一种使用非常广泛的资源,它在 Creator 中的使用包括在编辑器中使用它并动态获取它。

在编辑器的“检查器”面板中,通过将 Texture2D 资源拖放到属性框中,可以使用标记为 Texture2D 类型的任何属性。例如,为材质资源设置 Texture2D 类型资源。

镜像重复
注意:如果未在材料中定义,则没有此类属性。USE TEXTURE

要动态使用它,您需要先获取图像资产,然后根据您获得的图像资产实例化 Texture2D 资产。

resources.load("testAssets/image/texture", Texture2D, (err: any, texture: Texture2D) => {
  const spriteFrame = new SpriteFrame();
  spriteFrame.texture = texture;
  this.node.getComponent(Sprite).spriteFrame = spriteFrame;
});

更多详情请参考 资源加载。

3D建模学习工作室整理翻译,转载请标明出处!

上一篇:Cocos Creator:资产工作流 (mvrlink.com)

下一篇:Cocos Creator:精灵帧的自动修剪 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号