Loading texture - what am I missing?

[royibernthal]

I load a texture using the asset manager, once load is complete, I create a sprite using that texture.

I created a PG where you can see the code working:

http://www.babylonjs-playground.com/#1KDQTU#6

 

But when I try to run the exact same code in my project, nothing appears.

The DOMContentLoaded listener was written in a way that'd allow me to keep my PG createScene() unmodified.

What am I missing?

window.addEventListener("DOMContentLoaded", () => {
    window.canvas = document.getElementById("renderCanvas");
	window.engine = new BABYLON.Engine(canvas, true);
	
	var scene = createScene();
});

var createScene = function () {

    var scene = new BABYLON.Scene(engine);
	var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 0, new BABYLON.Vector3(4, 1, -0), scene);

    camera.setPosition( new BABYLON.Vector3(0, 0, -20) );
	camera.attachControl(canvas, true);
	
	var assetsManager = new BABYLON.AssetsManager(scene);
	var url = "http://jerome.bousquie.fr/BJS/images/spriteAtlas.png";

	assetsManager.addTextureTask("textureId", url);

	assetsManager.onFinish = (tasks) => {
		var ui = new BABYLON.ScreenSpaceCanvas2D(scene, { id: "uiContainer" });
		var texture = new BABYLON.Texture(url, scene, false, true, 1);
		var sprite = new BABYLON.Sprite2D(texture, { parent: ui, id: "asdf" });
    };

	assetsManager.load();
	
	engine.runRenderLoop(() => {
		scene.render();
	});
	
    return scene;

};

 

[Nabroski]

Hello 
it might be complicated, because it is also a variable of your server, some settings can be wrong,

but for this example you just don't use the assetsmanager
http://www.babylonjs-playground.com/#1KDQTU#7

http://doc.babylonjs.com/tutorials/how_to_use_assetsmanager

loadmydata->data->dataisloaded?->data.url->to texture

@royibernthal problem serverside could be your setup of babel or boogle’s traceur is not right.

Edited July 13, 2016 by Nabroski
es6

[royibernthal]

What do you mean it's also a variable of my server?

 

42 minutes ago, Nabroski said:

problem serverside could be your setup of babel or boogle’s traceur is not right.

Could you please rephrase I didn't understand? The image is not stored on my personal server, and I'm running the code locally, just to give you a better picture.

 

45 minutes ago, Nabroski said:

loadmydata->data->dataisloaded?->data.url->to texture

I'm not sure I understood that part either. Do I need to save the reference to task.texture once its loaded or is it saved or managed somehow by AssetManager or Scene for future reference?

[Nabroski]

http://www.babylonjs-playground.com/#1KDQTU#8

ES6->arrow function  ()=>{};
is something new, i hope u know how to use it, and either, how to setup it.

Sorry for my spare words i'm on the road.

Maybe someone else will help you, just push the question up, if you have more to ask.

Best

[royibernthal]

It is indeed something new, I'm pretty sure I know how to use it. What do you mean by how to setup it?

I still need answers to all my questions, maybe you answered them but I didn't understand, either way it'd be great if you could find time later to answer at ease or if someone else could answer them.

Thank you for your time regardless

[Nabroski]

@Nockawa yeah, its a bug! 

[royibernthal]

Are you sure it's a bug? My guess is I'm just doing something wrong.

[Nabroski]

at least i get a texture is not a bound of two error

https://ea5d4c70e420125a53aadf6589a5a42adabf753f.googledrive.com/host/0BwTQLXGKzDbZNU9YMTU4ZzFuem8/

 

[royibernthal]

@Nockawa Any idea?

[royibernthal]

Anyone?

[Wingnut]

Hi R!

http://www.babylonjs-playground.com/#1KDQTU#9

See all those console.log reports in there.  When you try it on your home project, leave those in.  Do they give the same reports at home... as they do in the playground?

It's something to try.  console.log(anything) is a great way to find issues.

[Nabroski]

@Wingnut

thank you for catch up, the bug still remains, no console.log will help here

view-source:https://ea5d4c70e420125a53aadf6589a5a42adabf753f.googledrive.com/host/0BwTQLXGKzDbZNU9YMTU4ZzFuem8/

[royibernthal]

@Wingnut

Hi,

The first 2 logged objects (ttask) have isCompleted set to true when testing in the playground, and set to false when testing on my local machine.

I tried to clear the cache, same results.

Any idea what's going on?

[GameMonetize]

can you check f12 network monitor and console?

[royibernthal]

The previous image returned "error 304 not modified" when trying to load it from my local machine, so I chose new images.

 

1) http://mp3fiber.com/images/icons/Edit.png

 

2) symbol.png - a local image placed in the same folder

 

Nothing appears on the canvas in both cases. I'm testing in Firefox.

[Wingnut]

Hi @royibernthal and others.

I have no new news.  https://github.com/Wingnutt/misc/blob/master/royibernthal.zip?raw=true

