Transparency issue for scattered planes on sphere

This is a new thread for @MDH questions in this thread

I scattered/copied a plane geometry along a sphere object. Then I added a Material to the plane object with a black/white alpha map. At first glance, it looks good. But if you look closely you can see that there are some problems with the geometries sorting (kind of a “depth sorting” problem I guess). Whenever the effect occurs, the alpha channel doesn’t seem to work properly either.

Yes, it’s indeed a depth sorting issue. It’s a common issue in WebGL. All I am able to recommend is a few tricks to try.

  1. Adjust the alpha test on your material. In my quick test, it seems to help. See those screenshots with alphaTest=0 compared to a higher value. (it’s not perfect though, there are still some visible intersection edges, but see point 4 to help on this)

  1. Try and see if adding sorting to the renderer can help. For that, you need to assign a new renderer to the camera. You have to do like this:
  • create a renderersNetwork (this node is available in any context), or a cameraRenderer (only available in SOP context).
  • go inside it, and create a WebGLRenderer if there isn’t one already created
  • check that the sortObjects is on
  • assign it to the camera.
    • if your camera is created at the object level (the default), you need to select the camera, and in the params panel, go to the render tab. Then toggle the “setRenderer” toggle. And in the “renderer” parameter, you can assign the WebGLRenderer node (the same way you assign a material)
    • if the camera is created at the geometry level, you simply plug the camera to the cameraRenderer node, and set the display flag to the cameraRenderer.
  • then you may need to reload the page (changing renderer is the kind of operation that doesn’t always work, and there is no force reload for this - yet)

I’ve just put together a very WIP tutorial here:

Although from my quick test, that doesn’t seem to make much of a difference… So I really mention it in case it helps in other situations.

  1. Instead of using multiple planes, and since you mention you want them to look at the camera anyway, you could try and use points directly. They are always facing the camera. Although you would still need to use the alphaTest, but at least you’ll be dealing with a single object, instead of mutiple ones, so that may help.

  1. In order to get rid of those black edges mentioned in point 1, instead of using a normal material with a texture, I’m using here a “material builder”, and inside you can use a disk node, plugged into the alpha.

I also noticed that the planes have a fine bright line at the edge. Maybe I need to add a UV mapping to the plane and scale the mapping up a bit to avoid such rounding errors? Or can the standard uv-mapping be set to “tilable”?

Yes, you can control this from the cop/image node (used to import textures). You can see I’ve toggled on twrap and ttransform to see those options. You could also try tminFilter and tmaxFilter Although it’s possible you’d need to export your texture with 1 pixel of transparent border to help.

Curious to see if any of those help.

1 Like

Yay, very cool! I had no time to test all of your suggested options (yet). But changing the alphaTest value seems to fix the issue pretty much already :slight_smile:

Using a point instead of a plane sounds interesting, too. So basically it is just a single vertex instead of 4 vertices (when using a plane geometry)? If that ist true, it might also help to keep render performance up, right?
At the moment I am testing the the webGL performance of my Laptop from 2015. So any trick so boost render performance is more than welcome :smiley:

ah great! And don’t feel like you have to test all my suggestions, I mostly mentioned them to give you ideas, and it’s also good for anybody stumbling on the thread.

And yes, a point is just 1 vertex. And a plane would actually be 6, since it’s not a quad but 2 triangles (but there is an index, so it’s indeed 4 points in memory, and 6 drawn). That said, unless you’re dealing with hundred thousands points, I doubt it will have a noticeable performance difference. Even on a 7 year old computer.

What would make a difference though are all the other operations that are happening. For instance, when you use different planes, and keep them separate so you can apply a lookat on each, you will have multiple objects. And having many objects can be a bottleneck. So if you do have a lot of them, then yes, using points will be more performant, mostly because the lookat is then not needed.

But since there are so many variables that can affect performance, it’s always best to actually test on the devices. And you could also use the performance monitor that comes with chrome (Analyze runtime performance - Chrome Developers - there may be an equivalent for other browsers), so you could get a sense if the bottleneck is on the CPU (which would be the case with too many objects), or on the GPU (if you had too many lights, or complicated shaders)

1 Like