Jump to content

CellShading post-process


Dad72
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 7 months later...

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

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...