Jump to content

Basic PostProcess


Go to solution Solved by Deltakosh,

Recommended Posts

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 !

Link to post
Share on other sites

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();});
 
 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 
34iipap.png
 
 
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
Link to post
Share on other sites

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 );
 
}
Link to post
Share on other sites

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;}
Link to post
Share on other sites
  • Solution

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

 

Now you can do emboss for instance:

convolution.jpg

 

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];
Link to post
Share on other sites
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...