Jump to content

Gaussain Pass with Shader not Post


Recommended Posts

Well, I was assigned with a interesting task to create a very specific shader... so as I am hacking it out I figured Id post the CYOS that Im going through in order to document how to develop a shader... so yea, here we go.

First Step: Get a Time uniform set up => http://www.babylonjs.com/cyos/#DA8OE

Second Step: Tailor a Plasma effect => http://www.babylonjs.com/cyos/#DA8OE#1

Third Get Discards in place => http://www.babylonjs.com/cyos/#DA8OE#8

Fourth => displace and tailoring http://www.babylonjs.com/cyos/#YGI6R

now I need to blur the mesh, I kept trying single pass functions but could not get the blur to extend out past the mesh... any suggestions how to get like a radial or bilateral or even a Gaussian blur, even a lenses blur will work, I just need to mesh to get fuzzy now.

Link to comment
Share on other sites

Blur requires the scene to have been already drawn sharp as one pixel needs to be influenced by the neighbors and you do not know them in the first pass. 

It also usually requires two passes after the main one (horizontal and vertical). You could still do it in one step by sampling the n square pixels where n is your kernel size but it is usually slower the 2 passes which requires n + n samples.

If you do not want to use post process, you could do as in the highlight layer and render and blur on a render target texture before reinjecting in your scene. 

Link to comment
Share on other sites

Yeah I understand how to do a blur pass, but I need to to only be on the objects with that shader and not on a post process and in that the background gets blured as well not just the rabbit, also it seems like my setFloats are not working is there a way to getFloats so you can see if they are taking effect?

**edit figured out the float checking nevermind that.

Link to comment
Share on other sites

The post process here is only applied to the rabbit, not to the full scene, it uses  the second camera.


Unfortunately you can not blur without process as explained before, either on the render target or the full screen.

The only think is to push all your meshes that needs to get blurred in the render target. This is exactly what the highlight layer is doing:


Link to comment
Share on other sites

modified code from a guy with a blog



Why you make it so complicated? It looks like you just need to modify a fire/lava material with a blur shader, that allready build in babylonjs

discard some values here:


Link to comment
Share on other sites

Nope, if you knew the assigned task and the clients expectations and task sheet then it's actually on point and the lava would not work, I could clean up some of the plasma effect here with some better functions but as for right now the shader is working how I want in a very specific instance, :) thanks for your help.


I initially just wanted to do the effect they wanted with some particle tricks, but there were some requirements that unfortunately are needing multiple techniques.   Plus my shader handles some other things.  This just made me realize how much you can actually do with shaders because before I did this I had to do some timing troubleshooting and came up with a whole series of functions that make the timing and sequence of different waves way way easier.  I'll prolly post them sometime.


inwas also thinking of trying a pure gl shader game through bjs here at some point and see how much more I can really learn.

Link to comment
Share on other sites


I think iResolution is kind of mat4 worldView in COYS. 

original: https://www.shadertoy.com/view/XsjGDt

Here is some playground to play with. totally stretched due we are in 3d space

"inwas also thinking of trying a pure gl shader game" - Sounds interesting, i'm also opened for collab (in my free time) 

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.

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.


  • Recently Browsing   0 members

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