Basic PostProcess

[hw3web]

Is there any basic tutorial for postprocessing:

 

if I want add this :

"

 

var sepiaKernelMatrix = BABYLON.Matrix.FromValues(
0.393, 0.349, 0.272, 0,
0.769, 0.686, 0.534, 0,
0.189, 0.168, 0.131, 0,
0, 0, 0, 0
);

var postProcess = new BABYLON.ConvolutionPostProcess("Sepia", sepiaKernelMatrix, 1.0, null, null, engine, true);

 

"

what else I need to do to work?

 

 

And how to do if I would like add to postProcesses together ?

 

Please any simple(basic) code !

[GameMonetize]

Just specify the camera and you're done

var postProcess = new BABYLON.ConvolutionPostProcess("Sepia", sepiaKernelMatrix, 1.0, camera, null, engine, true);

[hw3web]

Thank you

[hw3web]

I need to ask what ConvolutionPostProcess matrix is base on as I try make some effect and is not working as in other programs Convolution Matrix

 

example : 1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1

 

[GameMonetize]

Could you share you sample somewhere?

[hw3web]

Babylon

 

 

In Flash :

 

 

In gimp:

 

 

 make : - picture lower is result 

 

 

http://hw3web.co.uk/web/babylon/test/balls - you can see source code if you prefer that

[Dad72]

I'm not sure, but may be that: eff.height and eff.width could be the solution.

I knows not much post processing. so it's just an idea.

 

 

[hw3web]

No, that is not problem, I clean totally code:

 

 

 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

var sun = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(60, 100, 10), scene);

var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3.Zero(), scene);

scene.activeCamera = camera;

scene.activeCamera.attachControl(canvas);

/////////////////////////// Post Process

 

A ) var testp = BABYLON.Matrix.FromValues(0.393, 0.349, 0.272, 0,0.769, 0.686, 0.534, 0,0.189, 0.168, 0.131, 0,0, 0, 0, 0);

B ) var testp = BABYLON.Matrix.FromValues(1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1);

 

var eff = new BABYLON.ConvolutionPostProcess("Sepia", testp, 1.0, camera, null, engine, true);

engine.runRenderLoop(function(){scene.render();});

 

 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

with active line A) - http://hw3web.co.uk/web/babylon/test/balls/index_sepia.html

 

 

with line B ) - http://hw3web.co.uk/web/babylon/test/balls/index_strange.html

 

just blank page - as I show above for this 1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1 in Convolution effect should be different ! ?

 

I just want to know how manipulate this numbers , as they not standard Convolution - PostProcess Matrix 4x4 

 

Thank you

[GameMonetize]

Hello

 

here is how pixels are evaluated:

vec3 updatedColor = (kernelMatrix * vec4(baseColor, 1.0)).rgb;

 

Perhaps you should try with the transpose of your matrix

[hw3web]

so it is not ConvolutionPostProcess !? 

not sure what you mean transpose matrix !

 

sorry

[GameMonetize]

just create your matrix and call var newMat = BABYLON.Matrix.Transpose(mat);

[hw3web]

so what is the best way using posprocess to achive effect like this or pencil draw effect ? 

 

[GameMonetize]

It could be complex shader but you can write your own glsl code with postprocess

[hw3web]

I am completely new in this subject ,as if I make shader like it: what I should do with it ? ( I try just load to JS  - don't work) 

 

#ifdef GL_ES

precision mediump float;

#endif

 

uniform float time;

uniform vec2 mouse;

uniform vec2 resolution;

 

void main( void ) {

 

vec2 position = ( gl_FragCoord.xy / resolution.xy ) + mouse / 4.0;

 

float color = 0.0;

color += sin( position.x * cos( time / 15.0 ) * 80.0 ) + cos( position.y * cos( time / 15.0 ) * 10.0 );

color += sin( position.y * sin( time / 10.0 ) * 40.0 ) + cos( position.x * sin( time / 25.0 ) * 40.0 );

color += sin( position.x * sin( time / 5.0 ) * 10.0 ) + sin( position.y * sin( time / 35.0 ) * 80.0 );

color *= sin( time / 10.0 ) * 0.5;

 

gl_FragColor = vec4( vec3( color, color * 0.5, sin( color + time / 3.0 ) * 0.75 ), 1.0 );

 

}

[GameMonetize]

Just save your shader as .fx file and do something like this:

var postProcess1 = new BABYLON.PostProcess("Down sample", "./Scenes/Customs/postprocesses/downsample", ["screenSize", "highlightThreshold"], null, 0.25, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);

This code was made for this shader:

#ifdef GL_ESprecision mediump float;#endif// Samplersvarying vec2 vUV;uniform sampler2D textureSampler;// Parametersuniform vec2 screenSize;uniform float highlightThreshold;float highlights(vec3 color){	return smoothstep(highlightThreshold, 1.0, dot(color, vec3(0.3, 0.59, 0.11)));}void main(void) {	vec2 texelSize = vec2(1.0 / screenSize.x, 1.0 / screenSize.y);	vec4 baseColor = texture2D(textureSampler, vUV + vec2(-1.0, -1.0) * texelSize) * 0.25;	baseColor += texture2D(textureSampler, vUV + vec2(1.0, -1.0) * texelSize) * 0.25;	baseColor += texture2D(textureSampler, vUV + vec2(1.0, 1.0) * texelSize) * 0.25;	baseColor += texture2D(textureSampler, vUV + vec2(-1.0, 1.0) * texelSize) * 0.25;		baseColor.a = highlights(baseColor.rgb);	gl_FragColor = baseColor;}

[hw3web]

thank you for all that I will need to try aby of that , but I think Shaders are to complicate for amator as I am.

[GameMonetize]

Because I'm a so kind guy, I updated the convolution shader to accomodate your wishes

 

Now you can do emboss for instance:

 

How to do that? Just a line of code:

var postProcess = new BABYLON.ConvolutionPostProcess("convolution", BABYLON.ConvolutionPostProcess.EmbossKernel, 1.0, camera);

 

You can obviously use your own by specifying an array of 9 floats. Some are already provided out of the box:

 

    BABYLON.ConvolutionPostProcess.EdgeDetect0Kernel = [1, 0, -1, 0, 0, 0, -1, 0, 1];

    BABYLON.ConvolutionPostProcess.EdgeDetect1Kernel = [0, 1, 0, 1, -4, 1, 0, 1, 0];

    BABYLON.ConvolutionPostProcess.EdgeDetect2Kernel = [-1, -1, -1, -1, 8, -1, -1, -1, -1];

    BABYLON.ConvolutionPostProcess.SharpenKernel = [0, -1, 0, -1, 5, -1, 0, -1, 0];

    BABYLON.ConvolutionPostProcess.EmbossKernel = [-2, -1, 0, -1, 1, 1, 0, 1, 2];

    BABYLON.ConvolutionPostProcess.GaussianKernel = [0, 1, 0, 1, 1, 1, 0, 1, 0];

[Dad72]

Wow, nice 

[hw3web]

So in the end is 3x3 matrix array. Need to test it. I am away for a weekend . But will let you know all results . Thank you

[GameMonetize]

Yes this is a 3x3 matrix

[hw3web]

Hi I am back to life , and test it and I must say thank you very much, absolutely brilliant .