Five Star Bath Solutions Configurator

[shaderbytes]

Hey All

Here is a show case of what I have been building using Babylon for the last while. It is an extensive configurator , not for front facing public user access, rather it is used by the sales team of this company when conducting a sales pitch to potential clients.

This is just part of a much bigger software solution full of galleries and forms and quotations systems.

I made a video just to demo using the app , I will post my development link here so you can play around with it. This video was produced with the app online and as can be seen, it is very responsive and works really well. It is also used in an Electron App. I suggest watching the video before playing around so you know what it is all about.

Tested in all browsers on all platforms , I discovered a few issues with this a week or so ago while working but the dev team here at Babylon were super helpful and fixed all the issues very quickly. Many thanks to all of you who were involved. My client is very happy about that and is showcasing the build to other companies and he reports most are all amazed at the capabilities. So it is a good showcase for Babylon!

I included a “minimal rendering” option for if you are visiting the app using a potato

Here is the demo video :

Five Star Bath Solutions Configurator Demo

Here is the app online :

https://www.shaderbytes.co.za/clients/five_star_bath_solutions/fsbs_configurator_phase_1/

EDIT: new link :
https://fivestarbathsolutionsbuilder.shaderbytes.co.za/

here are a few screenshots from the app running in chrome :

[Deltakosh]

This is impressive!!

Pinging @PirateJC

[PirateJC]

@shaderbytes this is incredible! Any objection to me using this footage for our next release video?

[shaderbytes]

Thanks so much , I have asked the client and he has no objections, so use it as you feel fit

[PirateJC]

Awesome thank you and fantastic work!

[inteja]

Stunning work @shaderbytes!

[inteja]

@shaderbytes the most important question is how did you resolve the toilet paper orientation dilemma? You probably need a configuration option for that.

All kidding aside, I’m still immersed in this. Awesome stuff.

[shaderbytes]

haha thats funny - true that! I see the wikipage has the patent illustration , which I have seen on other places before, which does show it in the over orientation. Maybe it will be fun to add the option in , but i will mention it to the client once all the serious business stuff of the full application is all completely sorted out

Thanks for the kind words.

[inteja]

Did you use a reactive framework for this? My Wappalyzer didn’t detect any Vue, React, Svelte etc … just curious.

[shaderbytes]

no I wrote my own frame work for it but I have done several configurators before this one ( using sketchfab ) and I have been writing code for a very long time in general each time I was just prototyping the code and refactoring now and then, but on this build I took the leap to re-wite everything from scratch , the ultimate refactor, so it is proper production code. Everything is very clean and modular and memory efficient using inheritance and prototyping.

I have several custom solutions like always removing the root object of imported .glb assets. ( this did require a bit of dodgy code to achieve and satifsfy edge case scenarios ) Assets can be grouped or also belong to a special type group named variants. which auto swap and load variants based on visibility filters. All assets can all have visibility and transformation filters applied to them. Everything is lazy loaded , it only loads when requested. I also make sure I dont get duplicate materials in the scene. SO for example all this code exists in one object named BabylonAssetController.js

Here you can have a look at it :

https://www.shaderbytes.co.za/clients/five_star_bath_solutions/web_configurator_app/sbtools/babylon/js/BabylonAssetController.js

anyway this is not the most tricky aspect of this app … the menu system was the most work

[inteja]

Thanks for the comprehensive reply and insight into your process and approach @shaderbytes!

[shaderbytes]

oh by the way , you can press the “i” key if on a desktop and it will show the babylon sandbox inspectors. I highly suggest building something like that into an app like this because it is super helpful in debugging.

just press “i” again to hide it when done.

[inteja]

Thanks.

I built a conditional inspector inclusion (based on dev/prod environment) into my starter template, but I should add a keyboard shortcut to toggle on/off as well.

[shaderbytes]

Nice , I see you have some coding skills yourself I will give your repository a once over and see what I can learn , im still quite newish to cloud repository systems. I still always have to google the shell commands but im getting the hang of it. I have actually done a few contracts for a studio in the UK who used VUE and git and have worked on some open source code projects in it as well. I still have much to learn in this regard so thanks for pointing me to your repository … each time I can inspect others code I can learn more myself.

[inteja]

@shaderbytes

each time I can inspect others code I can learn more myself

Ditto! Thanks for sharing.

[XKylin]

Your Project is Awesome ，and Thank you for your sharing your BabylonAssetController.js.
Inspector.js is useful for BJS.
I found some mistake in your code with the object of “this” in ApplicationConfigurator.js line29 ;

//ApplicationConfigurator.js
...
ApplicationConfiguratorPrototype = {
    initialize:function(){  
...
    $(document).keydown(this.handleInput);//params
...
},
handleInput:function(event) {
      console.error(this);//the this object is not ApplicationConfigurator
        switch (event.which) {
            case 73:
                isDebugShowing = !isDebugShowing;
                if (isDebugShowing) {
                    $("#content").css("z-index", 9000);
                    this.bl.scene.debugLayer.show();
                } else {
                    $("#content").css("z-index", "");
                    this.bl.scene.debugLayer.hide();
                }
        }
    },
...

may be changed to

 //ApplicationConfigurator.js
    ...
    ApplicationConfiguratorPrototype = {
        initialize:function(){  
    ...
       // $(document).keydown(this.handleInput);
       this.handleInputInspector();//change function
    ...
    },
    handleInput:function(event) {
          console.error(this);//
     },
    handleInputInspector:function() {
        // console.error(this);//obj is ApplicationConfigurator 
        var _self = this;
        $(document).keydown(function(event){
            switch (event.which) {
                case 73:
                    _self.isDebugShowing = !_self.isDebugShowing;
                    if (_self.isDebugShowing) {
                        $("#content").css("z-index", 9000);
                        _self.bl.scene.debugLayer.show();
                    } else {
                        $("#content").css("z-index", "");
                        _self.bl.scene.debugLayer.hide();
                    }
            }
        });
    }
    ...

[shaderbytes]

mm thanks I will check it out , I think it just needed this "this"reference, it was working , I must have broken it.

This is obviously an old version posted here, the links to examples are changed , i need to update them … I cant see how to edit the posts here in this forum thread… anyone else know how?

[mawa]

Didn’t realize it was you doing this. This is awesome stuff and exactly the type of project and quality BJS needs to grow (I’m mostly thinking 3D commerce).