Thought: Playground Branch-App - Tour This Series of PG's

Hi gang. Does the title of this post… say it all?

Recently, I have been fascinated by the “feature” of being able to render multiple scenes to same canvas, and how viewports might get involved. AND, I’m still thinking about GUI ViewportControl… but… not important… yet.

Multiple engines to same canvas, too? One engine to multiple canvai? I’m SO confused. :slight_smile:

IF we all “dreamed-up” a “branch-app” of the playground… that COULD be a nice “tour-around in THIS series of playgrounds”… what might that interface look-like? Got opinions?

Could we display thumbnail canvases (canvai?) of previous 5 playgrounds and next 5 playgrounds (if available in the PG database)?

Could we keep the GUI… workable for mobile devices… who use two-thumb touch-screening nav? (rather big buttons)

It is unlikely that we could allow “swipe”, because the thumb-nailed scenes need time to load-in and render. Swipe is too fast. :slight_smile:

What might “jump forward/backward 10 scenes” GUI controls… look-like? (Try to keep two-thumbing on mobile touch-screen… easy)

I THINK the GUI buttons on this playground… are big enough to do 2-thumb-nav on mobiles… so the GUI from that pg… might be used as a starter. I haven’t tested GUI 2d on mobile devices much at all. A basic 4-borders-of-buttons PG - click here.

BUT… hmm… perhaps HTML controls for the “touring app”? Make the app more webpage than BJS scene? Maybe that’s the way to go. An 11-canvas webpage… one big canvas, 10 thumbnail-sized? I dunno. Thinkin’. :slight_smile:

What might we want… IF we COULD plan/install a “tour this playground series” sub-app for our current PG app?

Anyone have thoughts? Thx.

2 Likes

The holographic buttons example on the playground always got me thinking about something like that, so here is a holographic playground selector :slightly_smiling_face::

https://playground.babylonjs.com/#HB4C01#258

6 Likes

That looks/works GREAT, G! I (and others) really like it, and the idea.

Is everything still clickable on cellphone? Big enough buttons? Does it need stylus pen? Know? (maybe others will answer/test, too). Thx for the demo/idea!

A little reminder to thinkers/designers… we won’t have any thumbnail pics available. I’d like to browse-around in a single series of playgrounds… you know… especially handy when the fragment ID’s get into the #400+. I think we even have some PG series… with frags #1000+. (over 1000 versions/re-saves of THAT playground-series).

Anyone ever thought about a playground database “cleaner”? Dunno if possible. Probably not.

I know we have some old physics-demo playgrounds still around… ones that use setPhysicsState(). That function died in a snowblower accident about 3 years ago… but we remember it well, via our playground database. :slight_smile: Rest-itution in peace, setPhysicsState()

1 Like

Thanks Wingnut; it’s a great challenge to get something like a series browser to work. It took ages to get this to work:

https://playground.babylonjs.com/frame.html#YB9NQR#1

It’s similar to the fist link (which does work on mobile with fingers, to answer your question), except it loads the series like you actually meant. You can click on the button and enter a fragment from which to start loading (it loads the previous ones from that point) (e.g. TAZ2CB#60). It will try to load 60 fragments. The thumbnail pictures are made from live scenes.

It creates the thumbnail picture after 2 rendered frames, but for physics playground it may be interesting to do it after a number of physics steps or seconds.

3 Likes

You are SUCH a God, G! Holy crap! That is amazing! (Wingy dances around like an idiot).

Excellent!

1 Like

I’d like to advance this idea, if anyone wants to help or re-design.

Let’s look at some things. First, browse here https://playground.babylonjs.com/frame.html#YB9NQR

Choose the button.

Enter #15AFCG#6 into the form.

Notice it shows 7 playgrounds… 0-6, but it does not tell us that the HIGHEST frag-ident version of that playground… is #9. Try the entry form again… but this time… enter #15AFCG#9

Now we get all 10 playgrounds in that series. I would like to ONLY enter the series number into the form… ie. #15AFCG and then the “touring app” displays all 10 (or more) playgrounds of THAT series.

It would be nice if the frag-id (version) numbers were somehow displayed near each icon, too. (drool)

This is certainly no @Gijs problem or fault. He simply (and kindly) showed us that such an app IS POSSIBLE… but he certainly didn’t intend to create the Taj Mahal of PG touring apps… during his miraculous pre-alpha proof-of-concept, here.

He was kind enough and smart enough to do the POC… but now… we could use some more ideas and advancements, if someone/many/BjsTeam would like to try. THANKS!

Yes, I know… big challenge, and a nightmare for some of the PG series that have versions more than 2000. Phew… how to display that many choose-able icons on-screen, or even do a QUERY of a 2000+ playground series… phew… could be painful.

Perhaps… we need a standalone webpage… with special permissions to access the PG database… and then clicks on THAT webpage’s results… can launch actual playgrounds. shrug. An off-playground touring webpage, maybe. A webby access-point… to our PG database… something with some power and possibly… some “search for things WITHIN this series” power, huh? Sweet! (drool).

1 Like

found a bug I think.

so if the scene has engine.enterFullscreen() seems to make the navigation scene enter it and freak out kinda.

To help things along, I’ve added thumbnail caching to the playground; it will now connect to my website to see if the thumbnail already exists, otherwise it will render the scene itself & send the thumbnail to the server:

https://playground.babylonjs.com/full.html#YB9NQR#5

The thumbnails will be available from 512 to 32 pixels from this url:

https://misc.croncle.com/babylonjs/thumbnails/[resolution]/[series]-[version].png

E.g., for https://playground.babylonjs.com/#15AFCG#3 the thumbnail url would be:

https://misc.croncle.com/babylonjs/thumbnails/512/15AFCG-3.png

To see for which versions of a series there are thumbnails available, you can use:

https://misc.croncle.com/babylonjs/thumbnails/api/get_versions.php?series=15AFCG

It will return a numerical JSON array of versions.

@Pryme8 I’ve disabled enterFullscreen now, just like the inspector, so they should work OK now.

2 Likes