External resources/urls for Playground examples

[webGLmmk]

I apologize if this is otherwise off topic, but its an honest effort to follow forum protocol.   I'm working on loading Blender scenes, and also creating audio visualizations, and I'll need to host .babylon files and mp3 files in order to show them in the playground.

In this playground example below, and in audio visualizations I've seen on jsfiddle, people are hosting on dropbox, but it comes from a url thats like, "dl.dropboxusercontent..." etc etc. I can't figure out how to generate a link like that. All I've found is the "share link" to otherwise private files (those aren't really paths, and it expires anyway) 

http://www.babylonjs-playground.com/#28YUR5

Can anyone offer tips on hosting resources (babylon and mp3 files) from either dropbox, or another service, and getting working url paths that I can use in the playground? I spent I dont know how long stumbling around on jsfiddle and I'm a bit burnt out.

I'd love to just work off github right now, but I can jump into a new hosting company if I need to (hated my last one). I was going to do that when I've developed more solid project ideas. I went through a phase of getting all these domains that I didn't use

 

[webGLmmk]

Ok so I'm answering my own question at least on sound files. used https://gitcdn.xyz/

Borrow this playground example:

http://playground.babylonjs.com/#15XABI#2

For some reason i had tried a different one and it didn't work.

[RaananW]

imgur.com for images, they allow CORS

[OMAR]

@gson78 regarding sounds and music... Did you know that you can "import" them from soundcloud too? @davrous has created this fascinating example to show how this works: http://www.babylonjs-playground.com/#15XABI#1

I honestly don't know what you CAN'T do with Babylon nowadays... (Hype is real  )

For images though RaananW has already answered your question, Imgur IS a great source for images and it doesn't put restrictions so you can just copy paste the direct link of your image the Imgur has provided for you to the Babylon and it will work!

 

Edit: This is NOT an off-topic. Babylon.js is CREATED for making games and games NEED assets. Feel free to ask any questions regarding how to include external resources to the Babylon. Have a nice day  

[jerome]

Quote

I honestly don't know what you CAN'T do with Babylon nowadays... (Hype is real  )

Until now, I just couldn't have BJS do a simple decent coffee... this framework really sucks !

[RaananW]

that's because we are using typescript. maybe we should move to coffeescript.

[Wingnut]

  I agree... this is a useful topic.  (And good comedy, too!)

If everyone tells their stories of "playground external resources" (including external scripts/libs)... I will add a section to the Playground Tutorial that covers what we know.  Thanks!

We also need a list of hotkeys and features for the Monaco editor.  Does anyone know of one?  Does anyone want to build a .md doc just for that?  Cooooool.

[jerome]

Ok, I forked everything and just started a port to coffescript \o/

Useless work is one of my hobbies

[webGLmmk]

16 hours ago, OMAR said:

@gson78 regarding sounds and music... Did you know that you can "import" them from soundcloud too? @davrous has created this fascinating example to show how this works: http://www.babylonjs-playground.com/#15XABI#1

I honestly don't know what you CAN'T do with Babylon nowadays... (Hype is real  )

For images though RaananW has already answered your question, Imgur IS a great source for images and it doesn't put restrictions so you can just copy paste the direct link of your image the Imgur has provided for you to the Babylon and it will work!

Hey, thanks. I was looking at soundcloud, but hadn't figured out their API yet. Will definitely take a look at the example.

For anyone searching this topic:

If you use github, and you want to import an .babylon file to the Playground, simply click the Raw button on the repo file, then use that link. IE:

	BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/gson78/miscWebGLpages/gh-pages/blender-scenes/", "custom-speakers2.babylon", scene);

It didn't seem to work for sounds i have on github, so I used https://gitcdn.xyz

to get a link that worked: 

var music = new BABYLON.Sound("Music", "https://gitcdn.xyz/repo/gson78/miscWebGLpages/gh-pages/sounds/storm-sound.mp3",
    scene, null, { streaming: true, autoplay: true });

http://www.babylonjs-playground.com/#F8ZO#5

(both .babylon and mp3 file imported into scene, though nothing has been done with them yet)

thanks everyone else.., @jerome, @wingnut, @RaananW

I think the more people that understand how to use the playground to ask their questions, the more examples we'll have posted here that others can use to develop. I'm always searching posts to find custom playground links.

[Pryme8]

I belive you can use jquery and github.

[Wingnut]

Thanks for the info/comments, gson!  Feel free to add a section about this.... to the playground tutorial, if you wish.

If you do add a section, would you also please mention "The Wukong Maneuver" - http://www.babylonjs-playground.com/#5FLDS#0

(Just tell about line 1.  It is a nice, clean, single-line jQuery method to include external scripts in the playground.  I like it.  thx.)

