Holographic character

I searched the forums for “holographic” and “hologram” but couldn’t find a relevant thread.
What could be an approach for implementing a holographic material for a simple character mesh?

I am now trying an approach of using Node Materials in Blender and baking the textures.
I am not sure it is a wise approach… :slight_smile:
I’ve bought this plugin and now learning how to bake textures. Perhaps later on I would be able to add particles in BabylonJS that would make the baked textures feel real-time.

Also looking into PBRMaterials here in BabylonJS.

cc @PatrickRyan as we never see enough holograms :slight_smile:

From what I am seeing here, this could simply be some fresnel to highlight the edges of the character model and the center mass could be one of many techniques. You could do a screen space texture so that the model moves but the texture doesn’t. You could do triplanar projection on the surface so that your pattern (dots or similiar) conform to the surface without moving with the model. You could do simple noise texture crunched to get small dots that are mapped to the surface like any other.

The trick would either be setting your character material to additive (cheapest since you don’t need to worry about alpha transparency). If you want to have fine control over the emission color, you could do something like take a render target texture of the scene minus the holographic character and use that material in screen space as the base color of your model and then add your emissive color over the top. This feels over-engineered, however.

The particles I am seeing in your example can emit from the mesh itself, but I am not sure what it is I am seeing connecting the particles. Some sort of line renderer using random particle positions to connect, possibly? I briefly looked at the video you linked, but there are a lot of effects shown. If you can point us to an art target you are trying to reach, preferably one that is a video so we can see the motion of how the material reacts, we can likely give you some better guidance as to where to start.

In the mean time, you can see some hologram-esque samples in these playgrounds:

  • Space Pirates Ship Assets - click on the ship to see the shields animate as an energy effect over the hull
  • Light Paddle - glow effects and animation to simulate light rather than solid material.
  • XR Hand Shader) - this is the shader we use for hand tracking in XR as holograms in the scene.

These are just a few examples off the top of my head. I think I may have done something else hologram-related, but I can’t remember at the moment.

If you can give us more clarity on the direction you want to chase, I can point you in the right direction.

4 Likes

holographics are made with thel help of mirrors, so it’s near to use additionally mirror effects, too:

CudeTutorial | Babylon.js Playground (babylonjs.com)

By the way it’s a nice coding challenge I’ll give a try the days. I think I’m going to use moving particles on the vertices of an animation. This is how to find out the points Babylon.js Playground (babylonjs.com)

1 Like

Wow, that was a detailed response! I might need a year to fully grasp all the techniques you mentioned. :slight_smile: I’ll begin by exploring “Fresnel highlights” and proceed from there.

Regarding the goal, I aim to simply make it look good. I know it’s a broad term, but it reflects more on the quick cycles of “observe the current outcome and improve.”

I saw this tutorial. He uses nodes but I am not sure it can be done in BabylonJS. Perhaps with PBRMaterial.

crowled the playground and came up with this Cube

1 Like

That looks great.
I am trying now to apply your example in the playground to more complex meshes.

Just a version - https://playground.babylonjs.com/#97NKU9#1
Animated - Babylon.js Playground

1 Like

I see an async snippet.
Are these snippets made with the BabylonJS Node Material Editor?

My initial (failed) attempts with baked material :slight_smile::

I’ve probably also got the UV unwrapping wrong…

@dht, here’s a quick and dirty hologram using your last PG. This is using both a node material procedural texture and triplanar projection in a second node material to project the texture onto the mesh. The texture can be anything, I just used a quick procedural texture to show motion along the surface. Since this is triplanar projected onto the mesh, as the mesh animates, the texture will slide across the surface implying that the ripples are hitting the surface rather than sitting on the surface. This is another way to imply hologram in that the structure is made of light hitting some sort of surface like glass or particulate in the air.

Baked Hologram | Babylon.js Playground (babylonjs.com)

Baking the textures in Blender to use in glTF may not get you what you are looking for as you want the textures to help you make up the surface. With an animating character, materials that have textures mapped to UV space may make the effect seem conflicting as though the texture is applied to the surface rather than hitting it. This example should be enough to get you started to build from. Let me know if you have questions about any of the techniques used here.

4 Likes

@dht, to answer your other question, yes, the PG that @labris made is loading a node material from the snippet server. That is the ParseFromSnippetAsync is doing is parsing the json that makes up the node material from our snippet server. It goes without saying that you should not be using the snippet server for production code, but it is perfect for examples for the forum like you see here.

If you open the inspector in the playground, and then roll down the materials group, you will see a material called node with a pencil icon next to it. This is a node material and clicking on the pencil icon allows you to edit the node material in the editor in real time. Any material with that icon will be a node material that can be edited, no matter what the name of the material actually is. Hope this helps.

3 Likes

Great!
Thanks Patrick for both the playground and the detailed explanation,
I’ve learned a lot.
I’ll use it for the Vision Pro Simulator I’m building and report the results in the projects thread + here.
Playground with Vision Pro animation

2 Likes