Jump to content

Weird shadows


Adrian
 Share

Recommended Posts

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 !

post-10611-0-47721600-1410708861_thumb.p

Link to comment
Share on other sites

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?

post-10611-0-58131800-1410756667_thumb.p

Link to comment
Share on other sites

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;};
Link to comment
Share on other sites

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...

post-10611-0-67362300-1410864181.png

post-10611-0-47605700-1410864185.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. :o

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

post-10611-0-29591600-1411119898_thumb.p

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...