Babylon-Scene Web Component

Hi all, I’m a prototyper at Adobe and love using Babylon.js to get a 3D project up and running, it’s really served me well. I’m also author of the book Web Components in Action, so have a huge interest in making complicated things easy with a simple HTML tag.

With those in mind, I made a component. The idea is that instead of manually setting up the engine and everything yourself, you can drop the component on your page with some default settings to get you started.

Recommended usage would be to use <babylon-scene app="path/to/app.js" stage="path/to/stage.js"> where the app is an ES6 module where you’d add content and interactivity/logic after scene creation, while the “stage” is my own concept where lights/camera/scene/engine/etc start with some basic defaults and can be customized however you like.

The project is here: https://github.com/bengfarrell/babylon-scene
Documentation is here: https://bengfarrell.github.io/babylon-scene

I’m not really here to announce, more to get feedback, especially on the docs and how things work overall. I totally don’t mind negative constructive feedback at all! I absolutely hated writing the documentation, so I had been procrastinating for like a month! But…maybe it’s something people (not just me) would enjoy using, so I put in the extra effort.

For the future, I’m definitely making WebXR available, and maybe making “stage” setup available through HTML tags as children in addition to how it is now.

5 Likes

OMG! This is excellent!!

Please let me add @PirateJC as we DEFINITELY need to socialize your component

Do you want to add a reference to your doc in bjs documentation? Also I think this deserve an entry on our homepage

Regarding the component by itself, I love it. It is simple and works with all majors entry points (ES6, cdn). Seriously this is excellent work!

1 Like

Wow, haha - I kinda wasn’t expecting such an enthusiastic response so early! Yeah, I’m game for all the things! I definitely want to keep this up. Like I said I’m sick of starting a scene every time I make a project, so even if nobody else wanted it, I’d be iterating on it anyway. Thanks for the kind words!

1 Like

We initially tried to fill that gap with the babylonViewer but I truly like the way you tackle it!

2 Likes

@bengfarrell - This sounds amazing! Can’t wait to spread the word about this!

Couple of quick ideas off the top of my head:

  1. We put out a weekly video on our Youtube Channel…If you’d be up for it, we’d LOVE to have you record a little video (2-5 mins) of you showing off this new component! Maybe tell the story of why you made it and how it works? The quality of the video can be anything and I could help you pull it together. Like maybe you record with a webcam, and then give me some appropriate B-roll footage to add to your webcam footage? I can handle the editing and posting it and everything like that.

  2. It’d also be amazing to feature this in our next big “Version Update Video.” Again, if there is some footage of you using the component, we could potentially use it there as well.

Idea #1 is my top vote…what do you think?

Thanks,
-PirateJC

1 Like

Happy to! I need to talk to some folks to make sure I can give the full backstory. The inspiration involves using BJS for a prototype that led to something we just announced at Adobe MAX. If not, I’ll just skip that part and be vague. Either way I think I should be able to do something this week.

Given where I work, I can definitely edit a video and have software. I might prefer that just so I know I’m producing useable stuff. Would you prefer otherwise?

2 Likes

AWESOME!!! Wait you’re saying that Adobe has video editing software? LOL kidding. I LOVE Premiere.

If you’re willing to do a video on your own that’s even better! I love it! Thanks so much for being willing to do this, hopefully this will function as a start to getting more folks from the community making videos for the channel! How awesome would that be!?!

Please let me know if there’s anything I can help with!

Thanks!

1 Like

Hello! So, leading up to the weekend last week, I really wanted to get some headset support in there, so did that against the WebVR spec and it works on the Quest now. I need to spend time sitting down with WebXR on the latest Chrome beta to do that too.
Anyway, I just recorded some stuff this past weekend. I know you said 2-5 minutes, but I just did what I did and it ended up being 9. Hopefully its not too long winded for you, but I wanted to capture what I thought would be a good feature roundup that tells how you can easily get started but transition into something more organized. It’s still uploading as I type this, but here’s a link where you can grab the video: Dropbox - babylon-scene.mp4 - Simplify your life

Love it ;D

1 Like

This is really really cool. Good work and great design on your docs.

Thanks much!

Ben this is incredible! I absolutely love the video!!!

I’m going to add the Babylon bumpers to the head and tail of the video and then we’ll get it released on the Youtube channel in the next couple weeks!

1 Like