# After merging bufferGeomtery is it possible have unique material for each geomtery?

**URL:** <https://discourse.threejs.org/t/after-merging-buffergeomtery-is-it-possible-have-unique-material-for-each-geomtery/28728>\
**Category:** Questions\
**Tags:** buffergeometry, merge, materials, geometry\
**Created:** [August 7, 2021, 5:08pm UTC](https://discourse.threejs.org/t/after-merging-buffergeomtery-is-it-possible-have-unique-material-for-each-geomtery/28728 "2021-08-07T17:08:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [August 7, 2021, 5:08pm UTC](https://discourse.threejs.org/t/after-merging-buffergeomtery-is-it-possible-have-unique-material-for-each-geomtery/28728/1 "2021-08-07T17:08:01Z")

</div>

after going through many older topics covering this topic i’m able to successfully merge geometries. Mostly thanks to this fiddle by @Mugen87 [Issue with merging objects by its geometries using mergeBufferGeometries() - #5 by Mugen87](https://discourse.threejs.org/t/issue-with-merging-objects-by-its-geometries-using-mergebuffergeometries/3078/5)

 ![merged](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/0/704bce15ea83d326306a8deb7813127ecba4149e.jpeg)

Now, can i assign some value/group/attribute to each geometry so that when creating a mesh i can pass a material array ?

or

Even if its the same material , i could also use a [color atlas](https://answers.unity.com/storage/temp/59376-cagecorespritesheet.png) image to put all the uv coords of each geometry on each color grid of the atlas

Reason for merging is when the mesh count goes above ~100 AR sessions and windows’s glb viewer starts to lag but after merging i can add a 1000 cubes without issue.

The fiddle (merging part the is last function)  
[https://jsfiddle.net/orion\_prime/xqLskny5/3/](https://jsfiddle.net/orion_prime/xqLskny5/3/)

Fiddle screenshot of three js handling 1000 cubes with MeshPhysicalMaterial like a champ 😍

 ![1000](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/a/fae800a60164c8ece547c0793c28ceed6a98c02f.jpeg)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 7, 2021, 5:46pm UTC](https://discourse.threejs.org/t/after-merging-buffergeomtery-is-it-possible-have-unique-material-for-each-geomtery/28728/2 "2021-08-07T17:46:36Z")

</div>

Not separate materials — a merged mesh is a single geometry/shader pair on the GPU. But different vertex colors or UV offsets can create similar effects with the built-in materials, or with custom shaders you can do nearly anything here.

---

<div class="post-metadata">

**Author:** ![orion\_prime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/orion_prime/32/15785_2.png) [@orion\_prime](https://discourse.threejs.org/u/orion_prime)\
**Post date:** [August 11, 2021, 6:32pm UTC](https://discourse.threejs.org/t/after-merging-buffergeomtery-is-it-possible-have-unique-material-for-each-geomtery/28728/3 "2021-08-11T18:32:25Z")

</div>

Thanks!  
Successfully added vertex color to each of the geometry

[https://jsfiddle.net/orion\_prime/xqLskny5/6/](https://jsfiddle.net/orion_prime/xqLskny5/6/)

output test on updated gltfViewer !

 ![ver](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/2/e2cde31366aea9037b0e382543bd3acb1014403d.jpeg)

snippet

```javascript
const color = new THREE.Color();

	for (const mesh of allMeshes) {

		const count = mesh.geometry.attributes.position.count;
		const geometry = mesh.geometry.clone();
		geometry.setAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );

		const colorAttr = geometry.attributes.color;
		color.copy(mesh.material.color)
		
		for ( let i = 0; i < count; i ++ ) {
			colorAttr.setXYZ( i, color.r, color.g, color.b );
		}
		
		geometry.applyMatrix4(mesh.matrix)
		geometries.push(geometry);
	}

	const mesh = new THREE.Mesh(THREE.BufferGeometryUtils.mergeBufferGeometries( geometries ), mergedMaterial)
	mesh.position.z= 2
	scene.add(mesh)

```

Now how do i do the UV method ? each geomtery’s uv points needs to be offset to a certain color of the atlas image

---

<div class="post-metadata">

**Author:** ![titansoftime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/titansoftime/32/1044_2.png) [@titansoftime](https://discourse.threejs.org/u/titansoftime)\
**Post date:** [August 11, 2021, 7:03pm UTC](https://discourse.threejs.org/t/after-merging-buffergeomtery-is-it-possible-have-unique-material-for-each-geomtery/28728/4 "2021-08-11T19:03:12Z")

</div>

I do this by passing an array of materials to a Mesh and utilizing the groups property of BufferGeometry to set a material index [three.js docs](https://threejs.org/docs/#api/en/core/BufferGeometry.addGroup).

This of course creates additional draw calls per material though.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 11, 2021, 8:16pm UTC](https://discourse.threejs.org/t/after-merging-buffergeomtery-is-it-possible-have-unique-material-for-each-geomtery/28728/5 "2021-08-11T20:16:40Z")

</div>

You can add a UV offset without adding draw calls very similarly to the `colorAttr` code above. Access `geometry.attributes.uv`, and call `setXY(...)` for the offset into the atlas image. This would require creating the atlas image carefully to keep track of offsets.