Struggling with shadows from high-poly mesh

[ozRocker]

I'm trying to add shadows and its not coming out too well.  I think the high-poly count (100k) and lack of soft shadowing is producing some weird affects.  This is the result from Babylon.js http://www.punkoffice.com/babylon/luke.html

 

What I'm trying to do is find out if Babylon.js is suitable for animated photogrammetry-made humans.  The only framework that I've gotten this working with so far is Unity 5, which you can see here http://www.punkoffice.com/luke/

 

My shadows are set up like this

var shadowGenerator = new BABYLON.ShadowGenerator(4096, light);

var mesh = newScene.meshes[0];

shadowGenerator.getShadowMap().renderList.push(mesh);

shadowGenerator.useVarianceShadowMap = true;

shadowGenerator.usePoissonSampling = true;

mesh.receiveShadows = true;

ground.receiveShadows = true;

(using directional light as light source)

 

Is there any way to make the Babylon.js shadow look like the Unity 5 one?

 

[Dad72]

What you have done is correct. You can not do better. I have always said that the shadows in babylon are not perfect. maybe it is because of WebGL I do not know.

[ozRocker]

oh ok, so I guess that's the best Babylon.js can do.  btw, the Unity5 demo that I posted is also in webGL so I know it is possible

[RaananW]

Looks like the objects themselves are a bit different. What is causing those "holes" in the texture?

[ozRocker]

Those holes in the Babylon.js version is the result of shadows on the person's skin.  If I prevent the person from receiving shadows he doesn't get those holes, but I need him to receive shadows somehow.

[RaananW]

I think the ground should receive shadows, the person should only cast them, no?

[ozRocker]

The ground and person both need to receive shadows.  If you check out the Unity demo you can see that the head will cast shadows on the back, neck and shoulders.  Also the arms will cast shadows on the torso when he is doing sit-ups.

[Dad72]

Ok, I did not watch your demo. and indeed, it looks like a bug I'd say. Looks like the shadow projected on the character comes from the ground. I have the impression that an object can not be projected to the shadow itself.

 

But I also feel that your model is transparent in part. I've had this problem by exporting with 3ds max. Face mask must be activated in the model options.

 

Try delete : shadowGenerator.useVarianceShadowMap = true;

I think that using 2 filters can create this problem (maybe)

[GameMonetize]

Can you try without any texture? just pure material?

[ozRocker]

ok, thanks guys! I've removed the line  shadowGenerator.useVarianceShadowMap = true;

 

I've also removed all textures in the scene.  Unfortunately it hasn't changed the appearance of the shadows.

[GameMonetize]

Can you then share this new version on your site and reference http://www.babylonjs.com/babylon.max.js? This will allow me to debug your problem:)

[ozRocker]

Sure.  I've put up a new page here http://www.punkoffice.com/babylon/luke_new.html which is referencing the babylon.max.js file off the babylon.com server.

[GameMonetize]

Hum mesh sounds like broken to me...can you try with a simpler mesh?

[ozRocker]

the babylon.max.js file seemed to really screw up the mesh.  The output is really different to the original babylon.js file that I was using.  I will decimate my guy down to a low poly count and see how that turns out

[spritefire]

I had isses with the mesh screwing up when exporting from 3ds max and then Xeonzinc mentioned using an earlier version and everything worked fine
(post was answered here: http://www.html5gamedevs.com/topic/11694-3ds-max-exported-animation-is-distorted/)

[ozRocker]

I forgot to mention that I'm using Blender to export the mesh.  The mesh itself comes out as expected but when I add shadows it adds strange patterns to the material (regardless of whether there is texture or not).  The mesh only screws up when I'm linking to babylon.max.js 

[Dad72]

You use the latest export to Blender ? It is possible that this is a bug in an older version. (If you use an older version).

 

https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Blender

[GameMonetize]

babylon.max.js is based on v2.0 though so perhaps dad72 is right

[ozRocker]

ok, I installed the latest exporter for Blender.  The link using babylon.max.js still looks the same (http://www.punkoffice.com/babylon/luke_new.html)

 

However, the link using the original babylon.js (http://www.punkoffice.com/babylon/luke.html) doesn't cast shadows onto the ground, even though it was before (ground is still set to receive shadows)

[GameMonetize]

ok let's retry from scratch  can you just export a simple box casting shadows to a simple ground using babylon v2.0 and the latest exporter?

[ozRocker]

Ok, I have a link here http://www.punkoffice.com/babylon/test.html

I'm using babylon.2.0-beta.debug.js and the latest Blender exporter.  I created a sphere which has 960 faces.  It is creating shadows.  The ground is created in Babylon HTML code.  Only the ground is receiving shadows.  The sphere creates a shadow with a sharp angle which seems odd.

[GameMonetize]

this is because the light position is not correctly defined.

Shadows maps are generated from the point of view of the light using a FOV of 45 degrees.

 

Try to move your light a little bit away will help a lot

[ozRocker]

ok, I've moved the light further away.  its now at

light.position = new BABYLON.Vector3(-5, 30, 15);

That made it worse.  Just wondering, has anyone successfully gotten shadows to work with hi-poly meshes?  All the working examples I've seen are of cubes

[RaananW]

Here you go -http://www.babylonjs.com/index.html?V8

The demos in the playground are also using rings and not cubes.

It's possible. it's all about configuring the light correctly.

[RaananW]

So a quick look at your code:

 

• no object is in the render list, so of course no shadows will be generated.
• Light's direction should be normalized (well, not a must since its done at the engine anyhow, but it is a direction :-) ) 
• The light's position doesn't correlate to the direction. They have to fit (at a certain level) otherwise this won't work.

So, here are some offered changes to start with:

var light = new BABYLON.DirectionalLight("dir", new BABYLON.Vector3(-1, -1, -2).normalize(), newScene);//make sure light's position is correctlight.position = new BABYLON.Vector3(-1, 30, 15);//orlight.position = new BABYLON.Vector3(0, 30, 100);//orlight.position = new BABYLON.Vector3(5, 20, 10);/// A few lines later//Add the mesh to be "shadowed".shadowGenerator.getShadowMap().renderList.push(newScene.meshes[0])

And... Tada :-)