Does this project (interactive math textbook) sound do-able with Babylon.js?

Hi all, I hope this kind of question is appropriate here – my apologies if not.

I am just now considering possibly building a math web textbook with interactive 3D animations. I know that I would especially like to build this using Quarto to do most of the web design, and PyScript for a lot of interactivity, especially with data and code. And I’m wondering whether I should try using Babylon to make interactive 3D animations – I’m hoping someone can tell me if this is likely to work, doomed to fail, or just give any other advice at this early stage of planning.

In particular, I worry that I might not be able to get my Babylon.js application built inside of what Quarto produces. Essentially Quarto takes a markdown file(s) and builds a website out of them – it’s great for quickly building a website with technical content. I could put Babylon in the header of the HTML and use the CDN, but I would also be doing the same for MathJax and PyScript. Would that cause a conflict?

If I don’t use a CDN then I’m not completely sure how I would get the Babylon.js project into the page, since Quarto will be in charge of actually building the website. At least as far as I understand it, if I use either NPM or ES6, I will need to have some other software in charge of at least some of the build process, and then it sounds pretty hairy trying to get two different build processes to cooperate. But if this is actually simpler than I’m imagining, I’d be curious to know.

(I guess I should say something about my background with doing stuff like this. I have basic experience with programming in several languages, including JavaScript. But I never took any courses or had any serious work experience with web development, computer organization, computer graphics, and things like that which might make a project like this more reasonable. I’m sure I can figure out Babylon.js itself, but I’m less confident in being able to get it to be compatible with these other tools, because the path to figuring that out seems less clear to me.)

Thanks for any help!

Hey! The beast knows the answer:

I feel old I do not know anything about this stack :slight_smile:

As long as you have control over the JS output, it should be doable but not sure of the complexity.

Lol, there’s a good chance I have at least ten years on you, old timer. :slight_smile:

But yep, I decided to jump in and try it out, and it’s working! The only thing I’m not sure about is that I’ve built an app using npm run build, get the dist, move it over to my website, it works. I actually couldn’t even find any explanation of how to do this, so I just guessed that the above might work … and it does!

But my website will ultimately have maybe 100 pages (one for each section of each chapter of the web book). So now I’m thinking, it would be wasteful if every page had its own bespoke Babylon.js distribution. Surely there must be a way for the entire website to have a single central Babylon.js distribution, and then each app located on each page will just have it’s own script files.

I’m not even really sure how to research that though. Would you happen to know any docs that might explain this?


[Edit: In fact, I know very little about the entire topic of taking the finished product and putting it in a website. I hear all these concepts like build tools, bundlers, loaders, and so on. I know this isn’t particular to Babylon.js, but if you or anyone else has a recommendation about how to learn about these things more generally, I’d be interested. I watched a couple of YouTube videos but still am a little foggy on how they’re different and when to use which.]

@RaananW might be the king of this area :slight_smile:


Oh, fun! :slight_smile:

I totally get the question, but I can’t help with the specific framework(s), as I have never used them. mainly Quarto. However, I am sure it is ready.
I think the main thing you will need to work on is what is the difference between each page, and build your own framework that will be hosted externally. What I mean is - you should eventually build something similar to the playground - code snippets that use a unified API that is ready to present everything.
The playground is doing it using the UMD versions of the framework, thus avoiding an expensive build process and providing all of the API in the global namespace. There is, of course, a more optimized version of this, but the playground is meant to be a one-stop-shop for every babylon scene possible. The optimized version is - using the ES6 version, only compiling what you are using in your 100+ pages. A better version is to take this compiled version and compiling the 100 pages each using this version thus getting an optimized individual version for each page, mostly running a single build process for most of the pages, but adding a slight build process for each page. I am sure Quarto already does exactly that. It seems to be somewhat similar to next.js (if I understand what you wrote before correctly :slight_smile: ).

Small note - I would separate the babylon build from quarto, and provide quarto only what it needs to compile the page - just like you said with providing the sources from the dist folder. But I don’t know the framework that well to tell you how possible this is.

Guys anyone still hesitating about the success of a Quatro + BabylonJS website: did you read the ChatGPT answer? It clearly says how can one achieve it. :partying_face:

It just waits to be tested and proved. :sunglasses:

The problem with the ChatGPT answer was that it suggested using the CDN. I tried that with Three.js and it broke stuff, so I’m pretty sure I want to stick to building it and hosting the files on the server. I could be wrong! Maybe the Babylon.js CDN doesn’t get into the same conflicts.

But also I’ve been building stuff and wanted to use the Grid material. Since I had to get it from the materials library, I’m not sure that would be available through the CDN.

In any case, so far it seems to be working by building a distribution that I host on the server.

Yep, I think this is exactly right! Thanks everyone for the responses – I decided to jump in and see how it goes. So far it seems to be working! I’m still in the process of building at least two apps on a single page, and then I’ll try to build another one on a different page. But at least the first app on a single page seems to be a success! And I think it looks really cool, or at least, it has potential. :slight_smile:

I believe (or maybe hope) that I can just put the Vite project directly into the website source resources. Once built, any particular page can then call specific functions within the build, causing it to fill properly id’ed canvas elements. I still haven’t found any demos or instructions on this kind of thing, so it’s at least a bit of another guess. But it seems to be working so far!


You can find all of the packages here: CDN Babylon.js Packages | Babylon.js Documentation

I’m pretty much a perennial noob, but this sounded interesting, so I read a few docs. Quarto says to use ObservableJS to require arbitrary npm packages, and ObservableJS says it uses jsdelivr to source them and recommends using the ES6 packages. I haven’t tried anything yet, but may

1 Like

I’m pretty much a perennial noob

My twin!