Three.js图案溶解shader

在这里插入图片描述
上图提供两种方式溶解显示
上面一排是根据现实的图案红色通道也就是r值进行溶解
下面一排提供额外的溶解纹理
可以通过简单更改呈现多种溶解图案

代码仓库 gitee

b站账号:https://space.bilibili.com/374230437


interface IMapPath {map: string;dissolve?: string;
}export class Dissolve {material: ShaderMaterial | MeshStandardMaterial;mesh: Mesh<BufferGeometry, typeof this.material>;constructor(private mapPaths: IMapPath, private gui: ThreeHelper["gui"]) {this.material = this.CustomMaterial();this.mesh = new Mesh(new IcosahedronGeometry(3, 5), this.material);// this.mesh = new Mesh(new SphereGeometry(3, 36, 36), this.material);// this.mesh = new Mesh(new BoxGeometry(3, 3, 3), this.material);gui?.add(<any>this.material.uniforms.iProgress, "value", 0, 1);this.mesh.onAfterRender = () => {(this.material as ShaderMaterial).uniforms.iProgress.value += 0.01;};}CustomMaterial(): ShaderMaterial {const material = new ShaderMaterial({transparent: true,uniforms: {iTime: { value: 0 },iProgress: { value: 0 },map: {value: new TextureLoader().load(this.mapPaths.map),},dissolveMap: {value:this.mapPaths.dissolve &&new TextureLoader().load(this.mapPaths.dissolve),},},vertexShader: `varying vec2 vUv;void main() {vUv = uv;vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);gl_Position = projectionMatrix * modelViewPosition;}`,fragmentShader: `uniform float iTime;varying vec2 vUv;uniform float iProgress;uniform sampler2D map;uniform sampler2D dissolveMap;void main( ) {vec3 diffuse = texture(map,vUv).rgb;${this.mapPaths.dissolve? "vec3 dissolve = texture(dissolveMap,vUv).rgb;": "vec3 dissolve = diffuse;"}float t = iProgress;float edge_width = mix(0.0,0.5, t);float edge =  smoothstep(dissolve.r - edge_width, dissolve.r, t);vec4 edgeColor = vec4(0.6,0.2,0.1, 1.0);diffuse += edgeColor.rgb * (1.0 - edge);gl_FragColor = vec4(diffuse,edge);}`,});return material;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/109058.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C/C++】静态库和动态库命名规范及最佳实践

在软件开发中&#xff0c;静态库和动态库是常用的代码复用形式。为了保持良好的代码组织和可维护性&#xff0c;以及遵循统一的命名规范是非常重要的。本文将介绍静态库和动态库的命名规范&#xff0c;并提供一些最佳实践&#xff0c;以帮助开发人员在项目中正确命名库文件。 …

3-k8s-镜像仓库harbor搭建

文章目录 一、概念二、安装harbor三、使用harbor仓库 一、概念 官方概念&#xff1a;Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器。 我们平时拉去镜像都是从线上仓库拉去&#xff0c;但是企业内部的镜像一般都不会随意传到网上&#xff0c;而是保存在自己公…

flutter开发实战-防抖Debounce与节流Throttler实现

flutter开发实战-防抖Debounce与节流Throttler实现 在开发中&#xff0c;经常遇到某些按钮或者界面操作需要做防抖或者节流操作。这里记录一下实现。 一、防抖Debounce与节流Throttler 防抖Debounce 当有可能在短时间内对一个方法进行多次调用时&#xff0c;需要防抖&#…

GO 工程下载依赖操作流程(go mod)

1. 写一个main.go文件 package main import ("fmt""net/http""github.com/ClickHouse/clickhouse-go" ) func main() {fmt.Println("服务启动......")http.HandleFunc("/hello", func(w http.ResponseWriter, r *http.Requ…

基于springboot实现酒店管理系统平台项目【项目源码+论文说明】计算机毕业设计

摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#xff0c;科学化的管理&#xff0c;使信息存…

如何优化模型渲染性能

1、提高模型渲染性能的好处 优化模型渲染性能有以下几个好处&#xff1a; 提高用户体验&#xff1a;良好的模型渲染性能可以使图形应用程序更加流畅和响应快速。当模型以较高的帧率渲染时&#xff0c;用户可以获得更流畅、更真实的视觉效果&#xff0c;提升整体的用户体验。 …

Qt 为Android app添加系统签名

Qt 为Android app添加系统签名 flyfish 一 环境 lsb_release -aNo LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 23.04 Release: 23.04 Codename: lunarQt Creator 10.0.2 构建套件 Qt 6.5.1 Clang arm64-v8a 二 运行Qt 如果没有Qt图标 在终端…

使用PM2部署spring-boot项目

一、打包应用 1、先清理之前的 2、修改pom.xml文件关于项目名称版本及jdk版本 3、在idea中直接打包项目 4、等打包完成后会在target文件夹下有一个xx.jar的文件,拷贝出来放到一个文件夹下&#xff0c;或者服务器指定目录下 二、使用pm2部署.jar文件 1、pm2的安装,参考地…

MyBatis涉及的动态SQL

动态 SQL 提供了更大的灵活性和可重用性&#xff0c;可以根据不同情况生成不同的 SQL 语句&#xff0c;从而满足应用程序的需求。它简化了数据库操作的编写和管理&#xff0c;提高了开发效率和代码的可维护性。 <if> 用于条件判断&#xff0c;根据条件决定是否包含某个SQ…

vscode使用code runner乱码

"code-runner.executorMap": {"python": "set PYTHONIOENCODINGutf8 && python $fullFileName"}

【下载器篇】获取微软应用商店应用安装包的方法

【下载器篇】获取微软应用商店应用安装包的方法 微软应用商店历史版本应用下载方法&#xff0c;部分历史版本无法搜索到—【蘇小沐】 文章目录 【下载器篇】获取微软应用商店应用安装包的方法1.实验环境 &#xff08;一&#xff09;微软商店的在线链接生成器1、复制该应用的在…

点云从入门到精通技术详解100篇-基于三维点云的并联机器人 抓取(续)

目录 3 Delta并联机器人3D视觉系统搭建及抓取点计算 3.1 系统总体方案 3.2 Delta并联机器人结构介绍

Django中djangorestframework-simplejwt的使用

发现了一篇很好的文章&#xff0c;上面说的很详细&#xff1a; 链接地址&#xff1a;Django REST Framework教程(7): 如何使用JWT认证(神文多图) - 知乎

机器学习绪论

目录 第1关&#xff1a;什么是机器学习 相关知识 题目答案 第2关&#xff1a;机器学习的常见术语 相关知识 假设空间 归纳偏好 题目答案 第3关&#xff1a;机器学习的主要任务 相关知识 分类 回归 聚类 题目答案 第1关&#xff1a;什么是机器学习 相关知识 相信…

美团二面算法题-输出每对有效括号内的内容;

<!-- 题目&#xff0c;输出每对有效括号内的内容&#xff1b;输入&#xff1a;"(11)*2" 输出&#xff1a;11输入&#xff1a; "((12)*(34))2" 输出&#xff1a;12, 34, (12)*(34)-->function test (str) {let res []let stask []for(let i0;i<…

ASP.NET framework升级core .NET 6.0

C# ASP.NET framework 升级core .NET 6.0 .NET 7.0 .NET 8.0 或者以上 .net framework、.net standard、.net core .net 5/6/7/8 区别_.net 6.0和.net framework的区别-CSDN博客 using System.Web.Http; using HttpPostAttribute Microsoft.AspNetCore.Mvc.HttpPostA…

网络解析(二)

ICMP 报文有很多的类型,不同的类型有不同的代码。最常用的类型是主动请求为 8,主动请求的应答为 0。 ICMP 相当于网络世界的侦察兵。我讲了两种类型的 ICMP 报文,一种是主动探查的查询报文,一种异常报告的差错报文; ping 使用查询报文,Traceroute 使用差错报文。 IP和…

了解主启动类怎么运行

//SpringBootApplication 标注这个类是spring boot的应用&#xff0c;启动类下的所有资源都会被导入 SpringBootApplication public class SpringbootApplication { public static void main(String[] args) { //以为是启动了一个方法&#xff0c;没想到启动了一个服务 SpringA…

ChatGPT技术或加剧钓鱼邮件攻击

我们对ChatGPT这一新技术并不陌生&#xff0c;也早就听闻ChatGPT可以通过某种方式绕过安全机制&#xff0c;对目标进行入侵。 ChatGPT的“越狱”技术已经迭代数次&#xff0c;甚至有了先进的“邪恶GPT”WormGPT和FraudGPT&#xff0c;两者都能快速实现钓鱼邮件骗局。 安全分析…

协同办公系统OA实施过程中需要注意的细节

随着企业对于高效、便捷的办公方式的需求增加&#xff0c;协同办公系统OA正逐渐成为企业信息化建设的热门选择。然而&#xff0c;协同办公系统OA的实施并非一蹴而就&#xff0c;需要企业在实施过程中注意一系列的细节。 一、规划与需求分析 企业应根据自身的业务需求和发展战略…