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!
niiice. ty. 
After a bunch of haggling, I got the procedural rings to cast proper shadows on the planet sphere:
This looks awesome! I’m using all the help to get close to what I need. It’s been tricky getting the colors and band pattern I need. Still wondering what can be done, if anything, for aliasing on thinner rings.
I’ll try to figure out how to post my wip here.
Thanks again!
If the rings are going to be uniform around the entire planet, is there a way to use a single high-resolution transparent texture that is just a pie-slice and map it around a circle geometry? (I’ve never tried that, so I don’t know.)
Also if you want to add some variation, you could map a low resolution texture on top of the primary texture. I use that metthod to add variations to oceans and fields.
Hahaha I was literally about to try that in the sbcode example.
I think that’s probably the best solution.. the texture filtering should take care of the aliasing.. and you’d have more control over the ring color/appearance.
I’m thinking a 1d canvas texture of the gradient that defines the ring, modulated by a second texture mapped to the plane that has like.. particulate detail.
1d canvas texture to define the rings… seems a bit less aliased than the shader hash noise version…
And then a second noise texture mapped polar / radial / by the angle to give it more noise/detail.. idk mixed results:
I suppose you could get even fancier, and make the nearest mip level invisible.. and crossfade in an instanced asteroid field for when you get up close.
You might want to use compressed textures btw if you plan on using this technique. @donmccurdy has mentioned this on the forum and has written about it quite a bit on his blog.
Actually creating the compressed texture will require a lot of reading 
, I do it for my HDRIs.
KTX2 texture compression also stays compressed on the GPU, so it not only reduces disk/network bandwidth, but rendering memory bandwidth and size.. making the models render faster and have a smaller gpu footprint.
Wow! I learn something new every day! I have been using png since was recommended by the three.js developers. But that was in pre WebGPU days, so maybe recommendations have changed? I assume it can handle transparency.
I wonder if I can bundle ktx2 with my Blender models that are exported as glb files? Textures seem to be the biggest factor determining file size. So I spend a lot of time optimizing them.
All we need for your Saturn demo is for Starship Voyager to be flying through the rings - like they used to do in their intro.
Seems there’s a way outside of blender to have a glb/gltf file pointing to ktx2 textures.
Ooh, and there’s a commit with the spec linked as well. You need to use image/ktx2 for the mime type. Very nice stuff.
I solved this a while back when I did a solar system simulation, I used a png as the acutal texture and aligned the uvs to look as real as possible Pop Solar System - realistic solar system simulation
I (and I assume the OP) would want a texture that works with as many machines as possible. This official three.js comparison of the textures for WebGPU (which I had not really looked at before) indicates that some forms of ktx2 textures do not work with all machines. Instead, they recommend a version of ktx2 textures described as “basis universal textures”.
So I will have to learn about those textures and see if Blender works with them. Blender has been evolving rapidly and I expect that it should not be long before they would be able to handle them given their apparent advantages.
But that should not be a concern to the OP since the excellent examples posted above were created without the need for Blender.
