Problem with WebGL compatibility check and touch events capture

[Vousk-prod.]

Hello boys and girls,

 

Before playing with Babylon I made some basic WebGL tests (following tutos, eg http://www.webglacademy.com/ ).

These tests worked like a charm, objects (json) were loaded correctly and touch events were recognised on every compatible devices (with the addition of Hand.js).

 

But with Babylon.js I'm facing some little problems :

 

1. On some mobile devices (Samsung Galaxy S4 for instance), while scenes with runtime created objects works fine, on scenes where a babylon scene file is loaded nothing appear anymore in the canvas (but everything is ok on PC with these scenes).

 

2. Touch events are not recognised on some mobile devices, whereas my previous tests without Babylon.js works on the same devices (both are using Hand.js).

 

Here are some test examples (the 3 work well on PC but behave differently on mobile and tablet devices) :

without babylon.js (works everywhere) : http://vousk-prod.net/webgl/testouille/index.html

with babylon.js (objects shown but no touchevents) : http://vousk-prod.net/webgl/babyl/work_construct.html

with babylon.js, scene file loaded (nothing shown in canvas) : http://vousk-prod.net/webgl/babyl/work_load.html

 

Any idea, suggestion, opinion ?

[Vousk-prod.]

Other info : one some devices, none of these 3 tests scene work ("browser not compatible"), although http://p3d.in objects work (don't know how they detect that the device and browser is compatible, but it seems very accurate)

[GameMonetize]

Here is the code for detection:

BABYLON.Engine.isSupported = function () {        try {            var tempcanvas = document.createElement("canvas");            var gl = tempcanvas.getContext("webgl") || tempcanvas.getContext("experimental-webgl");            return gl != null && !!window.WebGLRenderingContext;        } catch (e) {            return false;        }    };

[GameMonetize]

For scene loading problem, it would be useful to see if you get some exceptions ?

[Vousk-prod.]

Of course...

I'll see how I can activate console in mobiles browsers.

[Vousk-prod.]

After some tests and changes, the loading problem (1.) is solved (the loading process was so slowed down on mobile because of too many textures and cubemaps that objects never appeared - maybe some http timeouts -, but now since all models are well optimised, everything is ok)

 

But the no touch problem (2.) is still there.

I installed debug tools to check for exceptions, but no error occured. Expect the fact that I cannot interact with my scene with touches, everything seem to work normally.

 

You can try this simple test scene on mobile phones and tablets : http://vousk-prod.ne.../work_load.html

I checked it on Samsung Galaxy S4, Samsung Galaxy Note, Asus Transformer and also every device in demo in big shops (like fnac, darty, boulanger), and it's always the same result : imossible to move the camera with touch events (except for one model, but I don't remember which one exactly, a Galaxy Tab I think, an old version).

 

The code for this test is really simple :

var canvas = document.getElementById("canvas3d");var engine = new BABYLON.Engine(canvas, true);LoadScene(engine, canvas);function LoadScene(engine, canvas) {	BABYLON.Engine.ShadersRepository = "";	BABYLON.SceneLoader.Load("media/assets/Rabbit/", "Rabbit.babylon", engine, function (scene) {            scene.executeWhenReady(function () {					scene.clearColor = new BABYLON.Color4(0,0,0,0);				var sphere = BABYLON.Mesh.CreateSphere("Sphere", 10.0, 10.0, scene);		var targetCam = new BABYLON.Vector3(0,0,0);		var orbitalCamera = new BABYLON.ArcRotateCamera("CameraOrbit", 0, 0, 20, targetCam, scene);		scene.activeCamera = orbitalCamera;		orbitalCamera.attachControl(canvas);		var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 3, 0), scene);		light0.diffuse = new BABYLON.Color3(1,1,1);		light0.specular = new BABYLON.Color3(1,1,1);		light0.groundColor = new BABYLON.Color3(0, 0, 0);		light0.intensity = 1.0;				                engine.runRenderLoop(function() { 			scene.render(); 		});            });        }, function (progress) {            // To do: give progress feedback to user        });};CSS :#canvas3d {    width: 500px;    height: 500px;    cursor:move;    border: 1px dashed re;    /*touch-action: none;*/    }

I'm using hand.minified-1.3.4.js here. On other HTML5 project I'm using the same Hand.js version and everything is ok, on every touch devices.

 

I'm sure there is just a little stupid thing I miss, but I cannot figured out what...

 

Am I the only one who face touch events problems on mobile and tablet devices ?

Do you spot a a problem in my code ?

Any help would be greatly appreciated, I'm stuck with that problem for days...

[Vousk-prod.]

Ok, I found the problem!

So simple... so stupid...

 

Always call Hand.js before calling Babylon.js !!

I know, this is obvious, but it took me two weeks to debug... (not a full time quest, of course, but two weeks... I'm not sur if   or , but certainly )

 

So, to recap :

 

1. loading problem on mobile devices : optimise your scene, optimise your maps, restart your android devices to clean browser cache and settings

2. touch event problem on mobile device : call hand.js script before babylon.js script