What shader effects do you want?

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!

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 ;

Gigatron

[quote:phb8iiij]instead mixing textured palette with texture ; here is mixing glsl gradient with texture..

will send this glsl to you soon ;

Yup. This will settle the out-of-screen sampling problem. I'm doing something similar, but the problem I have is a compact UI for more than two colors - ideally one color is 4 floats, R G B and position, so the UI gets cluttered. Unless it's possible to send vectors from C2 to the shaders... I only saw floats and percentages though...

i am on smarphone

try to convert rgb to float..

for red (255.0,0.0,0.0)/255.0

c2 only use float or percent