How to integrate this GLSL to C2?

For developers using the Construct 2 Javascript SDK

Post » Thu Feb 07, 2013 12:00 am

I found a code makes looks like damaged VHS effect or camera gets hit.



------------------------------------------------------------------------

uniform float p;
uniform float amount;
uniform float seed;
uniform float lines;
uniform sampler2D tDiffuse;
varying vec2 vUv;

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
void main( void ) {
vec2 position = vUv;
float y = floor(lines*position.y)/lines;
float disf = 0.01*(cos(position.y*130.+p*10.)+sin(position.y*183.+p*80.));
float parity = 0.; if(mod(y*lines, 2.)>0.5) parity=1.; else parity=-1.;
float a = smoothstep(0., 1.0, p);
position.x = amount*a*(y*0.3+disf)+position.x+
        amount*0.5*parity*smoothstep(0.6, 0.65, p)*(sin(position.y*(12.+40.*seed))+smoothstep(0.64, 0.65, p));
vec4 colorInput = texture2D( tDiffuse, position );
gl_FragColor = colorInput;
}

------------------------------------------------------------------------


I wonder how to integrate it on C2?
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Thu Feb 07, 2013 12:16 am

Check the folder "effects" in the C2 installation folder.

The code is to be put in a .fx file and you need to make a .xml file that will allow the effect to be applied in the IDE.

Check the already existing files for syntax and logic, it should be quite easy (the xml file is the one requiring the most modification, the .fx file should strictly be copy/pasting the code normally).
New to Construct ? Where to start

Image Image
Image Image

Please attach a capx to any help request or bug report !
Moderator
B
247
S
85
G
40
Posts: 7,000
Reputation: 57,795

Post » Thu Feb 07, 2013 1:00 am

@Kyatric, thanks i will take a look to other files and .xml file to modify
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Wed Feb 13, 2013 12:31 am

Weird, i've copypasted another .xml for testing, when i opened, it won't appear on my effect list, i've already modified the "about" section and parameters
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Wed Feb 13, 2013 12:42 am

It worked in C2 webGL effect preview, but it didn't work in runtime.

it appears an error



There is my .fx


#ifdef GL_ES
precision highp float;
#endif

uniform float p;
uniform float amount;
uniform float seed;
uniform float lines;
uniform lowp sampler2D sampleFront;
varying vec2 position;

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
void main( void ) {
float y = floor(lines*position.y)/lines;
float disf = 0.01*(cos(position.y*130.+p*10.)+sin(position.y*183.+p*80.));
float parity = 0.; if(mod(y*lines, 2.)>0.5) parity=1.; else parity=-1.;
float a = smoothstep(0., 1.0, p);
position.x = amount*a*(y*0.3+disf)+position.x+
        amount*0.5*parity*smoothstep(0.6, 0.65, p)*(sin(position.y*(12.+40.*seed))+smoothstep(0.64, 0.65, p));
vec4 colorInput = texture2D( sampleFront, position );
gl_FragColor = colorInput;
}


How to fix it?Joannesalfa2013-02-13 00:42:46
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Mon Feb 18, 2013 10:34 am

@Joannesalfa

First of all, it is a good idea to have a look into the shaders.js when you get errors. In chrome you can do this by pressing ctrl+shift+i. Go to the tab named "Sources", then "shaders.js". The specific error you encountered is present at Line 19, because the first line just initialzes the following code for C2.

"Varying" variables can't be altered at runtime, so therefore you get that error. To bypass it you can simply define a new vec2 variable after "void main( void ) {" like this:
vec2 myPos = position;
then just replace the following "position" variable with "myPos".

One further suggestion when copy-pasting:
glsl es 1.0 is VERY strict, so you should always check the code for possible errors beforehand, otherwise Chrome will make you go nuts. For example if you define a float variable like this:
float myFloat = 1;
you will get an error because 1 is not a float. Write 1.0 instead.

another popular one:
gl_FragColor is a vec4(). So if you pass a vec3 to it (just rgb for example), you'll get an error.
gl_FragColor = vec3(1.0, 1.0, 1.0); // <- wrong
gl_FragColor = vec4(1.0, 1.0, 1.0, 0.5); // <- right

following code is possible, too:
vec3 RGBcolor = vec3(1.0, 1.0, 1.0);
gl_FragColor = vec4(RGBcolor, 0.5);
B
59
S
7
G
2
Posts: 93
Reputation: 4,228

Post » Tue Feb 19, 2013 3:25 am

@oppenheimer

Thanks for your advice, im going to modify my fx code when i get chance.
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Tue Feb 19, 2013 7:13 pm

Did you came up with some result @Joannesalfa ?
Just ask, i'll try to clarify ;)

I found a really nice webGL tutorial on the net by Stefan Gustavson:
WebGL halftone shader: a step-by-step tutorial
B
59
S
7
G
2
Posts: 93
Reputation: 4,228

Post » Wed Feb 20, 2013 6:48 am

@oppenheimer I'm sorry, i have no experience but it gave me error because it cannot convert float at line 0:13


#ifdef GL_ES
precision highp float;
#endif

uniform float p;
uniform float amount;
uniform float seed;
uniform float lines;
uniform lowp sampler2D sampleFront;


float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
void main( void ) {
vec2 myPos = position;
float y = floor(lines*myPos.y)/lines;
float disf = 0.01*(cos(myPos.y*130.0+p*10.0)+sin(myPos.y*183.0+p*80.0));
float parity = 0.0; if(mod(y*lines, 2.)>0.5) parity=1.; else parity=-1.;
float a = smoothstep(0.0, 1.0, p);
myPos.x = amount*a*(y*0.3+disf)+myPos.x+
        amount*0.5*parity*smoothstep(0.6, 0.65, p)*(sin(myPos.y*(12.0+40.0*seed))+smoothstep(0.64, 0.65, p));
vec4 colorInput = texture2D( sampleFront, myPos );
gl_FragColor = colorInput;
}
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,644

Post » Wed Feb 20, 2013 2:29 pm

@Joannesalfa :
you use :
[quote]
vec2 myPos = position;
[/quote]
but you didn't declared "position" anywhere.
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Next

Return to Javascript SDK

Who is online

Users browsing this forum: No registered users and 1 guest