Unlike opaque and alpha-tested meshes, the BabylonJS rendering engine sorts alpha-blended meshes by depth before drawing them on screen (see below). alphaIndexīy default, this property is set to Number.MAX_VALUE, which is the highest value that a numerical variable can hold (around 1.79E+308). Meshes have another property that has an influence on the rendering order. There can be no more than 4 rendering groups in total, meaning that the only valid IDs are 0, 1, 2 and 3. Rendering groups are rendered by ascending ID, starting with the default one. This property exists on meshes, particle systems and sprite managers. renderingGroupId on the objects you want to put in other layers than the default one (which has the ID of 0). To use rendering groups, you simply need to set the property. In each of these rendering groups, the order above will be used. Renderable objects can be organized into rendering groups, which act as layers. These simply cannot be hidden by regular meshes. Note that they are always drawn after all the other meshes, and that they do not use any depth buffer that may have been previously created. This is what a depth buffer looks like for a scene which contains only opaque meshes:īefore actually drawing meshes on the screen, BabylonJS puts them in the following categories, which are presented in the order in which they are drawn:Īlpha blended meshes, sorted by depth (= distance to camera)Ĭategories 4 and 5 are self-explanatory. However, things get more complicated for non-opaque objects, as a depth buffer can't be used anymore (since these objects don't completely hide what's behind them). Testing against a depth buffer during render is a very common technique, simple to implement and performance-inexpensive. depth), and clearly not enough for most cases. This is basically ordering objects by distance from camera (a.k.a. Rendering objects without a depth buffer would require resorting to an old-school technique called Painter's Algorithm, which is extremely simple: draw further objects first. BabylonJS offers access to this information with a special DepthRenderer object. With this information, we can draw as many objects as we want and always be sure that we will never draw something that was supposed to be hidden by another object. This is due to the fact that opaque objects are compatible with the use of a depth buffer, and thus no specific order is required when rendering them.Ī depth buffer is a surface using the same dimensions as the screen, and holding for every pixel the following information: how far from the camera was the last pixel drawn here. Feel free to contribute in whatever way seems fit to you! General ConsiderationsĪ general rule of thumb in real-time 3D rendering is that drawing several overlapping opaque objects is always easier than non-opaque ones. This article has been written to help you understand how things are drawn on screen, and how transparency is handled in BabylonJS.
0 Comments
Leave a Reply. |