Weird shadows

[Adrian]

Hi,

 

I'm trying to build some basic scene. I have a ground (with material), a box(without material) and a directional light.

            /* Build ground */            var ground = BABYLON.Mesh.CreateGround("ground1", 100, 100, 1, scene);            var groundMaterial = new BABYLON.StandardMaterial("ground", scene);             groundMaterial.diffuseTexture = new BABYLON.Texture("/sand.png", scene);            groundMaterial.diffuseTexture.uScale = 10;            groundMaterial.diffuseTexture.vScale = 10;                        ground.position.x = 0;            ground.position.y = 0;            ground.position.z = 0;                        groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);            ground.material = groundMaterial;            ground.receiveShadows = true;            ground.checkCollisions = true;                                    /* Build box */            var box = BABYLON.Mesh.CreateBox("box1", 1, scene);            box.position = new BABYLON.Vector3(1, 1, 1);            box.checkCollisions = true;            box.receiveShadows = true;            /* Build light */            var light =new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-2, -2, -2), scene);            light.position = new BABYLON.Vector3(20, 40, 20);                        /* Shadows */            var shadowGenerator = new BABYLON.ShadowGenerator(2048, light);            shadowGenerator.useVarianceShadowMap = true;            shadowGenerator.getShadowMap().renderList.push(box);

You can see the result in attached picture. The shadow is awful totally pixelated and my cube/box has serrated edge. I am probably doing something wrong. Some help would be very appreciated !

[Dad72]

Put a higher value for the size of the textures. partly solve the problem, but decreases performance.

 

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

 

Or try: shadowGenerator.usePoissonSampling = true; 

[Adrian]

Hi dad72,

 

Here is the result with :

// Shadowsvar shadowGenerator = new BABYLON.ShadowGenerator(4096, light);shadowGenerator.useVarianceShadowMap = true;shadowGenerator.getShadowMap().renderList.push(box);            shadowGenerator.usePoissonSampling = true; 

The result is still disappointing. Is it possible to use ray traced shadows instead of shadow map?

[Dad72]

It is true that the shadows are not very pretty. I'm not sure you can have better results. I've never managed to get very good results with the shadows.

[Adrian]

No, it's not pretty at all ! I thought it was possible to have advanced light with opengl, like occlusion for example.

[GameMonetize]

Could you share your code on playground so we can help you ?

[Adrian]

Hi Deltakosh,

 

Here is the code i use to create my scene : 

var createScene = function () {        /* Build scene */    var scene = new BABYLON.Scene(engine);    scene.gravity = new BABYLON.Vector3(0, -9.81, 0);    /* Build camera */    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 5, 0), scene);    scene.activeCamera = camera;    camera.applyGravity     = true;    camera.checkCollisions  = true;    camera.speed            = 1;    camera.attachControl(canvas, false);    /* SKY #2 */    var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);    BABYLON.Effect.ShadersStore.gradientVertexShader = "precision mediump float;attribute vec3 position;attribute vec3 normal;attribute vec2 uv;uniform mat4 worldViewProjection;varying vec4 vPosition;varying vec3 vNormal;void main(){vec4 p = vec4(position,1.);vPosition = p;vNormal = normal;gl_Position = worldViewProjection * p;}";    BABYLON.Effect.ShadersStore.gradientPixelShader = "precision mediump float;uniform mat4 worldView;varying vec4 vPosition;varying vec3 vNormal;uniform float offset;uniform vec3 topColor;uniform vec3 bottomColor;void main(void){float h = normalize(vPosition+offset).y;gl_FragColor = vec4(mix(bottomColor,topColor,max(pow(max(h,0.0),0.6),0.0)),1.0);}";    var shader = new BABYLON.ShaderMaterial("gradient", scene, "gradient", {});    shader.setFloat("offset", 10);    shader.setColor3("topColor", BABYLON.Color3.FromInts(0,119,255));    shader.setColor3("bottomColor", BABYLON.Color3.FromInts(240,240, 255));    shader.backFaceCulling = false;    skybox.material = shader;    /* Build ground */    var ground = BABYLON.Mesh.CreateGround("ground1", 100, 100, 1, scene);    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);     groundMaterial.diffuseTexture = new BABYLON.Texture("/grass.png", scene);    groundMaterial.diffuseTexture.uScale = 10;    groundMaterial.diffuseTexture.vScale = 10;    ground.position.x = 0;    ground.position.y = 0;    ground.position.z = 0;    groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);    ground.material = groundMaterial;    ground.receiveShadows = true;    ground.checkCollisions = true;    /* Build Fog */    /*    scene.fogMode = BABYLON.Scene.FOGMODE_EXP2;    scene.fogDensity = 0.1;    scene.fogStart = 1;    scene.fogEnd = 5;    scene.fogColor = new BABYLON.Color3(0.8,0.83,0.8);    */    var box = BABYLON.Mesh.CreateBox("plane", 1, scene);    box.position = new BABYLON.Vector3(0, 1, 0);    box.rotation = new BABYLON.Vector3(0, 0, 0);    /*    var boxMaterial = new BABYLON.StandardMaterial("ground", scene);     boxMaterial.diffuseTexture = new BABYLON.Texture("/ground.png", scene);    boxMaterial.diffuseTexture.uScale = 1;    boxMaterial.diffuseTexture.vScale = 1;    box.material = boxMaterial;    */    box.checkCollisions = true;    box.receiveShadows = true;    /* Build light */    var light =new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-2, -2, -2), scene);    light.position = new BABYLON.Vector3(20, 40, 20);    // Shadows    var shadowGenerator = new BABYLON.ShadowGenerator(4096, light);    shadowGenerator.useVarianceShadowMap = true;    shadowGenerator.getShadowMap().renderList.push(box);    shadowGenerator.usePoissonSampling = true;     return scene;};

