Electric guitar and Jewelry Configurators 3D

Hi, Community!
We’d like to show off our work we did with Babylon.js
Special thanks to @Tricotou helping us on the forum :heart:

We combined the Vue.js based configurator software with Babylon.js based scenes and here’s what we achieved so far.


Custom electric guitar:


Jewelry set configurator:

This one has our own custom diamond shader so the reflections are physically correct.


And this is a configurator for Doctor’s glasses with oculars:

We are quite proud of the materials here :sweat_smile:


We would be happy to get feedback on the performance from the community and ready to share the builds if get the honor to be featured on the Website :slight_smile:

Here is some contact info, if anyone’s interested:

https://www.linkedin.com/company/jets3d/
https://www.linkedin.com/in/yuriy-polezhayev/

Thank you and have fun! :metal:

16 Likes

Hello ! Very nice ! I love it :slight_smile:

When I read this I was like “Did I ? :joy:” and then I had a look at the topics we had in common and I went "I yes, that project, I see :smiling_face: "

Okay let’s go :

  • First of all : I played with the 3 websites, all of them are very neat and clean. Good job :+1:
  • Camera animation are very nice. Not too fast, not too smooth. Well calibrated
  • 3D Performances : no problem on my side (Linux + Google Chrome)

Some stuffs which are so cool :

Some stuff which can be improved :

  • After clicking the share button (bottom right) I need to wait like 1.5 seconds before menu appears, while for example the contact (top right) is instant. Feels weird, the first time I almost clicked twice.
  • HDRIs : The lighting is nice, but I would choose some HDRIs with details everywhere. Here I feel like except for the lights, the rest is pure background color (which never happens in real life). For taking a photograph in a studio it’s nice, but for 3D rendering, it always feels like fake when an object is shiny + non textured (plain color)
    Example here with the green of the guitar which looks fake when plain color, while OK when textured

    I’m pretty sure it would render better if we had some more reflexions of some environment instead of pure plain green in this render

++
Tricotou

3 Likes

Thank you SOOO MUCH for your feedback! :heart: :heart: :heart:
Your feedback is very valuable :pray:
@Tricotou

  1. You’re right! We need to have a spinner of some kind to indicate the Client-server exchange, though 1,5 seconds is a great result! In my location it’s up to 8 sec now.
  2. HDRIs : Also true, the guitar is flat at this angle, we’ll update the assets :pray: . As to the reflections — we’re still figuring out the ballance between quality and performance. This thing is also very well adapted to the Mobile

BTW, if you noticed, the checkout and share dialogs contain a snapshot of the 3D. The issue you were helping us with was about this snapshot and we didn’t defeat it in the end :slight_smile:
We use dedicated cameras for 2 angles of possible screenshots and for those camera we had to disable the rendering of custom images. It’s here:


We will get back to this issue later and share the solution with you if we find it.
And again: Huge thanks!!!

Amazing work! If you could open source the glass and diamond shaders that would be amazing. Completely understand if you can’t but what BJS (and other engines) lack is a well-polished library of assets to get people started

1 Like

Awesome work !!! cc @thomlucc

1 Like

Thank you, @j-te :pray:
We are going to open the sources for the diamonds, but not now, unfortunately, it’s currently under an agreement :frowning:
We will share a little later, the community must grow and develop!

2 Likes

I use to be unhappy when a (light) client-server exchange is over 30ms :joy:


By the way, I think it’s not necessary to do any server exchange for opening the share window, even considering that it’s containing a screenshot, it could be 100% client side …

And then eventually you could do the rest (with spinner and so on) only when clicking a specific share button (Telegram, etc). I guess you are sending some kind of JSON based config to the server, server giving back a config_id, this could (should) be instant even across the world :thinking:

Yeah, the current flow as a “compromise”, as you may notice. The “saveConfiguration” flow is triggered as soon as you open Cart or Share dialogue. We thought that for a demo it’ll do and we’ll push more improvements over time :slight_smile:

Thanks for the form test, got your message :metal:

1 Like

Wow. I luv it :heart_eyes: I luv it when people use BJS not just for gaming but also to enhance the CX for commercial projects. And this one, I can clearly feel the love in creating these objects and FX. The UI is also slick, nice and appropriate. The price of the guitar with options though is not matching my budget :joy:

Performance? yes… nothing to report here. Checked it on my legacy rig I use for performance check (with just a 1gb mid-range gpu from a decade ago)… and honestly, I get a very reasonable 25 to 30fps. Far enough for this kind of thingy so I’d say you’re all good there.

Ok, cheering only is not very productive, is it? :wink: :grinning: So, as a designer, I’m gonna bounce on the comment from @Tricotou

I will have to agree with this. Yes the (initial) materials are nice (although, from a pure PBR standpoint - don’t get me wrong, they are quite good - but…could be improved (in my opinion only). The HDRI thingy would be just a ‘nice to have’ in my opinion (again). Essentially, both in the guitar and jewellery examples, it’s how the direct light reflects just ‘flat’ on the surface and the lack of changes of colors under light (and the lack of surface/micro-surface on wood or brushed metallic parts) that kind of gives me the feeling of something that is not just totally ‘achieved’. Again, simple designer’s comment here. Don’t count on me to do the code and everything else that seems to work just beautifully :wink: :heart_eyes:

Great job. I’m eager to see the ‘final’ version. Meanwhile, have a great day :sunglasses:

2 Likes

@mawa Thank yoou!
Showing this to the guys, the’ll be happy to learn some hacks from the more experienced community members :heart:

Just to make this clear for the people who clearly did put a LOT of love an efforts into this.
I wouldn’t be discussing the details if the project was not already of such a high quality :grin:
It’s always a lot easier to improve (or ‘shit comment’ :grinning: :wink:) than to ‘create’. Though, I have the feeling that your project would deserve to include just this ‘little’ additional touch. To turn it from a very good project :hearts: into a ‘great project’ :heart_eyes: :smiling_face_with_three_hearts:. As said, my opinion only (and of course, is also depending on the timeframe and resources available). Again, GJ and have a great sunday :sunglasses:

Tried loading the guitar demo on my iPad, preloader runs once, then starts again and the site crashes. Chrome browser, IOS 16.6 iPad 7th gen

I tested it twice, crashed exactly the same. can’t debug the reason as I’m out at a coffee shop, anyway hope you find out why

( other demos loaded fine ) … great diamond shader :slight_smile:
The square frame glasses rotation seem to be wrong, they are clipping into the chair

cc @thomlucc in case he missed that great site

Hi @creeo, thank you for awesome demos, any chance to share diamond shader?
Thank you.