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
do you know the code to get image data from an url, its going to take ages to figure it out lol
JohnK
August 21, 2019, 2:39pm
7
Is is easy to use images on Imgur Using External Assets - Babylon.js Documentation in a playground
cool thanks sorry im new to this
JohnK
August 21, 2019, 2:48pm
9
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
genius how did you do that
https://www.base64-image.de/ is pretty helpfull for this
JohnK
August 21, 2019, 3:11pm
15
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
JohnK
August 21, 2019, 3:29pm
19
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