GLSL Error in CocosCreator

Cocos Creator
#1

Hi!
Friends.

I want to implement glow shader for 2d image program.

However it is not correct behaviour glow radius and strength are passed via uniform variable.

It is correct behaviour if not use uniform variable.(expected image)

I need to impl same implementation via uniform variable.

please tell me information.

// glow sample
// https://discuss.cocos2d-x.org/t/how-to-make-a-glow-or-outline-effect/32554/6

%{
  techniques: [
    {
      passes: [
        {
          vert: vs
          frag: fs:before
          cullMode: none
          blend: true
        },
        {
           vert: vs
          frag: fs:after
          cullMode: none
          blend: true
        }
      ]
      layer: 0
    }
  ]
  properties: {
    texture: {
      type: sampler2D
      value: null
    }
    alphaThreshold: {
      type: number
      value: 0.5
    }
    widthStep: {
      type: number
      value: 0.0
    }
    heightStep: {
      type: number
      value: 0.0
    }
    strength: {
      type: number
      value: 0.0
    }
    blurPixelLength: {
      type: number,
      value: 8.0
    }
    blurRadius: {
      type: number,
      value: 5.5
    }
  }
%}

%% vs {

precision highp float;

uniform mat4 cc_matViewProj;

#if _USE_MODEL
  uniform mat4 cc_matWorld;
#endif

attribute vec3 a_position;
attribute lowp vec4 a_color;

#if USE_TEXTURE
  attribute mediump vec2 a_uv0;
  varying mediump vec2 v_uv0;
#endif

varying lowp vec4 v_color;

void main () {
  mat4 mvp;
  
  #if _USE_MODEL
    mvp = cc_matViewProj * cc_matWorld;
  #else
    mvp = cc_matViewProj;
  #endif

  #if USE_TEXTURE
    v_uv0 = a_uv0;
  #endif

  v_color = a_color;

  gl_Position = mvp * vec4(a_position, 1);
}

}

%% fs {

precision highp float;

#if USE_TEXTURE
  uniform sampler2D texture;
  varying mediump vec2 v_uv0;
#endif

#include <alpha-test>

varying lowp vec4 v_color;

uniform highp float alphaThreshold;

uniform highp float widthStep;
uniform highp float heightStep;
uniform highp float strength;

uniform highp float blurPixelLength;
uniform highp float blurRadius;

// // // for Sprite
// const float blurRadius = 5.5;
// const float blurPixelLength = 8.0;


vec4 before () {
  float blurPixels = (blurRadius * 2.0 + 8.0) * (blurRadius * 2.0 + 8.0);
  vec4 color = v_color;

  #if USE_TEXTURE
    color *= texture2D(texture, v_uv0);
    #if _USE_ETC1_TEXTURE
      color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
    #endif
  #endif

  vec4 texColor = texture2D(texture, v_uv0);

  float outlineAlpha = 0.0;

  float fy = -blurRadius;
  float fx = -blurRadius;

  for(highp float i = 0.0; i < 1.0; i += 0.0) {
    if(fy >= blurRadius){
      break;
    }
    for(highp float j = 0.0; j < 1.0; j += 0.0){
      if(fx >= blurRadius) {
        break;
      }
      vec2 coord = vec2(fx * widthStep, fy * heightStep);
      vec4 sample = texture2D(texture, v_uv0 + coord);
      outlineAlpha += sample.a;
      fx+=1.0;
    }
    fy+=1.0;
  }

  //  for(float fy = -blurRadius; fy <= blurRadius; fy+=1.0) {
  //   for(float fx = -blurRadius; fx <= blurRadius; fx+=1.0) {
  //     vec2 coord = vec2(fx * widthStep, fy * heightStep);
  //     vec4 sample = texture2D(texture, v_uv0 + coord);
  //     outlineAlpha += sample.a;
  //   }
  // }
  
  outlineAlpha = 1.0 - pow(1.0 - outlineAlpha * 2.0 / blurPixels, strength);
  outlineAlpha = clamp(outlineAlpha, 0.0, 1.0);

  vec4 outlineColor = vec4(1.0, 0.0, 0.0, 1.0);
  vec4 res = mix(texColor, outlineColor, outlineAlpha);

  // ALPHA_TEST(res);

  radius = blurRadius;
  _length = blurPixelLength;
  
  return res;
}

vec4 after() {
  return texture2D(texture, v_uv0);
}

}