[Pryme8]

http://api.jquery.com/jquery.ajax/

If you read up on this, you will learn everything you need to include any kind of external source including ones that prohibit CORS

if your just including a script its easy you just do the built in ajax method http://api.jquery.com/jQuery.getScript/

if its something more complex or Cross-Origin, I would recommend a json or a raw text pull and parse it how you would need.  You can even construct a custom parsing callback with fallbacks for pretty much any file type right in the request constructor.

learn the ajax requests and with a little bit of regEx magic, you too can have your very own frat boy web scrapper... (its the same theory, as a front end web-scrapper)

[Pryme8]

 

[webGLmmk]

On 3/30/2016 at 3:10 AM, OMAR said:

@gson78 regarding sounds and music... Did you know that you can "import" them from soundcloud too? @davrous has created this fascinating example to show how this works: http://www.babylonjs-playground.com/#15XABI#1

I honestly don't know what you CAN'T do with Babylon nowadays... (Hype is real  )

For images though RaananW has already answered your question, Imgur IS a great source for images and it doesn't put restrictions so you can just copy paste the direct link of your image the Imgur has provided for you to the Babylon and it will work!

 

Edit: This is NOT an off-topic. Babylon.js is CREATED for making games and games NEED assets. Feel free to ask any questions regarding how to include external resources to the Babylon. Have a nice day  

@davrous there is such great stuff in this playground example.

[NasimiAsl]

for  Use Js from Github use this https://cdn.rawgit.com/ domain

[webGLmmk]

On 3/30/2016 at 3:10 AM, OMAR said:

@gson78 regarding sounds and music... Did you know that you can "import" them from soundcloud too? @davrous has created this fascinating example to show how this works: http://www.babylonjs-playground.com/#15XABI#1

 

@wingnut   had trouble getting sc track urls but figured it out...putting my own in here...

http://www.babylonjs-playground.com/#15XABI#4

  hashtag success on the api.soundcloud

i call today a success

 

[Wingnut]

Well done! 

@gson .. Did you... umm... contribute to the production of that music piece?  I like it.  Are you a producer/mix-god?  Musician?  Sorry to be nosey. 

[webGLmmk]

On 4/23/2016 at 6:37 AM, Wingnut said:

Well done! 

@gson .. Did you... umm... contribute to the production of that music piece?  I like it.  Are you a producer/mix-god?  Musician?  Sorry to be nosey. 

no, its a dj called RJD2, song is Ghostwriter...in fact i will probably find something else noncopyrighted to use ...

[webGLmmk]

On 3/31/2016 at 8:04 PM, Wingnut said:

Thanks for the info/comments, gson!  Feel free to add a section about this.... to the playground tutorial, if you wish.

If you do add a section, would you also please mention "The Wukong Maneuver" - http://www.babylonjs-playground.com/#5FLDS#0

(Just tell about line 1.  It is a nice, clean, single-line jQuery method to include external scripts in the playground.  I like it.  thx.)

Hey,  @Wingnut when you have time, can you read over this Playground tutorial add in? Offer any feedback?  It centers on hosting in Github, because IMO i haven't found anywhere better. Is there any other code repository I should mention? Going to copy it into original and submit when ready.

https://github.com/gson78/miscWebGLpages/blob/master/babylondoc.md

Thanks

[Wingnut]

Oh man, WELL DONE, @gson78!

Thank you!

One minor suggestion.  The sentence before the last URL...  perhaps i would do this:

Quote

Imgur can also be used to store images.

One or more additional scripts can be included by using jQuery.getScript() in the early lines of your source code.  One of our friends used this method to add extra functionality to the playground.  Notice the new 'WUKONG' button:

 

Putting that space after the Imgur line... sort of indicates that we are entering a new subject... and we are.... additional scripts.  It is a fairly important area, and maybe could even use a ### Adding Scripts header.  Speaking of #, ##, and ### prefaces, do you understand those and how they relate to the automatic table-of-contents system (TOC)?

Generally, just follow the #, ##, and ### conventions seen in the current document, and your section of the TOC will be fine.... after the next build.

Thanks gson.  Nice work.  We all appreciate the contribution!  Keep in mind that I am no expert on the docs system or github.  It was very kind of you to ask me about this.

Know that I don't approve git merges or trigger docs builds. I leave that for the pros.  I just type.    You're free to submit anything to our docs, anytime, and you never need to check with me.  But I'm glad you did... because... I am one of the early viewers of this cool new section!  If nobody else sees anything worth mentioning, I say insert, insert, insert!  Thanks again.

[Pryme8]

now make games that create levels based on the music you imported from soundcloud and I love you long time.