Using .glb model with instantiation and vertex colors

Questions
1

Hi everyone!

Here is the base idea what I would like to achieve right now in my game scene:

  1. Load up .glb model (with textures), lets say it is a floor tile of a map in game.
  2. Instantiate many floor tiles.
  3. Use vertex colors to create shadows for tiles.

Here is a little playground I stitched together to illustrate the problem more: https://playground.babylonjs.com/#ZRZIIZ#53
Basically I have two main questions:

  1. How to make the shadows individually and use instancing? Do I have to use a shaders to achieve this? Do the shader attributes work with instances?
  2. If I need to use shaders, how do I actually add it to my game? I know the deal with node material editor, but do I then have to use node material and add it to the mesh, and to deal with the previous material that Blender has assigned to it? Is there a documentation somewhere about this process?

Would be super helpful to get more insight to this matter :slight_smile: :pray: Would not want to ditch instances, since they give so many performance gains…

2

Hey!

  1. Shadows work directly without any change on your side. Simply create a shadowGenerator ( Shadows | Babylon.js Documentation (babylonjs.com)) and add your meshes here
  2. you are all good :slight_smile:

quick example: Instancing and vertex colors | Babylon.js Playground (babylonjs.com)

1 Like
3

Ah, yeah I know of course of the shadow generator, but I’m having a bit of a special use case and I’m theorycrafting a bit different lighting approach. There are few restrictions on my game:

  • It is situated on a spaceship => no global light unless I fake it
  • I want to create dynamic lights that turn on/off on a dynamically generated map (many mesh pieces). So ideally I would want to use instanced meshes since I got a lot of meshes (walls, floors). Also the amount of regular lights would be too big for the scene to handle. And I would need a shadowgenerator for each point light, right?

So what I am trying to do is something “simpler”. The map is made from tiles, so I think I would do tile specific lighting. This can be achieved by changing the vertex colors of the whole mesh. The effect what is the baseline is like what this upcoming game has: Starmancer - Dystopian Space Station Colony Survival - YouTube

Basically it would be just kind of pointing out the origin tile of the light, then fill the light to the neighbor cells recursively. But… Me and my friend were talking about manipulating the vertex colors a bit more to achieve a bit smoother lighting. For example, if we color the orange vertex in the image below, we could add a fading “shadow” effect:

image
image1604Ă—1032 224 KB

Sorry for not being so clear on the beginning :sweat_smile: The reason this is what I try to do is because

  • Of the large amount of map assets (walls/floors) and other stuff (room decoration) that might bring the performance down
  • The game is cartoonish, no need to be that realistic
  • Can add many “lights” dynamically

And this is why and asked about instanced meshes the vertex color manipulation :slight_smile:

4

I was more thinking about a dynamic approach where you move the light and play with light.includedOnlyMeshes to define which mesh is lit or receive shadows

But I totally get your point with vertex color. I love the idea honestly.

To get great performance out of it the secret will be to be able to figure out pretty quickly which tiles to update. I would recommend using an octree for that

You can maybe analyze what I did for WorldMonger here (where I had to quickly find with vertices to move): Website/build/Scenes/WorldMonger at master · BabylonJS/Website (github.com)

Demo (try to move the ground up or down): Babylon Engine for HTML5 (babylonjs.com)

1 Like
5

Ah, but again there is the problem of instanced meshes… Asked about this a while ago as well :wink: Creating lights dynamically that effect instanced meshes with includedOnlyMeshes - #2 by Deltakosh

All these threads are kind of my own adventure of learning and to find out a perfect way to light up my game. If you’re interested of the journey, here is the first lighting post: Best way to create part of a mesh that acts as a light source

I’m glad you do! However there is still the problem of instanced meshes in this case… Can I interact with individual vertices of an instanced mesh? Or do I have to use a shader to do this? As I said before there seems to be a way to change the mesh color as a whole per instance using buffers: Instances | Babylon.js Documentation

But can this be used with instanced mesh vertices?

6

nope instances will share the same geometry BUT there is maybe a solution with instanced buffers where you can setup vertex color PER instance:
Instances | Babylon.js Documentation (babylonjs.com)

1 Like
7

I don’t think you will be able to change the color of each vertex for each instance easily. As @Deltakosh said, there’s a way to set a color per instance (so the same for all vertices of the instance) but not to set a color per vertex per instance.

You could do it by using a custom shader and using the gl_VertexID and gl_InstanceID predefined variables to lookup the color you want in a texture you would create in a pre-process and pass to the shader. Something like:

1 Like