How to view a Babylon-Blender page on smartphones?

[hit2501]

Hi, everyone!

 

I'm working on a page made with Babylon and Blender (big scene) but now I want to display it also on phones. What advices can you give me to make the following page compatible for smartphones?

 

http://www.wilawara.com/softwaredemos/mall_a.php

 

Thank you all for your help

[GameMonetize]

This should work as long as:

- No 32 bits indexes

- No complex shaders

 

 

What do you get when you run it on a webgl compatible phone?

[hit2501]

Hi Deltakosh.

 

I get only the 2d menus and nothing more (blank background), but in desktop I can enter with no problem.

 

Originally the model in blender was nearly half a million vertices, I shrunk it to 173K vertices, then divided it into 12 parts (not equals) less than 65K vertices to be able to export to Babylon. In Babylon I joined all by "ImportMesh".

 

Before export from Blender I the configured all textures "shadeless"

 

Can you give me please more detailes about the 32 bits indexes?

 

Thank you very much for your answer.

[GameMonetize]

The 32 bits issues is just about not using >65k vertices meshes

 

Can you test by adding mesh one by one and keep using shadeless to isolate the issue

[hit2501]

Thanks Delta Ill try

[JCPalmer]

I am not sure I understand things, since Blender will break very large meshes into multiples.  Looking at your blender export log file would be faster.  It reports the number of indices per mesh.  I thought all platforms had this restriction.

 

For what it was worth, it runs on iOS.  I am using the newest, fastest iPad.  If not working, it could might be just too much for your test device.

 

Kind of slow to build.  If this is due to the large number of vertices, perhaps the Tower of Babel exporter might improve this.  Reading and then pushing all the verts / normals / indexes on to Javascript arrays in loops might cause performance issues.  If network caused, never mind.

[hit2501]

Sorry for the delay. I tried adding meshes one by one but dont work.

 

My goal is to make it work on Android default browser.

 

I tried too with a very simple mesh (beaker) as you can see in: http://www.wilawara.com/beakerdemo/

but I only can see it on desktop browsers.

 

Is there anything I missing about compatibilities and restrictions?

 

Thank you all.

[JCPalmer]

What I see that is odd is that it seems you are creating 2 scenes.  I use Tower of Babel to build inline code, instead of  a .babylon, so I am less familiar with SceneLoader.  If you wish to establish a scene and camera prior to the .babylon load, try SceneLoader.append().  In that case replace the engine parameter with the scene.

[Temechon]

There are some errors in your code.

Replace this : 

var scene = new BABYLON.Scene(engine);var uselessCamera = new BABYLON.ArcRotateCamera("nothing", 0, 0, 2, new BABYLON.Vector3(0,0,0), scene); //just to avoid anoying compilation error message about the need to create at least one camera            

by this : 

var scene = null;

And remove this after your load loop : 

var scene = createScene();engine.runRenderLoop(function () {    scene.render();});

BABYLON.SceneLoader.Load CREATES a new scene (it does not need to have one in the first place), and it doesn't returns a new scene.

Good luck !

[hit2501]

Thank you both.

 

Temechon I tried your advice but when I do it the meshes dont load. 

 

JC I will try with append() and Tower of Babylon.

 

Do you think its possible to see it with google chrome (on Android) or Safari (on IOS), sorry if I ask for this, I dont have access to an smartphone for now and the emulators have some flaws that makes it hard to test.

 

Once more thank you.

[JCPalmer]

In my first post, I said it ran on my iOS tablet, so yes it ran on Safari, just very slow.

 

To be clear, Append() is with a .babylon, and Tower of Babel is an all source code solution.  Would go with append first, but keep it simple. like:

var scene = new BABYLON.Scene(engine);scene.collisionsEnabled = true;           var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);camera.attachControl(canvas);camera.keysUp.push(87); // Wcamera.keysLeft.push(65); // Acamera.keysDown.push(83); // Scamera.keysRight.push(68); // D        camera.setTarget(BABYLON.Vector3.Zero());camera.attachControl(canvas, true);camera.speed = 2;camera.checkCollisions = true;camera.applyGravity = true;                BABYLON.SceneLoader.Append("BabylonBeaker/", "Precipitados.babylon", scene); scene.executeWhenReady(function () {    engine.runRenderLoop(function() {         scene.render();      });});