Learn how to convert a Shadertoy shader for Cocos Creator 3.8.6 (Net construct)? – Cocos Creator

Hello everybody,

I’m at present utilizing Cocos Creator 3.8.6, and I’m concentrating on a Net construct (WebGL) for my undertaking.

I’m making an attempt to transform a shader from Shadertoy to make use of it inside Cocos Creator, however I’m unsure how one can correctly translate the shader code or arrange the required uniforms.

Shader I’m making an attempt to transform:

I perceive that Cocos Creator makes use of .impact recordsdata and a barely completely different shader construction, so I’m a bit misplaced on how one can adapt this GLSL code.

Listed below are some particular questions I’ve:

1. How ought to I map mainImage(out vec4 fragColor, in vec2 fragCoord) from Shadertoy into Cocos Creator’s shader pipeline?
2. How do I correctly outline and go uniforms like iTime and iResolution in Cocos Creator?
3. What’s the beneficial method to use this type of shader to a Sprite or fullscreen quad in Cocos Creator?

If anybody has expertise changing Shadertoy shaders into Cocos Creator (particularly for internet builds), I might tremendously admire your steering.

Thanks prematurely!

I’ve created this worm-hole.impact file

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

CCProgram sprite-vs %{
  precision highp float;
  #embody 
  #if USE_LOCAL
    #embody 
  #endif
  #if SAMPLE_FROM_RT
    #embody 
  #endif
  in vec3 a_position;
  in vec2 a_texCoord;
  in vec4 a_color;

  out vec4 colour;
  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 = ground(pos.xyz);
      pos = cc_matProj * pos;
    #else
      pos = cc_matViewProj * pos;
    #endif

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

    return pos;
  }
}%

CCProgram sprite-fs %{
  precision highp float;
  #embody 
  #embody 

  // embody cc-global for cc_time and common-define for PI
  #embody 
  #embody 

  in vec4 colour;

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

  // outline uniform fixed right here
  uniform Fixed {
    vec2 decision;
  };

  vec2 Rot(vec2 v, float angle)
  {
    return vec2(v.x * cos(angle) + v.y * sin(angle),
        v.y * cos(angle) - v.x * sin(angle));
  }

  vec3 DrawStar(float len, float angle)
  {
    vec3 baseColor = vec3(0.0, 0.3, 0.7);
    float fre1 = 30.0;
    float fre2 = 20.0;
    float radius = 0.03;
    float m = radius / (radius + abs(sin(len * fre1 * 1.0 - 0.5 * cc_time.x)));
    float n = radius / (radius + abs(sin(angle * fre2 + len * 100.0)));
    float f6 = max(m * n - 0.1 * len, 0.0) * 100.0;
    return baseColor * f6;
  }

  float map(float l)
  {
    float lm = 1.0;
    l = clamp(1e-1, l, l);
    float lm2 = lm * lm;
    float lm4 = lm2 * lm2;
    return sqrt(lm4 / (l * l) + lm2);
    // return 1.0/(l+1e-5);
  }
  vec3 DrawCloud(float dis, float angle, vec2 coord)
  {
    vec3 baseColor = vec3(0.0, 0.0, 0.0);
    vec3 cloudColor = vec3(0.0, 0.3, 0.7);
    float x = angle + dis;
    float fre = 2.0;
    float ap = 1.0;
    float d = float(0.0);
    coord = Rot(coord, 0.3 * cc_time.x);
    vec3 kp = vec3(coord * max(dis, 1.0), dis);
    for (int i = 1; i  decision.y) {
      coord.x *= decision.x / decision.y;
    } else {
      coord.y /= decision.x / decision.y;
    }
    
    vec3 baseColor = Render(coord);
    o = vec4(baseColor * 1.3, 1.0);
    ALPHA_TEST(o);
    return o;
  }
}%

Cocos have builtiin for iTime uniform which is cc_time.x. You possibly can embody cc-global and use cc_time.x immediately
I uncovered the decision uniform so I can go it through typescript
I created the element WormHole.ts to go the uniform to the fabric like this:

@ccclass("WormHole")
export class WormHole extends Element {
	materials: Materials = null;

	onLoad() {
		this.materials = this.getComponent(Sprite).sharedMaterial;
	}

  begin() {
		const textureSize = this.getComponent(UITransform).contentSize;
		this.materials.setProperty('decision', v2(textureSize.x, textureSize.y));
	}
}

Subsequent step is create the fabric based mostly on the impact file. Then create a sprite and assign the fabric simply created to it. Be certain the sprite element have any sprite body on it, I like to recommend copy the builtin default_sprite_splash texture and uncheck packable (if Packable is true you will note the impact very completely different in preview mode and editor). Lastly I added the element to the Sprite.

Hope this assist!