What shader effects do you want?

  • 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:

    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.

  • 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

  • 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:

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

    Result is on the right side :

    In Construct Classic, using C-DEX:

    -correct result

    In Construct2, using Color Mixer:

    -incorrect, looks like Multiply

  • 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

  • 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:

    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.

  • 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.. <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

    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

  • Gigatron

    [quote:2hga204e]"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

    <?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>
    [/code:2hga204e]
    
    [b]C2-DEX.fx[/b]
    [code:2hga204e]
    /* 
     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);
    }
    [/code:2hga204e]
    
    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.
  • 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;

    /*
     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);
    }[/code:1y1o9kha]
    
    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:1y1o9kha]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);[/code:1y1o9kha]
  • 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 !

    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 
    
    }[/code:35hia245]
    
    I am very tired now will continue to add palette sooon ;
  • I think I understand how you're doing it, but how will it handle cases whre the remap palette is not a simple two-color gradient? Like that sushi cat image I posted?

    Anyway, I'll wait for your shader and try to disect it. Thanks again.

  • Gigatron

    I've managed to get a full-window version of C2-DEX working well. There are still a few minor issues that do not inhibit the basic functionality of the effect which I'd like to resolve, but it is more or less ready for people to test. I'll post it in its own thread to stop spamming this one, since it's a request theread, but I am eagerly awaiting your version.

  • Gigatron

    I've managed to get a full-window version of C2-DEX working well. There are still a few minor issues that do not inhibit the basic functionality of the effect which I'd like to resolve, but it is more or less ready for people to test. I'll post it in its own thread to stop spamming this one, since it's a request theread, but I am eagerly awaiting your version.

    sorry but mine is completely diffent i think <img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Sad">

    in fact i know what c-dex do,

    not finished gradient mix based demo ; this demo use entire gradient color

    this is the reason why it's different but i can achieve this easily .

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

  • Ok ... after lost against Portugal, i decided to analyze deeply the Cdex glsl,

    the correct conversion near %99 is here :

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

    instead mixing textured palette with texture ; here is mixing glsl gradient with texture..

    will send this glsl to you soon ;

  • add a color value to the vignette effect. That would make it much more useful!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • add a color value to the vignette effect. That would make it much more useful!

    blurymind

    can you draw an example image ? then i will study the situation ;

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)