solved Importing OBJ files directly from computer?

[CGinSeattle]

3 hours ago, Deltakosh said:

Can you try to drag n drop your obj in the sandbox.babylonjs.com ?

If it does not work, can you please share the file here?

@Deltakosh I also tried. And I can drag and drop the obj file of mine into that sandbox.babylonjs.com site. But why? I'm using the same obj loader and location to it in my code, but it will not load from disk no matter what I try.  I've tried the file loader method to get the path, and just having it in the same directory as the index. html file.  I either get file not found or unable to load no matter what.  So now I know my obj is fine, but somehow the sandbox.babylonjs.com site can pick it up but I can't. What is being done differently?  Thanks!

Edit: nevermind, solved it! see next message.

Edited October 10, 2017 by CGinSeattle
solved it.

[CGinSeattle]

Ha! Solved it!  To load a straight OBJ file locally (no localserver, no webserver, just from disk), OBJ files still need a .manifest file to tell the browser NOT to load from a webserver. 

See this link:  http://doc.babylonjs.com/tutorials/caching_resources_in_indexeddb

Once I added a myobjectfile.obj.manifest file with the info per that article inside.

i.e.

{ "version" : 1,

"enableSceneOffline" : true,

"enableTexturesOffline" : true }

 

then I could use an AssetsManager loader to load the individual OBJ mesh into the current scene.  i.e.

var loader = new BABYLON.AssetsManager(scene);

var myObj = loader.addMeshTask(name, "", "", filename);
        

I used the filename from the <input> to get the name of the mesh (single mesh per OBJ) and the file name itself (filename.obj after being stripped of the fakepath part).

However, calling SceneLoader.ImportMesh did not work. Apparently, it only accepts .babylon files 

 

[GameMonetize]

hahahah! Well done

[Daiki]

Hello I think I am too stupid or I have a board in front of the head. 
Where do I have to go? If I insert that in my script comes nothing more.

{ "version" : 1,

"enableSceneOffline" : true,

"enableTexturesOffline" : true }

and this one I had so far always only without. manifest

var loader = new BABYLON.AssetsManager(scene);

var myObj = loader.addMeshTask(name, "", "", filename);

[CGinSeattle]

@Daiki 

Hi,

First, drag and drop the obj into the sandbox location. It should load OK. If not, then something may be wrong.

Second, to programmatically load the obj file.

First create a manifest file. This is going to be your manifest file for your obj file.

Name it the same as your obj file, except you will add .manifest

In other words, if your obj is named...

myobject.obj

then create...

myobject.obj.manifest

 

Then put the following text in the manifest file.

{ 

"version" : 1,

"enableSceneOffline" : true,

"enableTexturesOffline" : true

 }

I have attached an example to this note.

Next:
You will now load the obj using a loader. As a first test, you can simply load it using the same location as your offline index.html file.

This index.html file contains your babylon html code. With the obj and manifest in the same directory as this file, it should find it.

For example, say your obj file is named soccerball.obj

You will create a soccerball.obj.manifest  file

You will have your index.html babylon file and these two files together in the same directory.

Your loader will call:

var loader = new BABYLON.AssetsManager(scene);
var myObj = loader.addMeshTask("soccerball", "", "", "soccerball.obj"); //will look in same location as html file
BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true;     

 

I will be creating a playground sample with my code for loading an offline obj file tomorrow sometime. I will post the location here when I have done that. But the above is the basic procedure.

I hope this makes sense?  

soccerball.obj.manifest

[CGinSeattle]

@Deltakosh

@Daiki

@JohnK @adam

EDIT: Apparently this is a cross browser gotcha, meaning that it considers loading locally to be crossbrowser if somewhere it is expecting http or https. Don't know whether babylon.js is doing this internally or not. Especially as .babylon files seem to be immune (they worked), and the sandbox url allows OBJs to be dragged/dropped from the desktop and without a manifest.

Easiest solution is *probably* to run a localserver. I didn't realize but the live preview of Brackets (an HTML/CSS/Javascript Web editor) was doing this (somehow), so that's why I didn't notice the problem until I tested purely from desktop. This is also the most secure alternative.

Apparently, you can tell the browser (upon first start up of the very first instance of the browser?? **) to allow files but others have cautioned that this is not secure, it opens your browser up to anything.

**haven't tried this yet, so going by the post information...perhaps one *can* launch an instance, after browser already started, and tell that instance to allow files? Would be interesting to find out.

See these two stackoverflow posts:

https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local

https://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode

I may try to write a convert OBJ to basic .babylon "on the fly" (in memory, after loading the mesh info raw), but that would be a bit more work than I currently want to do. Though perhaps that is why sandbox is working? Perhaps it converts OBJs that are dragged/dropped into a .babylon file? Or not. If I do, I'll update my sample at that point.

Final workaround, don't use OBJs that are local. Convert them to .babylon files using a DCC tool first (a pain, but .babylon files seem to be immune to this...so far.) 

Original: Apparently, I jumped the gun a bit. When I run my code in Brackets, I suspect it is creating a localserver for me as part of it's live debugging feature. 

When I try to run everything purely from desktop, i.e. all files local, index.html, the obj's, even a full custom babylon.js with everything in it, and even with jquery.pep.js made local, then I get this error.  (I also got it when trying to use the pep.js and babylon.js files from the preview url. So it seems to be tied to OBJs only.  Babylon files are OK.

