please tell me I’ve not spent days for nothing 
[actually crying inside] 
The playgrounds are broken though… *i’m going to keep going haha I’m so close… I think i need an Async function!
Yeah – I’ve learned a bit i think
Annnnd I’ve just now broken everything with my Async function…
async function makePxls() {
await img.onload;
console.log("Log async: ", dynColorData);
for (var x = 0; x < numPerX; x++) {
m.m[12] = -screenWtot / 2 + ofstX * x;
for (var y = 0; y < numPerY; y++) {
m.m[13] = -screenHtot / 2 + ofstY * y;
for (var z = 0; z < numPerZ; z++) {
m.m[14] = -pxlsize;
// m.m[14] = -screenDtot / 2 + ofstZ * z;
m.copyToArray(pxlMatrixData, index * 16);
pxlColorData[index * imgResFactor + 0] = dynColorData[index * imgResFactor + 0];
pxlColorData[index * imgResFactor + 1] = dynColorData[index * imgResFactor + 1];
pxlColorData[index * imgResFactor + 2] = dynColorData[index * imgResFactor + 2];
pxlColorData[index * imgResFactor + 3] = 1.0;
// var coli = Math.floor(col);
// pxlColorData[index * 4 + 0] = ((coli & 0xff0000) >> 16) / 255;
// pxlColorData[index * 4 + 1] = ((coli & 0x00ff00) >> 8) / 255;
// pxlColorData[index * 4 + 2] = ((coli & 0x0000ff) >> 8) / 255;
// pxlColorData[index * 4 + 3] = 1.0;
index++;
col += 0xffffff / PXLinstanceCount;
}
}
}
pixels.thinInstanceSetBuffer("matrix", pxlMatrixData, 16, false);
pixels.thinInstanceSetBuffer("color", pxlColorData, 4, false);
const pxlMat: any = new BABYLON.StandardMaterial("material", this._scene);
pxlMat.disableLighting = true;
pxlMat.emissiveColor = BABYLON.Color3.White();
pixels.material = pxlMat;
}
makePxls();
How does one wait for this function to complete,
and then run the above?
I must have wrong syntax isn’t it…
Yep, backwards compatibility was broken in BJS5 so here is the updated PG:
2 Likes
@necips and let’s not forget about your masterpiece:
4 Likes
O M G . Is this what i could have followed from the get go!? 
Darn it… haha
…off to compare and contrast this code 
1 Like
The img.onload is a callback. You can’t await it. You can do this:
img.onload = function() {
// your existing img.onload code
processImage()
}
function processImage() {
console.log("Log async: ", dynColorData);
for (var x = 0; x < numPerX; x++) {
m.m[12] = -screenWtot / 2 + ofstX * x;
for (var y = 0; y < numPerY; y++) {
m.m[13] = -screenHtot / 2 + ofstY * y;
.
.
.
}
3 Likes
Or you can use an async wrapper. Google it, stackoverflow.com has tons of examples.
For example:
1 Like
Do you know what this means in this context?
ummmm… No I don’t think I do… All of this is being called within the scene constructor “_scene”, including the callback, which consequently triggers this function…
Does it require more specificity because it is being called from within the callback or something? …it therefore loses the context of the “this.” code ??
but doesn’t appear to have worked. Same error…
ummm . Okay… lets see if i get this…
Like this? Inside my Chrome / Live Server window, right?
BTW, does it matter I’ve written my code in Typescript?
So… it’s saying after reading “_scene” it’s undefined at that point… Ugh… The binding didn’t work either.
I’m beginning to wonder whether my learning experience of Babylon so far has been because I’m using Typerscript?! This is struggle town…
Probably developing at Typescript PG would be easier?
Typescript is great but sometimes confusing in the beginning.
Also, there is nothing bad in JS too 
1 Like
I’m guessing I should stick with learning TS for future gains, I take it?
Labris any ideas on why binding (this) is not working for me in the above?
Did you try just to remove this parameter?
I mean not “this” - just all scene parameter which is optional for the material.
let pxlMat:any = new BABYLON.StandardMaterial("pxlMat")
