Shader Talk

[Pryme8]

So I figured with a few people making some cool shaders now and the purposed improvements to the CYOS.  I figured we should have a thread for shader development to showcase what people are making and talk about different methods and concepts.

To kick things off I figured id post a procedural skymap... this is a cleaned up version of the first on I posted last night and is based off a standard box element.  I have not tested it in scene yet but the CYOS output is promising.  Ill be looking to add volumetric weather here soon and will be making the suns position dependent on a light on the scene.  Anyways feel free to comment it is pretty much a direct port of a Atmospheric GLSL process I found on github.

http://www.babylonjs.com/cyos/#14WKFU#1

Does anyone have any good resources for volumetric cloud rendering with a light source? Im reading up on this first http://www-evasion.imag.fr/Publications/2008/BNMBC08/clouds.pdf

[jerome]

nice sky... have you also checked the sky material in the material library : https://github.com/BabylonJS/Babylon.js/tree/master/materialsLibrary/materials/sky  ?

http://doc.babylonjs.com/extensions/Sky

[Pryme8]

thats cool, no I never saw it.

[Nabroski]

This page has cools infos about shaders. 

Chapter: 3D-transformation-and-projection:
http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html

 

Finally i get an idea, what i'm doing all the time
http://www.babylonjs.com/cyos/#1IXGSR

 

The purposed improvements to the CYOS.

I think this is really great, thank you! 


Maybe we can also collab and build the hole thing from scretch, (slowly, between the coffee breaks in our life) 

I looking for this kind of design:
https://www.clicktorelease.com/code/spherical-normal-mapping/










 

[Pryme8]

@Nabroski

I want to do a editor like Substance Designer, Im about half way there!  I think that would be a boss editor for our CYOS. Also I made a lot of changes to the editor on my own git, but I don't know how to submit to the changes to the master one, I made the fragment and vertex shader areas resizable, with the correct ACE editor changes.

[Nabroski]

@Pryme8

