复制一个卡通渲染着色器文件,在properties加入一下属性:
dissolveTexture: { value: white, editor: { parent: USE_DISSOLVE } }
dissolveThreshold: { value: 0.0, editor: { range: [0, 1], step: 0.01}}
dissolveLineWidth: { value: 0.1, editor: { range: [0, 0.3], step: 0.01}}
dissolveColor0: { value: [1, 0, 0, 1], editor: { type: color } }
dissolveColor1: { value: [1, 0, 0, 1], editor: { type: color } }
offsetDirection: { value: [0.0, 0.0, 0.0, 0.0]}
offsetThreshold: { value: 0.0, editor: { range: [0, 10], step: 0.01 } }
offsetScale: { value: 0.5, editor: { range: [0, 1], step: 0.01 } }
在shared-ubos加入全局Uniform:
#if USE_DISSOLVE
uniform sampler2D dissolveTexture;
uniform Dissolves{
vec4 dissolveColor0;
vec4 dissolveColor1;
vec4 offsetDirection;
float dissolveThreshold;
float dissolveLineWidth;
float offsetThreshold;
float offsetScale;
};
#endif
在片元着色器中加入以下代码,注意阴影片元着色器也要添加代码:
#if USE_DISSOLVE
//获取噪声纹理的颜色
vec4 colDissolve = texture(dissolveTexture, v_uv);
//颜色小于阙值就不着色
if(colDissolve.r < dissolveThreshold){
discard;
}
float t = 1.0 - smoothstep(0.0, dissolveLineWidth, colDissolve.r - dissolveThreshold);
vec4 dissolveColor = mix(dissolveColor0, dissolveColor1, t);
color.rgb = mix(color.rgb, dissolveColor.rgb, t * step(0.001, dissolveThreshold));
#endif
在ts文件里的update函数设置溶解阙值,控制溶解效果:
private dissolveThreshold: number = 0.0;
protected update(dt: number): void {
this.dissolveThreshold += dt;
if (this.dissolveThreshold > 1) {
this.dissolveThreshold = 1.0;
}
this.material.setProperty("dissolveThreshold", this.dissolveThreshold);
}
可以给消融效果加上膨胀和带方向的消融,添加顶点着色器代码:
#if USE_DISSOLVE
//膨胀消融,沿法线方向膨胀
pos += vec4(v_normal, 0.0) * clamp(dissolveThreshold - offsetThreshold, 0.0, 1.0) * offsetScale;
//方向消融
pos += offsetDirection * clamp(dissolveThreshold - offsetThreshold, 0.0, 1.0) * offsetScale;
#endif