ThreeJs-05纹理材质高级操作

时间：2024-12-03 07:09:22

1.纹理操作

1.1 重复、旋转、位移、缩放

重复

image-20241125201320769

但是要在水平方向上重复，还得允许

image-20241125201420006

image-20241125201441917

image-20241125201450170

image-20241125201529412

image-20241125201536404

按照刚才的重复方式

image-20241125201628021

如果设置为镜像重复

image-20241125201648800

image-20241125201653904

位移

image-20241125201725667

image-20241125201807562

image-20241125201747004

旋转

image-20241125201821448

image-20241125201826778

image-20241125201833346

1.2 翻转与alpha生成颜色

image-20241125201929241

正常的图

image-20241125201941864

不翻转默认是翻转的

image-20241125202016166

image-20241125202024891

预乘透明度

image-20241125202121034

预先乘透明度

主要是会有一个描边的效果

image-20241125203012828

GIF

2.纹理属性

2.1 纹理过滤

比如一张原图很大，但是到3D场景中要变小，两个分辨率是不一样的

image-20241125203152418

放大两种方法

image-20241125203438475

第一种方式是最近邻

image-20241125203524329

直接取的是像素来放大

最近邻就是由原图附近去找然后模拟一些颜色

image-20241125203541592

设为线性，这个就比较光滑

image-20241125204553276

image-20241125204622429

image-20241125204639637

缩小

image-20241125205133151

最接近的像素，较粗糙

image-20241125205227723

image-20241125205235707

线性，求平均

image-20241125205250078

但是这两种都还是有瑕疵，所以诞生了

mipmap解决摩尔纹条纹

mipmap原理是先算好缩小一倍的样子，再算缩小一倍的样子，再算，以此循环

image-20241125210218980

image-20241125210525697

这是默认的方式

image-20241125210840601

GIF

注意这四种生成mipmap要开起，不然又会产生魔纹

image-20241125211036298

GIF

剩下三种见上，无非就是性能消耗

各项异性anisotropy解决倾斜模糊问题

image-20241125211305134

image-20241125211514624

image-20241125211541942

3.jpg_png_webp_dds_ktx_hdr_exr格式纹理

同一个鱼眼图不同格式

image-20241125212956917

这些格式里面最小的是ktx2，最大是hdr，主要就是曝光不同，没有太大曝光要求，肯定越小越好

image-20241125213625702

3.1 英伟达导出优化压缩

image-20241125213703530

打开软件，打开图片，正常第一步选择8bit，rgba

image-20241125214006789

也可以选择其他比如第二个就是hdr

右下角导出

image-20241125214116240

可选格式

image-20241125214130548

后面用到可以回看视频教程

3.2 threejs中使用KTX2_DDS_TGA纹理

要使用ktx要导入加载器

image-20241125214549644

使用加载器要先实例化一个文件，文件位置在

image-20241125214657048

image-20241125214712113

移动到public下面

导出为etx2图片最好采用编码

image-20241125214831672

是否翻转图片，在导出时设置

image-20241125214933783

因为设置代码会不起效果

image-20241125214954610

导出的时候如果点击了生成mipmap，那么久不能成为场景贴图，这句代码失去效果

image-20241125215124910

image-20241125215135100

所以最好不勾选

其他的图片就类似

image-20241125215219643

image-20241125215237841

3.3设置高动态范围全景背景色调映射和色调曝光

这是针对于hdr图的

加载hdr

image-20241125215715062

背景色调

是给渲染器加

image-20241125215743890

值有

image-20241125215754741

第三个一般用于室外更柔和，四五个模拟电影质感

GIF

GIF

曝光

image-20241125220038343

GIF

3.4 高动态范围EXR_TIF_PNG加载使用

这三个都可以使用hdr的功能

image-20241125220243431

跨平台

image-20241125220251434

tif类似于hdr也可以调节曝光

image-20241125220319975

image-20241125220352209

4.材质深度模式

离相机远近叫做深度

image-20241126220330963

深度图用到的z-buffer算法

说白了深度效果就是为了在3D中实现遮挡效果

image-20241126222727606

要完成深度，就需要两张图，一张绘制出来的渲染图，一张顺带用代码生成的深度图，那么两者结合深度图越白色的地方就会渲染的比较黑，实现阴影效果，深度越黑的地方实现遮挡效果

image-20241126220840447

深度设置有三种

image-20241126223819354

用在函数里面的有

一般小于等于用的多

输入像素就是渲染图，缓冲器就是深度图

image-20241126220912366

当前有两个平面

image-20241126224044366

image-20241126224140770

image-20241126224152102

不写入

image-20241126224508629

总是写入

image-20241126224519143

深度写入和深度测试代码

深度写入就是深度图会写入进来，虽然看不到但是存在于内存中

image-20241126224728082

