Three.js图案溶解shader

本文主要是介绍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;}
}