Golden Paths for Babylon.js!

Could be something like this Github repo GitHub - BabylonJS/MeshesLibrary: Use this repo as a place to share your scenes and meshes actually. But it may have some storage capacity limits?

It is a good idea! I need to check what would be my personal liability in that case (as I own the forum)

I think golden path end-to-end tutorials are great for “filling the gap” as the blog post states.

In the beginning I too was tripped up about npm/nodejs and the different kinds of bundles, whether it’s the es6 version of packages or the non-es6, and it turns out neither of them are really tree shakable, so do I create my own build, or do I use the cdn and just use script tags. It’s overwhelming choice of the ‘right way’ to set up.

Ultimately I’m interested in multiplayer immersive VR, so I started my journey with a framework based on Phoenix/Elixir (for realitime websocket communications) for my backend and then figured out how to bring babylonjs into it’s esbuild system. Not sure this is what most people want to do. Ultimately one has to be familiar enough with quite a bit of web development, npm, node, and ecosystem build tools to even attempt this. Which, I STILL cannot claim to be an expert on. But ANY reference from end-to-end examples I feel are helpful for gaining insight, because the playground doesn’t help you with that kind of larger set up.

The other thing I think is lacking is, “where does the game go?” In the playground I see lots of impressive demos, but they are visualizations or some small interactivity and I’ve never seen a full game. But now I realize that Babylon.js helps you draw stuff on the screen, helps you listen for user events and detect when things intersect etc. But you still have to figure out how to build your game logic. Where do you put state management? What does that code organization look like? How to you manage the transition screens for when a game is won etc? That kind of thing is probably beyond the scope of babylon.js, where you just need plain ol’ javascript and maybe some kind of state-machine. But even then there are a lot of ways to do this. Some opinions or guidance on making full games is definitely welcome.

I would really like more guides on character animation. There is a huge gap in this area: We have pretty decent guides on animating primitives like moving and scaling a box for example. And we have guides on bringing in and importing files that already have animation on them. And a guide on a pipeline for importing animations from mixamo to blender to babylonjs. There is almost nothing in between for creating your own character animation, or setting up and using bones and meshes programmatically from scratch. Even if it was a crawling worm or spider. I would LOVE @PirateJC to do a video series deep dive on all things animation. (I LOVE his videos!). But even things like a discussion on whether we should use gltf or .babylonjs, what are the pros and cons of using each. Or managing file loading. Can we actually have several files that contains animations only, and can be dynamically loaded as needed, or do they (the animations) all have to be pre-baked into a single file and then we’re limited to only playing the animations from that one file. All the guides and videos I have seen have only demonstrated the later.

5 Likes

If you are looking for character animation stuff you might wanna look up https://www.pixcap.com/

Its an entire animation editor built with BJS.

shout out to @mrlooi <3

4 Likes

You are too kind!
I’ve added this idea to my list of future tutorials and videos :wink:

2 Likes

Hi everyone,

I don’t know if i’m not a little bit off topic and if i’m dreaming a little bit too much but i think babylonJS should explore the CAD and modeling world.

In the beginning :

  • Write dynamically lines with input dimensions, close them to make a surface, expand the surface to make a volume, split a surface in to two with a line, expand only one side…

  • Direct application : build dynamically a house with a roof as explained in the doc Developing Build a House from Plans | Babylon.js Documentation . You draw the path for the ground, you expand the walls, you cut the doors and the windows, you build the ceiling, you draw the lines which represents the roof parts and you expand dynamically the roof.

After :

  • being able to extrude directly from a 2d mesh. I think it’s now too difficult to build the shape of the polygon from a known complex profile before extruding it along a path.

Thanks for all,

Boris

1 Like

Thanks for the mention!!

We’re releasing publicly (for the first time) in 2 weeks!
Can’t wait to announce it officially in BJS forums, you guys have been amazing - the best open source community I’ve been a part of

5 Likes

Wow you guys are awesome.

I see your blog post mentions configurators as common and with this golden path wants to explore other use cases but I just want to say I think configurators are probably the most common because that is where earning potential comes around more often.

Anyway, at least I did build a 2.5D game and watch experience this year as well , so that is kinda in line with the “flash games” thing mentioned , with the twist of 3D. Its a great sample Except of course it is Nintendo IP and was not targeting any mobile platforms.

Ive never heard of Template Repository Workflow or Ionic … need to up my skills :wink:

I must give thought to some game idea again similar to this and then also try get it working on mobile as well using info from your golden path series :wink:

I would like to see this :)!

1 Like

@Vinc3r
Pretty sure repos are limited to 20k pages , each page no larger than 25mb. Maybe just automate new repo creation per month/quarter so you never hit limits, itd be a nice builtin search index on asset creation date. Btw u can host on cloudflare pages (which uses github) with private repos for free, basically unlimited data global cdn for free. Its like a commercial gh pages. Cost model is based on collaboration and team seats, but i think 1 person/robot can handle uploading some files no problem.

@Deltakosh
you could use a github comment thing to defer liability to gh since they already have a takedown policy. People would have to oauth with github, but thats fair imo
.GitHub - utterance/utterances: A lightweight comments widget built on GitHub issues

I definitely not want to be part of something like that :slight_smile: (ANd if you look at google with Poly or Microsoft with Remix3D, it is a complex landscape to deal with).

But totally happy to reference, point people to a community initiative :slight_smile:

3 Likes

This is an awesome conversation; thanks to all for jumping in! I’ll leave the poll open for a while longer just for fun, but we definitely seem to have a consensus developing on “viewer/configurator” as the #1 priority, so I think we should do that one next!

