Shader Problem in IOS

UnGamer · May 23, 2024, 12:25pm

I have a question related to shaders. I created a game in which I added a shader; it works fine in web mobile and Android, but in iOS it gives an error during rendering. How to solve this issue
version-3.8.2

17:49:37 [ERROR]: [ERROR] file /Applications/Cocos/Creator/3.8.2/CocosCreator.app/Contents/Resources/resources/3d/engine/native/cocos/renderer/gfx-metal/MTLCommandBuffer.mm: line 904

17:49:37 [ERROR]: Sampler binding cc_spriteTexture at set 2 binding 12 is not bounded.

CustomEffect.effect

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState:
        cullMode: none
      properties:
        alphaThreshold: { value: 0.5 }
}%

CCProgram sprite-vs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>
  #if USE_LOCAL
    #include <builtin/uniforms/cc-local>
  #endif
  #if SAMPLE_FROM_RT
    #include <common/common-define>
  #endif

  uniform inMatrix {
    highp mat4 inTransform; 
  };

  in vec3 a_position;
  in vec2 a_texCoord;
  in vec4 a_color;

  out vec4 color;
  out vec2 uv0;

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);

    #if USE_LOCAL
      pos = cc_matWorld * pos;
    #endif

    #if USE_PIXEL_ALIGNMENT
      pos = cc_matView * pos;
      pos.xyz = floor(pos.xyz);
      pos = cc_matProj * pos;
    #else// Using custom ortho matrix instead of CCCamera matrix.
      pos = inTransform * pos; //cc_matViewProj *
    #endif

    uv0 = a_texCoord;
    #if SAMPLE_FROM_RT
      CC_HANDLE_RT_SAMPLE_FLIP(uv0);
    #endif
    color = a_color;

    return pos;
  }
}%

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

  in vec4 color;

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

  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
      #if IS_GRAY
        float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
        o.r = o.g = o.b = gray;
      #endif
    #endif

    o *= color;
    ALPHA_TEST(o);
    return o;
  }
}%

and in ts file I’m doing this

let material = this.coverSprite.getSharedMaterial(0);
material.setProperty('inTransform', transform);

I have changed layout(set = 2, binding =12) uniform sampler2D cc_spriteTexture;

UnGamer · May 23, 2024, 1:36pm

There is also two more custom shader

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState:
        cullMode: none
      properties:
        alphaThreshold: { value: 0.5 }
}%

CCProgram sprite-vs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>
  #if USE_LOCAL
    #include <builtin/uniforms/cc-local>
  #endif
  #if SAMPLE_FROM_RT
    #include <common/common-define>
  #endif

  uniform inMatrix {
    highp mat4 inTransform;
  };

  in vec3 a_position;
  in vec2 a_texCoord;
  in vec4 a_color;

  out vec4 color;
  out vec2 uv0;

  out vec2 blurCoordinates[5];

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);

    #if USE_LOCAL
      pos = cc_matWorld * pos;
    #endif

    #if USE_PIXEL_ALIGNMENT
      pos = cc_matView * pos;
      pos.xyz = floor(pos.xyz);
      pos = cc_matProj * pos;
    #else// Using custom ortho matrix instead of CCCamera matrix.
      pos = inTransform * pos; //cc_matViewProj *
    #endif

    uv0 = a_texCoord;
    #if SAMPLE_FROM_RT
      CC_HANDLE_RT_SAMPLE_FLIP(uv0);
    #endif
    color = a_color;

    vec2 singleStepOffset = vec2(3.0/4096.0, 3.0/4096.0);
	  blurCoordinates[0] = a_texCoord.xy;
	  blurCoordinates[1] = a_texCoord.xy + singleStepOffset * 1.407333;
	  blurCoordinates[2] = a_texCoord.xy - singleStepOffset * 1.407333;
	  blurCoordinates[3] = a_texCoord.xy + singleStepOffset * 3.294215;
	  blurCoordinates[4] = a_texCoord.xy - singleStepOffset * 3.294215;

    return pos;
  }
}%

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

  in vec4 color;

  in highp vec2 blurCoordinates[5];

  // uniform sampler2D mask; Using cc_spriteTexture instead of mask

  //const highp float blurSize = 0.3/512.0;

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

  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
     lowp vec4 sum = vec4(0.0,0.0,0.0,0.0);
	    sum += CCSampleWithAlphaSeparated(cc_spriteTexture, blurCoordinates[0]) * 0.204164;
	    sum += CCSampleWithAlphaSeparated(cc_spriteTexture, blurCoordinates[1]) * 0.304005;
	    sum += CCSampleWithAlphaSeparated(cc_spriteTexture, blurCoordinates[2]) * 0.304005;
	    sum += CCSampleWithAlphaSeparated(cc_spriteTexture, blurCoordinates[3]) * 0.093913;
	    sum += CCSampleWithAlphaSeparated(cc_spriteTexture, blurCoordinates[4]) * 0.093913;
	    o = color * vec4(8.0/255.0, 10.0/255.0, 20.0/255.0, 1.0-sum.r);
      // o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);

      #if IS_GRAY
        float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
        o.r = o.g = o.b = gray;
      #endif
    #endif

    ALPHA_TEST(o);

    return o;
  }
}%

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState:
        cullMode: none
      properties:
        alphaThreshold: { value: 0.5 }
}%

