laitimes

Visual large screen design quick start guide

author:Original pioneer

With the booming big data industry, many companies have begun to apply data visualization. Smart cities, smart transportation, smart medical and so on, more and more industries have the demand for visualization, and the visualization industry has also ushered in a period of rapid development.

Data visualization interpretation

Data visualization is to use some relatively complex, abstract, and incomprehensible data to interpret and convey data information clearly and effectively through "visualization" in a "visualization" way, helping us to discover the laws and characteristics therein and mining the value behind the data.

Visualize the large screen

The visual large screen is a data visualization design with the large screen as the main display carrier. Its application scenarios are not widespread such as ToC, ToB, ToG, etc. will exist. It is generally used in conference halls, park management, urban traffic dispatching centers, public security command centers, enterprise production monitoring and other important places.

The visual user group is relatively clear, mainly unit leaders and some front-line personnel. Gain insight into operational growth through interactive, real-time data monitoring for intelligent and efficient decision-making.

Along with the development of the industry, there are also some industry segmentations of visualization within the industry. Some common categories: industry visualization (such as transportation, medical, finance, military and police forces, agriculture, factories, chemicals, etc.), intelligent terminal systems (customized terminal products), demos (data demonstrations, exhibition displays, data boards), visual analysis systems (through the analysis of data monitoring to assist decision-making, such as traffic early warning platforms, weather monitoring platforms, etc.).

The current state of the market

Platforming

Due to the increasing demand for visualization in recent years, the general company will have some visualization needs, and major manufacturers have gradually integrated visualization resources to achieve platformization and low code. Meets the visualization needs of most companies.

Implementation

Most of the current visualization frameworks are web-based (based on web development or web wrapping) rather than pc. A common visualization implementation is a combination of two-dimensional plus three-dimensional, such as visual charts on both sides of a large screen can be implemented with third-party lightweight chart controls such as Echarts or Vue.

The main visual part will be based on Tools such as Unity3D, Unreal Engine (UE4), Ventuz, and threejs. Meet the needs of 3D cool effects. The entire visual large-screen effect has been qualitatively improved. The advantage of these 3D tools is that the 3D particle effect is well supported, and the effect is very cool. Multi-platform support, which can be opened in a browser through webgl encapsulation. The disadvantage is that the maintenance cost is high, and the relevant professionals are required to develop and maintain, and there is a certain threshold for use. General companies will not be equipped with relevant professionals if they do not specialize in visualization-related business.

Here are the pros and cons of several tools:

Ventuz is used relatively little domestically, and there are fewer related professionals. Unreal Engine is better in effect, but has less support for WebGL parameters. Although Threejs supports three-dimensional but does not have the powerful editor of Unity, some complex effects cannot be achieved. Compared with the former Unity is more mature, it is also used more on the market at present, but three is more friendly to front-end development students, easy to get started, and the learning cost is relatively low.

What visual designers should know

Visual design is a relatively new industry, and it is also a relatively hot industry in terms of the current market. As a designer, not only can you do the renderings, he is an interdisciplinary discipline that combines hardware equipment, UI design, 3D modeling, 3D rendering, dynamic design, data visualization, graphic technology, GIS data, rendering engine, interaction technology and so on.

1. Hardware devices

Hardware equipment information is the beginning of everything on the big screen, we must first understand its size, proportion, screen type (splicing screen, LED screen) projection method, etc. A series of information to facilitate subsequent design work.

2. GIS data

Usually applied to parametric modeling, the previously written 0-1 takes you to make a smart city map (2) is a kind of parametric modeling, mainly through some geographical elevation data for model generation. Infrastructure that belongs to the visual design of smart cities.

3. 3D modeling

In visual design, we generally combine the overall effect with generating parametric models and customizing manual models. The purpose of this treatment: First, the design can highlight the main body and increase the layering of the picture. Second, it can be well optimized in performance to improve overall performance.

4. Animation design

Some common animation docking formats: GIF, MP4, APNG, Lottie, sequence frame.

5. Graphics Technology

Understand the principles of graphic imaging, which is a picture generated by particle points.

6. Technical architecture of the rendering engine

The previous implementation of the visual landing on the market is basically based on Unity3D, Unreal Engine (UE4), Ventuz, threejs and other tools.

Their underlying layer is composed of two major architectures: BS (Browser-Server) architecture and CS (Client-Server) architecture.

BS architecture and CS architecture features

BS: (Browser-Server, ) browser/server mode, web applications can achieve cross-platform, client zero maintenance, but low personalization ability, slow response speed.

WebGL is one of the BS architectures. The advantages are ease of use, real-time data updates, and cross-platform. The disadvantage is poor rendering and poor support for large scenes.

CS: (Client Server, client/server mode), desktop-level applications are responsive, security, personalization, and faster data response.

Unreal Engine, Unity3D, and Ventuz are CS frameworks. The advantage is that the overall rendering of visual effects is good, the large scene support is good, the disadvantage is that the client must be installed, the computer performance requirements are high, and different platforms need different files.