# Mergemesh not collecting all colors from my vertices

**URL:** <https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204>\
**Category:** Questions\
**Tags:** material\
**Created:** [August 21, 2019, 12:49pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204 "2019-08-21T12:49:25Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 12:49pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/1 "2019-08-21T12:49:25Z")

</div>

```auto
var mesharrays=[];
var colors;

```

function supermesh(){

```auto
var objectContext = window.document.createElement('canvas').getContext('2d');
var Scale=1;

	var box = BABYLON.Mesh.CreateBox("box", 1, scene);
	scene.removeMesh(box);
			var mat = new BABYLON.StandardMaterial("mat", scene,false, true, BABYLON.Texture.NEAREST_SAMPLINGMODE);
		
				objectContext.drawImage(jQuery('#idEntityAtlas').get(0), 48, 0,16,16,0,0,16,16);
			
		
		{
			var bits=16; // 16 pixels
			for (var intFor1 = 0; intFor1 < bits; intFor1 += 1) {
				for (var intFor2 = 0; intFor2 < bits; intFor2 += 1) {
					
					var intColor = objectContext.getImageData(intFor1, intFor2,1, 1).data
					
					
					
					if (intColor[3] === 0) {
						continue;
					}
					  var mesh=box.clone('box1');
					  box.geometry.copy(BABYLON.Geometry.RandomId()).applyToMesh(mesh);
					
						
					var x=	mesh.position.x += Scale * (8- intFor1);
						var y= mesh.position.y += Scale * (8- intFor2);
						var z= mesh.position.z += 0.0;
						
								 	   colorVertices(mesh, new BABYLON.Color3(intColor[0], intColor[1],intColor[2] )) 
							
								 mesharrays.push(mesh);
					  }
				

			}
		}
		
	
function colorVertices(mesh, color) {

	var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);

    colors = [];

 for (var i = 0; i<positions.length/3; i ++) {
	 
	 colors.push(color.r, color.g, color.b, 1);
      
    }

    mesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, colors,false, false);
		
}

```

var supermesh = BABYLON.Mesh.MergeMeshes(mesharrays,true);

```auto
supermesh.material = new BABYLON.StandardMaterial('mat', scene);

return supermesh;

```

// some colors are missing

 ![pngissue](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/2/276ead15385f8fa3edb034c502e7480440c4f03d.png)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 21, 2019, 1:52pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/2 "2019-08-21T13:52:07Z")

</div>

Hello and welcome to the forum !!!

Would you mind reproducing the issue in the babylon playground ?

This will be way easier to troubleshoot the code.

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 2:17pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/3 "2019-08-21T14:17:52Z")

</div>

I think I cant because the original png is from this \<img id=“idEntityAtlas” src="/textures/textureatlas.png"style=“display:none;”\> on the index.html file

 ![textureatlas](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f08d0966071d14a7d9392dceaefdef166698fbcb.png) heres the original image

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 2:18pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/4 "2019-08-21T14:18:39Z")

</div>

lets help each other figure it out

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 21, 2019, 2:35pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/5 "2019-08-21T14:35:58Z")

</div>

You could upload your texture to imgur and use it from there 🙂

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 2:38pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/6 "2019-08-21T14:38:11Z")

</div>

do you know the code to get image data from an url, its going to take ages to figure it out lol

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [August 21, 2019, 2:39pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/7 "2019-08-21T14:39:24Z")

</div>

Is is easy to use images on Imgur [Using External Assets - Babylon.js Documentation](https://doc.babylonjs.com/resources/external_pg_assets#from-imgurcom) in a playground

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 2:40pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/8 "2019-08-21T14:40:46Z")

</div>

cool thanks sorry im new to this

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [August 21, 2019, 2:48pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/9 "2019-08-21T14:48:17Z")

</div>

No need to be sorry, we all didn’t know what we know now at some point in time.

