Starry Shader for Sky Sphere

Thought i’d share a starry sky shader that I am applying to a sky sphere in one of my recent projects. Fully procedural, and generated with layers of perlin noise in the shader ( no particles ).

Check out the isolated example here :
https://stackblitz.com/edit/starry-skydome

50%20PM56%20PM

15 Likes

Very cool visual effect! :+1:
And thanks for sharing :beers:

2 Likes

Looks really good! Amazing job.

Your screenshot looks really cool. I don’t get the same effect when i use the link though:
image

3 Likes

I get the same thing.

@titansoftime & @Usnul whoa that’s interesting…the link definitely works for me on Chrome on my Macbook… what device/browser are you using?

Desktop Windows 10 Chrome 74 GeForce GTX 1060
Mobile Android Samsung Galaxy s7 Chrome

Both get the same results.

Here is a console log, not sure if this is part of the issue or just some typical stackblitz issue.

image

image

@titansoftime

yeah I get those errors too, they are just stackblitz issues… would you mind trying out this link as well?

https://codercat.tk/three-body

^^ it’s the project where I use this sky shader… just trying to narrow down the problem, see if it’s anyway related to stackblitz.

thanks :slight_smile:

1 Like

Desktop Windows 10 Chrome 74 GeForce GTX 750 TI

It works for me on both links.

But damn! that sudden sound almost made me deaf on the project link. :rofl:

@sciecode, thanks for checking the link :slight_smile: and sorry about that … the project is still very work in progress~~ actually adding a sound on/off button at the moment

1 Like

Also broken, only see one body :stuck_out_tongue:

my specs:

Win10, GTX 1080, Chrome Version 74.0.3729.157 (Official Build) (64-bit)

wow so strange. must be a really low level issue. I wish I could debug it but need access to a machine with either a GTX 1080 or GTX 1060…

Can somebody upload a copy of this? The link to the starry sky demo is dead. Thank you!

Did you get to the bottom of this? What was the issue with Windows 10 GeForce GTX?

Found the issue! Threejs shows the GPU warning " pow(f, e) will not work for negative f". Just put abs(f) in the first argument of pow() functions and it will work :slight_smile:

1 Like

Sorry for reviving this, but I would like to know where in the shader I have to fix to get this to work with three.js r115? Thank you!

@Aerion
Where? O_o https://stackblitz.com/edit/starry-skydome?file=StarrySkyShader.js

And the lines with the fix are 108 - 110:

float cs = pow(abs(cnoise(scaledClusterSize*vPos+noiseOffset)),1.0/clusterStrength) + cnoise(scaledStarSize*vPos);

float c =clamp(pow(abs(cs), 1.0/starDensity),0.0,1.0);

@prisoner849 : Thank you! Is there a way to make the stars randomly blink with a manually set time / speed modifier & add / remove more stars? Thank you so much! :slight_smile:

Edit : Also, I noticed this :

Is there a way to fix that or remove it & remove the aurora?

Thank you so kindly! :slight_smile:

@Aerion
Add a uniform with time and then use that noise function to make twinkle stars :slight_smile:

PS I don’t know how to remove that star cluster.

@prisoner849 or anyone else : I’m not good with shaders. How would you do it?