Mergemesh not collecting all colors from my vertices

var mesharrays=[];
var colors;

function supermesh(){

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);

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

return supermesh;

// some colors are missing

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.

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

heres the original image

lets help each other figure it out

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

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

Is is easy to use images on Imgur Using External Assets - Babylon.js Documentation in a playground

cool thanks sorry im new to this

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

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

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;

};

heres the babylon playground to just load the image

https://www.babylonjs-playground.com/#5ZCGRM#82

I put it in base64 so you could go further :slight_smile:
https://www.babylonjs-playground.com/#5ZCGRM#83

genius how did you do that

https://www.base64-image.de/ is pretty helpfull for this :wink:

Ahhh !!! - Using image from Imgur is producing a security issue (see your console) also see Understanding the HTML5 Canvas image security rules – simonsarris

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

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

thanks for the reading , really interesting

thanks learned something new today about base64

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

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