Mesh with Shadows: Blender to Babylon

Hello all,

In Summary: I was wondering if someone could help me add meshes (with working shadows) created in blender into babylonJS.

More details:

I have used the blender-to-babylon exporter version 5.6.4 (I was unable to get the other blender exporter version to work).

BABYLON.SceneLoader.ImportMesh <-- Successfully adds the mesh, but the mesh does not cast shadows. It can sort-of receive shadows.
BABYLON.SceneLoader.Load <-- Says it cannot load the file (.babylon)
AssetLoader <–Does not call an .onSuccess nor an .onError

I have tried .htaccess
I added MIME types to my apache’s httpd.conf file (I am using a local apache server)

My CDNs relevant to this issue are:

<script src=“https://preview.babylonjs.com/babylon.js”></script>

<script src=“https://preview.babylonjs.com/loaders/babylonjs.loaders.js”></script>

As you can tell, I have searched around a lot about this subject but couldn’t get this to work. I was wondering what I could be doing incorrectly.

Thank you for the help! I appreciate it.

Hi. Can you give us a sample of your code (where you loaded the mesh).

Few quick things (in case you forgot to do something from the following).

  • set shadowGenerator.addShadowCaster(mesh);
  • which light are you using? Did you set the position of the light?

for some reason BABYLON.SceneLoader.Load didn’t work for me in the past, i am not sure why that happen tho.

That’s it from me for now. I guess I didn’t help much. But until I see the code, I cannot tell you more.

Creating shadows all from the Blender exporter is a 3 part process. The caster of the shadow must indicate so by using the Custom property Cast Shadows. Any mesh which receives shadows selects the other one.

shadow%20mesh

The third part is setting up a shadow map generator on the light which causes the shadows. If you are not sure if the machine where this is to be run is running WebGL2, stick with a standard map type.

All these pictures come from Exporter version 6.0, on Blender 2.80, but this aspect has not changed from 5.6 exporter. I am just recycling snaps & actually do not want any pre-Blender 2.80 snaps on this new forum.

Here is a scene where everything is done from Blender. At least the first shadow. The button to freshen shadows is obviously in Javascript.

Thank you both for the advice!
I just realized that in order to use the latest BabylonJS exporter, I would need to update my Blender, which I did. Even after exporting using the latest BabylonJS exporter, I still have the same issues.

My first section will show my photos of the Blender settings I have used (thank you, JCPalmer, for these settings):

My second section will show my code.
If I am posting way too much information, please let me know.

Section 1: Blender Settings

Light Settings: (Do I need to use this light for shadows, or can I just use another light I create in BabylonJS?)

Mesh Settings

Section 2: Code
Of course, I would prefer whatever is the best way to upload meshes from blender.

Note: The 2 strategies to add shadows to a shadowcaster for me work the same:
this._sun_shadowGenerator.getShadowMap().renderList.push(oneMesh);
and
this._sun_shadowGenerator.addShadowCaster(oneMesh);

Here are all of the different strategies I have attempted.

Way A:
BABYLON.SceneLoader.ImportMesh <-- Successfully adds the mesh, but the mesh does not cast shadows. It can receive shadows.

Code:

var stopCheck = true;
var importedTestMesh;
BABYLON.SceneLoader.ImportMesh("weirdThing_name", "Assets/", "weirdThing.babylon", this._scene, function(newMeshes) {
    console.log('importedTestMesh, about to add to shadowCaster. Length newMeshes is :' + newMeshes.length)

    for (var oneMesh of newMeshes) {
      try {
        // this._sun_shadowGenerator.getShadowMap().renderList.push(oneMesh);
        this._sun_shadowGenerator.addShadowCaster(oneMesh);
      } catch {
        alert('importedTestMesh throws error for shadowCaster');
      }
    }
    console.log('importedTestMesh, added to shadowCaster succesfully, starting for loop.')
    for (var oneMesh of newMeshes) {
      importedTestMesh = oneMesh
      importedTestMesh.position = new BABYLON.Vector3(2, 1, 2);
      importedTestMesh.rotate(BABYLON.Axis.Y/*Z*/, /*0.45 * *//*0.25 * *//* 0.25 * */ Math.PI / 2, BABYLON.Space.LOCAL);
      stopCheck = false;
      importedTestMesh.physicsImpostor = new BABYLON.PhysicsImpostor(importedTestMesh, BABYLON.PhysicsImpostor.MeshImpostor, { mass: 0, restitution: 0.0 }, this._scene);
      // BABYLON's website says that Cannon's MeshImpostor only collides with Plane and Sphere Meshes. Hopefully, that is not true

      importedTestMesh.receiveShadows = true;

    }
});

