Real 3D: Build The Digital Architecture Diagrams

•

3D 'All-In-One' Visualization

'Real 3D' is a 3D architecture Diagram product that efficiently visualizes the Alibaba Cloud products in real-time. It is initiated by Alibaba Cloud Design on top of WebGL technology.

①

GOODBYE, FLATLAND

In the beginning of 2020, Alibaba Cloud Design initiated an experience-upgrading project for the Cloud Security Center product, codenamed "The Eyes of Horus". The goal of the project is to build a new experience capability to help customers achieve global awareness of the risk posture of assets on the cloud, from a single point of risk treatment to global security management. We've tried a lot of solutions, but the "sense of the big picture" and the "sense of security" have always fallen short of our expectations, so we decided to take a step forward to 3D visualizations.

PROJECT 01 -

The Eyes of Horus

The 3D management platform built by "The Eyes of Horus" allows enterprise customers to review their assets on the cloud in the most intuitive way and interact with their products in a natural way. In order to achieve the highest operational efficiency and visual effects, the entire 3D visualization part based on WebGL graphics technology is developed by the creative graphic designers of Alibaba Design. Currently, The Eyes of Horus, a popular new feature of the Cloud Security Center, is already providing security services to more than dozens of enterprise customers. And that, in turn, is today's protagonist: the forerunner of Real 3D.

②

Hello, (Real 3D) World

First things first, let's get our introduction to Real 3D with the first line of code in computer, "Hello World".

In 2018, we had our first attempt at 3D visualization of cloud product architecture in the Alibaba Cloud ARMS, and after the Eyes of Horus, it became clearer to us that the 3D visualization format is ideal for presenting complex and abstract cloud scenarios. The purpose of Real 3D is not just to be cool, but to take advantage of man's innate ability to make up for the powerful brain power of three-dimensional space by adding a dimension out of thin air from a two-dimensional display screen. This third dimension provides a new information channel. In the traditional two-dimensional interface, we only get text, color and other information. In 3D space, the depth, height, angle and other information channels can carry product information. Therefore, in our view, the one more dimension to the product is not the enhancement of perception, but the enhancement of cognition.

PROJECT 02 -

Alibaba Cloud Shield-Protection Platform

There are many pre-rendered 3D visualizations out there, but there are not many SaaS product by real-time rendering 3D visualization on the market. Because 3D graphics itself in the design, and technology has a high threshold, so most of the corresponding 3D is a highly customized experience or either video animations. In the iterative process, we continue to expand new features, and we implement the GDS WebGL library into Real 3D technical approaches. In 3D space, given only a width, the length and width of each sub-module to be laid out, as well as a spacing distance between modules, it is possible to generate a 3D coordinate system of modules, and smartly combine the module tiles in an area, making full use of responsive layout in 3D.

PROJECT 03 -

Apsara Conference 2020 - "Future Oriented Cloud Native" Animation

Enterprise Distributed Application Service (EDAS) is the core product of Alibaba's Enterprise Internet Architecture solution. In the keynote speech of "Future Oriented Cloud Native" at the 2020 Cloud Summit Conference, Real 3D is once again a force to be reckoned with, visualizing 3D graphics rendered in real-time with real data to demonstrate EDAS 3.0's ability to smartly limit flow, automatically expand capacity, and repair failures in response to traffic peaks.

③

The road TO productization

In those cases above, we had found problems of both design and tech: They are mostly tailor-made, not highly reusable, bespoke development, hard to iterate, and badly optimized models. Therefore, we decided to productize the architecture diagrams build and create a lightweight visual building tool, which allows users to operate intuitively.

- Logo & Primary Brand Design

And the product is meant to offer a rapid 3D build of visualizations for Alibaba Cloud products. So we embarked on the road to productization that is with a product codename: Real 3D. The logo glyph comes from the concept of digital conveyor belt.

- Design Assets & UI Kit

To begin the product incubation, we plugged the 3D models into Blender for optimizations and created highly reusable design assets: we combed through hundreds of products from Alibaba Cloud and redesigned the icon and models using simple and semantic elements. Given that these models are ultimately used for high-performance, and real-time renderings in the browser, the models required extremely demanding polished geometries. The models were magnificently optimized to low-poly glTF Models averaging only 10 - 30K per model.

- WebGL TechnologY & glTF models

Technically, we have implemented our in-house developed GDS.js WebGL library to achieve high quality and high reusability of modular code. The self-developed shaders (GLSL) is used for Real 3D's visual effects. With the technologies and a group of magnificently optimized glTF models, we managed to enable our online building, editing more robust. And the 3D graphics of architecture diagrams are at high-performance in real-time rendering.

- MVP: Minimum Viable Product

Lately, we shipped a version of MVP for Real 3D. In the development, we consolidated the product from the design to technical development, and solved many technical problems in the difficulty of graphics coding. Such as automatic layout in the nested relationship of VPC, Block, and Region, adaptive response to viewport resizing, parametric material and styles, etc.

- the editor of building interface.

During the build, the editor interface is the most direct dialogue between the product and the user. The UI of editor is designed based on a dataset of Hue, Saturation, and Brightness. After our researches and design know-hows on color science, we improved the overall visual comfort of the editor's use interfaces.

The MVP (Minimum Viable Product) version has been launched on the intranet. It's just a small step towards full-fidelity 3D productization.

The above-mentioned "The Eyes of Horus", a three-month effort 3D experience, can now be generated by users in nearly seconds.

From design to code, the MVP website is implemented by Cannon.js along with WebGL techniques. So that users can interact with the 3D elements on the web page. In the build portion, users can select a group of Alibaba Cloud product icons and experience building their own architecture spectrums. Our path to productization has only just begun, and the next step, starting with MVP (Minimum Viable Product), is to iterate it in upcoming projects and gradually polish the design and code, eventually take it further to a mature Real 3D product.