# Issue Setting Color of Thin Instance

**URL:** <https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976>\
**Category:** Questions\
**Created:** [October 16, 2020, 6:55pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976 "2020-10-16T18:55:28Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [October 16, 2020, 6:55pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/1 "2020-10-16T18:55:28Z")

</div>

How can I set the color of the thin instance while using this custom material to set the tile?

[https://www.babylonjs-playground.com/#KWVY94#4](https://www.babylonjs-playground.com/#KWVY94#4)

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [October 16, 2020, 8:01pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/2 "2020-10-16T20:01:48Z")

</div>

Also, how can I get this working when the texture is used for both diffuse and opacity?

[https://www.babylonjs-playground.com/#KWVY94#6](https://www.babylonjs-playground.com/#KWVY94#6)

Thanks

---

<div class="post-metadata">

**Author:** ![JCPalmer](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jcpalmer/32/42_2.png) [@JCPalmer](https://forum.babylonjs.com/u/JCPalmer)\
**Post date:** [October 16, 2020, 9:14pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/3 "2020-10-16T21:14:57Z")

</div>

For the color part, I got it to green. [https://www.babylonjs-playground.com/#KWVY94#7](https://www.babylonjs-playground.com/#KWVY94#7)

There is a square character in line 52

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [October 16, 2020, 9:29pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/4 "2020-10-16T21:29:24Z")

</div>

I shouldve been more specific. I need to be able to color thin instances using the color attribute of the thin instance.

I think I need a different way of setting the uv offset, but my shaders skills are a bit lacking.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 16, 2020, 9:53pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/5 "2020-10-16T21:53:50Z")

</div>

You can simply multiply baseColor by vColor:

[https://www.babylonjs-playground.com/#KWVY94#8](https://www.babylonjs-playground.com/#KWVY94#8)

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [October 16, 2020, 10:06pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/6 "2020-10-16T22:06:42Z")

</div>

Thanks Evgeni. Is there a way to get that custom material to work when the texture is also set to the opacity texture?

[https://www.babylonjs-playground.com/#KWVY94#9](https://www.babylonjs-playground.com/#KWVY94#9)

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [October 16, 2020, 10:09pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/7 "2020-10-16T22:09:53Z")

</div>

Do I need add similar code to Fragment\_Custom\_Alpha?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 16, 2020, 10:28pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/8 "2020-10-16T22:28:51Z")

</div>

This one is a little more involved because there’s no simple way to inject some code just after the alpha texture has been sampled.

You can use a feature that allows to tamper with the shader source code just before it is sent to the GPU to replace the alpha sampling code by your own (lines 51-64):

[https://www.babylonjs-playground.com/#KWVY94#10](https://www.babylonjs-playground.com/#KWVY94#10)

You can also write your own shader with `ShaderMaterial` but it’s even more involved.

You could also write a node material in the NME, using for eg uv2 to hold tileOffset.

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [October 16, 2020, 10:33pm UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/9 "2020-10-16T22:33:39Z")

</div>

Man, you are a wizard. Thanks!

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [October 30, 2020, 4:23am UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/10 "2020-10-30T04:23:27Z")

</div>

I think I need to use ShaderMaterial to make this work with the opacity texture. The solution above isn’t working on my older iPhone or Safari on mac mini. Anyone have an example that might be helpful?

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [October 30, 2020, 6:33am UTC](https://forum.babylonjs.com/t/issue-setting-color-of-thin-instance/14976/11 "2020-10-30T06:33:52Z")

</div>

After studying the solution some more I realized that texture() is not available in WebGL1. I fixed the issue by updating the solution to:

```
(<any>material)._saveCustomShaderNameResolve = material.customShaderNameResolve.bind(material);
        material.customShaderNameResolve = function(shaderName, uniforms, uniformBuffers, samplers, defines, attributes, options) {
            options.processFinalCode = (type, code) => {
                if (type === "vertex") {
                    return code;
                }
                code = code.replace(
                    /vec4 opacityMap=texture2D\(opacitySampler,vOpacityUV\+uvOffset\);/,
                    "vec4 opacityMap=texture2D(opacitySampler,uvCoord);"
                );
                return code.replace(
                    /vec4 opacityMap=texture\(opacitySampler,vOpacityUV\+uvOffset\);/,
                    "vec4 opacityMap=texture(opacitySampler,uvCoord);"
                );
            };
            return (<any>material)._saveCustomShaderNameResolve(shaderName, uniforms, uniformBuffers, samplers, defines, attributes, options);
        }

```

Thanks again @Evgeni_Popov