Galaxies 3D scenes created for the US K-12 education

Compared to traditional approaches, Aristek has developed an interactive tool for generating 3D scenes. This tool can provide 20‑30% superior student engagement scores.

3D AR & VR EdTech

Challenge

The determination of the development was a set of numerous interactive models and widgets that will not let the student get tired. The development of the resources consisted of adherence to both educational standards and the WCAG standard. Throughout the development, the Aristek team tried to take into account all the necessities and desires of the client.

Solution

Basic scene development technology is Babylon.js v 4.2. Babylon is considered as open-source technology from Microsoft, with the usage of WebGL Microsoft to visualize ‘out of the box’ mostly 3D graphics and 2D graphics in the framework of 3D scenes.

The main objective of the developers of Babylon.js is to simplify the interaction with the low-level WebGL API, to speed up the animated 3D scenes development.

Babylon.js comprises the concept of ‘adult’ 3D animated graphics development due to the availability of the proper tools. Game dev developers can easily understand the process of app development using the scenes created with Babylon due to similar functionality and semantics. It is also easier for the freshers to get basic knowledge of 3D graphics development on the web platform.

There is an impartially similar technology that is known as Three.js, being inspirational for Babylon.js developers. Being pretty much the same, Aristek Systems developers selected Babylon.js to work with, having identified the strengths and weaknesses of both technologies.

For example, Three.js has an API for the greater number of the configuration of objects and scenes on it, that can be turned to the bigger source code, as compared to Babylon.js.

In contrast, Babylon tries to provide the developer with only the necessary API for configuration, and only if required by the task the developer can use additional configurations.

While developing the demo project, the team of developers followed the approach of modularity. It resulted in simple and clear structure, code reusability for the upcoming projects.

Starting with version 4 Babylon.js completely supports the typescript version 3.8 or the greater one. Typescript corresponds to the main language for developing web projects in Aristek Systems.

Babylon is already having ‘out of the box’ readymade interfaces and types that can be used for the development of an interactive application.

Babylon.js is trying to be of great help in development. In addition to extensive documentation and countless examples that you can check in Playground, it offers a set of tools and more ways to interact.

Playground refers to the place where developers can write code. There is a built-in version of the control system as well as save option.

Tools & Technologies

Babylon.js

Blender

Unreal Engine

Team

Our team structure for interactive 3D scenes development:

UX/ UI designer x1
3D modeler x1
JS developer x1
Project manager x1

Highlights

- Sandbox is the platform where you are allowed to see your 3D models whenever you need to load them from Blender or Maya.
- NME (Node Material Editor) is considered useful for the developers when they have mastered Babylon.js. It is associated with the production-quality visual programming instrument for the development of shade like the shading networks in Maya.
- Exporters allow you to export to third-party software.
- Importers let you import the models that have been exported in the past from third-party software.
- Spector.js is a WebGL authentication instrument.
- Draco 3D Data Compression — Babylon developers support this tool when models imported into the active scene are quite large. This tool allows to zip significantly the size of the imported model as well as unzip it into run time, wherever to be further used.

Process

Throughout the process of development of the interactive 3D scenes «Galaxies», the technology of Babylon.js v4.2 has been used. It is the most stable version that can eliminate the different inadequacies of past versions with the meaningfully optimized rendering of scenes. There is the functionality present that helps you to develop full-fledged GUI elements from the interaction of the scene. It is crucial to notice the broader browser support for the technology.

The class instrument named «Assets Manager» is used to load them onto scenes. It was specially designed to speed up and make the process of displaying objects or models simpler in the scene.

Babylon is considered as the major support that facilitates the development of vertex shades and custom pixels in the glsl language. It is used for visualization of the scenes at the level of modern computer graphics without any amplification.

While developing the current scene, a post processing was implemented to make the graphics rich in colors.

Babylon supports post processing to guarantee ‘live’ effects of interaction between objects in the scene.

Babylon allows its users to run on low-power devices to enjoy modern UX and graphics that is why it struggles to be light on resource consumption.

Results

As a result of the work, the client received three-dimensional interactive models that allow students to get an idea of the shape and appearance of various objects. Interactive interaction and animation add realism and encourage greater involvement in the learning process.

When it is transformed into practice, such visualisations are considered good for student engagement with the ratio of 20-30% as compared to the traditional approach of eLearning of «Video / Quiz».

30%	learning efficiency increase
20-30%	student engagement improvement

Galaxies 3D scenes created for the US K-12 education

Challenge

Solution

Tools & Technologies

Team

UX/ UI designer x1

3D modeler x1

JS developer x1

Project manager x1

Highlights

Process

Results

Similar project idea? Discuss it with us