You can DL this all-in-one zip pack, here.  It seems to work fine on my home puter.  This pack includes today's BJS and hand.js, the sprite atlas, and index.html.  Just unzip, and double whack the index.html.  Before doing that, find a 4-leaf clover, and a rabbit's foot... and any other good luck charm you can think-up.  Why won't this goofy scene run on your home computer?  It's gotta be... the => thing.  Or not.  *scratch scratch*  Puzzler!

 

[royibernthal]

@Wingnut Your example works on my computer. The only difference I see is that I execute my code on DOMContentLoaded. You also include handJS but it doesn't seem to make a difference.

Can you download the attached zip and see if you can make it work?

Babylon Loading Texture Test.zip

[Wingnut]

Doesn't work.  hrmph. 

Not the DOMContentLoaded either. 

window.onload = function() {
    console.log("wol!");
    canvas = document.getElementById("renderCanvas");
    engine = new BABYLON.Engine(canvas, true);
    
    var scene = createScene();
};

Same symptom or close.  This is a scope issue, I believe.  canvas, engine, window.canvas, window.engine, engine.runRenderLoop, window.engine.runRenderLoop.  Troubles there, maybe.  I got a bunch of real-life work to do... lots of storm debris from a big one early this morning.  Knee deep in tree branches, in this large yard... and renters are responsible for yard work.  So, I need to get sweaty... in the high heat... but I'm already half done.  (yay!)  I'll keep thinking. 

Scope.  Check scope.    Two engines running, renderLoop in wrong place or on wrong engine or SOMETHING like that.  Check out Temechon's tutorials/style.  He likes to put js in many separate files (class files), just like you. 

Me?  I stuff everything into one big file... cuzzzzz... I never do very large projects, cuzzzz... I am always tired... from all this yard work.    Pro scopers are nearby... won't take long for them to see the problem, I hope.

[royibernthal]

Even if I put everything in the same scope the result remains the same  Uploaded for you to see.

Babylon Loading Texture Test.zip

[Wingnut]

*nod*.  I actually meant all in one file (no app.js)... just like the way a zip of the working playground scene... does it.

Your most recent zip still fails for me.  Darned thing. 

Texture IS loading.  I added a plane... inside the assetsManager.onFinish and set its material.diffuseTexture = texture, and it worked fine (after adding a light to the scene).  So texture is fine.  Sprite2D has some kind of issue, though.

var text = new BABYLON.Text2D("test", { parent: ui, id: "Text", marginAlignment: "h: left, v: bottom", fontName: "10pt Arial" });

I added that... after the sprite creation, too.  It worked fine... so ScreenSpaceCanvas2D IS alive and awake.

Odd phenomena!  Create Sprite2D in script within main .html, and all is fine. 

Create it in separatefile.js, and it won't display, even though Sprite2D object seems (smells) fine.  hmm.

We might need to call for extra muscle... for this puzzle.  "Hey Extra Muscle!  Can you hear me?  We have a tough puzzle that's taking too long to solve." 

I'll keep scratching my beard and staring at the code... but... this is a good one.  I might be getting a tumor.  heh

[Nockawa]

Hello guys, I'm back, many people have this issue so it comes first, let's go! I'll keep you in touch!

[Nockawa]

@royibernthal the last .zip you gave you fail locally right? I'll looking for a local repro that fail, it's the best way for me to fix the bug.

Last time I got this issue, I tweaked the local loading of texture to simulate a delay and I thought the bug was solved. Unfortunately I didn't foreseen such behavior when developing the Sprite2d class (I'm a poor web/js developer), so now I have to find the right way to solve this thing.

 

[Nockawa]

@royibernthal your zipped sample is working locally everytime...

[Nabroski]

@Nockawa


So only i understand you right: in the bug report, you said, your are on it, royibernthals zip is not a relevant example. 

basically i don't care can fix it by myself, maybe. look here, dom onload textures has to be tweaked.
its kind of same thing as 2 weeks ago with pictures in babylonjs.

https://ea5d4c70e420125a53aadf6589a5a42adabf753f.googledrive.com/host/0BwTQLXGKzDbZNU9YMTU4ZzFuem8/

view-source:https://ea5d4c70e420125a53aadf6589a5a42adabf753f.googledrive.com/host/0BwTQLXGKzDbZNU9YMTU4ZzFuem8/

thread closed, everyone is happy.

[Nockawa]

2 minutes ago, Nabroski said:

@Nockawa


So only i understand you right: in the bug report, you said, your are on it, royibernthals zip is not a relevant example. 

basically i don't care can fix it by myself, maybe. look here, dom onload textures has to be tweaked.
its kind of same thing as 2 weeks ago with pictures in babylonjs.

https://ea5d4c70e420125a53aadf6589a5a42adabf753f.googledrive.com/host/0BwTQLXGKzDbZNU9YMTU4ZzFuem8/

view-source:https://ea5d4c70e420125a53aadf6589a5a42adabf753f.googledrive.com/host/0BwTQLXGKzDbZNU9YMTU4ZzFuem8/

thread closed, everyone is happy.

I'm not sure I understand. You say you don't have the issue anymore?