ZebraRoy

Members
  • Content Count

    11
  • Joined

  • Last visited

  • Days Won

    1

ZebraRoy last won the day on November 13 2019

ZebraRoy had the most liked content!

About ZebraRoy

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. ZebraRoy

    Filter Buffer

    It will be great, didn't notice there is a slack channel for pixi I will email to you then
  2. ZebraRoy

    Filter Buffer

    By using the render texture as buffer, I created this effect using this shadertoy buffer example
  3. ZebraRoy

    Filter Buffer

    Thanks ivan, the example https://www.pixiplayground.com/#/edit/WHVpFCdiTiTe70dJvahf8 is exactly what i want
  4. ZebraRoy

    Filter Buffer

    How can I use the buffer function in filters? I want to do something like this
  5. I am using v4 I have changed the formula a little bit and it is exact match with photoshop now Currently, I just hard code the alpha in the frag. Is there any way I can pass a uniform into mapFilterBlendModesToPixi? const overlayFrag = ` varying vec2 vTextureCoord; varying vec2 vMapCoord; varying vec4 vColor; uniform sampler2D uSampler[2]; uniform vec4 uColor; uniform float alpha; %SPRITE_UNIFORMS% vec3 colorBurn(vec3 lower, vec3 upper, float opacity){ return 1.0 - (( 1.0 - lower ) / ( 1.0 + opacity * upper - opacity )); } void main(void) { %SPRITE_CODE% vec4 source = texture2D(uSampler[0], textureCoord) * uColor; vec4 target = texture2D(uSampler[1], vMapCoord); //reverse hardlight if (source.a == 0.0) { gl_FragColor = vec4(0, 0, 0, 0); return; } vec3 Cb = source.rgb/source.a, Cs; if (target.a > 0.0) { Cs = target.rgb / target.a; } gl_FragColor = vec4(colorBurn(Cs, Cb, 1.0 - alpha), 1.0); } `;
  6. Oh, I found the problem now The colorBurn logic haven't handle the opacity, after I change the logic into this one, it works now: const overlayFrag = ` varying vec2 vTextureCoord; varying vec2 vMapCoord; varying vec4 vColor; uniform sampler2D uSampler[2]; uniform vec4 uColor; uniform float alpha; %SPRITE_UNIFORMS% vec3 colorBurn (vec3 target, vec3 blend, float opacity){ return 1.0 - (1.0 - (opacity * target + (1.0 - opacity)))/ blend; } void main(void) { %SPRITE_CODE% vec4 source = texture2D(uSampler[0], textureCoord) * uColor; vec4 target = texture2D(uSampler[1], vMapCoord); //reverse hardlight if (source.a == 0.0) { gl_FragColor = vec4(0, 0, 0, 0); return; } vec4 res; res.rgb = colorBurn(target.rgb, source.rgb, alpha); res.a = 1.0; gl_FragColor = vec4(res.xyz * res.a, res.a); } `;
  7. I have tried pixi-picture and using the formula from https://www.shadertoy.com/view/4tSGWV But the result doesn't seem like what I get from photoshop Below is the shader I use: const overlayFrag = ` varying vec2 vTextureCoord; varying vec2 vMapCoord; varying vec4 vColor; uniform sampler2D uSampler[2]; uniform vec4 uColor; %SPRITE_UNIFORMS% vec3 colorBurn (vec3 target, vec3 blend){ return 1.0 - (1.0 - target)/ blend; } void main(void) { %SPRITE_CODE% vec4 source = texture2D(uSampler[0], textureCoord) * uColor; vec4 target = texture2D(uSampler[1], vMapCoord); //reverse hardlight if (source.a == 0.0) { gl_FragColor = vec4(0, 0, 0, 0); return; } vec4 res; res.rgb = colorBurn(target.rgb, source.rgb); res.a = source.a + target.a * (1.0-source.a); gl_FragColor = vec4(res.xyz * res.a, res.a); } `;
  8. Thanks ivan, I found the solution now, I use Plane instead of Rope to solve the turn issue
  9. What do you mean by shift? I am not that familiar with mesh, is that something like this? This is the problem i am facing:
  10. I want to create a light trail effect of the border of the popup, the effect is similar to this: I tried with rope + sprite animation, however, the glow around the texture will become very weird when the trail has a 90 degree turn I heard that shader can handle something like this, but I have no idea how to do that Anyone has a idea?