actual

image
image973×610 37.3 KB

expected

image

#2

It’s solved because loop counter should be reset on end.

#3

Show us the result please.

#4

it’s resolved code.


// glow sample
// https://discuss.cocos2d-x.org/t/how-to-make-a-glow-or-outline-effect/32554/6

%{
  techniques: [
    {
      passes: [
        {
          vert: vs
          frag: fs:before
          cullMode: none
          blend: true
        },
        {
           vert: vs
          frag: fs:after
          cullMode: none
          blend: true
        }
      ]
      layer: 0
    }
  ]
  properties: {
    texture: {
      type: sampler2D
      value: null
    }
    alphaThreshold: {
      type: number
      value: 0.5
    }
    widthStep: {
      type: number
      value: 0.0
    }
    heightStep: {
      type: number
      value: 0.0
    }
    strength: {
      type: number
      value: 0.0
    }
    blurPixelLength: {
      type: number,
      value: 8.0
    }
    blurRadius: {
      type: number,
      value: 5.5
    }
    glowColor: {
      type: color4
      value: [1,0,0,1]
    }
  }
%}

%% vs {

precision highp float;

uniform mat4 cc_matViewProj;

#if _USE_MODEL
  uniform mat4 cc_matWorld;
#endif

attribute vec3 a_position;
attribute lowp vec4 a_color;

#if USE_TEXTURE
  attribute mediump vec2 a_uv0;
  varying mediump vec2 v_uv0;
#endif

varying lowp vec4 v_color;

void main () {
  mat4 mvp;
  
  #if _USE_MODEL
    mvp = cc_matViewProj * cc_matWorld;
  #else
    mvp = cc_matViewProj;
  #endif

  #if USE_TEXTURE
    v_uv0 = a_uv0;
  #endif

  v_color = a_color;

  gl_Position = mvp * vec4(a_position, 1);
}

}

%% fs {

precision mediump float;

#if USE_TEXTURE
  uniform sampler2D texture;
  varying mediump vec2 v_uv0;
#endif

#include <alpha-test>

varying lowp vec4 v_color;

uniform float alphaThreshold;

uniform float widthStep;
uniform float heightStep;
uniform float strength;
uniform vec4 glowColor;
uniform float blurPixelLength;
uniform float blurRadius;

vec4 before () {
  float blurPixels = (blurRadius * 2.0 + blurPixelLength) * (blurRadius * 2.0 + blurPixelLength);
  vec4 color = v_color;

  #if USE_TEXTURE
    color *= texture2D(texture, v_uv0);
    #if _USE_ETC1_TEXTURE
      color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
    #endif
  #endif

  vec4 texColor = texture2D(texture, v_uv0);

  float outlineAlpha = 0.0;

  float fy = -blurRadius;
  float fx = -blurRadius;

  for(int i = 0; i < 50; i++) {
    if(fy >= blurRadius){
      break;
    }
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Important !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    fx = -blurRadius;
    for(int j = 0; j < 50; j++){
      if(fx >= blurRadius) {
        break;
      }
      vec2 coord = vec2(fx * widthStep, fy * heightStep);
      vec4 sample = texture2D(texture, v_uv0 + coord);
      outlineAlpha += sample.a;
      fx+=1.0;
    }
    fy+=1.0;
  }
  
  outlineAlpha = 1.0 - pow(1.0 - outlineAlpha * 2.0 / blurPixels, strength);
  outlineAlpha = clamp(outlineAlpha, 0.0, 1.0);

  vec4 res = mix(texColor, glowColor, outlineAlpha);
  
  return res;
}

vec4 after() {
  return texture2D(texture, v_uv0);
}

}
1 Like
#5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.