[Adrian]

I have also noticed something weird, which has noting to do with shadows, but... if i remove the box from my scene the ground look "higher" than if there is a box ... isn't weird? As you can in attached pictures, with box it looks like the ground has a higher Y than without box on my scene...

[Dad72]

@Adrian:  I put your scene on the playground. This is what deltakosh wondering it.

 

http://www.babylonjs.com/playground/#1WNW4B

[Adrian]

Oh ok, i misunderstood, thanks for doing it for me dad72.

[GameMonetize]

is it better?

http://www.babylonjs.com/playground/#1WNW4B#1

[Dad72]

For my part, I do not find it better. If it is a solar system rotating or other, the light is not always close to objects, so the edges shadows will always have this problem.

More light is away from the objects and there are defects on the shadows. With several object on a large stage, a single light may not be close to everything the objects.

[Adrian]

I tried to put the light further and i agree with dad72. There is an other point, that shadow is very sharp, is there no way to create a more realistic ambient ? like with occlusion ? I tried hemispheric light, but this kind of light does not create shadows.

[GameMonetize]

Shadow maps are really expensive if you want to get more precise maps

[GameMonetize]

And soft shadows are EXTREMELY expensive

[joshcamas]

hmm...

That seems kinda strange...

 

How do shadows work? Is it like a texture on the planes on a mesh?

 

If so, couldn't you only update the shadow when the caster or casted plane moves/rotates/etc?

 

idk how this stuff works, so maybe this is already so, it just feels strange that having simple shadows is so expensive.

[Dad72]

I think that with a shader, the shadows would be cheaper. I think I read this somewhere on another engine. But I could not know enough to understand how it works.

[Adrian]

I understand that shadow map are extremly expensive in ressources but on babylonjs.com there is a scene called "The train".

 

How can i reproduce such exterior lighting? it would be perfect for me !

[eucly2]

I think in BabylonJS the shadows generator use dynamics shadows and that is expensive but in the scene "The train" the shadows are include in the textures (painting when they have create the scene in 3dsMax for example).

That why is an optimized scene.

[Adrian]

Ok, i see ... so if i understand well i can't create an external lighting ? Even without shader ?

[Dad72]

You can make very good outdoor lighting using port-processes. Watch the demo of WorlMonger

[GameMonetize]

@Dad72: Dynamic lights are ALREADY done using shaders

[Adrian]

Thats exactly what i wanna do ! Sources are downloadable ? there is some example somewhere?

[Dad72]

Yes, here:

 

https://github.com/BabylonJS/Samples

[Adrian]

Ok, so with your help i made some progress. Below is a screenshot of my scene. I used the worldmonger example to create my scene.

 

The black shadow is supposed to be a pine tree but as you can see there is almost no light on it ? i don't understand how lighting works.

 

I have a point light called sun :

var sun = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 100, 2), scene);

The lighting on the ground is ok : 

var ground = BABYLON.Mesh.CreateGround("ground", 30, 30, 30, scene, sun);ground.material = new BABYLON.StandardMaterial("ground", scene);ground.material.diffuseColor = BABYLON.Color3.FromInts(193, 181, 151);ground.material.specularColor = BABYLON.Color3.Black();ground.receiveShadows = true;ground.checkCollisions = true;

But the lighting on the tree doesn't work :

BABYLON.SceneLoader.ImportMesh("", "asset/3D/", "tree.babylon", scene, function (newTree) {      setup(newTree[0]);});            function setup(mesh) {     mesh.position.y = 5;     mesh.scaling.x = mesh.scaling.y = mesh.scaling.z = 2;     mesh.checkCollisions = true;}

I don't understand what i'am doing wrong.