# InstancedBufferGeometry UV mapping

**URL:** <https://discourse.threejs.org/t/instancedbuffergeometry-uv-mapping/27057>\
**Category:** Questions\
**Tags:** uv-mapping, instanced-mesh\
**Created:** [June 9, 2021, 1:27am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-uv-mapping/27057 "2021-06-09T01:27:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DiacoML](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diacoml/32/56476_2.png) [@DiacoML](https://discourse.threejs.org/u/DiacoML)\
**Post date:** [June 9, 2021, 1:27am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-uv-mapping/27057/1 "2021-06-09T01:27:16Z")

</div>

So I’m dealing with InstancedMesh and trying to UV map per instance, but the only thing I get is instances with filled solid colors, each instance has different solid color so seems it works somehow! btw I don’t use a RawShaderMaterial, using threeJs standard material.  
any help will be appreciated 🙂

this’s my code :

```javascript
const _material = new THREE.MeshBasicMaterial({ map : _texture });
const _InstancesRef = [
	{ uv:[0,0.5, 1,0.5, 0,0, 1,0] },
	{ uv:[0,1, 1,1, 0,0.5, 1,0.5] }
];
const _totalInstances = _InstancesRef.length;
const _geometry = new THREE.InstancedBufferGeometry().copy( new THREE.PlaneBufferGeometry( 4, 2, 1 ) );
let uv = new Float32Array( _totalInstances * 8 );
for(let i=0,l=_totalInstances; i<l; i++){
	const UV = _InstancesRef[i].uv,
		idx = i*8;
	for(let j=0; j<8; j++){ uv[idx+j]=UV[j]; }
}
_geometry.setAttribute( 'uv', new THREE.InstancedBufferAttribute( uv, 2 ) );
const _InstancedMesh = new THREE.InstancedMesh( _geometry, _material, _totalInstances );

```

---

<div class="post-metadata">

**Author:** ![DiacoML](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diacoml/32/56476_2.png) [@DiacoML](https://discourse.threejs.org/u/DiacoML)\
**Post date:** [June 9, 2021, 12:02pm UTC](https://discourse.threejs.org/t/instancedbuffergeometry-uv-mapping/27057/2 "2021-06-09T12:02:54Z")

</div>

Pls check this out, I’ve tried all, without any result :  
[https://jsfiddle.net/ap9obj3z/](https://jsfiddle.net/ap9obj3z/)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 9, 2021, 2:40pm UTC](https://discourse.threejs.org/t/instancedbuffergeometry-uv-mapping/27057/3 "2021-06-09T14:40:52Z")

</div>

`InstancedMesh` does not automatically support instanced texture coordinates. Hence defining the `uv` attribute as an instanced attribute has no effect. You need a custom shader to make this work.

---

<div class="post-metadata">

**Author:** ![DiacoML](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diacoml/32/56476_2.png) [@DiacoML](https://discourse.threejs.org/u/DiacoML)\
**Post date:** [June 9, 2021, 6:06pm UTC](https://discourse.threejs.org/t/instancedbuffergeometry-uv-mapping/27057/4 "2021-06-09T18:06:07Z")

</div>

Thanks for the reply, is there any simple example to lead me in the right direction?

Update :  
Finally Solved 😃

---

<div class="post-metadata">

**Author:** ![Marcel\_Ennix](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marcel_ennix/32/24014_2.png) [@Marcel\_Ennix](https://discourse.threejs.org/u/Marcel_Ennix)\
**Post date:** [May 28, 2024, 6:23am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-uv-mapping/27057/5 "2024-05-28T06:23:19Z")

</div>

Hi. You solved it. Great. But do you have any hint for someone, who has the same problem, but no solution yet? Like me 🙂

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [May 28, 2024, 7:20am UTC](https://discourse.threejs.org/t/instancedbuffergeometry-uv-mapping/27057/6 "2024-05-28T07:20:56Z")

</div>

create a `Float32Array` with your UV positions  
then use it to set a `THREE.InstancedBufferAttribute`  
then set uniforms to the vertex shader with `onBeforeCompile` and overwrite `<uv_vertex>` chunk  
Here is a live demo with a randomized texture atlas (for r153, but didn’t changed much)  
[https://raw.githack.com/Oxynt/three-instanced-uv/main/index.html](https://raw.githack.com/Oxynt/three-instanced-uv/main/index.html)

repo:

> **[GitHub - Oxynt/three-instanced-uv: Instanced UV example for three r153](https://github.com/Oxynt/three-instanced-uv)**
>
> Instanced UV example for three r153. Contribute to Oxynt/three-instanced-uv development by creating an account on GitHub.