Inspiration
We wanted to design an application focusing on the Hastings Direct webchat track. To do this we decided to tackle the task of generating a 3D webchat application. using the three.js framework for Javascript. The key motivation behind the use of Javascript is that we wanted to design an application that could be easily implemented into the the customer service widget that most websites use to engage with their customers. Our original design specification was to have a regular, well designed, chatbox which after a timeout would transform into a Galaga style game using the words of the previous messages as entities to be shot down.
What it does
During the development process we underwent the process of learning three.js to develop 3D graphics which brought its own set of issues, since it is a framework built onto of the WebGL specification. An understanding of the WebGL graphics pipeline had to be learnt to implement graphics objects, which was a learned skillset for the both of us. The current state of the application, is a functioning webchat which implements 3D graphics with glow effects and WebGL shaders. The webchat functions through JS web sockets which allow for the chat history to be rendered when new users join the channel and is capable to maintain chatting capabilities for multiple users. Web chats have mostly been a fairly straightforward applications historically, our twist on it was not fully fulfilled. However, we were able to implement the temporary destruction of rendered objects with flashy animations and entertaining sound effects.
How we built it
The primary development tool used in this Hackathon was the three.js framework which has the primary use case for rendering 3D graphics in webpages. As such some implementation of .html and .css files were added to our directory to build a development environment to build our application.
Challenges we ran into
The biggest challenge that was encountered, was the complexity of the implementation of 3D graphics. Since Javascript was a fairly alien language for the both of us - three.js even more so - we encountered issues during the development since there was a steep learning curve for the graphics implementation. As a result of this the scope of the application had to be reduced.
Accomplishments that we're proud of
It was impressive that we were able to design and implement a working and flashy looking web chat application in an unconventional format.
What we learned
We learned that three.js can be a powerful rendering tool. However, due to its nature it may have been an unsuitable choice in the context of a Hackathon. However, it has given us the skills to perhaps use it again in future.
What's next for 3D Web Chat
It probably wont be revisited. However, it has given good exposure to WebGL platforms.
Log in or sign up for Devpost to join the conversation.