[EFFECT]- webglSphere+Glsl version

Post reply
0 favourites
From the Asset Store
Create a Space Shooter Game (with free version of construct)
$3 USD
Fully commented source code/event sheet & sprites to create a space shooter game
xanderwood's avatar
xanderwood

  • Gigatron

    How to fix this? Padding

  • I have allready fixed this.. and sent by pm...

  • I have allready fixed this.. and sent by pm...

    my bad then il have a perfect fake 3d pool game.

    also the one im using is the spheremat? i think, cause glsl wold make a surtain black to be transparent and a surtain red/dark red to be transparent, but i found a % around the transparency in C2 and it worked, however im using spheremat, cause the rotation stop and the ball effect still shows even if no rotation is applied.

    many thanks FX Senpai!

  • Well... the distortion sure does work Gigatron

    The problem is elsewhere. Look at here

    Compare how the texture looks and how it looks after shader.

    Everything is a bit oversaturated and overexposed (too white/bright).

    Why is that? And can you get rid of it? I've noticed its visible on your "mars" example too.

    The texture is dark and detailed when the sphere version is bright as sun

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Well... the distortion sure does work Gigatron

    Compare how the texture looks and how it looks after shader.

    Everything is a bit oversaturated and overexposed (too white/bright).

    Why is that? And can you get rid of it? I've noticed its visible on your "mars" example too.

    The texture is dark and detailed when the sphere version is bright as sun

    It's not hard to correct this , unfortunately i ve done many change on this shader ...So

    can you PM me the shader you use ? i will modify this one ...

    Thanks

  • > Well... the distortion sure does work Gigatron

    >

    > Compare how the texture looks and how it looks after shader.

    > Everything is a bit oversaturated and overexposed (too white/bright).

    > Why is that? And can you get rid of it? I've noticed its visible on your "mars" example too.

    > The texture is dark and detailed when the sphere version is bright as sun

    >

    It's not hard to correct this , unfortunately i ve done many change on this shader ...So

    can you PM me the shader you use ? i will modify this one ...

    Thanks

    I've played a bit with Chris's 2nd version and somehow made that one work hehe ^^

    But holy cow - working with C2 shaders is no fun

    At least I've learned how to modify any shader to enable/add more options

  • [quote:31ncov9u]I've played a bit with Chris's 2nd version and somehow made that one work hehe ^^

    But holy cow - working with C2 shaders is no fun

    At least I've learned how to modify any shader to enable/add more options

    Be sure it's really easy ... after long time study

    For online test use shadertoy if it's ok .. convert it to C2 ... etc

  • [quote:2bn7t11l]I've played a bit with Chris's 2nd version and somehow made that one work hehe ^^

    But holy cow - working with C2 shaders is no fun

    At least I've learned how to modify any shader to enable/add more options

    Be sure it's really easy ... after long time study

    For online test use shadertoy if it's ok .. convert it to C2 ... etc

    no idea how to convert/import those to C2

  • Irbis

    Select a shader , and i will try to explain step by step to Convert that to C2 ..

    Regards

  • Irbis

    Select a shader , and i will try to explain step by step to Convert that to C2 ..

    Regards

    hah! easy to say! If I would have a magic lamp with a genie inside - I would ask him for ALL of shadertoy's shaders to get ported to C2 <img src="{SMILIES_PATH}/icon_e_biggrin.gif" alt=":D" title="Very Happy">

    Lets try with something funky, I would kill to get a C2 version of this!~ <3

    https://www.shadertoy.com/view/lsfGD2

    or is it too advanced for me? <img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Sad">

    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;
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec2 uv = fragCoord.xy / iResolution.xy;
    uv.y = 1.0 - uv.y;
	
	float time = mod(iGlobalTime, 32.0); // + modelmat[0].x + modelmat[0].z;

	float GLITCH = 0.1 + iMouse.x / iResolution.x;
	
	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( iChannel0, uv, -10.0 );
		vec3 s = spectrum_offset( t );
		samplecol.rgb = samplecol.rgb * s;
		sum += samplecol;
		wsum += s;
	}
	sum.rgb /= wsum;
	sum.a *= RCP_NUM_SAMPLES_F;

	fragColor.a = sum.a;
	fragColor.rgb = sum.rgb; // * outcol0.a;
}
[/code:1jjzyag7]

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

    // 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
}[/code:3kduj4ay]

  • Irbis

    And i think i ve allready converted this one here ;

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

  • 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 <img src="{SMILIES_PATH}/icon_e_biggrin.gif" alt=":D" title="Very Happy">

    Awesome work as always.

    Hmm, alright. How about teaching me how to convert THIS one?

    https://www.shadertoy.com/view/4sX3RN

    // 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;
}[/code:19q0e7l4]

  • Irbis This one is simple than other; 

     
#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;
}
[/code:1ugc1062]

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);

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

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)