HTML5, not just looks beautiful (second play: build the most beautiful 3D data center), html5 looks beautiful

HTML5, not just looks beautiful (second play: build the most beautiful 3D data center), html5 looks beautiful
Preface

Recently, project development tasks have come to an end, and we have time to sort out some of the results of the past six months. It was not long before html5 was used, and the knowledge of js was not deep enough. No way. I have been engaged in java before. Some language features and concepts of js cannot be converted at the moment.

The first bullet in the previous article introduced a rainbow explosion chart made in the project, mainly using the 2d rendering technology of the html5 canvas. In this case, I would like to introduce one of the highlights of the project: html5 3D, and how to use it to create a beautiful 3D data center monitoring system.

Target

It is a Results reference image provided by the customer. We hope the IDC can achieve at least the following 3D effects.

Everyone knows that this is a decoration made by a design company. Even if we use max for modeling, a lot of work is required, what's more, programmers are working on Data Center visualization projects... Endure the surging head of your mind ** let's calm down and think about it. Let's start with setting up a webGL scenario.

WebGL basic scenarios

Using 3D in html5 is no longer an advanced technology. It is based on WebGL, a subset of OpenGL browsers, and supports most of the major 3D functional interfaces. Currently, the latest browsers have better support, and IE needs to reach 11 (yes, you are not mistaken ).

To check whether your browser supports webGL, you can directly access the Web http://get.webgl.org/To see if you can see a rotating cube. If you can see that your browser supports webgGL. Otherwise, you can try the latest chrome. Chrome has the best support for webGL, and the efficiency is also very good.

To use webGL in a browser, we need to study the technology and usage related to webGL. It is not easy to do 3D applications. Even the simplest webGL scenario, the following code is required:

var width = window.innerWidth;  var height= window.innerHeight;  var container = document.createElement( 'div' );  document.body.appendChild( container );  var webglcanvas = document.createElement('canvas');               container.appendChild(webglcanvas);   var gl = webglcanvas.getContext("experimental-webgl");                function updateFrame () {               gl.viewport ( 0, 0, width, height );          gl.clearColor(0.4, 0.4, 0.7, 1);          gl.clear ( gl.COLOR_BUFFER_BIT );                setTimeout(       function(){updateFrame()},              20);       }  setTimeout(     function(){    updateFrame();  },  20);  

Like html, you must first create a canvas element and obtain its webgl context:

var gl = webglcanvas.getContext("experimental-webgl");

ThenupdateFrameIn the function, like the html5 2D context, draw 3D content.

In addition, an endless loop is required, which is called every ** milliseconds.updateFrameFunction to redraw a scenario. Unlike 2D, the changes in 3D scenes are anytime, anywhere, so you need to refresh constantly, just like playing a movie or video. There are basically no static images, therefore, it is essential to refresh an endless loop. However, there will be a lot of Optimizations in actual project usage. We try to "refresh on demand" to save cpu and mobile device power. If you are interested, you can write an article separately. This program basically did nothing, so it drew a static area, such:

Although no 3D content is visible, it is already the simplest webgl program. Our 3D data centers are constantly enriched.

Object Encapsulation

To build a project, the workload is too large and the time cycle is not allowed. It is inevitable to use third-party auxiliary tools, such as Three. js and twaver. js. These tools can provide basic 3D objects and various special effects. Of course, this is not the most important thing, but mainly how to use it to make the desired effect: good-looking. In order to avoid a large amount of code modification, some encapsulation is made in the project, that is, the object such as the original 3D cube is further encapsulated, so that a json data can provide the definition of these objects. This makes it easier to use. The json structure is as follows:

Var json = {objects: [{name: 'floor ',...}, {…}],}

Next, let's look at how these 3D objects are beautified one by one. The process may be a little cool, but this time the Foundation has been completed and future projects will be captured.

Floors and slopes

The first thing we need to do is to make the floor objects simple. In 3D, the floor should be a thin cube plane with some thickness and lattice textures. Therefore, for encapsulated cube objects, a json object is defined as follows:

