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.
- 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)
- 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:
https://polygonjs.com/docs/tutorials/camera_renderer
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.
- 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.
- 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.