DynamicTextures might be of use to you, its a way that Babylon.js creates a canvas for text and changing images [Use Dynamic Texture - Babylon.js Documentation](https://doc.babylonjs.com/how_to/dynamictexture#creating-and-applying-a-dynamic-texture)

EDIT here is a way of putting images from a texture atlas onto faces of a box [Apply Material to Individual Faces - Babylon.js Documentation](https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors)

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 2:54pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/10 "2019-08-21T14:54:34Z")

</div>

sorry just loading my image on a ground is not working  
heres the code

var createScene = function () {  
var scene = new BABYLON.Scene(engine);

```
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;

var groundWidth = 20;
var groundHeight = 10;

var ground = BABYLON.MeshBuilder.CreateGround("ground1", {width: groundWidth, height: groundHeight, subdivisions: 25}, scene);

//Create dynamic texture
var textureResolution = 512;
var textureGround = new BABYLON.DynamicTexture("dynamic texture", textureResolution, scene);   
var textureContext = textureGround.getContext();

var materialGround = new BABYLON.StandardMaterial("Mat", scene);    				
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;

var img = new Image();
img.src = 'https://i.imgur.com/0icMJUh.png';
img.onload = function() {
    //Add image to dynamic texture
    textureContext.drawImage(this, 0, 0);
	textureGround.update();

    textureContext.drawImage(this, 48, 0,16,16,0,0,16,16)
  
	textureGround.update();	

}	

return scene;

```

};

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 2:56pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/11 "2019-08-21T14:56:13Z")

</div>

heres the babylon playground to just load the image

[https://www.babylonjs-playground.com/#5ZCGRM#82](https://www.babylonjs-playground.com/#5ZCGRM#82)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 21, 2019, 3:04pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/12 "2019-08-21T15:04:01Z")

</div>

I put it in base64 so you could go further 🙂  
[https://www.babylonjs-playground.com/#5ZCGRM#83](https://www.babylonjs-playground.com/#5ZCGRM#83)

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 3:05pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/13 "2019-08-21T15:05:02Z")

</div>

genius how did you do that

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 21, 2019, 3:05pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/14 "2019-08-21T15:05:44Z")

</div>

[https://www.base64-image.de/](https://www.base64-image.de/) is pretty helpfull for this 😉

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [August 21, 2019, 3:11pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/15 "2019-08-21T15:11:05Z")

</div>

Ahhh !!! - Using image from Imgur is producing a security issue (see your console) also see [Understanding the HTML5 Canvas image security rules – simonsarris](https://simonsarris.com/understanding-the-html5-canvas-image-security-rules/)

Why do you need to load your image on a canvas first?

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 3:13pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/16 "2019-08-21T15:13:11Z")

</div>

im getting this weird error name something  
[https://playground.babylonjs.com/#8Q2HQE#3](https://playground.babylonjs.com/#8Q2HQE#3)

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 3:17pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/17 "2019-08-21T15:17:28Z")

</div>

thanks for the reading , really interesting

---

<div class="post-metadata">

**Author:** ![Amine\_Assine](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amine_assine/32/4097_2.png) [@Amine\_Assine](https://forum.babylonjs.com/u/Amine_Assine)\
**Post date:** [August 21, 2019, 3:18pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/18 "2019-08-21T15:18:11Z")

</div>

thanks learned something new today about base64

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [August 21, 2019, 3:29pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/19 "2019-08-21T15:29:25Z")

</div>

Weird error is `b is null` is an error picked up from the file babylon.js that the playground is using. As it is a minified file all variable names are single letters or a least non readable groups of letters

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 21, 2019, 3:29pm UTC](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204/20 "2019-08-21T15:29:53Z")

</div>

Here is a simplified version you can start from for your repro: [https://playground.babylonjs.com/#8Q2HQE#6](https://playground.babylonjs.com/#8Q2HQE#6)

[Next page](https://forum.babylonjs.com/t/mergemesh-not-collecting-all-colors-from-my-vertices/5204.md?page=2)