CellShading post-process

[Dad72]

Hello,

I am looking for a way to create a cellshading post-process. I know there is a cellshading extension, but it is only for an object. I would like in my case to modify all the objects of the scene by using their textures with a post-process.

Do you have an idea of how to do this ? did anyone ever do this kind of post-process ?

Thanks for your help.

[BitOfGold]

Dae is always a wae...
http://www.babylonjs-playground.com/#G0XUPL#5

(It's an ugly hack of light calculation shader)

 

[Dad72]

Ok, lhe effect is interesting. Thank you BitOfGold

[Wingnut]

@BitOfGold - that's one of the weirdest playgrounds I have EVER seen!  Did you make that?   What kind of beer do you drink? 

You must be reading the docs or something.  I'm worried about you. 

I bookmarked that PG, but I'm afraid it will burn a hole in my bookmarks DB, fall-out on the floor, and my dog will eat it.

Then my dog will be strangely lit for the rest of its life. 

[BitOfGold]

@Wingnut 

I just stole it from @NasimiAsl

https://www.babylonjs-playground.com/#LCA0Q4#1

[Wingnut]

Ahh, that explains a lot.  Good.  You're probably going to be ok, then.  Yeah, Naz has Shaderitis... a disease that affects people when they start understanding shaders. 

The whole world is worried about Naz, but he's pretty much a genius.  Scary-level intelligence.  Pisses me off.  (just kidding, I love the guy and want him as my next-door neighbor)

Cell shading... pretty cool effect.

https://www.babylonjs-playground.com/#2DEIWH#0

I PG'd the cell shading demo from the main website.  I haven't tried to adjust/fix the texture paths, yet.  Not sure how to do that. 

Let's see, if I may re-state the issue, Dad72 wants to have ONE cellshading post-process... but it "effects" all materials in-scene, and perhaps optional .includedMaterials array.

Is that correct, Dad72?  Fix me as needed.

Yesterday... I was thinking that MAYBE... this is a camera effect.  If EFFECT ALL MESH is wanted, then... this feature would be similar-to "sepia" and "black and white" post-processes.

Not sure if cell-shading CAN be a camera effect.  Not sure if this is objective.  But, still, I report my thinking, because I am yappy. 

[babbleon]

Can you use LUT?

This PG is not what you're looking for, but can you make a LUT to simulate cell shading?

https://www.babylonjs-playground.com/#J9H084#19

[babbleon]

@Dad72 slightly closer to what you're after:

https://www.babylonjs-playground.com/#J9H084#20

[Pryme8]

How do you create a post process from the shader store?

var _fs =
`precision highp float;
...
gl_FragColor = baseColor;
}
`;

BABYLON.Effect.ShadersStore["customPostProc"] = _fs;

then

var postProcess = new BABYLON.PostProcess("customPostProc", 'customPostProc',  ["screenSize"], null, 0.25, camera);

but that does not work... Ive gotten this workin in the past somehow but I do not remember how I linked it with the fragment being in a sting in the code like that...  If you can figure that out then you do the cell shading calcs in that and it will be global.

[Dad72]

Yes @Wingnut, you perfectly understood what I wanted to do. Sorry if I mis explain.

@babbleon we are close enough to the result, the problem is that the scene becomes black and white, we have more colors.

I'm looking to have a cartoon effect, and therefore to keep the textures used, but it gives a drawing effect in the end.

@Pryme8 Thank you Pryme, it's almost what I'm looking for, but I do not know anything about the shader code. I'll have to learn one day, but it seems so complex.

Thank you all for your answers and help.

[Dad72]

I'm still looking for this possibility, but I do not know if it's really possible to do it with a post process, but given my level of understanding of shader and post-process, I do not know.

I found this in GLSL (except that the colors go too green, but I guess that can be improved later to find the colors use images.).

but I do not know how to convert that for Babylon.

https://www.geeks3d.com/20140523/glsl-shader-library-toonify-post-processing-filter/

Will anyone have a little time to help me with that if you please.

Thank you very much

[NasimiAsl]

i try make it

[NasimiAsl]

@Dad72

hi 

https://www.babylonjs-playground.com/#1ZEABJ#181

line : 334 

  var pps1 = new BABYLONX.ShaderBuilder()

//  this params control edge and color 
 .InLine('float f = 0.0081,colorCount=2.;vec3 color1 = vec3(0.,0.5,0.);')


               .Map({ index: 'current' ,  })  
               .Reference(1)
               .Map({ index: 'current' ,   uv:'vec2(vuv+vec2(0.,1.)*f)'  })  
               .Reference(2)
               .Map({ index: 'current' ,   uv:'vec2(vuv+vec2(0.5,.0)*f)'  })  
               .Reference(3)
               .InLine(`
                result.xyz = 
               vec3(length(result_1.xyz-result_3.xyz*0.5-result_2.xyz*0.5));
               result_1.x = floor(result_1.x*colorCount)/colorCount;
               result_1.y = floor(result_1.y*colorCount)/colorCount;
               result_1.z = floor(result_1.z*colorCount)/colorCount;
              
               result.xyz = (1.-result.x) * length(result_1.xyz)*color1;
               
               `)
              
              .BuildPostProcess(camera,  scene,1.10, {
                 onApply: function (ef) {
                    
                  }
              }); 

corrected : https://www.babylonjs-playground.com/#1ZEABJ#184

https://www.babylonjs-playground.com/#1ZEABJ#185

[Dad72]

Thank you Nasimi, I appreciate your help

But I'm looking to be able to create a post process without using ShaderBuilder. Your example essentially shows green (so no multiple colors from the textures.)

I wanted to be able to convert the GLSL of the link I showed. You think it's possible?

[NasimiAsl]

yes  i will make exact your wanted shader code in CYOS

https://cyos.babylonjs.com/#2MZ7JZ

just copy 

and i don't know why we most notice that

WHY
for (int i =0; i<levCount-1; i++ ) {  // don't work 
for (int i =0; i < levCount-1; i++ ) { // work 
    

 

 

 

 

 

[Dad72]

That seems alright to me. But how to make a post process with that ?

var _fs = `precision highp float; ... gl_FragColor = baseColor; } `; 
BABYLON.Effect.ShadersStore["customPostProc"] = _fs;

var postProcess = new BABYLON.PostProcess("customPostProc", 'customPostProc', [""], null, 0.25, camera);

 

[NasimiAsl]

http://www.babylonjs-playground.com/#EKICU#6

[Dad72]

Thank you Nasimi ?