Can you share a link to the index.html (maybe via https://htmlpreview.github.io/)
with the changes you made ??? Would be great! 

Substance Designer. Sounds interesting! Don't forget to enable ES #version 300 so i can mess around with all the other ninjas of the internet.

 

[Nabroski]

gymnastics yeah

http://www.babylonjs.com/cyos/#4OLW3

that thing with light

http://www.babylonjs.com/cyos/#R8UHS#2

Break on through to the other side

http://www.babylonjs.com/cyos/#R8UHS#1

shadows
http://www.babylonjs.com/cyos/#R8UHS#3

 

[Pryme8]

Looks like somebody is having fun!

Look up raymarching Nabroski I bet you will have a ball with that.

[BitOfGold]

I have a sky shader with volumetric clouds here:
https://www.shadertoy.com/view/ltlSWB
It is a bit slow fullscreen.
If someone took the time to optimize it to a 2D noise with layered/tapered cloud tops.
(with 3D noise it looks more real)

 

pre-rendered as an image skybox here with babylon:
https://www.bitofgold.com/ocean/

I think it's cool, a french guy even remixed it as a 360 panorama video on youtube:

 

[Pryme8]

thats perfect, Ill see about implementing it here after I wrap up my work today.

[BitOfGold]

spent some time watching this....
I think It uses a very similar shader to this, but uses some very high quality moving/changing 2D noise, and much better optimised for just a few raymarching steps per pixel. (looks like only 2-3 color bands on the edge of the clouds).
Maybe just a sample at the bottom of the cloud layer, one at the middle and one at the top.

If the raymarching samples are spaced evenly, like in your shader or in mine, you need many-many steps to look "fluffy" or volumetric.
And that is slow.

 

 

[Pryme8]

ohh bee tee dubs:

 

https://pryme8.github.io/PCYOS/#

 

I have not tested it on all clients yet... but yeah for the most part the resize should work!  Let me know if it does not on your browser.

[Nabroski]

windows 10 chrome canary and edge

! resize function dont work.

use jquery with an textarea
http://output.jsbin.com/rimozaseni/

ace tabs
http://www.codeply.com/go/bp/hYVxKShFtM

also take a look at some demos
https://ace.c9.io/build/demo/bookmarklet/index.html

the easiest thing what we can do, is use a very very basic site, and make it kind of glsl -sandbox style

But anyway, i think this child is dead, letzs start from scratch

Also Most of the time only one error msg (3lines (forget to set a point in float), no need to rip of half of the screen

[Nabroski]

@BitOfGold

Your website needs up to 6-8sec to load becourse of all the external libs, as i see you only need babylon.js for now.

Use an model instead of the default sphere for mapping your sky. You only need the half of it degrees cut of from bottom,

please look here how to mapping a sphere correctly. looks much better.
https://www.google.de/search?q=UV+Unwrap+this+skydome+texture&oq=UV+Unwrap+this+skydome+texture&aq



also please note that you strip off to many data of your jpeg i see some artifacts.

[Nabroski]

make also the thing drag able with opacity
https://jqueryui.com/draggable/

[BitOfGold]

@Nabroski
Thanks for the tips!
I will make a new sky dome model, the top of it, the zenith looks really bad.

hmm interesting, libraries loaded from babylonjs.com are slow or not loading right now.
ping should be not an issue if you are in Berlin... 52ms from here in Budapest, Hungary. and loading all assets under 1.2s with all libraries and soundclound started.

 

[Pryme8]

1 hour ago, Nabroski said:

windows 10 chrome canary and edge

! resize function dont work.

use jquery with an textarea
http://output.jsbin.com/rimozaseni/

ace tabs
http://www.codeply.com/go/bp/hYVxKShFtM

also take a look at some demos
https://ace.c9.io/build/demo/bookmarklet/index.html

the easiest thing what we can do, is use a very very basic site, and make it kind of glsl -sandbox style

But anyway, i think this child is dead, letzs start from scratch

Also Most of the time only one error msg (3lines (forget to set a point in float), no need to rip of half of the screen

so the resize is not working in edge and ie you said?

Yeah this CYOS is prolly gonna be put  to rest your right...

 

the resize seems to work on IE but is a little broken on the math for the spacing...  weird how different browsers handle spacing...

 

[Nabroski]

 @Pryme8

quick and dirty
http://htmlpreview.github.io/?https://github.com/tolkanabroski/babylonjs-tutorials/blob/master/test/index.html

http://stackoverflow.com/questions/6440439/how-do-i-make-a-textarea-an-ace-editor

 

https://github.com/ajaxorg/ace/wiki/Embedding---API

Ah, okay, It would be kind of cool if the pixel shader become a big editor. for now i only can drag the editor, but the textfield size stays the same

 

@Pryme8
But it looks much better now! 

[Pryme8]

yeah the text feild stays the same as the numbers of lines needed this is because of how ace editor is set up, and I did not feel like doing the Math to figure out how many lines both sould be set to display... but that wont be hard to work out...

I think Im scrapping the whole CYOS and making my own.  I hate Ace edtior and jquery... that can all be accomplished with Vanilla js.


I want to also put into place a node system and visual editor for those who dont like to script.

[Nabroski]

@BitOfGold

So i took a look at your shader, and i know already i will spend many hours figured out whats the best .

Something that i do:

reduce allocation of memory for variables, i believe a vec2 is 128bit, hard coded numbers are faster, than define a global variable and used once, somewhere. make an artistic decision and go for it. if you don't overload a uniform to the main loop of your engine, no reason to declaring one. -

dont use texture look ups (textureSampler). In your case use a Colored Noise Function ( Procedural Textures ). The Starfield is just some random points, you have like 3 overloading functions just for that. white little point, you can do it better 

Combining functions: function a () ...b, c, make a single one. also overloading from one vec2 in a funtion into and other -> better vec2+vec2 in a singel cycle. 
 

Okay we can work togeher at this, but you have to do the hard work first. I commenting changes, be course of going from 2Ortho View of Shadertoy and CYOS and also the incompatibility.

http://www.babylonjs.com/cyos/#1L6DHU#3

So this is kind of broken, see how far you can make it, and then i will catch up, again.

 

.

@Pryme8 i think this guy is genius.
http://pixelshaders.com/editor/

[BitOfGold]

@Nabroski
Yes, the noise functions are really messy, it is a remix of multiple shaders.
I have some time now so I play with this shader a bit.
I see what I can do!



 

[Pryme8]

http://www.babylonjs.com/cyos/#SABX5

I tried to really quick port the shader over that you showed and this was the results.... any idea what I may be doing wrong? its prolly my noise function instead of using a texture sample.

[Nabroski]

 

@BitOfGold
 yes, sorry during the process i mess with a number cloudfar 8e3 i typed 10. i changed it back to 1000. i run into an error while converting. also use the ref sampler. for better understanding.
Line 114          //cloadfar
    if (dist < 1000.0) {
http://www.babylonjs.com/cyos/#1L6DHU#5

 

[BitOfGold]

Wow now we are working 3 persons on one shader 
Cool, what a chaos :-O
 

@Nabroski OK no problem, cloudfar was only for supressing clouds at the zenith.

@Pryme8 Yes the problem is the noise. float Noise( in vec3 x) { was only making a 3d noise from a 2d texture. I searched but I cannot find the source from I copied this... 

I am now rewriting 
http://www.babylonjs.com/cyos/#1L6DHU#7
a bit and I get back with the results.

[Pryme8]

http://www.babylonjs.com/cyos/#14WKFU#7

I just came up with these to handle procedural 3d pseudo noise, I can make it more robust but I'm thinking this may do the trick.  what do you think? pNoise for a float pNoise2 for a vec2 pNoise3 for a vec3 out, and all of them take just a vec2.  I could make it so a vec3 can be input as well but I don't know if that's necessary...  Ohh yeah and a float return as well if you feed it two in floats.
http://www.babylonjs.com/cyos/#14WKFU#8
this shows how to change the density. just change the divider of the output.