cover_photo

Web3D Project Engine

Babylonjs 3d web project generator

What is Web3D Project Engine

Babylonjs-world is a simple 3D web project engine developed with the open-source engine Babylon.js as the underlying technology. It was developed to reduce the standardization operations of designers and developers during my development of 3D experiences on the web.

feature

Preface

For an engineer, learning a new tech would need to remember many things, unless you have super memory and don't need to remember twice. BabylonJS is an powerful engine with complicated setting, it's not an easy job to remember all the detail when you want to start a new project. In many case engineer always want to write modularize function or features to avoid reproducing program, it would be nice if there is a way that we can customize function like usb, remove the module when you don't need it . saving a lot of time and always building new tech to create more valuable things

Problem found

Communicating Gap Cuz I have experience at Interactive Design and Game Development, I know much about how time consuming when designer and engineer communicate with each other, sometime they get upset when communication didn't meet their expect. When I find there's an simlary problem in my company I decide to end this up or at less mitigate the problem. A good communication is necessary but we can't expect everyone have experience at. Duplicating Processing and Reinventing the Wheel Besides our old workflow has too many duplicated processing, we don't actually need Reinventing the wheel. Increasing Value by Saving Time And Iterative Development

When we development 3D software, there would two types of features in the program.

engine features : every time you start a new project you always need, it's a better option to modularize it. project features : a specific features aim to this project, you probably don't need in next time

Requirement Collection

we are not professional team to develop 3d experience at web. before i joined the company they are using three.js to create 3d scene.

three.js is a great tool to delivering 3d world, but in our case it's not a best solution for us.

first, we need an editor or inspector to preview what we build in blender second, we need a method to realtime change the scene content and setting, so we won't have to rebuild to see the result third, can we reusing the project template? continuous adjusting scene setting is annoying neither designer nor engineer would like to do so fourth, can designer doing all the project setting without engineer intervene? I know this is sound selfish, but engineer would take much more time than designer to design the view of 3d scene fifth, I have develop an game room system (Group Tour System), so can we add feature to it ? if we want online muti-player experience? alright that's it!!!

Solution Design

when i end up the requirement collection, there are many keywords flash in my head : System design, UML, Software Architect, Game Engine Design, WebGL. Although I have a big interest in System Design, it's still not good way to direct jump in (because it's a black hole of time) . so i decide to start with finding a suitable tool for our 3d engine.

when i google 3d engine for web, there are some popular options:

  1. Unity 3D : designer need to import models into unity3d, and then build the project and finally to view their change, too much time consuming, besides the game engine itself its not open source
  2. three.js : although I find open source editor for three.js, the experience of using threejs is like advanced opengl or webgl, a bit of difficulty to find an font-end engineer to skill at Computer Graphics
  3. playcanvas : the experience of development is just like Unity3D, with their editor anyone can even collaborate remotely, playcanvas has almost everything i want, but unfortunately the editor is not free for private project
  4. babylonjs : provide graphics editor interface, and bunch of features like threejs plus unity3d, it can directly sufficient our first two demand since babylonjs just solve our first two demand, I can focus on the last two demand.

develop a module-base system : let designer add custom module to complete project their own, also i only need to develop a module to connect to my group tour system

design a project file : a project file can be reusing during every product life cycles, more important is we can split out project features and engine features

adding a animation edit system : let Technical art doesn't need to develop effect twice, and 3d art can more focus on the timeline and scene art, and leaving the difficult things to TA and RD

Implement stage

this is not a waterfall development style, and I probably shouldn't. when i start to develop this project , i didn't have much resource, all i have is myself and some books in my home and bunch of network tutorial, In turns of that i need to design development stage to let my project gradually growing up.

first, implement babylonjs in following project and development a simple framework second, develop everytime using module to ensure accelerate development process third, using my framework and project file to develop few projects, test my design philosophy and user experience fourth, let designer use it and improved project by their feedback and wish list

What I learned in this project

problem solving skill by investigate stakeholder, requirement collection, system design : most is modularization system design, but i do lots of homework to research how to develop a reusable high available system optimize workflow : it is happy to let everyone stay away from work overtime, and helping people by create valuable things is the reason why i write program