The rings of Saturn?

[d13]

Hi Everyone!

I'm working on a solar system model and am at the point where I need to add Saturn's rings.

I've found an accurate texture for the rings here:

My question is: how can I map that as a continuous circular texture on a plane?

Is this somethings I can do with BabylonJS, or should I use Photoshop?

 

Thanks!

[Wingnut]

Coooooool.    What if they were tiny ice particles? 

Remember this stupid thing I once made (with the help of some web-gotten Cartesian magic)?

https://www.babylonjs-playground.com/#MYY6S#11

That sphere-shape is caused by the tiny particle "custom start position function" in lines 12-15.  It could be modified to make flat "bands" of particles... AND they could be told to be different colors at different band diameters (band stripes).  hmm.  Interested?

And there's the "custom particle update function" in lines 18-36.  Currently, it doesn't do anything but add a random color (sparkle) and random sizing to each particle.  It does this for each active particle, in each fast-running update step.  (ie. custom update runs very fast/often, but custom start runs once, and then only when a new particle needs spawning).

In the more-normal BJS particleUpdateFunction, lots of things are done.  Particle is spun around its z-axis, flown thru space, colored (using color1, color2, colorDead), direction-checked, age-checked, many things.  My update function removes most of those things.  For example, If you wanted the particles in your "bands" to rotate/tumble, you would need to make sure that was included in your custom update func.  Mine is "stripped" for high performance. 

Just a goofy idea.  Better ideas are sure to come, soon.

[jerome]

You could maybe use a circular ribbon and set your own UVs

https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.meshBuilder.ts#L130

[d13]

Thanks!

Wingnut: That's a nice idea - but I'm afraid it might be too performance heavy and the rings also need to look, accurately, like the rings of Saturn. (Saturn's rings are, by the way, 62,000,0000 km across but only 10 meters deep - so they're paper-thin.)

Jerome: Thanks so much but that's beyond my abilities at the moment.

[brianzinn]

Can you not use a plane with an image material alpha set to where the rings aren't?  Then you could apply directly to a plane - image size for rings would be larger is main drawback with that, but also this way you would some slight variation in the rings to make it more realistic:
https://playground.babylonjs.com/#B8RLSG#1
Apologies in advance for the ridiculous dog rings, but you get the idea...

[d13]

@brianzinn Yes, that's correct, and is the end result I'm aiming for.

My problem at the moment though is that I just have this rectangular png that represents a segment of the rings, and I don't know how to turn it into a circular image that I can map onto the plane. 

(I have found textures of Saturns rings that are complete circles, but none yet based on accurate image data.)

[brianzinn]

I updated the PG with transparent - but you can't find images like this: http://www.sciencealert.com/here-s-earth-and-saturn-s-rings-to-scale

[Pryme8]

I would do this as a simple shader.

all you would need is for that image to be a 1d image.  And then get your uv coordinates distance from the center+radius of deadzone.  Sample the 1d image at the distance value and output that color.  Should look good on a plane then and you could add noise and fades to smooth things in the same pass.

[d13]

@brianzinn: That's exactly what I'm looking for. If it were higher resolution and open source it would be perfect.

[Wingnut]

Hi guys.  Yeah, Pryme8... a little thin-strip "cross-section" to use as the ref-map sampler thingy... for the shader.  YEAH!

I had a wild idea... to hack the createDisc function... to make a variable sized hole in the middle.

Then, I could apply that cross-section of the rings... as a texture on the disc, with lots of texture uScale... for repeating all the way around the disc!  Yeah!

https://www.babylonjs-playground.com/#19FAAL#11

Well that whole idea was abandoned, and scary, and I ran into the woods... crying, instead. 

There's some un-named gaps in there.  I wonder how much it would cost me... to get a "lesser gap" to be named...

"Wingnut's Mental Gap" 

[Pryme8]

I got yall fam ^_^... give me a min.

[NasimiAsl]

http://www.babylonjs-playground.com/#NCY1Q#23

http://www.babylonjs-playground.com/#NCY1Q#24

[Pryme8]

http://www.babylonjs-playground.com/#52I241#1

Is the set up... aw dang Nasimi beat me too it maybe 

[NasimiAsl]

i just try not so useful for yet ( shaderbuilder  stuff) just continue your solution i respect that a lot

[Wingnut]

Yeah, Naz still has a broken scene.clearColor.  There's still hope for you, P8. 

[NasimiAsl]

http://www.babylonjs-playground.com/#NCY1Q#26

[Pryme8]

http://www.babylonjs-playground.com/#52I241#2

Well I just need to enable alpha on the shader... how do I do that again?

[NasimiAsl]

@Wingnut i don't get it ( your words ) my bad

 

[Pryme8]

@NasimiAsl how do I enable alpha on my shader, I forgot how >_<...

[NasimiAsl]

needAlphaBlending if i write spel right = function(){ return true;}

keep this too

mat.backFaceCulling = false;

mat.needDepthPrePass = true;

[Wingnut]

https://www.babylonjs-playground.com/#NCY1Q#26

hehe... line 15.  Somebody tried to set clearColor with Vector4 instead-of Color4. 

Nevermind me.  I change to Color4... works fine.

[Pryme8]

http://www.babylonjs-playground.com/#52I241#4

Cant seem to get the alpha working

[NasimiAsl]

http://www.babylonjs-playground.com/#52I241#5

[Wingnut]

http://www.html5gamedevs.com/topic/34305-the-rings-of-saturn/?do=findComment&comment=197102

Almost 3 minutes ago... Naz showed you how.  heh.  Sorry.

Nice work, you guys!  Smokin!

[Pryme8]

I did not understand his post "needAlphaBlending if i write spel right = function(){ return true;}" did not make sense... @Wingnut

I thought he was making a programmer joke about spelling...