[EFFECT]- webglSphere+Glsl version

Share your Construct 2 effect files

Post » Sun Jan 29, 2017 6:06 pm

Ok i will convert this online here ;)

Look and compare changed source from the original;

1 - i must have an .xml file first ; eg : glitch.xml contains uniform variables to communicate between C2 and glsl main code here ;
2 - glitch.xml and glitch.fx ;




Code: Select all
// Global header for all C2 FX i use ;

#ifdef GL_ES
precision mediump float;
#endif

uniform mediump sampler2D samplerBack;
uniform mediump sampler2D samplerFront;
varying mediump vec2 vTex;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;
uniform mediump float seconds;
uniform mediump float date;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;
vec2 iResolution = vec2( 1./pixelWidth, 1./pixelHeight);

uniform float xx;   /// USED in place of iMouse.x    .. to communicate with shader variable so
                                // include  xx to .xml file with float 

// No change here

float sat( float t ) {
   return clamp( t, 0.0, 1.0 );
}

vec2 sat( vec2 t ) {
   return clamp( t, 0.0, 1.0 );
}

//remaps inteval [a;b] to [0;1]
float remap  ( float t, float a, float b ) {
   return sat( (t - a) / (b - a) );
}

//note: /\ t=[0;0.5;1], y=[0;1;0]
float linterp( float t ) {
   return sat( 1.0 - abs( 2.0*t - 1.0 ) );
}

vec3 spectrum_offset( float t ) {
   vec3 ret;
   float lo = step(t,0.5);
   float hi = 1.0-lo;
   float w = linterp( remap( t, 1.0/6.0, 5.0/6.0 ) );
   float neg_w = 1.0-w;
   ret = vec3(lo,1.0,hi) * vec3(neg_w, w, neg_w);
   return pow( ret, vec3(1.0/2.2) );
}

//note: [0;1]
float rand( vec2 n ) {
  return fract(sin(dot(n.xy, vec2(12.9898, 78.233)))* 43758.5453);
}

//note: [-1;1]
float srand( vec2 n ) {
   return rand(n) * 2.0 - 1.0;
}

float trunc( float x, float num_levels )
{
   return floor(x*num_levels) / num_levels;
}
vec2 trunc( vec2 x, float num_levels )
{
   return floor(x*num_levels) / num_levels;
}

// Main loop  fx running here at 60 fps

/// let's adapt to c2

void main()      /// changed
{
   vec2 uv = vTex;    ///    change from :  fragCoord.xy / iResolution.xy; 
                                 ///   vTex is the sprite area we used to assign FX .
    uv.y = 1.0 - uv.y; ///  Flip  Y if texture is inversed .....  comment this if so
   
   float time = mod(seconds, 32.0); // + modelmat[0].x + modelmat[0].z;  //// Change iGlobalTime to seconds

   float GLITCH = 0.1 + xx / iResolution.x;   /// iMouse not exist but assign a variable like uniform float xx
                                                                          ///  and replace iMouse
   
   float gnm = sat( GLITCH );
   float rnd0 = rand( trunc( vec2(time, time), 6.0 ) );
   float r0 = sat((1.0-gnm)*0.7 + rnd0);
   float rnd1 = rand( vec2(trunc( uv.x, 10.0*r0 ), time) ); //horz
   //float r1 = 1.0f - sat( (1.0f-gnm)*0.5f + rnd1 );
   float r1 = 0.5 - 0.5 * gnm + rnd1;
   r1 = 1.0 - max( 0.0, ((r1<1.0) ? r1 : 0.9999999) ); //note: weird ass bug on old drivers
   float rnd2 = rand( vec2(trunc( uv.y, 40.0*r1 ), time) ); //vert
   float r2 = sat( rnd2 );

   float rnd3 = rand( vec2(trunc( uv.y, 10.0*r0 ), time) );
   float r3 = (1.0-sat(rnd3+0.8)) - 0.1;

   float pxrnd = rand( uv + time );

   float ofs = 0.05 * r2 * GLITCH * ( rnd0 > 0.5 ? 1.0 : -1.0 );
   ofs += 0.5 * pxrnd * ofs;

   uv.y += 0.1 * r3 * GLITCH;

    const int NUM_SAMPLES = 10;
    const float RCP_NUM_SAMPLES_F = 1.0 / float(NUM_SAMPLES);
   
   vec4 sum = vec4(0.0);
   vec3 wsum = vec3(0.0);
   for( int i=0; i<NUM_SAMPLES; ++i )
   {
      float t = float(i) * RCP_NUM_SAMPLES_F;
      uv.x = sat( uv.x + ofs * t );
      vec4 samplecol = texture2D( samplerFront, uv, -10.0 );    /// iChannel0 not exist assign to samplerFront
      vec3 s = spectrum_offset( t );
      samplecol.rgb = samplecol.rgb * s;
      sum += samplecol;
      wsum += s;
   }
   sum.rgb /= wsum;
   sum.a *= RCP_NUM_SAMPLES_F;

   gl_FragColor.a = sum.a;                                    /// replace fragColor with gl_FragColor.a
   gl_FragColor.rgb = sum.rgb; // * outcol0.a;   // replace this one too
}
Last edited by Gigatron on Sun Jan 29, 2017 6:16 pm, edited 1 time in total.
http://gigatron3k.free.fr/Intro/

