Custom Shader Tutorial with chunk system

Help & Support
1

Hi all, I’m basically new to Playcanvas, I’m trying to replicate the custom shader tutorial but with the chunk system. I was able to make the opacity part. But I have a problem with the emission part. For some reason, the map does not animate as you can see here Dissolve Shader - PLAYCANVAS

The emissivePS is correctly replaced because if I try to use the original chunk from Github it works like a charm. I’ve made the changes by following this shader in Unity DISSOLVE using Unity Shader Graph - YouTube

This is the emissive chunk. The opacity one is similar and it works

#ifdef MAPFLOAT
uniform float emissionStep;
#endif

#ifdef MAPTEXTURE
uniform sampler2D emissionDissolveMap;
#endif

#ifdef MAPFLOAT
uniform float emissionAlpha;
#endif

vec3 getEmission() {
    
    vec3 emission = vec3(1.0);
    
    //DissolveMap
    #ifdef MAPTEXTURE
    emission *= $texture2DSAMPLE(emissionDissolveMap, $UV).$CH;
    #endif
    
    //Animate DissolveMap
    #ifdef MAPFLOAT
    emission = step(emission, emissionAlpha + emissionStep);
    #endif
    
    #ifdef MAPVERTEX
    emission *= gammaCorrectInput(saturate(vVertexColor.$VC));
    #endif
    
    return emission;
}

Thanks for the help

2

The #ifdef conditionals are there to make the default chunk be applicable to many diffferent scenarios and use cases. When the engine generates the final shader for a material, it branches out and composes a final shader text based on how the chunk is used in the given material.

SInce you are overriding it, you know exactly what you need and what you don’t in your chunk. For example, you are not trying to modify a vertex color, so you don’t actually need that conditional there (unless you do, since I didn’t look into that tutorial). In fact you don’t need any of them, and can simplify it, like:

uniform float emissionStep;
uniform sampler2D emissionDissolveMap;
uniform float emissionAlpha;

vec3 getEmission() {
    vec3 emission = vec3(1.0);
    
    //DissolveMap
    emission *= $texture2DSAMPLE(emissionDissolveMap, $UV).$CH;
    
    //Animate DissolveMap
    emission = step(emission, emissionAlpha + emissionStep);
    
    return emission;
}

And then pass the values to your uniforms from JS code:

material.setParameter(`emissionStep`, someNumber);
material.setParameter(`emissionDissolveMap`, someTexture);
material.setParameter(`emissionAlpha`, anotherNumber);

Edit:
Oh, and welcome to PlayCanvas :innocent:

2 Likes
3

And use Spector JS (Chrome plugin works well) to capture the frame and see the whole composed shader.

2 Likes
4

Great now it works, thank you!!!

I was trying to publish to let you see the result, but for some reason when you open the published link it gives me this error “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT” in console.

1 Like
5

Can you share the publish link please?

6

Sure. Right now the link works, but the error is still present. Dissolve Shader - PLAYCANVAS

7

I don’t get that error:

image
image3352×2168 1.02 MB

Do you have an ad blocker or any similar extension that can block content?

8

Yes, you’re right. I’ve disabled the ad blocker and now no error appears.

1 Like