# How to use color buffer with GreasedLine and Thin Instances?

**URL:** <https://forum.babylonjs.com/t/how-to-use-color-buffer-with-greasedline-and-thin-instances/52406>\
**Category:** Questions\
**Created:** [July 29, 2024, 5:22pm UTC](https://forum.babylonjs.com/t/how-to-use-color-buffer-with-greasedline-and-thin-instances/52406 "2024-07-29T17:22:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![axeljaeger](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/axeljaeger/32/21445_2.png) [@axeljaeger](https://forum.babylonjs.com/u/axeljaeger)\
**Post date:** [July 29, 2024, 5:22pm UTC](https://forum.babylonjs.com/t/how-to-use-color-buffer-with-greasedline-and-thin-instances/52406/1 "2024-07-29T17:22:19Z")

</div>

Hello,  
I am trying to draw the same GreasedLine multiple times with thin instances with different colors. I am pretty sure I missed something simple fundamental here, such as the wrong buffer kind name or enabling a color buffer altogether. I created a playground as a base: I want to draw the 3 squares with 3 different colors.

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

Best regards,  
Axel

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 29, 2024, 5:25pm UTC](https://forum.babylonjs.com/t/how-to-use-color-buffer-with-greasedline-and-thin-instances/52406/2 "2024-07-29T17:25:52Z")

</div>

Summoning the god of GreasedLines: @roland

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 29, 2024, 6:20pm UTC](https://forum.babylonjs.com/t/how-to-use-color-buffer-with-greasedline-and-thin-instances/52406/3 "2024-07-29T18:20:46Z")

</div>

Hello!

I’ve added this property to the material options `colorMode: BABYLON.GreasedLineMeshColorMode.COLOR_MODE_MULTIPLY `  
and a `HemisphericLight` to the scene in the following PG:

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

Result:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/7/57c48e5b3ddcd7bb8ac71a40c27a1dcbfc20c528.png)

Docs for `colorMode`:  
[https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased\_line#colormode](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line#colormode)

Another approach is this (1 draw call):  
You can draw as many lines in instance mode. All the lines will be joined into one mesh so it renders fast.

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

Docs for `instance`:  
[https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased\_line#instance-mode](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line#instance-mode)

Docs for `lazy`:  
[https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased\_line#lazy-mode](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line#lazy-mode)

---

<div class="post-metadata">

**Author:** ![axeljaeger](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/axeljaeger/32/21445_2.png) [@axeljaeger](https://forum.babylonjs.com/u/axeljaeger)\
**Post date:** [August 1, 2024, 7:31pm UTC](https://forum.babylonjs.com/t/how-to-use-color-buffer-with-greasedline-and-thin-instances/52406/4 "2024-08-01T19:31:18Z")

</div>

Hi,  
unfortunately, while both ideas are nice, they do not solve my problem (which I did so far not clearly state):

So I want to have many instances and when I hover one of them, I want to change its color. So even if it might work for low numbers of instances, I consider the second approach as not usable (although the idea is nice).

The first one is close to what I want to to do, but I need the emissive color set as I have a technical drawing scene that does not use lights or shading. Can it be modified to set the emissive color so I dont get any shading but basically a flat fill with the color?

I also tried in the meantime using a custom shader material with one color attribute, but it looks like I cannot just plug any material into GreasedLine. No pixels are filled at all using my custom material. Using a custom material would actually be my preferred solution but looks like this is not so easy.

Best regards,  
Axel