{Name: 'floor ', type: 'CUBE', width: 1600, height: 10, depth: 1300, style: {'m. color ':' # BEC9BE ',' m. ambient ':' # BEC9BE ',}}

By definition, a 13-meter * 16-meter ground plate is created, which is also the actual size of the customer's small data center:

The color is not enough. You need to find a floor tile texture. Note that the size of a texture image must be a power of 2 in width and height, for example, 128x128, 256*256, and so on. This is also the general requirement of 3D software. In addition, the texture must be continuously spliced without revealing flaws. For example, the following figure is shown by google:

Add:

   'top.m.texture.image': 'images/floor.png',   'top.m.texture.repeat': new mono.Vec2(10,10),

The effect is as follows:

With image texture, the effect is much better. The customer suddenly said that there was a slope at the bottom of the data center to facilitate equipment delivery, which must be drawn out. This ...... (Bytes-_-) bytes

Later I thought that the objects in twaver could support computation. For example, I could define a oblique cube and let the floor cut off the cube. So continue to define json:

{Name: 'floor slup', type: 'CUBE ', width: 200, height: 20, depth: 260, translate: [-348,0, 530], rotate: [Math. PI/180*3, 0, 0], op: '-', style :{..., }}

Here we define a skewed cube throughtranslateDefine location,rotateDefine the rotation angle, and then passopDefines the operator. Here is "minus", which is represented. You can also set the material, texture, texture, and color of the cut cube... And so on, just like the floor. See the results:

The first step is to handle the problem without any risk.

Corridor table

In the next step, I found a simple object, and set up a reception desk in the required corridor. For simplicity, I decided to be lazy and make a cube representation.

{Name: 'corridor bench ', type: 'CUBE', width: 300, height: 50, depth: 100, translate: [350, 0,-500],}

The effect is as follows:

There is a reason for laziness. In 3D, efficiency is the most important thing. Do not put complicated models, especially such non-business objects. Just like this table, although it is just a simple cube, it looks much better as long as it is consistent with the overall style and adds a color scheme and starts the shadow effect:

Wall

The wall is a very important part of the data center. Only with good lighting and shadow effects can it look more lifelike. Because the wall is an irregular path, it is really troublesome to generate a paragraph. Fortunately, the engine supports such objects and even the curve path. Here, we only need to define the coordinates of a group of numbers in json, connect these numbers in sequence, form a wall, and finally generate 3D objects to be placed in the scene.

Json is defined as follows:

{Name: 'main wall', type: 'path', width: 20, height: 200, translate: [-500, 0,-500], data: [[0, 0], [1000, 0], [1000,500], [500,500], [500,100 0], [0, 1000], [],],}

Note that the type here is changedpath,dataDefines a two-dimensional coordinate array to describe the wall. Because the walls start from the bottom, only the x and y coordinates of the plane can be defined. See the results:

However, as mentioned above, color and shadow are needed to achieve better results. Here we will enable the shadow and ask the designer for a few color values, and then look at the effect:

And some details:

Portal

Looking at the white wall, do you think something is missing? Yes, it's the door. In the monitoring system of the 3D data center, access control is an important part. The customer requires that the door be in the opposite position and the door should be opened and closed with an animation. In this way, after the actual access control information is collected, you can view the door status in real time on the interface.

Here, if the door is directly placed, it will be covered by the wall; if it is thicker than the wall, it is difficult to see the actual situation. You should first define a cube in the door hole and dig out the position of the door:

{Name: 'doken', type: 'CUBE ', width: 195, height: 170, depth: 30, op:'-', translate: [-, 2, 500],}

Just dug in the slope, so that the device can easily enter the house:

However, this door does not have a door frame and it does not feel quite vivid. One more door frame will feel more stereoscopic. The door frame can be a cube slightly larger than the door hole. Add the following before digging the door hole:

{Name: 'doorframe ', type: 'CUBE', width: 205, height: 180, depth: 26, translate: [-350, 0,500], op: '+ ',}

After the comprehensive effects such as shadow and light are added, the performance is quite good.