https://www.shadertoy.com/user/gigatron

https://twitter.com/realistquantum

Ezekiel 1-4 ; ufo landing explanation ..

CONSTRUCT 2 THE ONLY FAST WAY TO HTML5

Image
B
56
S
20
G
29
Posts: 797
Reputation: 21,930

Post » Sun Jan 29, 2017 6:13 pm

@irbis
And i think i ve allready converted this one here ;

http://gigatron3k.free.fr/html5/C2/FX/glitchs_fx.rar
http://gigatron3k.free.fr/Intro/

https://www.shadertoy.com/user/gigatron

https://twitter.com/realistquantum

Ezekiel 1-4 ; ufo landing explanation ..

CONSTRUCT 2 THE ONLY FAST WAY TO HTML5

Image
B
56
S
20
G
29
Posts: 797
Reputation: 21,930

Post » Mon Jan 30, 2017 7:44 am

Gigatron wrote:@irbis
And i think i ve allready converted this one here ;

http://gigatron3k.free.fr/html5/C2/FX/glitchs_fx.rar

Bloody hell, its so hard to catch you by surprise Giga! You are always one step ahead :D
Awesome work as always.
Hmm, alright. How about teaching me how to convert THIS one?
https://www.shadertoy.com/view/4sX3RN
Code: Select all
// based on https://www.shadertoy.com/view/lsf3RH by
// trisomie21 (THANKS!)
// My apologies for the ugly code.

