Intergrading GLSL Shader

[tranlong021988]

Hi, I'm learning BJS and very exciting with Post Process effects. We have some standard samples from site. I'm also looking for some GLSL filter effect for Camera (film grain, toon, etc). But I wonder how to intergrade a custom GLSL effect (free code from google).

This effect here:

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

Can anybody give a some points ?  

 

[Wingnut]

Hiya T!  If you please... take a look at our C.Y.O.S.  (create your own shader) app... http://www.babylonjs.com/cyos/

Choose cell shading and maybe torus knot.  A little "cartoon flavor" there, eh?  (take notice of the ZIP option at CYOS, which will put CYOS shader code into ShadersStore FOR you... and give you an example of how it's done.

More about cell-shading at... https://www.eternalcoding.com/?p=113

Shaders are used in many places within BabylonJS, and http://doc.babylonjs.com/tutorials/How_to_use_Procedural_Textures is an interesting tutorial, as well.  It shows how to use the Babylon ShadersStore to store shaders, and/or use DOM <script> elements to store shaders, and/or disk-based files.

A playground search for 'shadersStore' returns quite a nice harvest.  http://doc.babylonjs.com/playground?q=shadersStore

Another interesting forum search might be 'shaderBuilder', a sophisticated shader assembler... built by @NasimiAsl... who is a God of shaders.    ShaderBuilder does not prevent you from needing to learn shader code, but it makes "wrangling" shaders much easier, AFTER you know how to code shaders.    It avoids big strings, and many other hassles of shader coding... but you still need to know what you are doing. 

I'm REAL new at shaderBuilder, and not very experienced at ANYTHING, really.  heh.

Anyway, I thought I would pass-along what little I knew, regarding your questions.  Hope this helps.  Stay in touch, and be well.

[tranlong021988]

hi @Wingnut, I don't need only Toon Shader but also Film Grain and some "cinematic look" postprocess shaders for my company long term projects. It's seem that GLSL code that I search different with any GLSL code from BJS examples (good news: I already succeed intergrated Dot Screen Shader from ThreeJS to my BAbylonJS project, I gonna try more ) 

Oh, I will give Shader Builder a try, too.

Thank you.

[Wingnut]

Hi again, T.  Yes, I was trying to cover the "integrate" part of your question.  Some of the "difference" you are seeing with shader source codes... might be GLSL vs. HLSL.  Google search returns much talk on that subject.

Now, as for FINDING these cool shader effects and their sources, I have not seen any demos, here, using film-grain/cinematic effects.  But, my memory isn't all that accurate.

Have you visited ShaderToy?  I see a few "grain"-related shaders, there, but they might need converting.  In the Google search above, I saw a video listed... How to turn a shadertoy.com pixel shader into working HLSL

I didn't watch it... but maybe that will also be helpful.  Another Google search produced some results... and I visited the second link.  At the bottom of that linked page, the author includes some GLSL shaders.  (v1.1. of that, is here)

I wish I could be more helpful.  Perhaps others will comment... those who know more about the subject.    cya later.

[tranlong021988]

@Wingnut thank you, I will try them all. 

[NasimiAsl]

hi

read this and i can help you to make shader (postprocess) with shaderBuilder

http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html

http://www.babylonjs-playground.com/#ZEBO#1

[gamestudiohx]

I've implemented some of the pp effects from http://www.geeks3d.com/ in BabylonHx https://github.com/vujadin/BabylonHx/tree/master/com/babylonhx/postprocess. Maybe that could help you

[tranlong021988]

@NasimiAsl it's seem promising but I think I need to learn more about GLSL before try this. Thank you. 

@gamestudiohx: Amazing works . But will I have to switch to Haxe to use this ? I checked some Haxe class , some have  fragmentShader string contain GLSL code, can I use it directly as a fragment.fx file ?  

[gamestudiohx]

@tranlong021988 you can use that string as fragment.fx file. You can also check https://github.com/vujadin/BabylonHx/tree/master/com/babylonhx/shaders, there should be a shader for each of pp effects too. You can easily port Haxe code to ts, syntax is similar

[tranlong021988]

@gamestudiohx: Thank you, will try it !