Playground Questions & Future Playground Tutorial

[Wingnut]

Hi gang!

    Here begins a discussion about the BabylonJS Playground:

           http://www.babylonjs.com/playground

 

I will be referring to the playground... as 'PG', so when you read 'PG', know that I am speaking about the playground.  Others are free to do the same, of course.

 

The BJS PG is a super handy tool, but to be perfectly honest, it has been somewhat confusing to me, regarding its 'save'.  Granted, I am still using FF21, and that could be some of the problem.  I will learn more about that as this discussion progresses.

 

Today's Story:  There seems to be no way to directly target a url... for a specific demo scene.  For example, today I was doing some cleaning on https://github.com/BabylonJS/Babylon.js/wiki/10-Object-collisions .  One thing I want to add to that tutorial... is a link to playground scene #9 - Intersections.  Although the names do not match, PG demo #9 is the correct demo to be associated with tutorial #10.

 

So, I tried url's such as...

   http://www.babylonjs.com/playground/9

   http://www.babylonjs.com/playground/#9

   http://www.babylonjs.com/playground/Intersections

 

All failed, of course.

 

Then I thought... ok, I will load demo #9 into the PG, and then SAVE it, which will give it a unique name such as http://www.babylonjs.com/playground/#NTL8V#1  (a PG scene I made for another reason, once).  Then I can use that unique name... as a URL for tutorial #10.  A direct link to the Intersections demo.  Yeah, that's the ticket.  That will work fine.

 

No. I hit save... and as best I can tell, I over-wrote the default PG Intersections scene... which is something that should not be allowed to happen without some kind of auth-in by tutorial writers and/or admin.

 

Ok, maybe I needed to MODIFY PG #9, and then when the PG code sees that I modified it, it will assume a 'Custom' PG scene, and issue me a unique url.  So, I took some spaces out of a Math.PI / 4... (making it Math.PI/4)... and hit the save button.  Nope, no unique url fragment issued, and I think I over-wrote the default PG #9 yet again.  Way to go, Wingnut!  Here I am... screwing-up nice scenes that the author of PG installed. Dammit... where is the NEW button? 

 

Possibly, removing spaces was not enough of a change to trigger a checksum difference, so it didn't become 'Custom'.  Not sure.

 

So, 'finally', I used my old friend... /#NTL8V.  I loaded in...

   http://www.babylonjs.com/playground/#NTL8V#1

 

I removed ITS code, and pasted-in my slightly modified code from #9 Intersections. There we go...

   http://www.babylonjs.com/playground/#NTL8V#4

 

I 'finally' had a url that I could put into Tutorial #10, and it ALMOST matches the picture at the top of that tutorial.  YAY!  (I haven't installed it yet, because I wanted to talk about all this, here, first.)

 

------------------

 

Another strange thing:  I am also experiencing some problems with entering new PG urls into my browser address field.  For example, I can enter/paste the address...

 

http://www.babylonjs.com/playground/

 

Hit enter... all is fine (although I would LOVE to have THAT url... be a blank/empty PG instead of being 'Basic Scene'.)

 

Now I add #NTL8V#4 to the end of that url... and hit enter.  Nothing happens.  No load.  But then I hit the browser's reload button, and boom, I get the new load.

 

Now I change the end of the url to #NTL8V#1... and hit enter.  Nothing happens.  No load.  Same story, hit the reload button... and the load happens.

 

I think the BJS PG is a great idea, but it sure took me for a ride today. Can't find a 'NEW' button, over-writing default PG demo scenes, the whole situation was not very enjoyable.  This is why I have decided... that SOMEBODY (probably me) needs to write a tutorial for the BJS playground.

 

So now we know the purpose of this new thread.  I would like to hear comments about the playground... and I want to learn all about it.  I want to know WHAT CRITERIA it uses to determine whether a scene is Custom or not (when does it issue a unique identifier/url).  I want to know if we can NOW... or eventually... directly target PG default demo scenes with a certain url format.

 

