首页 > 其他分享 >ThreeJs-05纹理材质高级操作

ThreeJs-05纹理材质高级操作

时间:2024-12-02 23:35:11浏览次数:4  
标签:透明 ThreeJs 05 裁剪 写入 纹理 设置 深度 平面

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

标签:透明,ThreeJs,05,裁剪,写入,纹理,设置,深度,平面
From: https://www.cnblogs.com/heymar/p/18582998

相关文章

  • 05_VIM编辑器
    VIM编辑器一、VIM编辑器的工作模式命令行模式用户刚刚启动vi/vim,便进入了命令模式。控制屏幕光标的移动,字符、字或行的删除,移动、复制某区域及进入插入模式,或者到末行模式插入模式只有在插入模式下才可以做文本输入,按“ESC”键可回到命令行模式末行模式在命令模式下......
  • Bitbucket:Bitbucket与Jira集成使用教程_2024-07-18_05-37-09.Tex
    Bitbucket:Bitbucket与Jira集成使用教程Bitbucket与Jira集成概述1.1什么是BitbucketBitbucket是Atlassian公司提供的一款基于Web的代码版本控制工具,它支持Git和Mercurial两种版本控制系统。Bitbucket允许用户创建私有或公共的代码仓库,进行代码的存储、共享和协作。它还提......
  • Bitbucket:Bitbucket与Jira集成使用教程_2024-07-18_05-37-09.Tex
    Bitbucket:Bitbucket与Jira集成使用教程Bitbucket与Jira集成概述1.1什么是BitbucketBitbucket是Atlassian公司提供的一款基于Web的代码版本控制工具,它支持Git和Mercurial两种版本控制系统。Bitbucket允许用户创建私有或公共的代码仓库,进行代码的存储、共享和协作。它还提......
  • Bitbucket:Bitbucket自动化构建与持续集成_2024-07-18_05-50-15.Tex
    Bitbucket:Bitbucket自动化构建与持续集成理解自动化构建与持续集成自动化构建的重要性自动化构建是软件开发流程中不可或缺的一部分,它通过自动化工具在代码提交后自动执行编译、测试和打包等操作,确保代码的质量和项目的稳定性。这一过程减少了人工干预的错误,提高了开发效......
  • 郑州轻工业大学oj1056寻找幸运数字
    文章目录题目描述代码题目描述小明对某些数字有偏爱,例如,他喜欢7的倍数,而不喜欢4的倍数,如果一个整数是7的倍数,而不是4的倍数,小明会认为这个数字是他的幸运数字。现在给定两个整数m和n,请你帮小明找m到n范围内的最大的幸运数字。如果m到n范围内没有幸运数字,则输出“no......
  • 聪明办法学python Task05 条件&扩展01:代码风格/Python规范Style
    条件if与c语言的逻辑相似,就不多叙述了代码布局-缩进如果有开始定界符,其余行的缩进需与开始定界符对齐需要额外的4个空格(长度相当于一个Tab键),以区分开传入参数,和其它内容空格一般用于添加以上这种缩进,Tab键一般用于保持行与行之间的一致性多行if语句衔接,需要一......
  • 华水967数据结构2005真题---选择题部分
    一.选择题1.在数据结构中,从逻辑上可以把数据结构分成()。A、动态结构和静态结构B、紧凑结构和非紧凑结构C、线性结构和非线性结构D、内部结构和外部结构答案:C解析:A.动态结构和静态结构:这个分类更多地涉及到数据结构的可变性,而不是其逻辑组织形式。动态结构通常指可......
  • HONEYWELL 逻辑板QCS 05442200
    逻辑板简述逻辑板又称:"控制板”在液晶电视里的作用和CRT中的视放板相当,但有实质的区别,逻辑板不是一个纯粹的信号放大器,它输入是LVDS格式信号,而不是RGB。逻辑板也称TCON板作用是把数字板送来的LVDS或TTL图像数据信号,时钟信号停止处置移位存放器存储将图像数据信号,时钟信号转换......
  • [Tricks-00005][NOIp2024]树上查询 思维方式还是要数形结合!
    题目链接。有一个经典结论是,在\(l<r\)的时候,\(dep_{\operatorname{LCA}(l,l+1,\dots,r)}=\min\limits_{i=l}^{r-1}dep_{\operatorname{LCA}(i,i+1)}\),证明也十分容易。特判掉\(k=1\)的特殊情况后,问题则可以转化成:有一个序列\(d_i=dep_{\operatorname{LCA}(i,i+1)}\),求\(\m......
  • 20222405 2024-2025-1 《网络与系统攻防技术》实验七实验报告
    1.实验内容1.1学习内容本周的学习内容涵盖了Web安全的基础知识以及一些常见的攻击技术。首先了解了Web安全的基本概念,区分了前端和后端的安全防护要点,掌握了如何识别和防范常见的Web安全漏洞。接着,深入学习了SQL注入的原理,了解了通过恶意SQL语句对数据库进行操作的方式,并学习了......