Pryme8 Posted October 31, 2016 Share Posted October 31, 2016 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. Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted October 31, 2016 Author Share Posted October 31, 2016 @Nabroski what is the equivalent in CYOS for iResolution? I think your the shader guy right? Quote Link to comment Share on other sites More sharing options...
Nabroski Posted October 31, 2016 Share Posted October 31, 2016 @Pryme8 It sound like you are looking for a PostProcess, https://doc.babylonjs.com/tutorials/How_to_use_PostProcesseshttp://www.babylonjs-playground.com/#DLKLE#0 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted October 31, 2016 Author Share Posted October 31, 2016 @Nabroskihttp://www.babylonjs.com/cyos/#9JDIX#2 how could I blur the meshes that have this shader applied only and in a single pass? Quote Link to comment Share on other sites More sharing options...
Sebavan Posted October 31, 2016 Share Posted October 31, 2016 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. Pryme8 1 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted October 31, 2016 Author Share Posted October 31, 2016 whoa, could you show an example with that solution? That concept is a little over my head. Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 1, 2016 Share Posted November 1, 2016 http://www.babylonjs-playground.com/#1P98HI#96 This should give you the overall idea (Blurry Rabbit) and for more insights look at: https://github.com/BabylonJS/Babylon.js/blob/master/src/Layer/babylon.highlightlayer.ts Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 1, 2016 Author Share Posted November 1, 2016 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. Quote Link to comment Share on other sites More sharing options...
Sebavan Posted November 1, 2016 Share Posted November 1, 2016 The post process here is only applied to the rabbit, not to the full scene, it uses the second camera. http://www.babylonjs-playground.com/#1P98HI#97 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: https://github.com/BabylonJS/Babylon.js/blob/master/src/Layer/babylon.highlightlayer.ts Pryme8 1 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 1, 2016 Author Share Posted November 1, 2016 Thank you I should be able to figure it out from this! Quote Link to comment Share on other sites More sharing options...
Nabroski Posted November 1, 2016 Share Posted November 1, 2016 modified code from a guy with a bloghttp://babylonjs-playground.com/#172OAY#0http://www.babylonjs.com/cyos/#YGI6R#2 @Pryme8 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 babylonjshttps://doc.babylonjs.com/extensions/fire discard some values here:https://doc.babylonjs.com/extensions/Lava Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 1, 2016 Author Share Posted November 1, 2016 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. Quote Link to comment Share on other sites More sharing options...
Nabroski Posted November 1, 2016 Share Posted November 1, 2016 @Pryme8 Hello I think iResolution is kind of mat4 worldView in COYS. http://www.babylonjs.com/cyos/#WLRWE#1 original: https://www.shadertoy.com/view/XsjGDt Here is some playground to play with. totally stretched due we are in 3d spacehttp://www.babylonjs.com/cyos/#YGI6R#3"inwas also thinking of trying a pure gl shader game" - Sounds interesting, i'm also opened for collab (in my free time) Pryme8 1 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 1, 2016 Author Share Posted November 1, 2016 Ill pm you here when I have some free time what UTZ are you in? " I think iResolution is kind of mat4 worldView in COYS. http://www.babylonjs.com/cyos/#WLRWE#1" Bam this will do perfect for the single pass, I love you long time. Quote Link to comment Share on other sites More sharing options...
Nabroski Posted November 1, 2016 Share Posted November 1, 2016 Berlin https://www.timeanddate.com/time/zone/germany/berlin Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 1, 2016 Author Share Posted November 1, 2016 http://www.babylonjs.com/cyos/#YGI6R#6 by modifying your fullscreen "hack". If you change the model to Torus its pretty cool! ooo changing the steps to 3 makes it pretty as well... then with rotation VVVhttp://www.babylonjs.com/cyos/#YGI6R#7 NasimiAsl and Nabroski 2 Quote Link to comment Share on other sites More sharing options...
Nabroski Posted November 1, 2016 Share Posted November 1, 2016 build upon your first ideahttp://www.babylonjs.com/cyos/#YGI6R#10 Nobody trippin like i dohttp://www.babylonjs.com/cyos/#YGI6R#11 NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 1, 2016 Author Share Posted November 1, 2016 http://www.babylonjs.com/cyos/#YGI6R#7 I think I'm going to link this one to a audio analyser node. Number 10 is really pretty, I think that one should be worked on for sure! Ill post some more ray marching experiments here soon. I wanna see about doing a swinging rope ^_^. Nabroski and NasimiAsl 2 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 2, 2016 Author Share Posted November 2, 2016 http://www.babylonjs.com/cyos/#JHTVH Eye of Sauronhttp://www.babylonjs.com/cyos/#1QUKGEhttp://www.babylonjs.com/cyos/#1QUKGE#1 Trippy Ballhttp://www.babylonjs.com/cyos/#5WYXF#7http://www.babylonjs.com/cyos/#5WYXF#8http://www.babylonjs.com/cyos/#5WYXF#9 "tendrils" and Fireishhttp://www.babylonjs.com/cyos/#5WYXF#1 Timing Methods. NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
Nabroski Posted November 2, 2016 Share Posted November 2, 2016 nice http://www.babylonjs.com/cyos/#253RQB#6 back to the topic http://www.babylonjs.com/cyos/#253RQB#7 NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
Nabroski Posted November 3, 2016 Share Posted November 3, 2016 crystals yeah http://www.babylonjs.com/cyos/#253RQB#12 NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 3, 2016 Author Share Posted November 3, 2016 http://www.babylonjs.com/cyos/#2KCU2#4 ShaderToy raymarching.http://www.babylonjs.com/cyos/#2KCU2#6http://www.babylonjs.com/cyos/#2KCU2#9 Bouncing Ball.http://www.babylonjs.com/cyos/#2KCU2#10 Alien Worms NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
Nabroski Posted November 3, 2016 Share Posted November 3, 2016 sick http://www.babylonjs.com/cyos/#6ZXHZ#3 NasimiAsl 1 Quote Link to comment Share on other sites More sharing options...
NasimiAsl Posted November 5, 2016 Share Posted November 5, 2016 Very nice Wonderful @Pryme8 @Nabroski i like to try it but i am very busy this is for Pryme8 http://www.babylonjs.com/cyos/#1N3T2N ~ http://www.babylonjs.com/cyos/#1N3T2N#10 jerome and Pryme8 2 Quote Link to comment Share on other sites More sharing options...
Pryme8 Posted November 6, 2016 Author Share Posted November 6, 2016 http://www.babylonjs.com/cyos/#ZVYG4#10 somebody might find this useful, it needs lots of refinement... but yeah. Procedural Skymaps anyone? 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.