Pryme8

Shader Talk

Recommended Posts

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

Share this post


Link to post
Share on other sites

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/










 

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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:

 

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

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

changes-edit.jpg

Share this post


Link to post
Share on other sites

@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.

background-pic.JPG

Share this post


Link to post
Share on other sites

@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.

 

Share this post


Link to post
Share on other sites
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

changes-edit.jpg

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...

 

1.jpg

2.jpg

Share this post


Link to post
Share on other sites

:) @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! 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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/

Share this post


Link to post
Share on other sites

Wow now we are working 3 persons on one shader :D
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.