ReceiveShadows issue on Mac OS X

[demonixis]

Hi there,

 

I've an issue on Mac OSX with lighting and shadows. I'm using four lights on my scene and a shadows generator. When I pass the flag receiveShadow = true on my ground, I've the shadow applied on it but no lighting. If I remove receiveShadows it's works (but I don't have shadows visible on the ground).

 

this is my test code :

 

'use strict';

 

window.onload = function () {    var canvas = document.getElementById("renderCanvas");    var engine = new BABYLON.Engine(canvas, true);    var scene = new BABYLON.Scene(engine);        // CAMERA    var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 10, new BABYLON.Vector3(15, 1, 15), scene);    camera.minZ = 0.1;    camera.maxZ = 5000000;    scene.activeCamera.attachControl(canvas);        // LIGHTS    var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene);    light.position = new BABYLON.Vector3(20, 40, 20);    light.diffuse = new BABYLON.Color3(1, 1, 1);    light.specular = new BABYLON.Color3(0.6, 0.6, 0.6);    light.intensity = 0.6;        var dirLight2 = new BABYLON.DirectionalLight("Dir1", new BABYLON.Vector3(0, 1, 0), scene);    dirLight2.specular = new BABYLON.Color3(0.5, 0.5, 0.5);    dirLight2.diffuse = new BABYLON.Color3(1.,1., 1.);    dirLight2.intensity = 0.5;    dirLight2.position = new BABYLON.Vector3(0,10,0);        var hemiLight = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);    hemiLight.diffuse = new BABYLON.Color3(0.8, 0.8, 0.8);    hemiLight.specular = new BABYLON.Color3(0.1, 0.1, 0.1);    hemiLight.groundColor = new BABYLON.Color3(1, 0, 0);    hemiLight.intensity = 1.;        var pointLight = new BABYLON.PointLight("Point0", new BABYLON.Vector3(0, 0, 0), scene);    pointLight.diffuse = new BABYLON.Color3(0.6, 0.6, 0.6);    pointLight.specular = new BABYLON.Color3(0.5, 0.5, 0.5 );    pointLight.intensity = 0.3;        // SHADOWS    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);    shadowGenerator.useVarianceShadowMap = false;        // OBJECTS    var ground = BABYLON.Mesh.CreateBox("box", 5, scene);    ground.position = new BABYLON.Vector3(10, 0, 10);    ground.material = new BABYLON.StandardMaterial("mat", scene);    ground.material.ambientColor = new BABYLON.Color3(0, 0, 0);    ground.material.diffuseColor = new BABYLON.Color3(1, 1, 1);    ground.material.specularColor = new BABYLON.Color3(0.01, 0.01, 0.01);    ground.scaling = new BABYLON.Vector3(10, 0.1, 10);    ground.material.diffuseTexture = new BABYLON.Texture("images/ground.png", scene);    ground.receiveShadows = true;        var boxMaterial = new BABYLON.StandardMaterial("mat2", scene);    boxMaterial.diffuseTexture = new BABYLON.Texture("images/box.png", scene);    var box = null;        for (var i = 0; i < 15; i++) {        box = BABYLON.Mesh.CreateBox("box" + i, 1, scene);        box.position = new BABYLON.Vector3(Math.random() * 25, 0.75, Math.random() * 25);        box.material = boxMaterial;        shadowGenerator.getShadowMap().renderList.push(box);    }        // MAIN    engine.runRenderLoop(function() {        scene.render();    });};

See my gist here.

 

 

On Windows and Linux the scene illumination is higher.

 

 

On Windows and Linux the bottom of the ground is red

 

 

If I disable receiveShadow on the ground I've this result.

 

Do you have an idea to fix that ? How can I help you to find where is the problem ? If I use an intensity of 2.0 on the directional light, it's "partially" work, but it's crap..

 

Thanks for your answers !

Yann.

[GameMonetize]

Do you use Safari or Chrome?

[demonixis]

Hi,

 

We have this problem with all browsers in three differents Mac. One with an Intel HD3000, another with Intel HD4000 and finally an old GeForce 9400. 

 

If I set the directional light's intensity to 2.5 the scene is almost well illuminated.

[demonixis]

I made new tests on Windows 8.1u1, Mac OSX 10.9.2, Android 4.4.2 and Windows Phone 8.1.
 
This problem is present on Windows Phone too but it's worse, the hemispherical light doesn't work.
 

 
Chrome stable on Android, all is good
 

 
Chrome dev on Windows 8.1u1, all is good
 

 
Chrome dev on Mac OSX (Firefox and Safari has the same problem). The ground's bottom is not highlighted, it's dark.
 

 
IE11 on Windows Phone 8.1. The ground's bottom is not highlighted and boxes aren't impacted by the hemispherical light.
 
I'm trying to debug default fragment shader and I know that it's not a shadow issue. The method computeLighting seems to fail on Mac, I don't know why. Debugging shaders is pretty hard, we can't use console.log in it

 

I uploaded my sandbox project for all tests, you can download it here or just get the source file here.
 
PS: Do I need to resize images before uploading ? I don't know what is the correct bbcode to adapt images size.

[GameMonetize]

It is hard to debug without a Mac

I'll try on wp8.1

[demonixis]

Yes i know.. How can I help you ? Do you have any clues about this issue ?

 

I made some tests on default.fragment.fx and I know that it's not a shadow issue. When I turn the emissiveColor to 0.4 the result is better (it's not a fix, it's a hack ).

 

You can disable the 2nd directional and the point light in my sample, with just a directional we must have a scene with a green ground, boxes and shadows. The ground's bottom must be black. If you activate the hemisphericalLight, some faces of cubes must be highlited in red and the ground's bottom too. Even with an emissive color superior to 0.0 the ground's bottom is black, that's not good (Mac and WP8.1).

 

I'm not a pro with shaders (I liked your last blog post about it) but after a long debugging session, I think that there is a problem in computeLighting method:

 

vec3 lightVectorW;if (lightData.w == 0.){    lightVectorW = normalize(lightData.xyz - vPositionW);}else{    lightVectorW = normalize(-lightData.xyz);}

LightVectorW is wrong for the ground's bottom. So my question is: is it an issue with shader, or in JS code when we set uniforms ? Maybe a bad computation is made in the JS code ? 

[come]

Hi!

 

On osx, we detected the origin of the problem.

 

In Babylon.Engine.js (method createShaderProgram)

 

this._gl.getProgramInfoLog(shaderProgram);

=> throws and error (a warning in fact)

var error = this._gl.getProgramInfoLog(shaderProgram);if (error) {   throw new Error(error);}

Replace it with that :

var linked = this._gl.linkProgram(shaderProgram);if (!linked) {    var error = this._gl.getProgramInfoLog(shaderProgram);    if (error) {       throw new Error(error);    }}

 

the consequence in Babylon.Effect.js: 

the method "_prepareEffect" was throwed to the "catch" part of the try/catch which reduces  "defines" removing every optional parts of it

causing the bug on mac os

 

NOTE: the bug still happen in Windows Phone according to demonixis'tests

[GameMonetize]

on wp8.1 it may be related to shader complexity

could you try with just one light and nothing else

 

I'll fix the bug you found in the next release