Hello,
I was trying to reverse engineer some of the demos from the website, as they are the most impressive. I am seeing that most of these demos are incrementally loaded, making it difficult to reverse engineer these files. I noticed in the “Scenes” folder there is quite a bit of content, including some js files for certain scenes, but there does not appear to be enough to regenerate these incrementally loaded scenes, which is kind of a shame. Is this possible to do with the demos?
Thank you,
coolcomfort
What demo are you trying to reverse-engineer?
BTW - we always think that there shouldn’t be a need to reverse-engineer anything - most if not all of our demos are open sourced with a license attached to it so that everyone can learn from it. I guess the biggest “issue” with the website demos is that they are using a .babylon file to (as you say) incrementally load the data. This will require formatting the .babylon file and seeing what was done there
1 Like
Yes, these demos are very nicely crafted, and I appreciate the hard amount of work that went into them. It would’ve been nice to have been given the original files (whether 3DS Max, Blender, etc) to see how they generated all of the effects inside the.babylon files.
I will say while babylon files are not complicated in themselves, the sheer size of them makes it impossible to read in any standard code editor.
yep, I totally get what you are saying. We don’t have those models - the wonderful artist that has created them has exported to .babylon for it to be open sourced, but never released the models as open source.
If it is about a specific demo we might be able to help or point you in the right direction
1 Like
@RaananW Thank you for the reply. I am really interested in how the lighting and flag waving effects were done in Sponza (Babylon.js - Sponza demo). You can see in the four corners of the map, there is what appears to be light sources coming out of the jars. I turned off all the geometry/materials one by one for each piece and did not find the light source. I am wondering if all the lighting is somehow baked into the materials, and if that is the case, what is the name of this phenomenon so I can study it more? It’s an incredibly high FPS demo, which also makes me wonder how the flag waving effect was done.
Also in HillValley (Babylon.js - Hill Valley demo) if you go up to the windows on any building you can see a reflection that appears to be IBL/environment mapping based. Where in the mesh/materials could I see where that’s being done at? I am most surprised by this one, because it also appears to be very high FPS while performing reflections throughout the entirety of the map.
Hoping @PatrickRyan can help here 
1 Like
@coolcomfort, the lighting you see in the Sponza scene is almost certainly baked lighting. This is done by setting up your assets in your digital content creation (DCC) tool like Blender with lights in the scene as you would in your final scene and then baking the lighting results into your scene. Tutorials on light baking in your preferred DCC tool are pretty common. This way you aren’t paying for light calculations on any meshes that are static.
If you bake like you will want to exclude those meshes from scene lights. One way would be to use a shader that is unlit. Another would be to include/exclude specific meshes or a layer mask for punctual lights. Both of these approaches will work, but if you have the lighting for your mesh completely baked and it does not need to have any light calculations, an unlit shader would be cheapest.
For the flags, they are likely animating through the shader with vertex displacement so the motion can be dynamically generated. It could be done through animating the bones of a skinned mesh, but to have all of the flags moving slightly differently, you would need multiple clips and animation offsets, which gets far more complex. For the vertex displacement shader, you will need some way to isolate vertices to determine which ones get motion. For example, the vertices at the flag pole don’t move, and the vertices at the end of the flag move the most. You can use a simple technique of applying vertex color to each vertex, say a gradient in the Red channel from 0 - 1 for vertices that don’t move at all to those with the most motion. Then you multiply your vertex color’s red channel by the vertex displacement. This is an example of vertex displacement using a custom node material which will give you an idea of how you can start with this technique.
For the environment reflections in the Hill Valley scene, there are a couple of things you can do. You can either bake out a reflection map in your DCC tool, which does require the whole scene to be set up in the DCC tool to bake the texture. This is the cheapest way to have a custom reflection map since the map is baked before run time.
It’s more likely that you won’t have your entire scene set up in your DCC tool and so you will want to use reflection probes to capture your scene to use in your material reflections. The important thing to remember is that a reflection texture is a cube texture so you are generating 6 images every time you generate a new frame. So you can use the refresh rate of the reflection probe to control how often they are generated. The larger the number set here will reduce load on the scene as the textures are generated less often.
As far as what materials take advantage of reflections, you can use them with just about any material. For example, some materials like StandardMaterial can have a reflection texture set where PBRMaterial will automatically include reflection textures or reflection probes as these are part of the lighting calculations for PBR.
I hope this helps point you in a direction for what you are trying to accomplish, but feel free to ping back with more questions.
2 Likes
Thanks deeply for these details. I think this is the way going forward for anyone making larger scaled maps on babylon js. I will be taking apart these scenes further in the upcoming months and hope to make more discoveries. For now, I will test baking reflection/lights in a blender scene. I’ll get back here if I have any questions.
2 Likes