Addition to documentation: method to import local meshes to use with Babylon.js n desktop microStudio app

[SugarRayLua]

I was excited to explore microStudio's use of Babylon.js to import some complex meshes stored on my desktop but learned it is very complicated (at least for novices like myself). I was hoping to just change the path in the following microscript test code from Babylon's asset site to the path to my asset files on my desktop but that didn't end up working:

init = function()
     scene = new BABYLON.Scene()
     camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0,5,-10), scene)
     camera.setTarget(BABYLON.Vector3.Zero())
     camera.attachControl(canvas,true)
     light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0,1,0), scene)
     assetsManager = new BABYLON.AssetsManager(scene)
     meshTask = assetsManager.addMeshTask("task1", "", "https://assets.babylonjs.com/meshes/", "both_houses_scene.Babylon")
     meshTask.onSuccess = function(task) print("loaded") end
     assetsManager.load()
end

update = function()
end

draw = function()
     screen.render(scene)
end

From reading Babylon.js forums, it seems like Babylon.js does not yet support loading local files directly (although apparently being worked on with Babylon Native). Alternatively, the forum suggested loading local files via setting up a local server on one's desktop and then substituting:

"https://localhost:8080/" (or whatever port you are running your local server on)

I therefore downloaded the both_houses_scene.Babylon file from Babylon.js to save locally on my desktop to test loading that 3D scene from my desktop over a local server. However, the only local server I've set up before is the simple python http server and that didn't seem to work: the server indicated that it received the request from microscript to get the file (200 "ok"), and my project's canvas showed the loading icon, but nothing seemed to ever load (the canvas just showed a blank background). I then realized there was the difference between a mesh imported via https and http was that the latter is not encrypted and wondered if perhaps Babylon.js's code (and, in turn, microscript/microStudio) was excepting an encrypted mesh file and wasn't receiving one.

Thus, I figured out how to set up an npm server which allows one to set up a local https: server with SSL certificates:

https://www.npmjs.com/package/http-server

(To do so, I also had to figure out how to create my own certificates; if others are interested and haven't done so before, I'd recommend the following article for those using Macs):

https://ryanparman.com/posts/2019/how-to-create-local-tls-certificates-for-development-on-macos/

(The only thing I needed to change from the above instructions was in converting one of my .p12 keys too .pem when I got an error, I had to include "-legacy" in the list of options; apparently a know problem with converting using OpenSSL)

I eventually got my local desktop mesh files to load with the https: local server (e.g. "https://localhost:8080"), but it turned out that I had to follow all the instructions in the ryanparman article above when creating my certificate (e.g. I had to create my certificate with a subject alternate name extension or else Chrome on the Mac doesn't trust my local https server). In addition, I figured out from the following Babylon.js documentation that when one starts the https local server, one has to specify the -cors option:

https://doc.babylonjs.com/toolsAndResources/thePlayground/externalPGAssets

Ultimately, when you have created your SSL certificate and keys correctly and have installed the npm http-server module and start it with the following commands, you can load your local assets into your microscript Babylon.js projects on your desktop microStudio app!

http-server --ssl --cors --cert ~/yourCertFolder/localhost.cer.pem --key ~/yourCertFolder/localhost.key.pem 

Perhaps in the future, either Babylon.js will either make an option to import local meshes from their paths or they (or the microStudio developer) will enable importing to the app via http (which would be easier via python's simple server).

As others might be interested in testing out local 3D models into their microStudio projects, it maybe helpful to include some of this information in the microStudio documentation.

Fyi.

[SugarRayLua]

Better news! I realized that one doesn't actually need to use https: to load local assets: all one needs is to specify "cors" in an http header! Easy to do with the npm http server:

http-server --cors

From online forums, it seems one can even use the python simple http server (but have to create your own header that includes cors authorization). 😊

[SugarRayLua]

Added final solutions to microStudio Github wiki