Shader Help required (UV distortion with cc_time[0])

Hello, so my issue is such, I have made a shader that causes a UV distortion in the fragment shader, to simulate “flame-like” effects at the edges.
There are two variants of these shaders, one where the distortion is dependent on cc_time[0] i.e the time elapsed in seconds when a game is running. The other variant is a elapsedTime i.e the time that I manually increase in the material inspector, to simulate time.

The elapsedTime time variant shows me this:

As expected it provides the flame effect

The cc_time[0] variant, shows me this:

This is the effect’s fragment shader code:

CCProgram sprite-fs %{
  precision highp float;
  #include <builtin/internal/embedded-alpha>
  #include <builtin/internal/alpha-test>

  #include <builtin/uniforms/cc-global>

  in vec4 color;  
  in vec4 vertexPos;
  uniform sampler2D maskTexture;
  uniform sampler2D normalTexture;

  uniform DistortionParameters {
    float distortionSpeed;
    float distortionScale;
    float normalMapScale;
    float edgeThickness;
    float flameIntensity; 
    float elapsedTime;

    in vec2 uv0;
    #pragma builtin(local)
    layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;

  // Give random value function
  float getRandom (vec2 st) {
      return fract(sin(dot(st.xy,
                   * 43758.5453123);
  vec2 getOriginalUV() {
    return uv0;
  vec4 getTextureVector(vec2 UV, sampler2D Texture) {
	    return texture(Texture, UV);

  vec4 frag () {
    vec2 newUV = getOriginalUV();

      // Calculate the distance from the UV coordinates to the nearest edge
    float distFromEdge = min(min(newUV.x, 1.0 - newUV.x), min(newUV.y, 1.0 - newUV.y));

    // Calculate the flame distortion amount based on the distance from the edge
    float distortionAmount = flameIntensity * (1.0 - smoothstep(0.0, edgeThickness, distFromEdge));
    //This the cc_time[0] variant
    float randomOffset = sin(newUV.x * 10.0 + newUV.y + cc_time[0] * 20.0 * distortionSpeed) * distortionAmount;
      //This is the elapsed time variant
       // float randomOffset = sin(newUV.x * 10.0 + newUV.y + elapsedTime * 20.0 * distortionSpeed) * distortionAmount;

    // Distort UV
    newUV += vec2(0.0 , randomOffset);

    vec4 newTexture = getTextureVector(newUV, cc_spriteTexture);

    vec4 o = vec4(newTexture);

    o *= color;
    return o;

I would like to know how I can make the cc_time[0] variant look like the elapsedTime variant. Am I doing something fundamentally wrong? Would appreciate the help, thanks

cc_time stores three values, namely cc_time.x (accumulated time /s ), cc_time.y (frame time /s ), cc_time.z (total number of frames played since startup)

You can use these three components according to your needs.

Yeah in this case, I use cc_time.x or cc_time[0], but as you can see in the gifs, the cc_time.x variant is giving me a different effect when I am playing the scene.
Is there a fundamental difference in the shader being show in the editor vs in the preview in editor?

What version of engine are you using?

Version 3.6.2

But thanks I figured out the solution.

I simply switched the Filter Mode of the sprite-frame that I was using from Bilinear to Nearest (none), and it worked!

Can you unchecked the packable option in the spriteframe setting of that sprite? I don’t think filter mode is the root cause of your problem.

Apologies for the late reply, I unchecked the packable option and that fixed it too.

What could be the reason behind this if you have any idea? I’d like to understand it

When package option is enable, it will try to pack your texture into a larger texture (2048x2048 if I remember correctly). So the shader code will aplly to that larget texture, the uv coordinate you used on the original texture is calulated for this bigger texture, which will have result you received in the video. In the case you change the filter mode, it will also cause your texture not to pack to the larger texture because it have different setting, so it will still solve your problem, but I am sure you don’t want to change the filter mode of your original texture :smiley:

Ohh I see, one of those very mysterious problems that went over my head

Thanks for the help! Appreciate it :smiley:

1 Like