Some terms about mesh api

Hi all,
A newbie question here:
About the mesh event trigger: onBeforeBindObservable, onBeforeDrawObservable, onBeforeRenderObservable, onBetweenPassObservable

Can anyone explain mesh binding, drawing, rendering, between rendering pass?


All these terms have to do with certain phases and operations of graphic APIs. I’ll try to explain in a high level way: to be able to render anything on the screen, we need to do several operations. One of these is binding certain buffers to the GPU so that it knows what vertices it needs to draw. Once the binding is done, then we can invoke the API to draw what has been bound. We can draw things only once, but sometimes we need multiple drawing passes to acheive certain effects (one example would be culling with transparency). So the order of operations would be:

You can learn a bit more about what each of these steps mean here: WebGL Fundamentals and here: Raw WebGL (


@carolhmj , good answer, explain very clearly, thanks.

Any case (or PG) for multiple drawing passes?

Would be nice to have more graphical representations of how all this works :slight_smile:
(especially for BABYLON engine)

I’ll add this as a work item to improve the docs! :smiley:

1 Like

I didn’t find one but asked around and created a simple one using the separateCullingPass. The intention is helping solve self transparency issues. In the example, the left mesh doesn’t have the separate pass, and the right one has: Transparency test | Babylon.js Playground (

1 Like