What shader effects do you want?

Share your Construct 2 effect files

Post » Sun Jul 03, 2016 12:53 pm

Funky Koval wrote:@Gigatron

Much obliged. Thank you.



Ok if we look the code of c-dex , this blend one texture palette with the other texture. In C2 we can not have 2 texture but
if we blend some colors with texture the result is the same.
So faster than light the result is here called Color Mixer ;

Don't forget to play with sliders; R,G,B component + intensity of mixing ;
To cycle colors set intensity and change the colors .. what the c-dex do .

http://gigatron3k.free.fr/html5/C2/FX/cmixer

I don't want you waiting here is the fx file : http://gigatron3k.free.fr/html5/C2/FX/cmixer.rar
B
48
S
18
G
16
Posts: 643
Reputation: 14,577

Post » Sun Jul 03, 2016 1:39 pm

@Gigatron

Thank you for the demo. If I understand it correctly, the effect applies an offset curve to each color channel, with the overall blend controlled by the mixing slider at he bottom.

What I am after, however, is a remapping a specific luminance/brightness range to specific colors. Something like this:

Image

This is just an example, but as you can see, I'm clipping most of the luminance. The current effect would not allow me to achieve such a look.

Since Construct2 does not allow for a second texture input, what about having parameters in the effect itself, which could be used to specify the luminance position to be remapped along with the color to remap to? Something like:

Remap Black: [R,G,B]
Remap Luminance 1 Position: [value from 0-255]
Remap Luminance 1 Color: [R,G,B]
Remap Luminance 2 Position: [value from 0-255]
Remap Luminance 2 Color: [R,G,B]
etc...
Remap White: [R,G,B]

Of course, I'd keep the number of luminance positions low, definitelly below 10, not to clutter the UI. If more would be desired, a second sprite with the rest of the remapping flags could be overlaid on top with an appropriate blending mode.

This set up would give me the flexibility I need and as an additional bonus, the remapping could be fully controlled with events. What do you think, would such a setup be feasible?

Thank you again, for your time.
B
8
S
2
G
2
Posts: 85
Reputation: 1,218

Post » Sun Jul 03, 2016 2:48 pm

@Funky Koval

Ok so let's mix with the background texture palette. Here is the demo i changed .
http://gigatron3k.free.fr/html5/C2/FX/cmixer

No time to remove rgb component it's now unused just intensity is working.
fx file : http://gigatron3k.free.fr/html5/C2/FX/cmixer.rar

Set fx for front sprite and place another texture behind this one and play with intensity ;
To cycle palette move behind sprite like the demo ;

This fx is probably done or finished i think; just wait your comment ...
Regards
B
48
S
18
G
16
Posts: 643
Reputation: 14,577

Post » Sun Jul 03, 2016 4:06 pm

@Gigatron

Strange, on my side the effect looks like a Multiply blend. The intensity value just multiplies the FX sprite's colors.
The demo you posted looks like a Multiply blend on my computer as well. Could it be something with my setup? I checked the effect in Nw.Js and Firefox, WebGL enabled.

I also ran another test in Construct Classic using C-DEX and Construct2 using your Color Mixer:

My input images are:

The bottom image:
Image

The top image (the one with the Color Mixer/C-DEX effect):
Image

Result is on the right side :

In Construct Classic, using C-DEX:
Image
-correct result

In Construct2, using Color Mixer:
Image
-incorrect, looks like Multiply
B
8
S
2
G
2
Posts: 85
Reputation: 1,218

Post » Mon Jul 04, 2016 5:47 am

I have corrected this issue.. Download fx and see example demo.
http://gigatron3k.free.fr/html5/C2/FX/cmixer

http://gigatron3k.free.fr/html5/C2/FX/cmixer.rar
B
48
S
18
G
16
Posts: 643
Reputation: 14,577

Post » Mon Jul 04, 2016 2:42 pm

@Gigatron

Thank you for your continued support;

When I view your online demo, the effect still looks like Multiply. When I put the effect in Construct2 - it does not show in the editor -the Sprite is pure black. When previewed in Nw.js, the sprite with the Effect becomes invisible - it does not affect anything.

What I tried to do is to understand and modify your shader - note that I have no idea on how to write GLSL shaders - I simply tried to comprehend the math logic.

I sort-of managed to get the effect working - in the Construct2 editor - here's an image to demonstrate:

Image

