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

One of the major aims of Typescript is to check your code for errors before it is compiled into Javascript. Javascript does not do error checking anywhere near the level of Typescript.

Now Babylon.js is written in Typescript so when you write code in Typescript it uses the Typescript version of Babylon.js with all the inherent error checking.

The way StandardMaterial is set up in Typescript the function that creates is given two parameters (name, scene) and these are not set up to be optional as parameters - if scene was optional it would be (name, scene?)

That means that whenever you create a new standard material in Typescript you must give both parameters.

However when the scene was made an optional parameter this was done within the StandardMaterial function code itself (the only way you can do it for Javascript) if the code finds it is not present it then it knows to use the current scene.

Javascript deals with the missing parameter within the function code and and we all say scene is an optional parameter

Typescript says I was told two parameters and I only got one so I am not going any further deal with it.


Yes! I started noticing that pattern in the docs with the “?” thanks for confirming!

Oh I see… Noted. This is all useful for noobs like me. From what I read on TS I liked the facility that it provided but I am learning some of its additional “demands” hehe.

John, do you have any ideas on resolving moire effect in the scene?

I know things like Unreal engine resolve it dynamically, with all sorts of magic running in the background, plus anti aliasing and things like dynamic loading at different Levels of Detail… Any such tricks here in Babylon? I noticed that at this resolution of Thin Instances is taking a while to initially load as well, but its smooth thereafter
**my image is 1920x1920, and the Thin Instanced cube is size: 0.001
therefore this TI’d Object is somewhere a little bit larger than a 1.92x1.92 screen size
— I hope this is not too big to compute with Thin Instances? Next step is to create a ripple effect on the instances Z position so I’m really hoping this will scale with some animation effect haha

NEXT CHALLENGE: How to create a sinusoidal? ripple effect on the thin instances? …

Sorry, short answer is no. You have already leapfrogged me in the use of thin instances.

Looking forward to seeing more of your learning and contributions, I can see some first class projects from you.


In the video example it was done at material level with the help of NME

1 Like

I’ve started watching @PirateJC tute for learning the way to do it with code: Creating Procedural Node Materials Through Code - YouTube

1 Like

Guys, is there any benefit to creating an object that has a larger dimensional unit size? That is, does the rendering engine perform better or worse with small numbers or larger numbers?
My object in current Babylon is approx 1.92m x 1.92m, and the camera will typically be 0.4 - 1m away from this object, if experienced in Real-World dimensions.

Would computation efficiency improve if it were just 1920m x 1920m ?
Or would the be no difference?
I guess my question might also have to do with how detailed the shadow and shading calculations are with Babylon… Does it have a preference?


Units are what you make them and your choice depends on your application Babylon.js does not care.

In Babylon.js create a sphere of radius 1 and an ArcRotateCamera with radius 4;

Whatever units you decide on the screen image will look the same

A street scene then take 1 Babylon.js unit (BU) to be 1m

A map of an area take 1 BU to be 1km

An interplanatery system take 1 BU to be 1000km

Atoms take 1BU to be 0.00001mm

Just be consistent with your units within a scene.



Okay… so update: current PG

I’ve followed @PirateJC’s ture and built my code in NME, including the bit that animates EACH instance (rather than each Vertex in the TI’s.)


But don’t quite know how to connect all this in VSCODE, to my thin instance, after generate the code from NME, copying and pasting the code into my vscode TS file…

Begrudgingly, :slight_smile: I’m going to re-re-rewatch and rebuild Jason’s tute into above Playground, and see how he connects to NME, and try to figure out how to mimic that in vscode… Wish me luck haha!

EDIT: I need to switch the planes over… because Jason did a horizontal plane (ocean). We’re doing a vertical (hologram screen) …

Or you may change camera position and use horizontal plane, maybe it is simpler.

Oh… are you saying this is just a preview animation?

Orientation can be configured after?

Cannot say for sure at the moment :frowning:

haha no prob. I’ve made this happen now lol >>>

Oh lord… look what I’ve done. crazy…

updateOrientation corrected…

1 Like

Looks great!

1 Like

Thank you! :raised_hands:t5:

Now… I need something to connect the colors from EACH Instance (already allocated through the Thin Instance code), to apply it onto the “FragmentOutput” node in NME …

OR can NME turn off the color application? Can that property be ignored in some way?

@PirateJC - any ideas here?

Update I had made an error on the transform. Now the instances are back to being cubes :muscle:t5:

Still… How do i get the original T’Instance colors, to pass through… or is there a way to turn off the color override in NME ??

…this does nothing:

Progress I have made a hologram… sort of. Not really. It’s like thin curtain in the wind🤣 HELP!

Solved: The NME is now creating a animation on the Z-axis successfully! Yay. The noise texture needs tweak, or a different kind of noise to look like a hologram. Any suggestions for this purpose?

Was working. Now broken: Changing the directionality of the noise texture was working but no longer for some reason…
Was working. Now broken: The image converted into pixels and cast onto each cube “pixels” (Thin Instances) are no longer appearing on the cubes when the NME material is applied.
If NME is commented out, it all works, but I need to connect it to NME somehow… Any ideas?

New problem: Shadows: How does one cast shadows from an NME object to a mesh such as ground, in my code ?

Related problem: How can an NME object cast shadows onto itself? I had a play… but thus far not making much sense. Is there a node to bring in mesh from the rest of the code??