I’ll be largely offline and technically on vacation for the next few weeks, but I want to go ahead and start thinking about what this might look like. The idea of this golden path is to add a 3D viewer/configurator to an existing website, essentially roleplaying a contractor who’s been hired to add 3D to an ecommerce site that didn’t have it before. With that in mind, the #1 question that pops into my mind is, “What kind of existing website should it be?” In other words, what kind of site should the golden path explicitly demonstrate how to integrate into?

  • WordPress
  • Ruby on Rails
  • Express.js
  • Django
  • Something else from the comments below

0 voters

I know we’ll never be able to show every kind of site integration in a golden path, but ideally I do want to pick the one that will be most helpful to the most people. If you have an opinion (and especially if you have experience that lets you know what kinds of technologies underpin common ecommerce sites), please let me know!

2 Likes

Just some ideas I’ve had (but not yet implemented) for basic prototype configurators, that might be feasible candidates for Golden Path projects (in order of complexity):

  • ProtoDesk - Desk/Table Configurator (table top length, width, depth, material, leg style, height & material)
  • ProtoTank - Rainwater Tank Configurator (tank diameter, height, material, location, outlet and overflow locations)
  • ProtoDome - Geodesic Dome Configurator
  • ProtoPipe - Pipe Fitting Furniture Configurator

I’d be willing to tackle one of these or something like it and write up as a Golden Path, but the UI I’d likely do in Svelte with Vite/Rollup so am not sure if this would be suitable for Golden Path as I imagine we wouldn’t want to confuse people with too much diversity in tech stacks?

1 Like

Would love to see more about the Walking Simulator idea @syntheticmagus …this is something I wouldn’t mind adding to my game!

Also as far as the 3D viewer would this be used like a Blender or Maya in regards to exporting already made models and converting them to BJS? Trying to figure it out.

2 Likes

+1 for a ProtoDesk/Table/Shelf generator (for procedural generation, UV mapping, and why not decoration generation (like books in a shelf, computer on a desk, etc, for final shot)

1 Like

I love the idea of these 2 points :

  • Bringing code from the Playground into the Template Repository Workflow (TRW).
  • Exporting Babylon experiences from the TRW to Ionic (and thereby Web, WPA, Android, and iOS) via NPM.

A full workflow from one code base to export as PWA / mobile app (capacitor/ionic/…) / desktop app (electron, …) would be huge !! ^^ with responsive in mind and having the camera adapt regarding the device used.

David Rousset did an amazing blog post about the creation of a PWA on a fruit ninja like game and he adapted the scene based on the VR/ Web / mobile:

I was hyped when I found this tuto, but here is the thing - too much info for a newbie in development like me ^^. (I’m a vfx/3d generalist professionnaly reconverted in Quality assurance).

I did some proof of concept in the playground for fun but how to glue all these poc together to create a game ? what about the splash screen? the loading screen ? the game menu ? how handle the scene’s elements (resume/pause animations/physics/ scores etc ) and reuse them on different levels (and create versions of the elements for event like halloween or christmas) ?

I would love to have some framework agnostic (without react/vue/angular/svelte/…) boilerplate projet and a video serie explaining it’s creation and structure (with in each a link to BabylonJS^^).

Like “ok we did this in MVC (ECS, MVVM…), let’s start with what the user will see. First the splash screen…,- … here is how we load it. You want to do an animation in pure css ? an animated gif ? an MP4? a simple fade in fade out of a png ?, choose what you want (may be some basic example), but here is how we can do it with Babylon GUI and our new sexy editor”.

After we see another tutorial taking back the previous state of the app and we continue with another playground where we have a simple jump game with a cube and plateforms and we incorporate it as the level 1 of our game, same with a runner for level 2 etc :star_struck:

Then in an advance part (a little bit like @Deltakosh’s pedagogic way with the tech artist’s journey serie on youtube) we might see the same projet but with optimisations and team work in mind. Like “Ok we saw the way to create this and this module/section of our app in vanilla js and we used the local storage for the score, let’s see how to use a store with Svelte to achieve the same result” etc …

I know this is a LOT (well a full course actually :crazy_face:).

I just wanted to share my ideas ^^

Have a nice day everyone

1 Like

Fortunately, you’re in luck! I’m currently in the process of writing a book that aims to do just that! Complementary to both the “Diving Deeper” documentation and to the forthcoming Golden Paths, the book is aimed at folks like yourself who may know some of the concepts but not how to put them together.

I’ll post the official Amazon listing once it’s live hopefully this month - I expect it to be available towards the end of April 2022. It’s still a work in progress naturally, and I’ve been working with and am continuing to work closely with the great folks on the BJS team to make sure we have you covered on things like this.

If you don’t want to wait for either book or Golden Path, or if you’d like to contribute to either, I’m sure your viewpoint would be valuable in aligning content to context!

4 Likes

I’d be quite interested in this as its what the app I’m working on does (I think), and I’ve just had to figure all this stuff out. An early version is available here; http://mc.mindlessbrain.com/

1 Like

IMHO ECS, while it provides mane benefits, is not very easy to understand and code - it’s too low level for the human brain to grasp.

However, coming from frontend dev space, I was able to successfully create a declarative architecture using unidirectional data flow:

…Redux → React → Babylon → Redux…

The benefits of using unidirectional data flow with React’s declarative style, is that you get all the advantages of ECS concepts (clean data management, performance, etc.) while the code is easy to understand and intuitive to developers.

Will demo this soon on a free app I was working on that allows newbies to create complex 3D scenes.

2 Likes