BabylonChat : my tribute to the BabylonJS GUI!

[Tricotou]

Hello everyone !

I have been working on this project for a few weeks already. Today I’m happy to release the BabylonChat 1.0.0 … 100% Based on the BabylonJS GUI !

Babylon Chat

I would have a lot to say about it, and also I expect a lot of questions / suggestions, but here is a first overview of what it is :

---

• A few years ago I released the Blender Tchat Addon (link) which is a Python Addon for Blender, which create an OpenGL based UI on top of viewport, for online tchating, asset, material, meshes exchange, etc, etc…
• It was free by default, and also I had setup a “pro” subscription which unlocks some limitations on the file sharing (I cannot afford big file share myself, even if I would love to ! )
• Then a few months later I released the same addon for Houdini, which is based on the same OpenGL UI, and also connected to the same server. Abling the users to Drag&Drop procedural Node patterns from a room to another
• The server is also 100% homemade, based on NodeJS, using AWS DynamoDB for database, AWS S3 for file hosting.
• It’s using a custom version of HTTPS Long Pooling, a nice trick for doing push notifications based on HTTP GET requests, that I discovered thanks to Telegram Messenger, which uses it as well.

---

NOW : This project is a 3rd version of the Client Interface, this time 100% based on the BabylonJS GUI ! Still connected to the same server, so you can chat between Blender, Houdini, and this BJS web interface.

---

Here are a few features I worked on for this project : (Sorry the mouse doesn’t appear on the record)

---

Grid based layout for icons, with dynamic search :

---

Dynamic hovering and controls tooltips :

---

Unicode Based Emoji implementation :

---

And a few other stuffs that I’ll be happy to let you discover (toasts, etc…)

---

Working on this project I struggled with some bugs on the BabylonJS GUI, that I’m about to report, as I discussed with @RaananW already.

---

TODO : (to be released in the next days)

• ( ) Fix some textWrapping issues
• ( ) Rebuild on resize
• Picture crop, resize & edit for profile pic. NB: Please upload squared images for Profile Pic, not too large (max 300 px). Auto resize is not done yet
• Update profile picture from Github or BabylonForum user link
• User params (colors, sounds, etc)
• Display images, gifs, video within the chat
• Clickable links from the chat
• Drag & Drop files directly in the chat window
• Emoji reactions attached to messages
• Any ideas or suggestions I’ll be given later on…

---

Ok, that’s it, I hope you will love it, I hope it won’t crash too fast as well

Don’t hesitate to give it a try, see you soon in the chat !
++
Tricotou

[RavenARound]

Congratulations on the launch! I’ll try this out. It looks great.

[Tricotou]

Seems to work !

[Deltakosh]

crazy shit! Love it

[RaananW]

Holy (insert whatever you think here)! This is beautiful!

Well done Now I can’t wait to see the list of issues

[Tricotou]

@RaananW

Now I can’t wait to see the list of issues

Ahah same ! On my side already I have done some stress testing such as add friend → decline invite → add again → accept → remove friend → add → accept → remove → add → decline, etc, etc… Same on editing a message. deleting. New message. Delete. Change room while editing… This kind of shit

Like @PatrickRyan said in the code generator topic : “never assume user intent”. So I’m waiting for whatever stuff I didn’t think about

[CodingCrusader]

[Tricotou]

The textWrapping has been fixed
Welcome @onekit and @RavenARound

[Symbitic]

Any chance this is open source? I’d love to add it to awesome-babylonjs.

[riven04]

So cool! Would be great if we could just login with github