Quest to create a Hologram with a JPEG! (how to? using Thin Instances, Matrix, Arrays)

O . K . I finally got there…

Array seems good…
image

Now i need to map them into the previous thing…

This is really visible progress which may lead to the final success :slight_smile:

1 Like

hahaha :+1:t5: *needless to say i feel so stupid haha. Update: that “:any” thing worked once again sort of


My array returns correctly in ConsLog #1;
and returns only 0’s in ConsLog #2.

I’ve noticed the original is a Float32Array:
image

How do i get the ConsLog #1 data out of there in the correct format?
Should “: any” at L:173 be set to something else to declare an Array?
image

As far as I can see your ConsLog #2 is outside a function which will be performed only after the image is loaded. That is why you have 0’s there. You need a callback or promise here, for example.
As for the line 173 you may try myInstance:MyArrayType[] = [];
See also TypeScript Array Type

1 Like

Ah… okay…so that works! I just had to put the log back into the function…

So now, I need to make sure the Thin Instance creation occurs only after this Array has been created…

please tell me I’ve not spent days for nothing :joy: [actually crying inside] :smiley:

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 :smiley:

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:

3 Likes

O M G . Is this what i could have followed from the get go!? :expressionless:
Darn it… haha

…off to compare and contrast this code :sweat_smile:

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

Aha! Getting closer… Did option A, but getting this error in console:

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 ??

I tried binding the “this” :point_down:t5: 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?