Is this a bug, that OBJs really really can't be pure local? (even with a manifest saying to load from local?)

Or is it a limitation? The babylon code will only allow OBJs to be loaded when there is a localserver (as the offline option).

Or am I missing something?

p.s. I will be updating a playground example showing my code, I just happened to do a test outside of Brackets and discovered this.

EDIT: here is the code in the playground,  you'll notice that it also doesn't work in playground (http or https),. a 404, again, somehow connected with the manifest.

http://www.babylonjs-playground.com/#6N13NV#9

Thanks!

Failed to load file:///C:/Users/c_000/Desktop/babtest2/soccerball.obj.manifest?1507685352542: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
t.checkManifestFile @ babylon.customfull.js:sourcemap:28
babylon.customfull.js:sourcemap:28 Failed to load file:///C:/Users/c_000/Desktop/babtest2/soccerball.obj.manifest: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ babylon.customfull.js:sourcemap:28
babylon.customfull.js:sourcemap:3 Failed to load file:///C:/Users/c_000/Desktop/babtest2/soccerball.obj: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
h @ babylon.customfull.js:sourcemap:3
 

[GameMonetize]

Ok let me work on that. They may be a bug on my side

[GameMonetize]

Ok it was a mix

I fixed a bug in bjs and I also added one line in your code (line #199):

https://www.babylonjs-playground.com/#EH5KNA

[JohnK]

14 hours ago, CGinSeattle said:

Apparently, you can tell the browser (upon first start up of the very first instance of the browser) to allow files but others have cautioned that this is not secure, it opens your browser up to anything.

This is what I meant when I said

On 10/6/2017 at 4:51 PM, JohnK said:

Is it possible to load a local file into an HTML page from a web URL? Yes provided the webpage has been written to do so and the browser has the correct settings. FF has the correct settings by default, Chrome does not.

FF will allow you as a default, Chrome needs to have some setting changed.

While it can be unsecure to load a file locally from your computer this is OK if YOU have created or know exactly the contents of the file you are loading. If you have just downloaded a file from the web then all the usual risks are there.

Being very very careful I would not load any file from the web onto my computer and then into a project even if running a local server unless I absolutely trusted the source.

 

 

 

[CGinSeattle]

1 hour ago, Deltakosh said:

Ok it was a mix

I fixed a bug in bjs and I also added one line in your code (line #199):

https://www.babylonjs-playground.com/#EH5KNA

@Deltakosh Thanks, and one follow up question and one behavior note with the invisible buttons on special navbar I've added (to get it to appear the babylon GUI buttons are doing it):

0) confirmed that it worked in standalone, static html, Brackets-livepreview/localserver, and Playground  on my machine (see note below/#2).  Hurrah!! Thank you!! (also, this method does not require manifest file either)

1) But...Why? Why the keyword "file:" and the need to fill in the FilesInput structure? Why does that make it such that I can bypass the crossbrowser issue and for that matter, the need for a .manifest file. I can load an obj from disk and all by itself. 

(yes, I checked the docs, either they don't explicitly call this out, or I missed the correct page.) This is all I found:

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

https://doc.babylonjs.com/classes/3.0/filesinput

So why does this make such a difference?

BABYLON.FilesInput.FilesToLoad[objfilename] = files[0];

var myObj = loader.addMeshTask(name, "", "file:", objfilename);

 

vs.

var myObj = loader.addMeshTask(name, "", "", objfilename);

 

and 2) I noticed that while the Playground sample will work (dialog will come up) on loading - even if the navbar I've added to hold the invisible controls is not visible. However, if you modify the script (something minor like var mynewval = 0; being added or deleted) and hit RUN, then the dialogs stop working. I suspect because something in the Run command now does something where it notices the navbar is hidden and so hides the controls, essentially disabling them. You must do a full reload to get it working again (with navbar hidden).

 

I tried it out by also moving the controls to a different navbar class (one that appears at a lower browser width) and noticed the same behavior. As I don't use the same CSS on my offline/localserver sample (the code just creates plain CSS additions), it's definitely tied to the navbar ability to appear/disappear. But mainly, I'm thinking that if the navbar isn't going to be visible on initial load, then it's odd that it still creates the controls on the client side html and allows the behavior. I would think the opposite would be true. But I'm not a DOM/server/client expert, so perhaps the initial load working (with hidden navbar) is expected behavior.

 

https://www.babylonjs-playground.com/#6N13NV#30

 

 

Not sure if you care about this behavior or not in Playground, just thought I'd mention it.

 

[GameMonetize]

1. the "file:" moniker is used to indicate to internal engine that it needs to access a File object and not use XHR to get data

2.I think this is because the controls are tied to the previous engine and scene. I suggest deleting and recreating the file inputs controls if they already exist

[CGinSeattle]

19 minutes ago, Deltakosh said:

1. the "file:" moniker is used to indicate to internal engine that it needs to access a File object and not use XHR to get data

2.I think this is because the controls are tied to the previous engine and scene. I suggest deleting and recreating the file inputs controls if they already exist

@Deltakosh @Daiki

Thanks, and I've updated my sample to note this new information in the code comments.  Daiki, hope this helps.

https://www.babylonjs-playground.com/#6N13NV#33

[Daiki]

Yes, Thank you for helping.