It looks to me as if the playground uses that Wingnut-hated HTML-swapping crap... just like the BJS main website does... that keeps people from viewing the source code of BJS demo scenes and feature tests.  (grumble grumble grumble)    It also keeps us from having urls that directly target specific demos on the BJS main website. 

 

Oddly, the clouds demo has a direct url...

 

http://www.babylonjs.com/Scenes/Clouds/index.html

 

But does Bones?

http://www.babylonjs.com/Scenes/Bones/index.html

 

Noooo.

 

How about Viper?

http://www.babylonjs.com/Scenes/Viper/index.html

 

Noooo.

 

Why does the clouds demo get its own direct url and allow source code viewing, and other demos don't?  Does the clouds demo know some big wigs, or have relatives at corporate headquarters? 

 

We need urls... to put at the bottom of the tutorials... that load specific PG scenes that apply to THAT tutorial.  And it would be REAL handy to put some urls in the tutorials... that directly target specific feature tests and demos... from the BJS main website, too.  AHEM!    (Wingnut, again, vigorously waves his 'Abolish HTML-Swapping Websites' banner.)  heh.

 

Ok, let's hear it, everyone.  Don't be afraid to show Wingnut how stupid he is being... somehow, somewhere, with this.  I am proud to be one of the worst BJS pilots ever.  I work hard at being incompetent.    Plus, tell us of changes that YOU would like to see... in the playground.  Maybe they can be done, maybe not, but no matter what... tell us (me) your ideas and opinions.  I need to write a tutorial... with everyone's help.  Take your time, no hurry at all.  THANKS!   Party on!

[Kilombo]

Hi wingnut. I agree that PG is a wonderfull tool. I like it and use it a lot. But in some scenes, I can't use it. I don't know how to upload files (like meshes or textures), maybe it's not possible at all. But if it is.... It doesn't show anywhere. And yes.... All that i Know of how to work with PG, i learned by trial and error. And i've got to admit. In the beggining it's quite confusing.

[GameMonetize]

To direct linka sample, you have to use the question mark:

http://www.babylonjs.com/playground/?9

 

The sample are readonly, you cann change them.

 

What I can do to improve the PG:

- Each time you hit run or save, I switch the combo box to "Custom"

- Add a new button that switch the combo to "custom" and set up a minimal scene (probably just a camera)

- Start with th eminimal scene instead of first sample

 

 

For demos, they are all defined by a single file here:

https://github.com/BabylonJS/Samples/tree/master/Scenes/Customs

 

When they are too complex because we need to change things on .css or .html they have their own page (But then the UX is not so smooth)

We also try to keep as many scenes as possible in this mode to allow us to test scenes loading/disposing when all potential features.

[GameMonetize]

I also fixed a problem with links that transfom # to %23

[Wingnut]

Thanks for the comments so far, keep 'em coming.  Its nice to know that the default demos are read-only (phew).  And I should have tried the /?9 ... pathetic of me for not to trying that. 

 

All good information for the playground help file/page/button. 

 

And earlier, in another thread, I made some comments about the pop-up error alert sometimes not being able to be closed, and not being able to have its text highlighted and copied.  That is working better now, too.  Thanks for doing adjustments to that, if they were done.

 

Maybe, instead of a NEW button, it should be a CLEAR button.  *shrug*.

 

On another facet, let's look at a scenario:

 

A user browses to the playground, and pastes-in a complete createSceneTuto function like this...

 

     http://www.babylonjs.com/playground/#ASLFS#1

 

Auto-render fails, so they click the RUN button.  Silent fail.  They have no idea why this scene will not render.  The user does not know that they need to remark-out certain lines... and make it look like this...

 

     http://www.babylonjs.com/playground/#ASLFS

 

And then when they DO figure out what is wrong, they save it.  But since there is already # at the end of the current url, the saved url looks like this...

 

http://www.babylonjs.com/playground/##ASLFS

 