Let's take a look at the panorama:

Then, just install the door. The door definition is relatively simple, it is a thin cube. However, in order to achieve the glass effect, you need to set the transparency to make it look more like a glass, and then let the designer put a nice-looking figure on the door. Despite webGL, the complex modeling work can be omitted, but the cooperation of the designer Mei is still very important.
First do the left-side door:

{Name: 'left door', type: 'CUBE ', width: 93, height: 165, depth: 2, translate: [-rows, 4, 500], style: {'m. transparent ': true,' m. texture. imag': 'images/door_left.png ',}

The style added above is mainly transparent and Paster. See the results:

In the same way, paste the right door. To increase the user experience, an animation is set on the door: Double-click can automatically open, and then double-click can directly close. The animation function engine is encapsulated and the animation type can be directly specified in json. However, it should be noted that the animation orientation of the left and right doors is the opposite. Otherwise, it would be strange to open one inside and outward.

Window

In the project, the window itself does not need to have any business attributes, but the aesthetic requirements cannot be less. The method is similar to that of the door. The window is first placed and then the form is dug. But in order to make some changes, there is no window frame here, and a window sill is made in the same way as the door.

{Name: 'main Windows', type: 'CUBE ', width: 420, height: 150, depth: 50, translate: [200, 30,500], op: '-',}, {name: 'main Windows', type: 'CUBE ', width: 420, height: 10, depth: 40, translate: [200, 30,510], op: '+ ',}

Defines a window hole (DUG) and a window sill (added ). A big window is ready:

Add a slightly colored transparent glass. Set highlights and reflections on the glass to add the "glass" feeling:

{Name: 'main window glass ', type: 'CUBE', width: 420, height: 150, depth: 2, translate: [200, 30,500], op: '+', style: {'m. transparent ': true,' m. opacity ': 0.4,' m. color ':' # 58ACFA ',},}

Transparency and color are set for the glass in json. Just like a translucent brown glass:

Here I suddenly thought: building a house would be as simple as writing a program, and all programmers would not be single dogs without a house. Of course, writing a program is the same as building a house: The encapsulated program should be encapsulated, and finally it should be assembled by building blocks. If the house is built from the ground of mud, then the cup is ready. The same is true for writing programs. If you write programs from the main of webGL ...... How many months or even years can this 3D data center system be built?

Exterior Wall

Add more building walls as required by the project. There are two corridor partitions on the outside of the room. This is a corridor wall with large transparent glass in the middle. It should be nice. Because it is a straight line wall and there is no complicated trend, it is defined directly using cubes:

{Name: 'left external wall ', type: 'CUBE', width: 20, height: 200, depth: 1300, translate: [-790, 0, 0], op: '+ ',}

The effect is as follows:

Continue to dig out the middle part of the window:

{Name: 'left outer wall cid', type: 'CUBE ', width: 30, height: 110, depth: 1300, translate: [-790, 60, 0], op: '-',}

The blank space seems strange. Try again with glass:

{Name: 'left exterior glass ', type: 'CUBE', width: 4, height: 110, depth: 1300, translate: [-790, 60, 0], op: '+', style: {'m. transparent ': true,' m. opacity ': 0.6 ,},}

With the translucent and high-gloss effects, it looks like a texture, and the right side is like a method:

In this way, the appearance of the entire building is basically complete. Finally, put some green plants and get angry.

Plants

Make a pot of plants, need to have an empty pot, there is dirt in the pot, there is a plant above. These things are a bit cool to do with 3D. But it is not difficult. The flowerpot uses a large cylinder to cut off the small cylinder in the middle and make it into a hollow flowerpot. The plants can be simulated with textures and transparency. You don't need to make 3D models of plants. Otherwise, you will be exhausted.

According to the above idea, carefully adjust the code in the project to encapsulate the code for creating the pot, and then define the pot location in json. The following is a definition:

{Name: 'Flower 1', type: 'plant', translate: [560, 0,400],}

In the program, if the type is plant, the plant object is created and the scenario is added.

You can set a few pots in the room, corridor, or even window sill. You can scale down the window sill and increase its height to the window sill position.

Let's take a look at the overall effect.

Cabinets and devices

After writing such a big article, we finally finished the exterior decoration of the 3D data center. We are also a hybrid talent for designers and programmers. In fact, there is no way to find the Cabinet, the core resource of the data center. Image Engineering is also a highlight of project construction.

Cabinet

Cabinets and server devices. This is the final content to be managed in the 3D data center. In our actual project, these assets are stored in the database and loaded to the browser through the json interface for display. For ease of demonstration, write several cabinet fragments and check the display effect.

The Cabinet object is encapsulated in the project as follows: a cube is used to represent the cabinet and a texture is added. Project, in order to increase the display speed, the Cabinet does not load the internal server content at the beginning, but only shows itself a cube. After double-clicking, a delayed loader is triggered to load the internal server of the Cabinet from the server side and load it to the corresponding location. In this case, the Cabinet is hollowed out into a hollow cube to visually look more like a cabinet.

The json format of the Cabinet is as follows:

{Name: 'Cabinet ', type: 'rack', lazy: true, width: 70, depth: 100, height: 220, translate: [-370, 0, -250], severity: CRITICAL ,}

In the cabinet definition above, there islazyMark to mark whether it delays loading its content. If loading is delayed, double-click the trigger; otherwise, the content is loaded directly when the program is displayed.SeverityIs to define the Cabinet alarm information, whether it has a business alarm. If an alarm is triggered, a bubble is displayed on the top of the cabinet, and the Cabinet is colored as the alarm color.

Add more cabinets to check the effect:

Device

For the sake of simplicity, the devices managed here are all rack devices with relatively regular sizes and specifications, so they are easier to organize in cabinets. After the appearance of a device is determined, define the template in the database and place the template according to the location of the cabinet where the device is loaded.

Several server devices are randomly generated and placed by location. In practical applications, You can manually enter the information submitted by the smart rack to determine the type and location of the server.

If you need to monitor the port level, you can also delay loading the card and port object of the device manufacturer after the server pops up, and click to further configure and monitor the device. Of course, the finer the loaded data, the higher the pressure on 3D engines and browsers. You can use the dynamic delayed loading/unloading policy to obtain some balance compromise.

TV set

It's boring to have another TV set hung on the wall. Still, define a cube, empty the screen, put transparent glass, and then paste on our favorite TV program screen, then OK.

{Name: 'TV body', type: 'CUBE', width: 150, height: 80, depth: 5, translate: [80,100, 13], op: '+',}, {name: 'Television void ', type: 'CUBE', width: 130, height: 75, depth: 5, translate: [80,102.5, 17], op: '-',}, {name: 'TV screen', type: 'CUBE', width: 130, height: 75, depth: 1, translate: [80,102.5, 14.6], op: '+', style: {'front. m. texture. imag': 'images/screen.jpg ',},}

Of course, in actual projects, you can change to the monitoring screen:

Summary

At the end of the entire scenario, I have already been able to make my mind wide open. 3D scenarios, especially such business systems, do not have to worry about the simulation of the model, in order to achieve "good-looking" results. Let's take a panoramic look:

How about it? Basically, I don't lose the company I saw before. But unlike a dead image, we are a small 3D Data Center program that can be operated, roaming, scaling, animation, smooth display, and opened directly without plug-ins in the browser, it was a little surprising that a json file, over one hundred lines of code, and a day had been completed.

No plug-ins, No 3 Dmax, no model library, clean and pure small programs, and can also be used on mobile phones and tablets, but also very smooth! Last glance at my Nexus5:

After optimization, the scenario loading has been controlled within 600 milliseconds, and scaling and roaming are also smooth. Of course, there is no end to the technology and beautification, and the user's needs are constantly changing. However, if we have chosen technologies and tools, we can get twice the result with half the effort. Html5 is an excellent choice.

Html5, maybe it is not silver bullet, but it is indeed a good shell. Do you still like this article? Welcome to send a message for code, technical exchange: tw-service@servasoftware.com

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.