Hi everyone, I’m a unreal engine gamedev planning to make a creative portfolio website. I studied the available platforms and BJS seems like a good fit for me. I’d like to ask the community about a few things before plunging into webgl and webdev for 6-12 months
I hesitated between three.js, playcanvas and babylonjs. What made me decide was the nice features of BJS, the active community and the thorough documentation.
I’d like to list some of the features of the website I’ll be making in order to give you some context of what I want to achieve with BJS :
the website will be using radial menus and animations all over. Different ways of circular designs will be used.
masking is an important aspect of my design. For example you can rotate a slice of circle and it will reveal an image behind it. I also need to animate shapes, like widening an arc mask in order to show the full image.
a 3D animation with audio will be made in blender and played in the website
there will be a stylized 3D planet with country selection. When a country is selected an image gallery will be shown, also with a circular interaction interface.
there will be audio and video players with custom circular controls!
page transitions, loaders…
if I do a good job I’d like to submit it to awwwards
In summary, I’ll be using a lot of radial layouts, circles, masks, audio player, video player, photo gallery and dynamic asset loading.
I’m used to programming and doing graphic design, and I learned webdev 6 years ago before JS ES6 but I definitely need a refresher on all this stuff.
So, here are my questions :
Is BJS a good choice for my project?
Any recommendations for a good webdev refresher course in 2024? Something dense and straight forward since I have programming experience.
Should I learn and use typescript to code in BJS?
Does masking only works with stencil buffers? From what I’ve read, masking in 3D needs some understanding of render order. Or is there a layer / grouping system that I can mask altogether?
What’s the advantage of exporting babylon files from blender instead of glb?
What a good way to create and animate shapes like the masking semi-circle? Parametric shapes? Can I animate vertices?
Playcanvas provides compression of 3D meshes and images. Can I do the same? I guess I have to do it by using external tools?
And that’s it for now Thank you for reading all the way!
Perhaps I’m a bit biased, but I think you made the right choice and for the right reasons
Based on the list of elements you’re looking to include in your website, I threw down a few notes on things you might need to consider or how you might think about approaching them:
The Babylon.js GUI editor is probably your fastest way to define all of the basic elements for your site’s UI if you’re planning on making the entire site experience a Scene. This is cool but has the downside of making your site effectively invisible to search engines and screen readers. Regardless, the BJS GUI editor is worth using as a way of quickly defining your GUI layout, allowing you to manage and version it as a JSON file
The Animation Curve Editor is what I would use to define and capture the specific animations as data, which can then be applied to arbitrary elements in a scene
Make sure you export your blender model as GLB or GLTF for best compatibility chances. Also make sure to check the appropriate export options (see link)
Your image gallery could be done using the 3D GUI system (which would work in conjunction with a 2D GUI as well potentially), as IIRC there are some built-in controls and behaviors that might get you what you want
Keep in mind that audio is done via browser audio API’s and is sometimes known to be a bit… finicky, so make sure you’re properly managing the audio resources in code (an Audio engine re-write is apparently in the works, if I’m understanding the teams’ plans correctly).
For page transitions and the like, if you’re navigating to different HTML pages, you’ll probably need to use CSS animations and/or some client scripting to transition since the engine will be reset when the page is cleared and reloaded
My book, “Going the Distance with Babylon.js” is aimed at folks like yourself, and while you might find some parts of it a bit remedial, I think it could be very useful to you in implementing what looks to be an incredibly neat portfolio experience!
HTH
ed: my response was already getting long enough without addressing your individual questions but a couple quick hits are
Yes BJS is a good choice
See above for recco on book
TS is optional. Since you’re already familiar with JS, I’d start with that until/unless you start feeling like you need your programming language to impose a bit more structure on your code
There is layering and render grouping
I would use GLTF/GLB over babylon format
see above note on ACE
there are mesh optimizers available in BJS, but they’re runtime only IIRC
Haha this past few weeks I have been playing with unreal engine. I recently got vscode working with it after some headaches, i prefer vscode because it’s more lightweight.
Do you mind me asking how long have you been an unreal gamedev for?
Take my answer with a grain of salt, I’m a bit biased
1. Is BJS a good choice for my project? As far as I can tell, yes For your UI, do you plan to use HTML / CSS?
3. Should I learn and use typescript to code in BJS? I would totally say yesm just for your own sanity 4. Does masking only works with stencil buffers? From what I’ve read, masking in 3D needs some understanding of render order. Or is there a layer / grouping system that I can mask altogether? Yes we have several ways for that. Stencil of course, Scissor testing but we also support Rendering Group to create layers. You can also isolate renders by scenes. 5. What’s the advantage of exporting babylon files from blender instead of glb? GLTF does not yet support all the fancy features like collisions, particles, etc… BUT it is the de facto standard so you have to pick a side 6. What a good way to create and animate shapes like the masking semi-circle? Parametric shapes? Can I animate vertices? You can use morph (blend targets) or bones. 7. Playcanvas provides compression of 3D meshes and images. Can I do the same? I guess I have to do it by using external tools? Correct, We do support ktx and draco compression (only in glTF file format)
Thank you very much @jelster ! I checked your book on Amazon it’s very interesting. Is there a preview of the content somewhere ? I’d like to check it out before buying.
GUI and ACE editors are part of the reason I chose BJS. I’m reading the full doc right now and it’s very informative. I still need to find where the layer and render grouping is yet though.
As for audio thanks for the heads up, it’s an important part of the website (I’ll showcase my songs) so hopefully it won’t be too finicky.
Thanks @Deltakosh ! I like biased it’s fine ! It’s also a good sign to see people really liking a tool.
I still don’t know how I’ll distribute the GUI tools, I’m interested in the ones provided by BJS but I’ll also need some vanilla HTML/CSS for the pre-loader and another simpler version of the website. SEO isn’t a priority but ncie to have if I can go the extra mile after I finish this project.
Can you please elaborate a bit on the advantages of using TS ? I know it’s a typed version of JS but I don’t understand yet the benefits of it, especially with using BJS.
Great ! I still need to find this topic in the documentation, I’m reading everything right now and it will take a bit of time. I’m also wondering how I’ll manage the scenes, that will be “pages” in my website. I don’t want to load a new page and reset everything since I want the whole thing to be seamless. Is there a concept of sub-scene or modularity in BJS ? Can we transition between scenes in the same environment ?
Ok for GLTF, I don’t think I’ll need anything fancy or advanced…yet.
Ok thanks for that, I’ll have to plan that when building the assets.
Ok so there’s draco compression. I have yet to read about it in the docs. As for the images, there’s this avif format I’ll check it out.
Haha you’re going the other direction @waverider404 that’s funny. I only use Blueprints so I can’t say much about C++, but I’ve been using UE for 4 years now. Tried making a rhythm game and also work in architecture and VR for my freelance work.
If you have any questions please throw them my way I’ll be glad to help.
Yeah I’ve read this earlier, if BJS contributors like TS, all the more reason to learn it. I also use Obsidian and they use TS too, so it might prove useful for other stuff.
Appreciate your interest, thanks. I think Amazon offers a preview look inside or whatnot, but the source code for the game built over the course of the book is up on GH in the Space-Truckers Repository .
If you or your employer have a subscription to Packt books online, the book is also available through them (they’re the publisher)