Picture:

Way B:
BABYLON.SceneLoader.Load <-- Says it cannot load the file (.babylon)

BABYLON.SceneLoader.Load("/Assets/", "weirdThing.babylon", this._engine, function(inScene) {
      theGame._scene = inScene;
      theGame._scene.executeWhenReady(function() {
            //My Code
       });
});

Way C: AssetLoader <–Does not call an .onSuccess nor an .onError

// I was not able to get AssetsManager (the code in this section) to work. No .onSuccess is called and .onError is not called either
    this._assetsManager = new BABYLON.AssetsManager(this._scene);
    var addMeshTask_importedTestMesh = this._assetsManager.addMeshTask("spryTileTutorial task", "", "Assets/", "weirdThing.babylon");//"spryTileTutorial.babylon");
    addMeshTask_importedTestMesh.onSuccess = function (task) {
      var newMeshes = task.loadedMeshes;
      alert("addMeshTask_importedTestMesh onSuccess was called");
      console.log('importedTestHouseMesh, about to add to shadowCaster. Length newMeshes is :' + newMeshes.length);
      // this._sun_shadowGenerator.addShadowCaster(newMeshes);
      for (var oneMesh of newMeshes) {
        try {
          this._sun_shadowGenerator.getShadowMap().renderList.push(oneMesh);
          // this._sun_shadowGenerator.addShadowCaster(oneMesh);
        } catch {
          alert('AssetsManager importedTestMesh throws error for shadowCaster');
        }
      }
      for (var oneMesh of newMeshes) {

        var importedTestHouseMesh = oneMesh
        importedTestHouseMesh.position = new BABYLON.Vector3(-10, 1, 5);
        importedTestHouseMesh.rotate(BABYLON.Axis.Y/*Z*/, /*0.45 * *//*0.25 * *//* 0.25 * */ Math.PI / 2, BABYLON.Space.LOCAL);
        // stopCheck2 = false;
        importedTestHouseMesh.physicsImpostor = new BABYLON.PhysicsImpostor(importedTestHouseMesh, BABYLON.PhysicsImpostor.MeshImpostor, { mass: 0, restitution: 0.0 }, this._scene);
        // BABYLON's website says that Cannon's MeshImpostor only collides with Plane and Sphere Meshes. Hopefully, that is not true
        
        importedTestHouseMesh.receiveShadows = true;

      }

    }

    addMeshTask_importedTestMesh.onError = function (task) {
      console.log("addMeshTask_importedTestMesh error function!")
      alert("addMeshTask_importedTestMesh error function!")
    }

Oh, and the ground is from BABYLON.CreateGround and has .receiveShadows = true. That’s why it receives shadows from the not-from-blender sphere.
Thanks for the help!

You can create as much from Blender as you like. If you wish to create lights yourself, there should be no problem.

One thing about the type of light, it used to be only directional type lights. Maybe checking docs is advised. In Blender 6.0, I map this way:

Blender BSJ
Point Point
Sun Directional
Spot Spot
Area Hemi - note there has not been a hemi light in Blender since 2.79

A final note on loading old .blend files in Blender 2.80, you should probably just create a new .blend, then file->append in the mesh & armature objects. Bringing in lights is not advised. Things like old Hemi lights come across, but things are just not right about them. They cause more than just exporter problems. Also, then somethings are not in consistent places (e.g. menu above or below) as other 2.80 scenes.

I am not really advising beyond Blender, so other issues need to be answered by others or yourself.

Thank you, JCPalmer, for the information. I will take your advice!

If anyone knows about adding meshes from blender to babylonJS, I would appreciate if you could help me, when you have the chance.
Thank you!

If this can help, I’ve made a tutorial which can interesting you : From Blender to BabylonJS - Nothing-is-3D

It’s not using dynamic lighting but static, using lightmaps, but you still have some basics about how to use your .babylon file and tweak your scene.

1 Like

Hi Vinc3r, thank you so much! I skimmed it and it looks great. When I have time to work on my project, I’ll look more deeply into it. Thank you!