Hey Everyone,
I’ve been trying different methods for this. Seemed to be getting there except for the aliasing and poor quality of the rings, especially the thinner rings. This is a three.js scene where each ring is a TubeGeometry on a rotating pivot, rendered through a 3-pass pipeline — scene, DOF blur, then FXAA. Using TubeGeometry because the rings need varying thickness.
Everything would be rotating and used as a hero background on a web page.
Thanks in advance for any suggestions.
Why not use a CircleGeometry with a transparent texture of the real rings?
Or are you trying for a specific style?
Hi Phil,
Thank you for the reply.
I actually did try that approach if I understand you correctly. I mapped a hires png to a plane for just the rings that are lines, and then created sphere geometry for the rings that have spheres. It looks pretty good, but I had to export a really hires png, like 16000x16000 px (12mb) to avoid any aliasing for noticeable jagged edges. Doesn’t seem like the optimal solution.
Thanks again for any ideas.
I would use a custom shader for this, or a 1 pixel gradient texture, set to repeat, and stretched in a circle…
( gemini generated custom shader on a quad )
gemini-code-1781243739897.html (7.1 KB)
The advantage of using a shader for this, is there is no pixelization. It’s crisp at any detail… and it’s only 2 triangles.
However, if the lines are very thing, you may end up with other kinds of aliasing in the process…
And, if you want shadows to work with it, you might want to use shader injection to inject the custom shader code into a StandardMaterial instead.
Here’s what that looks like.. (notice the aliasing issues on some spots.. that might be fixed by using wider bands)
( gemini StandardMaterial shader injection of custom shader on a quad )
gemini-code-1781244578277.html (6.8 KB)
Here is a working version of @mathrax’s code.
Thanks guys! These are great examples. I’ll see what I can do with this approach.
I really appreciate it!
After a bunch of haggling, I got the procedural rings to cast proper shadows on the planet sphere: