# A gaming mouse builder

**URL:** <https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729>\
**Category:** Demos and projects\
**Tags:** react\
**Created:** [June 16, 2021, 3:44pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729 "2021-06-16T15:44:08Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [June 16, 2021, 3:44pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/1 "2021-06-16T15:44:08Z")

</div>

I would like to share here a discussion that @Mario_Sanchez started on github:

> I just want to share with you all the project I’ve working for the lasts months using Babylon and react-babylon which is now live 😄 I think it’s a good example of product previewing and how you can use this wonderful libraries to do something that can be business oriented

[https://artemacorp.com/builder](https://artemacorp.com/builder)

---

<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:** [June 16, 2021, 5:36pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/2 "2021-06-16T17:36:15Z")

</div>

nice work on the configurator 😉 works well , easy UI.

Some personal observations :

3D scene :

Some SSAO or even baked AO would really make the model look better. Baked AO is less process intensive but not flexible for interchanging parts obviously. I ued SSAO in my last configurator , version 2 as version 1 does not look to good.

From a site perspective :

the cookies accept aspect seemed very bulky and green haha  
I would think the theme selector ( day/night ) should be site wide , not only the 3D scene background

Anyway great project! thanks for sharing

---

<div class="post-metadata">

**Author:** ![Mario\_Sanchez](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mario_sanchez/32/13430_2.png) [@Mario\_Sanchez](https://forum.babylonjs.com/u/Mario_Sanchez)\
**Post date:** [June 16, 2021, 9:26pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/3 "2021-06-16T21:26:13Z")

</div>

Ey @brianzinn thanks for share! I wasn’t aware that this category of the babylon forums even exist.

@shaderbytes thanks for the feedback! Really interested in that part of SSAO and baked AO that you are talking about. Do you mean applying an ambient oclussion effect in the 3D model (using blender o so) and exporting a GLTF files witht this effect already aplied? Alredy not played so much with SSAO pipelines yet, so I will take a look, any example or resource is very welcome 😃

Already a lot of concepts are not familiar enought for me, learnt a lot this last year about 3D and rendering, but still need to go deep in some aspects 🙂

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [June 16, 2021, 9:33pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/4 "2021-06-16T21:33:05Z")

</div>

This is really nice and polished. UI is clean too.

---

<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:** [June 17, 2021, 12:40am UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/5 "2021-06-17T00:40:58Z")

</div>

> [@Mario\_Sanchez](#):
>
> any example or resource is very welcome

> **[Using the SSAO Rendering Pipeline | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/SSAORenderPipeline)**
>
> Learn how to the SSAO Rendering Pipeline in Babylon.js.

Weird this does not mention version 2 of SSAO and I dont find it in the docs…? Maybe some devs can chime in on why that is? @Deltakosh

Version 2 is the only acceptable version. Version 1 looks like a static overlay that doesnt update when moving the camera , like a dirty camera lens effect. You can click the example in the docs and see what im talking about , the AO is completely disconnected from the scene.

Anyway , its all the same code , just a different name contructor ( has a ‘2’ after SSAO ) :

`new BABYLON.SSAO2RenderingPipeline`

You can include a conditional to check for support :

`if (BABYLON.SSAO2RenderingPipeline.IsSupported) { ... }`

Also not in the docs is I found issues with transparency and via some help had to include this line :

`this.scene.enableGeometryBufferRenderer().renderTransparentMeshes = false;`

For baked AO yes , you can create a second UV set and bake the AO in blender. This is then applied to the material ( needs a special setup to export GLTF/GLB with AO from blender ) Search the forums , I posted about it and found the solution and shared.

Anyway all info here might be outdated as I did this all last year. But perhaps it is all still valid info

hth

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [June 17, 2021, 4:07am UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/6 "2021-06-17T04:07:57Z")

</div>

ssao2 is supported by `react-babylonjs` – interesting to read about the changes you added as well. anyway, you can add it with just a declarative:

```auto
<ssao2RenderingPipeline />

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/2/f2933af2c024c60913a6395a2d93bb5abf76266f.png)

---

<div class="post-metadata">

**Author:** ![Mario\_Sanchez](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mario_sanchez/32/13430_2.png) [@Mario\_Sanchez](https://forum.babylonjs.com/u/Mario_Sanchez)\
**Post date:** [June 17, 2021, 7:17am UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/7 "2021-06-17T07:17:06Z")

</div>

@msDestiny14 thanks!! 😃

@shaderbytes h thanks! I will take a look an try how it can help 🙂 I will search in the forums for the AO solution you posted, thanks for the hint!

@brianzinn thanks! I didn’t remember this, but also wasn’t sure how it could help me neither, will take a look!

---

<div class="post-metadata">

**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\
**Post date:** [June 17, 2021, 9:33pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/8 "2021-06-17T21:33:05Z")

</div>

This looks amazing! Love the animations, everything feels super smooth.

Unfortunately the framerate did struggle a bit on my laptop (Thinkpad X1), but weirdly enough it ran great on my phone (Samsung S10+) 😄

---

<div class="post-metadata">

**Author:** ![Mario\_Sanchez](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mario_sanchez/32/13430_2.png) [@Mario\_Sanchez](https://forum.babylonjs.com/u/Mario_Sanchez)\
**Post date:** [June 18, 2021, 6:41pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/9 "2021-06-18T18:41:37Z")

</div>

@DarraghBurke thanks for yout comment!

Yes is something I also have experimented in my Dell XPS. It runs in a 20-30 FPS average, but in my phone (anything fancy, Xiaomi P9) it runs just smooth. Of course in my desktop PC wich is a gaming device it runs just perfect.

It something I have to dig in 🤔 I though it’s a GPU issue, but other babylon demos runs just well so idk.

---

<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:** [June 18, 2021, 11:09pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/10 "2021-06-18T23:09:11Z")

</div>

@PirateJC and @thomlucc will love it 🙂

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [June 18, 2021, 11:14pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/11 "2021-06-18T23:14:50Z")

</div>

Nice work folks! This is awesome!

Any objection to me adding it to the community page?

---

<div class="post-metadata">

**Author:** ![Mario\_Sanchez](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mario_sanchez/32/13430_2.png) [@Mario\_Sanchez](https://forum.babylonjs.com/u/Mario_Sanchez)\
**Post date:** [June 21, 2021, 5:25pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/12 "2021-06-21T17:25:17Z")

</div>

Not at all! 😃

---

<div class="post-metadata">

**Author:** ![PirateJC](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/piratejc/32/1003_2.png) [@PirateJC](https://forum.babylonjs.com/u/PirateJC)\
**Post date:** [June 21, 2021, 10:14pm UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/13 "2021-06-21T22:14:42Z")

</div>

Added! This will be live on the community page in a few minutes:

> **[Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best](https://www.babylonjs.com/community/)**
>
> Babylon.js is one of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and...

---

<div class="post-metadata">

**Author:** ![Mario\_Sanchez](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mario_sanchez/32/13430_2.png) [@Mario\_Sanchez](https://forum.babylonjs.com/u/Mario_Sanchez)\
**Post date:** [June 22, 2021, 6:41am UTC](https://forum.babylonjs.com/t/a-gaming-mouse-builder/21729/14 "2021-06-22T06:41:58Z")

</div>

Woah! Thanks for sharing ^^