If you preview the .capx, the effect looks pitch black, until you move the PaletteSprite around the scene (it's locked to the mouse position) - it seems to look fine when you move the mouse to the top left edge of the bottom SourceImage... What causes that problem is beyond me...

Here's the link to the modded .fx and the example .capx

https://we.tl/0elCj2hYH1

I changed the following:

in colormixer_MOD.xml:
<blends-background>true</blends-background> - this makes the effect preview in the editor.

in colormixer_MOD.fx:
replaced:
color.rgb = mix( color.rgb, texture2D(samplerFront, uv).rgb, intensity );
with:
color.rgb = texture2D(samplerFront, vec2(float (((color.r + color.g + color.b) / 3.0)*1.0), 0.5)).rgb;

^my hacky logic which sets the final pixel color to the PaletteSprite color at UV coordinates of U=intensity and V=0.5 (which as far as I understand can be any number - vertically the PaletteSprite pixels are identical)

The effect is almost there, I just don't have the knowledge to resolve the runtime glitching on my own.

Thanks again.
B
8
S
2
G
2
Posts: 85
Reputation: 1,218

Post » Mon Jul 04, 2016 4:52 pm

Ok i forgot many things..... sorry

(( <blends-background>true</blends-background> - this makes the effect preview in the editor.))

If the fx is almost here for you ?

"current" is declared so try this;
color.rgb = texture2D(samplerFront, vec2(current, uv.y)).rgb;

instead this : color.rgb = texture2D(samplerFront, vec2(float (((color.r + color.g + color.b) / 3.0)*1.0), 0.5)).rgb;

Mix is missing but try any way, i can add mix later with intensity...

Btw; I think this fx is not same c-dex fx.. i must meditate.. :)

With mix it become : color.rgb = mix(color.rgb,texture2D(samplerFront, vec2(uv.x, uv.y)).rgb*current,intensity);
http://gigatron3k.free.fr/html5/C2/FX/cmixer
B
48
S
18
G
16
Posts: 643
Reputation: 14,577

Post » Tue Jul 05, 2016 4:01 pm

@Gigatron

"current" is declared so try this;
color.rgb = texture2D(samplerFront, vec2(current, uv.y)).rgb


You are absolutely right. I didn't notice current is the intensity formula. I'm using it in the main function now.

I think I got the shader code itself working properly... I literally converted the C-DEX shader into GLSL the best I could... The main loop can probably be simplified, but it seems to be working fine. This means Intensity and Offset are working as well.

That strange problem still remains, where the effect will show black unless I move/drag the sprite out of the window borders... I have no idea why it happens like that or what causes it - do you have any idea what is the issue?

Here is the code:

C2-DEX.xml
Code: Select all
<?xml version="1.0" encoding="UTF-8" ?>
<c2effect>
   <!-- About -->
   <id>c2-dex</id>         <!-- A unique ID.  Change this!  Never change the ID after release - change the name instead. -->
   <name>C2-DEX</name>      <!-- The displayed name of the effect -->
   <category>Animated FX</category>   <!-- Any category can be used, but try to use one of: Color, Blend, or Distortion -->
   <description>Gradient mapping effect</description>
   <author>Gigatron and Funky Koval. Original by Tulamide.</author>
   
   <!-- Settings -->
   
   <!-- Extend the bounding box for effect processing by a number of pixels to show the edges
       of effects which go beyond the object edges, e.g. blur and warp.
       Do not set if not strictly necessay!  These options have a performance impact. -->
   <extend-box-horizontal>0</extend-box-horizontal>
   <extend-box-vertical>0</extend-box-vertical>
   
   <!-- Set to true if the background is sampled (see comments on background sampling in the .fx file) -->
   <blends-background>true</blends-background>
   
   <!-- Set to true if the background is not sampled at 1:1 with the foreground (e.g. the
       background texture co-ordinates are modified in some way by the shader, as done
       by Glass and Lens) -->
   <cross-sampling>true</cross-sampling>
   <preserves-opaqueness>false</preserves-opaqueness>
   <!-- Set to true if the effect changes by itself over time, e.g. Noise or Warp effects. -->
   <animated>true</animated>
   
   <!-- Parameters -->
   <parameters>
      
   <param>
         <name>Offset</name>
         <description>Relative offset from left to right used to animate the color palette.</description>
         <type>float</type>
         <initial>0.0</initial>
         <uniform>offset</uniform>
   </param>   
   
   <param>]
         <name>Intensity</name>
         <description>Merge the palette with the original colors by this value.</description>
         <type>float</type>
         <initial>1.0</initial>
         <uniform>intensity</uniform>
   </param>
 
    </parameters>
   
</c2effect>


