Using xhr to load a text file

[Brunex92]

Hey everyone,

I'm doing a visual application where I need to load a text file with coordinates and display them on the canvas.
At first I was using the FileReader API, now I want to load a file from an URL, and using xhr is the better option.

The problem is, I have no idea how to use it with babylon.js, can anyone provide a playground that uses it?

Basically what I need is load a file from an URL, put the coordinates that are on this file into a matrix, and display them on the canvas

Thanks

[Nabroski]

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

you can read the file as binary and the transfer it to text (more fun)

or just open and read the file directly (basics)

you can also create a minimal playground (under 40 lines of code) and we try to figure it out together.

[Wingnut]

Hi guys!  Can I ride along?  http://playground.babylonjs.com/#1ZF16Z#0

I've always wondered if off-domain text files could be sucked into a playground.  So far, no go.  Not like I know what I'm doing, though.  I seem to be reaching outside of my scope, both origin-wise and intelligence-wise.    Perhaps I should ONLY use Ajax as a scouring powder.  heh

[Brunex92]

So, I read the AssetsManager tutorial, and tried to display content on the console, didn't work

http://www.babylonjs-playground.com/#GP88V#0
 

What am I doing wrong?

[adam]

On 7/27/2016 at 8:07 PM, Wingnut said:

Hi guys!  Can I ride along?  http://playground.babylonjs.com/#1ZF16Z#0

I've always wondered if off-domain text files could be sucked into a playground.  So far, no go.  Not like I know what I'm doing, though.  I seem to be reaching outside of my scope, both origin-wise and intelligence-wise.    Perhaps I should ONLY use Ajax as a scouring powder.  heh

If you have the option of changing the text file, you could change the format to:

{

text: "<all your text goes here>"

}

Then you should be able to use your ajax call by changing the dataType to jsonp.

[Nabroski]

Here we go

http://www.babylonjs-playground.com/#GP88V#1

[Brunex92]

3 minutes ago, Nabroski said:

Here we go

http://www.babylonjs-playground.com/#GP88V#1

Oh, so the file needs to be in a server to be used? Didn't know about that, thanks for the help
Now I've to do what I need for my application
 
One other question, is there any way to load a file from my computer, by using a button, and then pass it to the AssetsManager? This is really important for what I am doing

[adam]

crossorigin.me is a little spotty.  Don't rely on it for your application.  It's good for the PG though.

[Nabroski]

No sorry, its a playground thing, you need to crossorgin the file.

Also you forgot to call

assetsManager.load();

here is an working "reallife" example

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

Sorry, im out of time now, maybe later.


One other question, is there any way to load a file from my computer, by using a button. Yes!
@Wingnut, he will probably writing you an working ajax example on this

Keep it up!
 

[Nabroski]

http://www.babylonjs-playground.com/#GP88V#2

[Brunex92]

1 hour ago, Nabroski said:

http://www.babylonjs-playground.com/#GP88V#2

I've already figured it out how to do with the FileReader, I'm asking if it's possible to do this button interaction with the AssetsManager

[Nabroski]

As long as you don't get any cross-origin errors from your browser, everything should be fine. You have to cross domain on your server
 

[]

 

@Brunex92
you have to debug it, the button you requested at least makes things far more complicated. You need a File reader to get the file path. you can use new BABYLON.Tools.FileReader 


Good luck

 

assets.zip

[Brunex92]

I'll be a little more direct then.
This is what I have so far:

brunex92.github.io

I've been using the FileReader API, to read a file, with a bunch of thrash that I don't need, and then I skip this reading until it reach a keyword, in this case '[ARESTAS]' just like this example: http://pastebin.com/VH6H9AMb

Then I start to put the coordinates and colors after this keyword into a matrix.

After that, I get these coordinates and colors to draw spheres.

 

The problem is, after I load a file, when I unmark the checkboxes for grid options and axis options, some graphical bugs happens, like this, this and this

So I thought I should make use of another way to read the file, or maybe I'm doing something absolutely wrong when I update my scene after I load the file, the problem is, I have absolutely no idea what could it be.

My knowledge on JS is really poor, I did all of this learning by myself, but this is the only problem I'm having right now, if anyone can help me, I would be really grateful

I made this PG http://www.babylonjs-playground.com/#GP88V#5

But it's not functional in parts, since I don't know how to update the scene after I load the file with playground.
It actually reads the file and put the coordinates into the matrix, then it shows on console.

 

Edited July 29, 2016 by Brunex92

[Nabroski]

hmm. i cant reproduce your error. your app i tested 3 times for about 2-5 min and again re invoke from running in the background


the console window of my browser gives me a lot of error messages, can you first get rid of them ? before we continue

also in your case:check when the file is fully loaded
engine.dispose();
engine = null;

i think i has also something to do with the drawcalls of the datgui.
can you sync draw calls of dat.gui to babylonjs - i dont know, i got a feeling(not tested) like the gui is really implemented in babylonjs, ergo runs faster, slower, as a separate layer. also look for a function in babylonjs, i forgot about, but is something that lets you get the render loop synch more to a (external) function - something like toanimationratio.

also experiment a bit with the engine, currently you got a simple app, without textures or something, so shut down half of it 
var engine = new BABYLON.Engine(canvas, false,{ antialias: false, preserveDrawingBuffer: true, limitDeviceRatio:1.0, generateDepthBuffer: false, generateMipMaps: false, samplingMode: 2 },false);
https://doc.babylonjs.com/classes/2.4/Engine

try to shutdown so many things as possible and the turn one by an other on again. this is the process of debug

i programming from time to time. i have absolutely no idea



 

 

 

 

 

[Brunex92]

@Nabroski you have no idea how this topic helped me a lot! The bug was happening because everytime I loaded the file, I was creating another engine over and over again, and I just didn't notice that!

Thanks for your patience and help

[Nabroski]

nice muse tshirt

[Brunex92]

Thanks haha