深度测试就是检不检测深度，比如这里设置的是比他小就会被大的遮挡，这个红色要比有光的要大，那么从红色望过去按理说会遮挡住有光，那么此时不开启有光的深度测试，就不再检测深度，同时渲染比红色后渲染，那么就会看到此时深度不生效

image-20241126225124606

如果做深度测试

GIF

5.材质混合模式

混合模式可用值

image-20241126225517167

设置混合模式，前面都是定义好的，只有最后一种自定义选择的时候，才能去选择blending下面的设置

image-20241126225608786

不混合

完全不透明，透明区域用白色覆盖

image-20241126225625681

additive

两个颜色直接相加，比如背景墙的黄色和平面的红色相加 ，白色加上任何颜色还是白色

这种用在光上常见，两个光结合

image-20241126225807539

目标颜色也就是背景减去原颜色也就是红色，那就是绿色

其他颜色减去白色都是黑色

image-20241126225906174

直接相乘

两个颜色相乘会得到一个更暗的颜色

透明乘任何都是白色

image-20241126230057300

剩下就是自定义

5.1透明冰块透明液体透明杯子多个透明物体混合渲染

一个模型杯子

image-20241126230333437

里面是装有水的，但是外面看不见

image-20241126230352128

原因是水是透明的，透明跟玻璃混合有一些问题

加载模型微调数据

先渲染冰块再水再杯子

image-20241126230629140

隐藏杯子和水，把冰块材质变为透明

image-20241126230837814

image-20241126230831436

image-20241126230856372

显示水，发现冰块不见

image-20241126230920854

拿到水的材质，重新设置材质，并且为透明，透明度为0.5

image-20241126231043360

image-20241126231051966

其原因就是这里没有设置混合，所以默认就是原先水的透明度就是1，很透明，和里面透明物体相乘就还是很透明1，那就完全看不到里面，所以如果要解决，就把水的透明度调低

然后同样设置杯子材质透明度

image-20241126231521125

此时能够勉强看到水和冰块

image-20241126231540751

第二种解决办法就是混合

首先先把水混合调为自定义

image-20241126231757132

此时就可以gui去调节

GIF

GIF

image-20241126232035980

同理设置杯子

image-20241126232120909

6.裁剪

6.1 裁剪平面

比如现在有这个一个物体

这是一个

image-20241127222703495

image-20241127222547425

裁剪是材质的属性，一共三个

image-20241127222617287

首先创建一个平面，这个平面是一个数学库，不会真正大小，第一个参数是什么位置，比如下面这个例子就是一个三围向量，但是平行于y轴

第二个参数就是与原点的距离

image-20241127222910807

image-20241127223008296

然后设置材质的裁剪平面，并且在渲染器打开裁剪平面

image-20241127223106548

image-20241127223114460

然后就可以通过设置刚才的两个属性，单独来设置就是这么设置，来达到一个裁剪的不同效果

image-20241127223311208

GIF

裁剪也可以创建多个裁剪平面放入数组

image-20241127223820278

第一个是平行于y轴，第二个是平行于x轴，也就是第一个右边，第二个上面会保留

而并集就是所有，也就是两个都满足的才会保留

image-20241127223825638

默认的效果是并集，也可以交集，但是交集就是各满足各的都可以保留image-20241127224031633

image-20241127224042505

image-20241127224047977

6.2 裁剪场景

裁剪场景就要用到渲染器的属性

image-20241127224157552

xy从什么地方开始，裁剪宽高多少

image-20241127224229639

image-20241127224238254

那么此时另外一边，就可以空出来去弄其他的场景，甚至相机都可以再来一个

比如现在再来一个场景

image-20241127224419245

image-20241127224714127

GIF

7.模板渲染

现在有一个平面一个球

image-20241127225005329

现在实现一个效果，让小球只渲染在平面上，没了平面，就没了小球，这时候就需要平面作为一个模板

image-20241127225112014

首先需要开启

image-20241127225142113

image-20241127225225859

首先两个都要设置属性允许写入

然后在模板（平面处）设置mask代表者写入值允许范围多少

ref是一个基准值，模板和写入模板的应该保持一致，并且要在范围内

image-20241127225455910

然后是缓冲区判断，就是什么时候允许写入，这个值表示当他们相等时写入

image-20241127225712193

image-20241127225719601

最后当深度值和缓冲都相等时，在模板处设置通过写入方式，固定的值

image-20241127225809225

GIF

image-20241127225956671

7.1 实现金属切割面

前面裁剪物体后，会发现裁剪到的区域是空心的，如果想要实心呢

image-20241127230045907

实现效果，创建平面，材质，注意属性metalness是金属度，roughness是粗糙度

image-20241127230535157

image-20241127230541607

image-20241127230545334

image-20241127230604012

那现在就可以用到模板了，只要切面才显示

两个物体首先是里面这个物体

image-20241127230708504

image-20241127230724419

GIF

相关文章