Dad72 Posted February 19, 2018 Share Posted February 19, 2018 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. Quote Link to comment Share on other sites More sharing options...
BitOfGold Posted February 20, 2018 Share Posted February 20, 2018 Dae is always a wae... http://www.babylonjs-playground.com/#G0XUPL#5 (It's an ugly hack of light calculation shader) SvenFrankson, trevordev, Wingnut and 1 other 3 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted February 20, 2018 Author Share Posted February 20, 2018 Ok, lhe effect is interesting. Thank you BitOfGold Quote Link to comment Share on other sites More sharing options...
Wingnut Posted February 20, 2018 Share Posted February 20, 2018 @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 1 Quote Link to comment Share on other sites More sharing options...
BitOfGold Posted February 20, 2018 Share Posted February 20, 2018 @Wingnut I just stole it from @NasimiAsl https://www.babylonjs-playground.com/#LCA0Q4#1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted February 20, 2018 Share Posted February 20, 2018 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. NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
babbleon Posted February 20, 2018 Share Posted February 20, 2018 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 BitOfGold and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
babbleon Posted February 20, 2018 Share Posted February 20, 2018 @Dad72 slightly closer to what you're after: https://www.babylonjs-playground.com/#J9H084#20 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted February 20, 2018 Share Posted February 20, 2018 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. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted February 20, 2018 Author Share Posted February 20, 2018 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. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted October 8, 2018 Author Share Posted October 8, 2018 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 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted October 8, 2018 Share Posted October 8, 2018 i try make it Dad72 1 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted October 8, 2018 Share Posted October 8, 2018 @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 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted October 8, 2018 Author Share Posted October 8, 2018 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? Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted October 8, 2018 Share Posted October 8, 2018 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 1 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted October 8, 2018 Author Share Posted October 8, 2018 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); Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted October 9, 2018 Share Posted October 9, 2018 http://www.babylonjs-playground.com/#EKICU#6 Dad72 and trevordev 2 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted October 9, 2018 Author Share Posted October 9, 2018 Thank you Nasimi ? NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.