Weird bug with imported mesh and Firefox

[nomadic_aviator]

Hello,

 

First I want to say that I really love Babylon.js. It has made learning WebGL and 3D graphics much much easier. I have two questions regarding imported meshes.

 

I have managed to import and load a mesh I created in Blender, however, the mesh itself only seems to appear in Chrome and IE. It doesn't appear in Firefox at all. When I look at the console, I get this error:

 

 

babylon.js:3 BJS - [09:46:46]: Valid manifest file not found.

 

http://www.cosmiqcloud.com/universe/cosmiqlogo2.babylon.manifest?1423583206131 Failed to load resource: the server responded with a status of 404 

 

Scene & textures will be loaded directly from the web server.

 

I wanted to make sure this wasn't something in my code and I am not really sure what a manifest file is.

 

My second question is: 

 

How do I make the imported mesh reflect on a mirrored surface?

 

Any insight you can give would be very helpful. Thank you.

 

My code is below and here is the link to the live demo is http://www.cosmiqcloud.com/universe/

    <script>        var canvas = document.getElementById("renderCanvas");        var engine = new BABYLON.Engine(canvas, true);        var createScene = function () {            var scene = new BABYLON.Scene(engine);                    // Setup environment			var light = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(10, -20, 0), scene);			light.position = new BABYLON.Vector3(-160, 240, 1);			light.diffuse = new BABYLON.Color3(1, 1, 1);			light.specular = new BABYLON.Color3(1, 1, 1);			light.intensity = 0.7;						var omnilight = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 1, 60), scene);			omnilight.position = new BABYLON.Vector3(0, 35, 310);			omnilight.diffuse = new BABYLON.Color3(1, 1, 1);			omnilight.specular = new BABYLON.Color3(1, 1, 1);			omnilight.intensity = 1.9;			var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(25, 0, -170), scene);			//var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);			scene.activeCamera.attachControl(canvas, true);			camera.checkCollisions = true;			camera.applyGravity = true;			camera.ellipsoid = new BABYLON.Vector3(2, 2, 2);						//Physics 			scene.enablePhysics();			scene.setGravity(new BABYLON.Vector3(0, -60, 0));			scene.collisionsEnabled = true;                    // Meshes            var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16.0, 20.0, scene);			sphere2.position.x = 0;			sphere2.position.y = 4;			sphere2.material = new BABYLON.StandardMaterial("texture1", scene);			sphere2.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);			sphere2.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 2.0});			sphere2.checkCollisions = true;			sphere2.material.alpha = .5;						var sphere3 = BABYLON.Mesh.CreateSphere("Sphere2", 16.0, 70.0, scene);			sphere3.position.x = 187;			sphere3.position.y = 35;			sphere3.position.z = 150;			sphere3.material = new BABYLON.StandardMaterial("texture1", scene);			sphere3.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);			//sphere3.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 0.0});			sphere3.checkCollisions = true;						var knot = BABYLON.Mesh.CreateTorusKnot("knot", 7, 2, 128, 64, 2, 3, scene);			knot.position = new BABYLON.Vector3(-19, 10, 16); 			//knot.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 30, restitution: 1.0});			knot.checkCollisions = true;			knot.material = new BABYLON.StandardMaterial("texture3", scene);			knot.material.diffuseColor = new BABYLON.Color3(1, .634, .7);			knot.material.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);						//Animations			var animationKnot = new BABYLON.Animation("myAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);						// An array with all animation keys			var keys = [];   			   		 keys.push({        		frame: 0,        		value: 4    		});    		    		keys.push({        		frame: 20,        		value: 8    		});       		keys.push({        		frame: 100,        		value: 7    		});					    		keys.push({        		frame: 360,        		value: 5    		});									    		keys.push({        		frame: 460,        		value: 1    		});						animationKnot.setKeys(keys);						knot.animations.push(animationKnot);									scene.beginAnimation(knot, 0, 100, true);						//Imported mesh						var cosmiqLogo = BABYLON.SceneLoader.ImportMesh("Cosmiq Logo", "", "cosmiqlogo2.babylon", scene, function (newMeshes) {			// imported mesh attributes            cosmiqLogo = newMeshes[0];						cosmiqLogo.position.y = 54;            cosmiqLogo.position.z = 320;            cosmiqLogo.scaling.x = 14.2;            cosmiqLogo.scaling.y = 14.2;            cosmiqLogo.scaling.z = 14.2;						cosmiqLogo.material = videoMat;			cosmiqLogo.emissiveColor = new BABYLON.Color3(1, 1, 1);			cosmiqLogo.ambientColor = new BABYLON.Color3(1, 0.2, 0.7);			});									//Skybox			var skybox = BABYLON.Mesh.CreateBox("skyBox", 10000.0, scene);			var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);			skyboxMaterial.backFaceCulling = false;			skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);			skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;			skybox.infiniteDistance = true;			skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);			skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);			skybox.material = skyboxMaterial;            //Video material            var videoMat = new BABYLON.StandardMaterial("textVid", scene);            videoMat.diffuseTexture = new BABYLON.VideoTexture("video", ["textures/alien_ocean.mp4"], 256, scene, false);            videoMat.backFaceCulling = false;                    // Ground            var plane = BABYLON.Mesh.CreateBox("box", 6.0, scene);            plane.position.y = -10;			plane.scaling.x = 240;			plane.scaling.z = 240;             plane.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 0, friction: 300, restitution: 1.5});			plane.checkCollisions = true;                    // Materials                    var simpleMaterial = new BABYLON.StandardMaterial("texture2", scene);            simpleMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0);//Red                             //Creation of a mirror material             var mirrorMaterial = new BABYLON.StandardMaterial("texture4", scene);             mirrorMaterial.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);             mirrorMaterial.reflectionTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, true);              mirrorMaterial.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -10.0);             mirrorMaterial.reflectionTexture.renderList = [sphere2, skybox, knot, sphere3, cosmiqLogo];             mirrorMaterial.reflectionTexture.level = 0.6;                     //Sphere meshes             sphere2.subMeshes = [];             var verticesCount = sphere2.getTotalVertices();                     sphere2.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 900, sphere2));             sphere2.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere2));             sphere2.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 1800, 2088, sphere2));                            //Applying materials            plane.material = mirrorMaterial;									//Music 			// Load the sound and play it automatically once ready			var music = new BABYLON.Sound("Music", "Beautiful.mp3", scene,  function () {            // Sound has been downloaded & decoded                music.play();            });			            return scene;						        }                var scene = createScene();        engine.runRenderLoop(function () {			            scene.render();        });        // Resize        window.addEventListener("resize", function () {            engine.resize();        });    </script>

[Temechon]

Hello, 

babylon.js:3 BJS - [09:46:46]: Valid manifest file not found. http://www.cosmiqclo...t?1423583206131 Failed to load resource: the server responded with a status of 404  Scene & textures will be loaded directly from the web server.

Don't worry, everything is ok It is because your file manifest has not been found. More info here : http://doc.babylonjs.com/page.php?p=22231

 

For the mirror, did you check the doc ? Yes you did. So it's more a JS problem than Babs problem.

 

Actually, whern you do this : 

mirrorMaterial.reflectionTexture.renderList = [sphere2, skybox, knot, sphere3, cosmiqLogo]; 

comsiqLogo is not fully loaded by ImportMesh (asynchronous), so you have to create your mirror in the calback function of importmesh.

[nomadic_aviator]

Temechon,

 

 

Thank you for your reply. I followed the instructions with the manifest file and I no longer see the error. However, the mesh still doesn't appear in Firefox.

 

I assume it is the browser and not so much babylon.js as it appears in other browsers just fine. Is there any type of fix for that, or is that something I will have to live with.

 

Also, I am a bit of a babylon newbie, so is there any type of documentation on creating a mirror in the callback, or is it the same as the mirror I created. 

 

Again, thanks for you help. 

[Temechon]

Your problem is the logo scaling.

Try replacing this : 

cosmiqLogo.scaling.x = 14.2;cosmiqLogo.scaling.y = 14.2;cosmiqLogo.scaling.z = 14.2;

with this : 

cosmiqLogo.scaling.x = 1;cosmiqLogo.scaling.y = 1;cosmiqLogo.scaling.z = 1;

[gryff]

Hi nomad - welcome to BJS forum. Interesting looking creation.

 

I have a couple of questions:

 

Q1. What exactly am I looking for with this imported mesh? I tested the scene with Chrome and FF on Windows XP machine , and Chrome, IE, FF on Win7 machine and the scene looks the same to me. Maybe I'm missing something subtle, so be nice to know exactly what this mesh looks like.

 

Q2. I've said many times on this forum that I'm no javascript coder by any stretch of the imagination, but one thing in your code strikes me as odd. In the

var cosmiqLogo = BABYLON.SceneLoader.ImportMesh( ....

callback function you have a line :

cosmiqLogo.material = videoMat;

yet that material is not defined before the ImportMesh call or within the callback function. Rather it is defined after the ImportMesh.

 

It seems to be a video - and I don't see any video in the scene in any browser/OS.

 

As I said, I'm not a javascript coder so maybe Q2 is irrelevant as I'm sure the coder will point out

 

cheers, gryff

[nomadic_aviator]

Hi gryff,

 

Thanks for the comment. I know the scene looks weird, but I am really figuring out how elements of Babylon.js work.  I actually have a plan to create something not so weird as soon as I figure this portion out, so bear with my weirdness for a little bit.  

 

The mesh appears as a cloud with a star in it, much like the cloud logo I have up top. The video mesh is just me figuring out how video textures work. That is a video of an ocean. I am a bit new to JavaScript, so where exactly should I put the videoMat?

 

Also, I tried the scaling change that Temechon suggested, which worked, but now the mesh is very small. I created it in Blender, so I will probably fix the scaling on that end.

 

Thank you.