# Electric guitar and Jewelry Configurators 3D

**URL:** <https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960>\
**Category:** Demos and projects\
**Tags:** lighting, gui, material, camera\
**Created:** [August 22, 2024, 12:12pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960 "2024-08-22T12:12:24Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![creeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/creeo/32/39238_2.png) [@creeo](https://forum.babylonjs.com/u/creeo)\
**Post date:** [August 22, 2024, 12:12pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/1 "2024-08-22T12:12:24Z")

</div>

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

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/4/84865f69315c01ea9a9cbd6d702b9e5eece90f11.jpeg)

* * *

Custom electric guitar:

> **[Your custom electric guitar](https://demo.jets3d.com/solutions/guitar/?config_id=308b68e0ad52cc11df30068f)**
>
> If you need a Real custom guitar build, this configurator gives you unprecidented freedom with that!

* * *

Jewelry set configurator:

> **[Luxury ring](https://demo.jets3d.com/solutions/jewelry/?config_id=c1ffe3099bee14e3b2e314fd)**
>
> Our custom design ring to show off the Dimonds that our engine can do!

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:

> **[Professional glasses for doctors](https://demo.jets3d.com/solutions/glasses/?config_id=2cf2a71bf3f09d01aaecf072)**
>
> Stylysh, ergonomic and top quality glasses with loupes and lights for top healthcare professionals all over the world.

We are quite proud of the materials here 😅

* * *

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 🙂

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

> **[Jets3D: 3D + Ecommerce solution](https://jets3d.com/)**
>
> 3D Configurator integrated into E-Commerce. Complete Solution product and full-cycle development and content production services.

[https://www.linkedin.com/company/jets3d/](https://www.linkedin.com/company/jets3d/)  
[https://www.linkedin.com/in/yuriy-polezhayev/](https://www.linkedin.com/in/yuriy-polezhayev/)

Thank you and have fun! 🤘

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [August 22, 2024, 1:39pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/2 "2024-08-22T13:39:47Z")

</div>

Hello ! Very nice ! I love it 🙂

> [@creeo](#):
>
> Special thanks to @Tricotou helping us on the forum ❤

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

> [@creeo](#):
>
> We would be happy to get feedback

Okay let’s go :

- First of all : I played with the 3 websites, all of them are very neat and clean. Good job 👍
- 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 :

- Big up for the engraving 😁  
 ![Screenshot from 2024-08-22 15-27-17](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/e/ce200743ec8bec6a03832670e4fa149a5ceee81d.png)
- Big up for the leather PBR shader which is sooo smooth 👍  
 ![Screenshot from 2024-08-22 15-37-14](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/9/19a17e1f16328e1eae60fe4f5bf76d0756dfe944.jpeg)

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  
 ![Screenshot from 2024-08-22 15-33-57](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/d/bdbfaf4a6e7f9eff3127c10c94945906ab711452.png)  
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

---

<div class="post-metadata">

**Author:** ![creeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/creeo/32/39238_2.png) [@creeo](https://forum.babylonjs.com/u/creeo)\
**Post date:** [August 22, 2024, 2:33pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/3 "2024-08-22T14:33:26Z")

</div>

Thank you SOOO MUCH for your feedback! ❤ ❤ ❤  
Your feedback is very valuable 🙏  
@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 🙏 . 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 🙂  
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:

> **[Mortarboard](https://demo.jets3d.com/solutions/caps/?config_id=108cc22af8d48be3f7e5c300)**
>
> The mortarboard may have developed from the biretta, a similar-looking hat worn by Roman Catholic clergy. The biretta itself may have been a development of the Roman pileus quadratus, a type of skullcap with superposed square and tump (meaning small...

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/7/77fd5ffaa87dc6f56c5f0951d931295b4b5d5b30.jpeg)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/f/efd7c9a84a1e10300f878e3eb1cba376837a9bd3.jpeg)

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

---

<div class="post-metadata">

**Author:** ![j-te](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/j-te/32/37194_2.png) [@j-te](https://forum.babylonjs.com/u/j-te)\
**Post date:** [August 22, 2024, 3:10pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/4 "2024-08-22T15:10:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 22, 2024, 4:02pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/5 "2024-08-22T16:02:52Z")

</div>

Awesome work !!! cc @thomlucc

---

<div class="post-metadata">

**Author:** ![creeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/creeo/32/39238_2.png) [@creeo](https://forum.babylonjs.com/u/creeo)\
**Post date:** [August 23, 2024, 7:31am UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/6 "2024-08-23T07:31:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [August 23, 2024, 7:42am UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/7 "2024-08-23T07:42:46Z")

</div>

> [@creeo](#):
>
> 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.

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

* * *

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 🤔

---

<div class="post-metadata">

**Author:** ![creeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/creeo/32/39238_2.png) [@creeo](https://forum.babylonjs.com/u/creeo)\
**Post date:** [August 23, 2024, 8:10am UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/8 "2024-08-23T08:10:56Z")

</div>

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 🙂

Thanks for the form test, got your message 🤘

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 23, 2024, 11:36am UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/9 "2024-08-23T11:36:48Z")

</div>

Wow. I luv it 😍 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 😂

> [@creeo](#):
>
> We would be happy to get feedback on the performance from the community

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? 😉 😀 So, as a designer, I’m gonna bounce on the comment from @Tricotou

> [@Tricotou](#):
>
> Here I feel like except for the lights, the rest is pure background color

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 😉 😍

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

---

<div class="post-metadata">

**Author:** ![creeo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/creeo/32/39238_2.png) [@creeo](https://forum.babylonjs.com/u/creeo)\
**Post date:** [August 24, 2024, 9:58pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/10 "2024-08-24T21:58:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [August 25, 2024, 9:07am UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/11 "2024-08-25T09:07:21Z")

</div>

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 😁  
It’s always a lot easier to improve (or ‘shit comment’ 😀 😉) 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 ♥ into a ‘great project’ 😍 🥰. As said, my opinion only (and of course, is also depending on the timeframe and resources available). Again, GJ and have a great sunday 🕶

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [August 25, 2024, 9:47am UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/12 "2024-08-25T09:47:48Z")

</div>

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 🙂  
The square frame glasses rotation seem to be wrong, they are clipping into the chair

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [September 3, 2024, 3:16pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/13 "2024-09-03T15:16:35Z")

</div>

cc @thomlucc in case he missed that great site

---

<div class="post-metadata">

**Author:** ![vlayd16](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vlayd16/32/32660_2.png) [@vlayd16](https://forum.babylonjs.com/u/vlayd16)\
**Post date:** [November 5, 2024, 3:49pm UTC](https://forum.babylonjs.com/t/electric-guitar-and-jewelry-configurators-3d/52960/14 "2024-11-05T15:49:26Z")

</div>

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