C2-DEX.fx
Code: Select all
/*
 Gradient mapping effect;
 Gigatron and Funky Koval for C2. Original by Tulamide.
 V0.9 almost there
 */
 
#ifdef GL_ES
precision mediump float;
#endif

uniform mediump sampler2D samplerBack;
uniform mediump sampler2D samplerFront;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;
varying mediump vec2 vTex;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;

uniform float intensity;
uniform float offset;

void main()
{
         
   float current;
   vec4 color =  texture2D(samplerBack, mix(destStart, destEnd, vTex));
     
   color.rgb /= color.a;
   current = (color.r + color.g + color.b) / 3.;

   color.rgb = mix(color.rgb , texture2D(samplerFront, vec2(destStart.x + mod((((abs(destEnd.x - destStart.x)) * offset + ((abs(destEnd.x - destStart.x)) - pixelWidth) * current) + pixelWidth / 2.), (abs(destEnd.x - destStart.x))),destStart.y + pixelHeight / 2.)).rgb , intensity);

   color.rgb *= color.a;
   
   gl_FragColor = vec4(color);
}


I also renamed the effect to C2-DEX since it's literally a direct port of C-DEX.

It's almost there. Only the runtime glitch remains.
B
8
S
2
G
2
Posts: 85
Reputation: 1,218

Post » Tue Jul 05, 2016 5:04 pm

Good,
You are using bounds with dest.x, y etc... However there is a problem on the conversion ..
You must use vec2 uv=vTex; The mysterious Vtex mean the Sprite area;


Code: Select all
/*
 Gradient mapping effect;
 Gigatron and Funky Koval for C2. Original by Tulamide.
 V0.9 almost there
 */
 
#ifdef GL_ES
precision mediump float;
#endif

uniform mediump sampler2D samplerBack;
uniform mediump sampler2D samplerFront;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;
varying mediump vec2 vTex;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;

uniform float intensity;
uniform float offset;

void main()
{
       vec2 uv=vTex;
   float current;
   vec4 color =  texture2D(samplerBack, mix(destStart, destEnd, vTex));
     
   color.rgb /= color.a;
   current = (color.r + color.g + color.b) / 3.;

   color.rgb = mix(color.rgb , texture2D(samplerFront, vec2(destStart.x + mod((((abs(destEnd.x - destStart.x)) * offset + ((abs(destEnd.x - destStart.x)) - pixelWidth) * current) + pixelWidth / 2.), (abs(destEnd.x - destStart.x))),destStart.y + pixelHeight / 2.)).rgb , intensity);

   color.rgb *= color.a;
   
   gl_FragColor = vec4(color);
}


and we have problem in the vertical position of texture .... after the second ","
here : , (abs(destEnd.x - destStart.x))),destStart.y + pixelHeight / 2.)).rgb , intensity);
After declaring vec2 uv=vTex;
Try this :
Code: Select all
color.rgb = mix(color.rgb , texture2D(samplerFront, vec2(destStart.x + mod((((abs(destEnd.x - destStart.x)) * offset + ((abs(destEnd.x - destStart.x)) - pixelWidth) * current) + pixelWidth / 2.), (abs(destEnd.x - destStart.x))),uv.y + pixelHeight / 2.)).rgb , intensity);
B
48
S
18
G
16
Posts: 643
Reputation: 14,577

Post » Wed Jul 06, 2016 8:08 am

So ... let's lforget samplerback and dest.x, y and others...
But finally .. i found what exactly C-Dex do .. i found the demo.exe now ... sorry for this not saw !


Code: Select all
void main()
{
   vec2 uv = vTex;
   
   float cr;
    vec4 cl= vec4(uv.y*sin(seconds),uv.y*sin(seconds*2.),uv.y*sin(seconds*4.),1.0); // gradient start
      
    vec4 tc= texture2D(samplerFront,uv);
         
     cl.rgb /= cl.a;
     cr = (cl.r + cl.g + cl.b)/3.0 ;
    cl.rgb *= cl.a;
 
    float mixer = dot(tc.rgb*cr, vec3(1.0, 1.0, 1.0));
     
    gl_FragColor = mix(vec4(cl.rgb, 1.0), vec4(rred,ggreen,bblue,1.0), mixer);
//                                 ^^   ^                       ^^
//                                      gradient start , gradient end

}


I am very tired now will continue to add palette sooon ;
B
48
S
18
G
16
Posts: 643
Reputation: 14,577

PreviousNext

Return to Effects

Who is online

Users browsing this forum: Gigatron and 0 guests