Help for converting threejs logic to babylon (geometry buffers)


I successfully get my threejs version rendering:

Not instanciable unique objects to the scene:

const raw_data = new Float32Array(raw_buffer_of_triangles.d);
geometry = new BufferGeometry();
geometry.setAttribute('position', new BufferAttribute(raw_data, 3));

OK. So the 3 consecutive laid points represent the 3 points of the triangle.
What is the best way to do so in BJS? I need absolute performance.

Instanciable static unique objects to the scene:

           let bg = new BufferGeometry();
            bg.setAttribute('position', new BufferAttribute(raw_data, 3));

            my_geom = new InstancedMesh(bg, material_dict[element_material], matrices.length);
            let i = 0;
            for (let matrice of matrices) {
                    const m = new Matrix4();
                    const tmp = new Float32Array(matrice.m);
                    my_geom.setMatrixAt(i, m);

                    my_geom.setColorAt(i, new Color(matrice.c));

                    i += 1;


So 4x4 matrices are fed to the program.
For the instanced version, only color ans transforms are set and the objects are static.

I read about the sps and thin instances, but they don’t seem to accept precalculated raw triangles.
Again, absolute performance is a paramount here.

The source data shape cannot be changed.

Can you help to point the best practices for my use case as I still read the optimization section of BJS?


Hello! If I understood correctly, you have some geometry data you want to instance, correct? If so, you can create a mesh from this geometry data Create Custom Meshes From Scratch | Babylon.js Documentation ( and then instance it normally.

Thin Instances is also a huge perf saver Thin Instances | Babylon.js Documentation

1 Like

Yes, given the excerpt of the Threejs code you give, @sebavan is right, you need to use thin instances: thin instances in Babylon.js === InstancedMesh in Threejs (InstancedMesh in Babylon.js - which does exist, is NOT the same thing than InstancedMesh in Threejs!).

You should create a mesh as @carolhmj said with your raw data (vertices, triangle list, uv, colors, etc) and create thin instances for it (basically a thin instance == a 4x4 matrix that will be used to draw the mesh with a specific translation/rotation/scaling transformation).


@Evgeni_Popov you rock !!!

Hello @glad just checking in, was your question answered?

Hi Carol,
Apologies for not having answered, I’ve been busy trying different engines and solutions.

I really like Bjs but I had a weird feeling as far as skyboxes are handled and so on so I forgot to come back.

Yes, please consider my question as answered!

1 Like

No problems, just wanted to make sure we did everything to help you :slight_smile: If you don’t mind me asking, what gave you a weird feeling about skyboxes?

The steps involved and the final resolution. One of your direct competitor has hdr loader that is easier to use. But don’t get me wrong, you have many features I really like. The missing bit is light baking/ lightprobes from,say, Blender to achieve beautiful in game scenes.

Same, the pointerlock didn’t feel natural and the performance seemed lower. But you have a built-in triplanar. Nothing is black or white

It’s always good for us to learn in which areas users feel we’re lacking so we can improve on them for the next releases :smile:

Definitely! And trust me, I really think you have huge points for you:
Better doc than the competition
I felt at home as far as features listing BJS has
Seems easier

But you have too many things to tweak to get huge perfs, on the contrary to your direct competitor.


I am quite interested on this one, wondering what was complex with it and how we can improve it ?

1 Like


function initSky() {
  new EXRLoader().setPath("raw_textures/").load("sky.exr", function (texture) {
    texture.mapping = EquirectangularReflectionMapping;

    scene.background = texture;
    scene.environment = texture;


and everything went on its own with satisfying result.
When I tried with BJS, I had to give the 6 textures of a cube. I don’t have time for that. Maybe I missed a way to do it though

Yup could be done like this with env files:

scene.environmentTexture = new BABYLON.CubeTexture("textures/environment.env", scene);

or like this with hdr

scene.environmentTexture = new BABYLON.HDRCubeTexture("./textures/environment.hdr", scene, 128);
1 Like

Thanks ! Very late but there it is :slightly_smiling_face:

1 Like