# How to create thin instances directly from data buffer?

**URL:** https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345
**Category:** Questions
**Tags:** thininstances
**Created:** [August 24, 2022, 6:55pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345 "2022-08-24T18:55:28Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![dizel3d](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dizel3d/32/21234_2.png) [@dizel3d](https://forum.babylonjs.com/u/dizel3d)
#### Post date: [August 24, 2022, 6:55pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345/1 "2022-08-24T18:55:28Z")

</div>

I have an instance buffer like so:

```auto
const buffer = new Float32Array([
    // instance 0
    0, 1, 0, 1, // color=green
    1, 0, 0, 0, // world0
    0, 1, 0, 0, // world1
    0, 0, 1, 0, // world2
    -1, 0, 0, 1, // world3
    // instance 1
    0, 0, 1, 1, // color=blue
    1, 0, 0, 0, // world0
    0, 1, 0, 0, // world1
    0, 0, 1, 0, // world2
    1, 0, 0, 1, // world3
]);

```

I want to create thin instances from the buffer as is **without copying** elements to intermediate buffer or array. Seems, `thinInstanceSetBuffer` doesn’t suit me because it cannot accepts an offset. I found out the only [solution](https://playground.babylonjs.com/#K218ZB#8). But I’m confused about the hidden field `_thinInstanceDataStorage`. Please, advice me a better solution.

---

<div class="post-metadata">

### Author: ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)
#### Post date: [August 24, 2022, 6:59pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345/2 "2022-08-24T18:59:49Z")

</div>

Color and matrix are 2 seperate buffers, you’d have to copy your values into these and pass them to thinInstanceSetBuffer

---

<div class="post-metadata">

### Author: ![dizel3d](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dizel3d/32/21234_2.png) [@dizel3d](https://forum.babylonjs.com/u/dizel3d)
#### Post date: [August 24, 2022, 7:05pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345/3 "2022-08-24T19:05:55Z")

</div>

I care about performance so I would like to avoid copying. It’s possible as I wrote above, but I couldn’t find relevant public API.

---

<div class="post-metadata">

### Author: ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)
#### Post date: [August 24, 2022, 7:29pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345/4 "2022-08-24T19:29:50Z")

</div>

As i wrote, thinInstances use 2 seperate buffers.

So, 2 options i can think of;  
Split your buffer into two from the server/storage side and you can pass them directly into **thinInstanceSetBuffer**

Or copy into seperate buffers in js,

> **[Babylon.js Playground](https://playground.babylonjs.com/#V1JE4Z%23132)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Micro-optimizing can be a dangerous road, there is nothing wrong with copying data.  
Unless you have an unrealistic amount of instances, it won’t affect performance much and GC will take care of the unused data soon enough.

~~_and_ FYI, your solution is also copying data from your buffer into vertexBuffers 🙂~~

---

<div class="post-metadata">

### Author: ![dizel3d](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dizel3d/32/21234_2.png) [@dizel3d](https://forum.babylonjs.com/u/dizel3d)
#### Post date: [August 24, 2022, 10:35pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345/5 "2022-08-24T22:35:38Z")

</div>

> your solution is also copying data from your buffer into vertexBuffers

My buffer’s pass to vertexBuffers by reference. AFAIK VertexBuffer doesn’t make any copies, it’s just a container. It’s pass to webgl [using gl.vertexAttribPointer](https://github.com/BabylonJS/Babylon.js/blob/3e5a983a5e75925c531b7b24baa243c6ed161f5d/packages/dev/core/src/Engines/thinEngine.ts#L2304) without any copying as well.

---

<div class="post-metadata">

### Author: ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)
#### Post date: [August 24, 2022, 11:24pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345/6 "2022-08-24T23:24:35Z")

</div>

Here’s just one more option that comes to mind, for using a single buffer. Although IDK how practical it might be for you. 🙂

If you’re able to generate the data with all of the matrices at the beginning followed by all the colors, you could create two views of the buffer (with different offsets and lengths). And then you could call thinInstanceSetBuffer for each of the views to set the matrices and colors.

> **[Babylon.js Playground](https://playground.babylonjs.com/#K218ZB%239)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

### Author: ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [September 23, 2022, 4:38pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345/7 "2022-09-23T16:38:36Z")

</div>

Hello @dizel3d just checking in if you need any further assistance?

---

<div class="post-metadata">

### Author: ![dizel3d](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dizel3d/32/21234_2.png) [@dizel3d](https://forum.babylonjs.com/u/dizel3d)
#### Post date: [November 24, 2022, 4:50pm UTC](https://forum.babylonjs.com/t/how-to-create-thin-instances-directly-from-data-buffer/33345/8 "2022-11-24T16:50:55Z")

</div>

No, thank you
