Easiest way to create moving hole

How I can add a moving hole in a box or ground? If I understand correctly CSG is not for animation?

Welcome aboard!

CSG can be slow, so if you want to animate per frame it may not be the way to go.

The easiest way would be to use an opacity texture with a hole inside and adjust the uOffset/vOffset properties to make it move:


1 Like

But if it should be more like a golf hole where you can put objects?
More like this

What about this fake hole?


It won’t work for me. I want to add a hole to a scene like this (Babylon.js Playground) and a ball can fall into a hole.
Idk, maybe I should create a level in blender or something and then move an object. Is it possible? I’m new to 3d stuff

You need the hole to change position at each frame? Or is it something like a “level”, for level X the hole must be in a different location than for level Y?

If the latter, you can use CSG, as you don’t have a realtime requirement.

The first option, change position at each frame. Like in this gif. For static holes i saw the solution in this thread, but it don’t work for me

Mesh operations like merging and extracting can be very slow. To ensure a smooth game, I would suggest using other techniques such as using multiple boxes in a given area to make a hole.

But if you want really fast and smooth movement in your games there is an other way : shaders!


It is more complicated than a framework but worth to study. The graphics are calculated by the GPU - so far I understood - and not from CPU and this is the reason for its fastness.

1 Like

Mesh operations look realy interesting, but works only with square.

Ooo, cool. Shaders look like a solution. But if i will do it by using shaders physics engine like cannon js will allow objects fell into that holes?

1 Like

Maybe external libraries can help you with the handling with meshes like this one

You should ask this the guys who are more familiar with the combination of babylon and shaders

Hi @pleshakovalexander and welcome from me.

An alternative using




Is the ground flat as in the gif? Or do you need varying terrain as well?

Thank you! This solution is much easier than shaders. I will try this one with circles first

I think for now i’ll try only with flat objects. It’s complicated enough for me)

if I add a circle hole to a cube i get this artifact. Can’t understand why.

If I add a circle hole to a circle then I have this little artifact


This is caused by the inaccuracy of the float arithmetic of Javascript, I suppose:

Work with one or two digits after the decimal point and there will be no artifacts:


or use integers and multiplication in loop https://www.babylonjs-playground.com/#6KLAZJ#4