Building Up 3D Models With Babylon JS
This article provides an in-depth analysis of Babylon JS-based custom 3D modeling solutions provided by our company. Our 3D modelers create powerful 3D scenes while maximizing optimization in terms of reducing the size of 3D models.
Assets preparation is the fundamental thing in the creation of any scene. We have a number of Professional 3D Modelers that create assets according to the requirements of different scenes. Our company used different software such as Maya 3D, Blender, Cinema 4D, ZBrush for creating 3D models. Moreover, the latest version of the Babylon JS framework is employed for creating 3D scenes on the web.
The making of any scene on software begins with the conception of assets. The assets must be created according to the situation of the scene and required aesthetic appeal so that they look as real as possible. Our company provides 3D models built using different software packages such as Cinema 4D, Blender, and Maya 3D. The final model is exported into the GLTF format. GL Transmission Format (GLTF) is widely used across the world and compatible with many software packages for storing and editing 3D models and scenes. In this format, the whole structure is written in JSON standard, which is extremely simple to understand and readily interoperable with modern web applications. Moreover, the GLTF format not only compresses the 3D scenes and models’ files, but also reduces the processing time required during the execution of applications by using APIs and WebGL. These days GLTF is promoted by the top 3D modeling giants, particularly the Khronos Group, which is similar to the JPEG format.
In addition to 3D modelers for asset construction, the logical behavior of objects on scenes and general construction of different scenarios requires a proper framework. Frameworks are intended to assist the process of building 3D scenes on the web. Here we offer the Babylon JS framework which proved to be very effective in supporting the modern trend of building 3D scenes on the web. Babylon JS supports WebGL while performing rendering of 3D scenes on the web. However, development is underway to support a new API called WebGPU. The integration of WebGPU will allow the creation of more efficient and detailed scenes having a large number of objects. This will further enhance the opportunity of using 3D models in web applications.
From here forward, we will explain different tools provided by the Babylon JS development team for creating customized scenes and 3D models.
CYOS
CYOS is a web application specially designed for writing your own shaders in GLSL and performing their subsequent debugging as well. This application interface splits the screen into two windows. The first window is used for writing the code while the second one shows the live results after each run of code. Both fragments and a vertex shader of specific materials are also required to write in the first dialogue box as shown in Figure 1.
Figure 1: CYOS Interface
The application also allows the users to download their own shader or save it on the server wherever they want. The link for downloading your shader is https://cyos.babylonjs.com/.
Node Material Editor
Node material editor is a powerful tool that allows users to create complicated materials without knowing the specific details of GLSL. Complex PBR materials can also be rendered with the help of Node Material Editor. Basically, it utilizes a node development system in which users just have to connect the desired nodes and it automatically generates the code as shown in Figure 2. This function significantly reduces the learning curve for designers to get into material design and analyze every aspect of it. Furthermore, this tool also allows the users to create materials for meshes, post-processes, and particles. Unloading and combining different ready-made materials are also important functions that can be performed on Node Material Editor.
Figure 2: Node Material Editor
Similar to the CYOS tool, Node Materials Editor files can also be stored and served and used as snippets. The link for Babylon JS editor is https://nodematerial-editor.babylonjs.com/.
Playground
Playground is a very useful tool that allows the Babylon JS framework to run on the website without installing the development environment. The users can write some pieces of logic for future scenes and check it for different aspects accordingly. This tool enables users to discuss different aspects related to scene making with the expert community of the framework and get useful information. It greatly helps the modelers in attaining useful information and a proper solution against each query. Playground also permits highlighting a certain section of code for perceiving expert opinion. Figure 3 shows the interface of the Playground tool offered by the Babylon JS framework.
Figure 3: Playground
Playground supports both languages: typeScript and JavaScript and can be saved and retrieved from online servers. The link for assessing this tool is https://playground.babylonjs.com/.
Inspector
Inspector is a tool used for presenting all the objects in the game and showing their properties as well. In addition to the main framework, this tool is also available in the playground. Inspector builds up along with the creation of the project and detached when released to the production. The Inspector tool eases the users in terms of changing the properties of different objects in the scene without editing the code. By utilizing this tool, users can check the possible behavior of objects without restarting the entire scene. Designers consider the Inspector a very handy tool for fine-tuning the scene.
Conclusion
3D scene creation for web applications/video games is a demanding job nowadays. Our company, with many professional 3D modelers, provides custom 3D models and scenes according to our clients’ requirements. We build the 3D model in Maya 3D, Cinema 4D, and Blender with GLTF format. The GLTF format stores the structure in a JSON standard that is supported by a wide range of software. Moreover, our company utilized the Babylon JS framework for creating 3D scenes on the web. Babylon JS offers a variety of tools such as CYOS, Node Material Editor, Playground, and Inspector which not only facilitate in creating the 3D model and scenes, but also helps with inspecting objects according to the scene situation.
Are you looking for professional 3D modeling services to attract more customers with an affordable price range? If yes, then our company is the best choice for your project modeling requirements. With a wide range of professionals and state-of-the-art software, we provide solutions for all kinds of computer-generated graphic projects.