float mod289(float x)
{
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x)
{
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 perm(vec4 x)
{
    return mod289(((x * 34.0) + 1.0) * x);
}

float noise3d(vec3 p)
{
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   vec2 uv = fragCoord.xy / iResolution.xy;
   float v1 = noise3d(vec3(uv * 10.0, 0.0));
   float v2 = noise3d(vec3(uv * 10.0, 1.0));
   
   vec4 color  = texture2D(iChannel0, uv + vec2(v1, v2) * 0.1);
   fragColor = color;
}
B
28
S
8
G
7
Posts: 643
Reputation: 6,457

Post » Mon Jan 30, 2017 8:25 am

@irbis This one is simple than other;

Code: Select all
 
#ifdef GL_ES
precision mediump float;
#endif

uniform mediump sampler2D samplerBack;
uniform mediump sampler2D samplerFront;
varying mediump vec2 vTex;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;
uniform mediump float seconds;
uniform mediump float date;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;
vec2 iResolution = vec2( 1./pixelWidth, 1./pixelHeight);

float mod289(float x)
{
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x)
{
    return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 perm(vec4 x)
{
    return mod289(((x * 34.0) + 1.0) * x);
}

float noise3d(vec3 p)
{
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}

void main()
{
   vec2 uv = vTex;
   float v1 = noise3d(vec3(uv * 10.0, 0.0));   // we can play with 10.0 to replace it
                                                                          // by uniform float x   ;  noise3d(vec3(uv * x, 0.0));
   float v2 = noise3d(vec3(uv * 10.0, 1.0));  // this for y ;  noise3d(vec3(uv * y, 1.0));
   
   vec4 color  = texture2D(samplerFront, uv + vec2(v1, v2) * 0.1);
   gl_FragColor = color;
}


Note: For IOS ; it's important to initialize variables correctly, and right code;
For example ; for last line this work too : gl_FragColor = vec4(color);
http://gigatron3k.free.fr/Intro/

https://www.shadertoy.com/user/gigatron

https://twitter.com/realistquantum

Ezekiel 1-4 ; ufo landing explanation ..

CONSTRUCT 2 THE ONLY FAST WAY TO HTML5

Image
B
56
S
20
G
29
Posts: 797
Reputation: 21,930

Post » Mon Jan 30, 2017 9:35 am

Gigatron wrote:@irbis This one is simple than other;

Note: For IOS ; it's important to initialize variables correctly, and right code;
For example ; for last line this work too : gl_FragColor = vec4(color);

Very interesting! Both codes, when put one next to another, doesn't look that much different.
All the difference I can spot are syntax/naming and that, in C2 version, you just have declare the variables and parameters at the start. Am I correct or missing something?

Out of pure curiosity - would it be possible to create a GLSL->C2 code converter/translator?
B
28
S
8
G
7
Posts: 643
Reputation: 6,457

Post » Mon Jan 30, 2017 9:45 am

irbis wrote:.......Out of pure curiosity - would it be possible to create a GLSL->C2 code converter/translator?


@irbis

Gigatron has already created his own converter HERE but it still needs work, and sometimes quite a bit!
If your vision so exceeds your ability, then look to something closer.
Moderator
B
129
S
29
G
78
Posts: 5,200
Reputation: 54,807

Post » Mon Jan 30, 2017 9:54 am

zenox98 wrote:
irbis wrote:.......Out of pure curiosity - would it be possible to create a GLSL->C2 code converter/translator?


@irbis

Gigatron has already created his own converter HERE but it still needs work, and sometimes quite a bit!

Oh wow! How come I never heard about this one?!?! :o
What do you mean by "still needs work, and sometimes quite a bit!"? Aka how reliable the converter is right now?

I mean, after all those years - I feels kind a guilty and unfair asking Giga every single time for a new shader. If this converter would be more polished and well known - it would benefit both the community and Giga. You know, to not bother him with simple shaders. No one's paying him for all those years of hard work so we could at least lift some weight off his shoulders.
B
28
S
8
G
7
Posts: 643
Reputation: 6,457

Post » Mon Jan 30, 2017 10:03 am

Try it with a few examples from Shadertoy and you will soon realize it's limitations. You still need to have a good understanding of shaders.

Gigatron has already mentioned previously that he has spent a long time understanding how shaders work in order to get to his current level. As always, the only secret to things like this is hard work.
Having a natural propensity for such things probably helps as well :)
If your vision so exceeds your ability, then look to something closer.
Moderator
B
129
S
29
G
78
Posts: 5,200
Reputation: 54,807

Post » Mon Jan 30, 2017 10:16 am

zenox98 wrote:Try it with a few examples from Shadertoy and you will soon realize it's limitations. You still need to have a good understanding of shaders.

Gigatron has already mentioned previously that he has spent a long time understanding how shaders work in order to get to his current level. As always, the only secret to things like this is hard work.
Having a natural propensity for such things probably helps as well :)

Ahh bummer :(
I mean, at the converter limitations, not working hard heh.
B
28
S
8
G
7
Posts: 643
Reputation: 6,457

Post » Mon Mar 06, 2017 1:48 pm

Hello.
What are the dimensions for the image?
Because I have only half of the planet, the rest is a trail of texture!
Thank you.
B
4
S
1
Posts: 33
Reputation: 416

PreviousNext

Return to Effects

Who is online

Users browsing this forum: No registered users and 0 guests