CCProgram sprite-vs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>
  #if USE_LOCAL
    #include <builtin/uniforms/cc-local>
  #endif
  #if SAMPLE_FROM_RT
    #include <common/common-define>
  #endif

  uniform inMatrix {
    highp mat4 inTransform; 
  };

  in vec3 a_position;
  in vec2 a_texCoord;
  in vec2 a_texCoord1;
  in vec4 a_color;

  out vec4 color;
  out vec2 uv0;
  out vec2 uv1;

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);

    #if USE_LOCAL
      pos = cc_matWorld * pos;
    #endif

    #if USE_PIXEL_ALIGNMENT
      pos = cc_matView * pos;
      pos.xyz = floor(pos.xyz);
      pos = cc_matProj * pos;
    #else// Using custom ortho matrix instead of CCCamera matrix.
      pos = inTransform * pos; //cc_matViewProj *
    #endif

    uv0 = a_texCoord;
    uv1 = a_texCoord1;
    #if SAMPLE_FROM_RT
      CC_HANDLE_RT_SAMPLE_FLIP(uv0);
    #endif
    color = a_color;

    return pos;
  }
}%

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

  in vec4 color;

  uniform sampler2D mask;
  // uniform lowp float dashOffset;

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

  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
      o *= CCSampleWithAlphaSeparated(mask, uv1);
      #if IS_GRAY
        float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
        o.r = o.g = o.b = gray;
      #endif
    #endif

    o *= color;
    ALPHA_TEST(o);
    return o;
  }
}%

These are the other 2 files.

I found two warning at the start of xcode build

[WARN]: JS: WebAssembly is not supported!
[WARN]: JS: Failed to set shading scale, pipelineSceneData is invalid.

UnGamer · May 28, 2024, 11:43am

Is there any way to fix this?

EDIT:
here is the folder to reproduce the issue
shaderIssue.zip (9.0 MB)

mr.kylin · June 5, 2024, 2:35am

why did you change the layout of cc_spriteTexture?
the cc_spriteTexture is an internal sampler used by 2d render pipeline when rendering a sprite. please keep it as the origin.

UnGamer · June 5, 2024, 6:42am

Because according to this binding = 11 will cause issue in the 3.8.2 version so I had to made the change, I get
Sampler binding 'cc_spriteTexture' at set 2 binding 11 index 0 is not bounded
this error incase binding = 11

mr.kylin · June 5, 2024, 6:48am

I‘m not sure what happened, it works fine on my computer.

UnGamer · June 5, 2024, 7:00am

The problem is iOS build, Can you please take an iOS build and check if you can get that blue BG?

UnGamer · June 19, 2024, 8:35am

Any update on this issue?

A_S · June 21, 2024, 10:09am

Hello @mr.kylin , We are still unable to resolve this issue to build for iOS devices any help would be appreciated.

Thank you!

mr.kylin · June 22, 2024, 6:34am

Hi, bro.
I’m sorry to reply so late, but I’m busy with some other projects these days.
Let me check it later and give you a response.

A_S · June 28, 2024, 10:25am

Hi @mr.kylin Any update?

A_S · July 2, 2024, 10:24am

Hello @mr.kylin, I think the main reason for this not working is due to the below mat4 sent as uniform. Even if we try a simple mat4 its not working in iOS (works fine in web and android). Do you have any clue on this?

@zhangxm Do you have any idea why this is not working in iOS or anything we are doing wrong here?

In .ts we are directly setting the Mat4 like below.

let material = this.coverSprite.getSharedMaterial(0);
material.setProperty('inTransform', transform);

mr.kylin · July 8, 2024, 6:44am

I think the point is:
If you want to modify the property of a sprite’s custom material.

Try to use let material = this.coverSprite.customMaterial;

A_S · July 9, 2024, 5:31am

Hello @mr.kylin Thank you for your response.
We figured out the issue was due to the custom mat4 “inTransform” itself, there is some difference in opengl and metalAPI ortho matrix, so instead of the custom code using the cocos creator code for calculating ortho matrix fixed the issue.

mr.kylin · July 9, 2024, 6:33am

aha, Happy to hear that your problem has been resolved. That’s good!