3D-Graphic with Vue-BabylonJS

Created high quality 3D animation demonstration using Vue-BabylonJS API

Comment

Inspiration

Our group met with the creators of Vue-BabylonJs, and we were immediately hooked by their fancy 3D animations. We discussed about their technology and some projects/issues that we could work on during the hackathon. Finally, we decided we want to contribute to their open source by creating examples of their core functions. We also hope that Brian (our awesome and smart mentor) and his team will find our examples useful and merge it into their documentations for the future passionate users of this API.

What it does

As a 5 people team, we separate our works into 3 main groups, and our goal was to create examples for all the different functions of the API, so the users can find it useful when they want to apply these functions into their project.
First, James and I worked on the 'Light' functions of the API; more specifically, the directional light, hemispheric light, point light, and spot light. We created simple samples for all these different light functions so the user can understand the function easily and they can try to play around with our code as well. Similarly, our other members Nick and Noah created example uses of the 'Mesh' function where they applied many of the components to showcase their 3D objects. Last but not least, Linda contributed on the 'Entity' function of the API. She built a super interesting animation using both the 'Entity' and 'Animation' functions. Essentially, our goal for this project is to create fun and interesting examples using their API so we can rise the commercial viability by letting more users find this amazing application programming interface useful.

How we built it

We spend day and night reading through vue-babylonjs documentations and discuss all the possibilities with our mentors. At the very beginning, we walked through the api architecture with our mentors and we started building the very first 3D animation together using scene, material, animation, and many more functions. Then, as we mentioned above, we separated our works to increase efficiency and productivity. It is hard to talk about all the stuffs we did here, so please come over and ask us more about how we build the project! Most importantly, check out our amazing 3D animations!

Challenges we ran into:

Since this is a pretty new API, we encountered a lot of bugs and issues. For example, the interaction between our custom camera, the scene's default camera, and default light was a bug that we had to tackle. When we were talking with Brian, we learned that the intended interaction was that creating a camera should cancel out the default camera and default light, which was initialized when a scene was created. The problem was that the default environment function ran first and the manual camera was created second. By having the default environment function running first, the function was not able to check for an existing cameras, causing the whole scene to have two cameras. This bug was found as we were trying to fix the spotlight issue.

The bug for the spotlight was that spotlight did not exist in the scene when it was created. Even though we were not able to fix the spotlight bug, we were able to fix the camera bug with help from Brian. Another challenge that we came across was an unintended interaction in trying to add animation to a light object. The intended interaction was to have any object being able to have a child animation and the animation would be executed to the object. This was not happening to the light object even though it worked well with most of the mesh objects. We weren't able to fix this bug because we didn't have enough time to look into the structure of the engine. Even though this interaction can be worked around by wrapping an animation and a light with a entity, this is still an unintended interaction. We also suspect this bug exists in other non-mesh objects even though we haven't test that possibility yet.

Other issues that we encountered revolved around conflicts with running a Linux terminal on Windows. On one of our group member's laptop runs Windows, and their code would not compile immediately in Visual Code Studio. Their solution was to manually compile their code in Ubuntu, which was very time consuming. The reason for this was because of a bug between Linux (in Ubuntu) and Windows. The code was modified in the Windows file manager, but the bug prevented Ubuntu from recognizing the changes.

What I learned

Many of the team members learned how to use the BabylonJS library, while also familiarizing ourselves with the syntax of vue and pug. The people with the Windows machines gained more insight as to the frustrations with developing on Windows. All the group members also gained practice with working with and on multi-file projects.

What's next for 3D-Graphic with Vue-BabylonJS

We will continue work on more cool 3D-Graphics and Animations and fix the bugs/issues of the API.

Built With

Share this project:

Updates