It still works with the two number symbols (##) in the url... no problems... but the user could THINK a problem happened.  *shrug*

 

As a fun sidenote... http://www.babylonjs.com/playground/?#ASLFS also works. 

 

To get back to the point... is there any way we could tell the user that pastes-in a complete createScene function... what they have done wrong... in an error report?  Or can the PG be programmed to somehow ignore the function wrapper and the var scene = new BABYLON.Scene(engine); ... and make the scene render fine... without the user having to remark-out lines?

 

I think it will be very common for users to paste-in entire createScene functions.   It is an easy copy-and-paste for them/us.  It would be excellent... if complete functions... would render fine, (if possible).  But the code behind the playground... would need to be 'smart' and be able to see those unwanted code lines.  The editor COULD automatically remark-out those lines, but I think it would be better if the playground ignored them, and rendered the scene. 

 

Just thoughts.    I hope everyone had a good weekend.  Keep commenting, everybody.  Thanks!

[GameMonetize]

Perhaps I can try to add some checks after compiling the code, like is there a camera? is there at least one mesh?

 

I'm a bit overwhelmed right now but I'll try to find time to add this to PG

[Wingnut]

Well, those are all talked about in basic tutorials.  Almost everyone knows that a scene needs a camera, a mesh, and a light or an emissiveColor.  But users don't know when a playground scene is failing due to being wrapped in a function, or failing due to this line existing...

 

var scene = new BABYLON.Scene(engine);

 

In other words, no camera, no mesh, no lights errors... would be nice.  But I am most concerned with "You must not have your code wrapped in a createScene function" and "You must not create a scene"  (no var scene = new BABYLON.Scene(engine) allowed).

 

But again, I would prefer that the playground IGNORE when the code is wrapped in a createScene{} function,  and also ignore var scene = new BABYLON.Scene(engine);.  PG already ignores return scene;

 

Understand?  I would like this...

 

http://www.babylonjs.com/playground/#ASLFS%231

 

... to render good, in its current condition (if possible).  It currently doesn't.  And, no problems with slow changes. I would like to hear from more users, anyway, before any decisions are made.  Everyone should have a say in this, not just me.  So it needs more time for more users to give their opinions and ideas.    (If that's ok).

[GameMonetize]

This is clearly not so easy to develop. Basically I call eval() on the code you write in the PG. I have no easy way to parse it before (And I prefer spending my time on babylon.js stuff:))

 

Perhaps I can let the user create the scene. Or add some hints to let the developer know that the code will be called from a context where scene and canvas are already created? (Using comments in the blank code ?)

[Wingnut]

Yeah, I understand.  We can just make it a prominent part of the playground tutorial and/or help button.  Make sure they know not to wrap their code in a function, and not to create a scene.  It can easily be taught in the tutorial.  No problem.  Thanks for teaching me about that.  It was worth a shot.    And thanks for the SUPER-fast reply.

[GameMonetize]

Let's do three things:

- Tutorial

- Improve comments on the blank code 

- Check after compiling the code to look for a camera at least

[Wingnut]

Works for me, but I still would like comments and ideas from others.  Relax and have a nice raspberry koolaid, DK.    If you want to concern yourself about something right now, keep an eye on that PG url after saves.  I saw a url earlier today that looked like this:

 

.../playground/#28EUMN%233#28EUMN%234

 

I think that puppy is still 'less than optimal'    But, you know, take some time to enjoy summer... Admiral Deltakosh.  Don't work yourself to death.  Everything is a-ok (I hope). 

[GameMonetize]

Ok puppy fixed

 

I also added some more comments for the "New" entry and a check is realized after compiling code to verify the presence of a camera

[Wingnut]

Tiz workin' goooooood!  I still need to use the reload button sometimes, but that could be my old FF.

 

Shifted-click on the NEW button gives you a sky-targeted half-intensity hemi light, also?  Huh? 

 

(I love asking for the moon and stars) 

 

Oops, the reload button thing just went away.  That's working good now, too.  Do you see some of these post times, people?  DK is adjusting things faster than I can type posts... and THAT'S pretty damned fast! 

 

Thanks DK!  You treat me like a king, and I don't deserve it.

[GameMonetize]

[MathieuDSTP]

Is the Playground code available as open source?

[GameMonetize]

Open source FTW

https://github.com/BabylonJS/Samples/tree/master/Playground

[GrayFox]

Awesome 

Open Source FTW really !!!