How to integrate this GLSL to C2?

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?

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

Kyatric, thanks i will take a look to other files and .xml file to modify

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

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

it appears an error

<img src="http://i.imgur.com/H7Jjcsz.png" border="0" />

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?

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

oppenheimer

Thanks for your advice, im going to modify my fx code when i get chance.

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

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;

}

Joannesalfa :

you use :

vec2 myPos = position;

but you didn't declared "position" anywhere.

Pode and Joannesalfa

cleaned the code and now it works <img src="smileys/smiley1.gif" border="0" align="middle">

here is a preview. and the corresponding .capx

and here is the VHS .FX and XML.

Save file as & put them into the effects folder.

I didn't spend much time on describing the parameters.. so maybe you like to add some meaning to it or even improve it.

oppenheimer

Nice! Thanks, i didn't know it should have vTex. I edited XML for precise example.

I'm going to release this effect to public, i hope you don't mind.

Joannesalfa

no problem m8, was glad to help.

have a look at the javascript-sdk-template. it's pretty useful, because it explains what you have to do when writing (or copy&paste) shaders (or behaviours/plugins).