Create the most beautiful HTML5 3D computer room (brother mono’s strong return, amazing release in the fourth quarter)

Time:2021-8-26

preface

Hello, friends who meet for the first time. Let me introduce myself briefly: I’m brother mono, male and female, hobbies… Programming has never climbed out since it entered the pit of HTML5 and webgl more than a year ago. At present, it is studying 3D computer room and related 3D applications. This article is the fourth season of the “creating the most beautiful 3D computer room” series. Interested friends can watch it from the beginning. The following is the correct reading order:

HTML5, not only looks beautiful (first bullet: Rainbow explosion)
HTML5, not only looks beautiful (the second play: creating the most beautiful 3D computer room)
Create the most beautiful HTML5 3D computer room (Season 2)
Create the most beautiful HTML5 3D computer room (Season 3)
HTML5, not only looks beautiful (the third bullet: topology grouping)

Students who want to watch the video can directly poke Youku link:
http://v.youku.com/v_show/id_XMTY0MzA3NDc5Ng==.html

I didn’t expect that after more than a year of creation, my brother’s works also need to sort out the timeline. How can I think of the X-Men series just completed in order at the Dragon Boat Festival? But I promise, this article is much better than killing Matt apocalypse, at least it is also the strength of Wolverine.

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)
——————————————Wow, hahaha, brother is a man with his own BGM——————————————

Reminiscence

After talking a lot, I said hello to the audience friends I met again. Everything I want to say is shown in the figure below:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

I’ve been away for more than half a year. I’m actually not idle. I’m holding back a big move. During this period, I received many messages and letters from friends, put forward many great opinions and ideas, and the project has made great progress. In the next article, I will share with you selflessly.

Answer some readers’ questions

No, let’s get to the point. First of all, I’d like to say a question I’ve been discussing with you recently: is HTML5 good or plug-in good?

Some friends who are studying or doing projects have mentioned this problem. Although Web3D technology is surging, it is generally divided into two schools: plug-in school and HTML5 school. The technical route of plug-in school is to install a plug-in made by the enterprise in the browser, and then provide 3D development capability on this plug-in. Typical representatives include flash plug-in and unity3d plug-in (U3D for short). The other is the plug-in free HTML5 route, which uses H5’s webgl standard and canvas technology to realize 3D / 2D technology in the browser without installing plug-ins.

The advantage of the plug-in is that it can adapt to various old models of browsers (such as the old version of IE), and the efficiency should be better. The disadvantage is that plug-ins need to be installed, and cross mobile tablet is also troublesome. The language required by the plug-in should be used. The advantage of HTML5 is that no plug-ins are installed, the efficiency is also very good, the language is simple and unified, all JavaScript, and it is the hottest technical direction at present.

I believe in the development trend of “plug-in will die”. If you don’t agree, take a look at flash and the program apes who are still unable to climb out of Flex technology and hate to spit blood when they see others learn HTML5 and get a high salary. Who can guarantee that unity3d will not become another flash one day? Look at the rapidly changing HTML5 technologies and applications emerging every day. We have time to debate the boring question of whether plug-ins are better or H5. It’s better to work really. After reaching a consensus, let’s start looking at this big wave of updates.

Eagle eye

The function of the last small computer room has been basically completed, and the customer is also very satisfied with the demonstration effect. Since the customer has used our previous 2D system and seen the eagle eye function (i.e. thumbnail), he does not hesitate to require the eagle eye function to be added to the 3D computer room monitoring interface this time. This made me difficult for a while.

In order to find ideas, I first opened the 2D topology map we had done before to find inspiration. The eagle eye looks like this:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

The upper interface is the editing interface for virtual machine opening and configuration made by colleagues to customers. The image in the lower right corner is the eagle eye thumbnail. Consulting colleagues, he said that when eagle eye is implemented in 2D, you can consider making a memory thumbnail of the 2D large image and updating it to eagle eye view, or listening when any attribute changes occur in the large image, and then dynamically generating thumbnails to update eagle eye view. However, it will be different in 3D: getting a small webgl canvas to refresh in real time should not have a large load. So I decided to try a new network in the lower right corner:

var overview = new mono.Overview3D(network);
overview.adjustBounds(200,200);
var rootView = overview.getRootView();
network3d.getRootView().appendChild(rootView);

At the same time, fix the lens above your head and look down vertically, and remove the interaction mechanism of the mouse. After some tossing, finally put an eagle eye canvas at the lower right of the large scene canvas to see the effect:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Device Editor

It is said that there are more than 200 different devices in this project, and each device panel is different. Isn’t it pure manual work to model each device? Even if it is left to the art team, it will take many people and days, and the reusability of the model is not high. After much consideration, the project team urgently developed the editor of the equipment panel, which solves this problem well. I tried it. Taking making a standard rack equipment as an example, it is still fast:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

In the editor, the common ports and panels are completed, dragged, aligned, adsorbed, and put on the logo. Soon a decent switch will come out. What a conscientious product! Click the button to export JSON, which can be used directly in the project. Of course, my usage here is to continue to put the equipment on the cabinet. I developed the rack editor here. The effect is similar. You can directly drag and drop the designed equipment to the cabinet:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Next, drag the cabinet into the room and edit the shape of the room:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Click the 3D button directly to preview:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

By the way, it should be noted that a row of cabinets are generally equipped with a column head cabinet, which is specially used to control circuit and other information. Double clicking it will pop up a circuit configuration interface:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

It is said that this interface also has an editor that can be directly dragged and generated, which is more convenient.

More scenes

In fact, for the editing of cabinet scenarios, a slight change in the model can cope with applications in other industries.

3D Warehouse

For example, what would be the scenario of turning cabinets into shelves and servers into goods and simply dragging them? Imagine.
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

3D factory

Continue to imagine what it would be like to turn the cabinet into a machine tool in the production and processing workshop and simply drag and add alarm information?
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

3D substation

For another example, replacing the model in the scene with the transformer, building, gantry, etc. in the substation, coupled with alarm and interaction, is not it an application of outdoor substation monitoring?
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

3D gas station

If the model is changed to a gas station, it is a gas station SCADA and monitoring application:

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

3D industrial control application

Of course, if it is connected to the hardware, it can be used for various industrial detection and control:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Of course, automatic control applications require data collection, storage and forwarding, cloud platform configuration system, etc. in the future, I will have the opportunity to write a separate article to discuss with you.

Pipeline

There are many physical or logical link information in the computer room, such as network cable, optical fiber, some business connection relationships, etc. If these pipelines are to be displayed in the machine room, they need to be modeled, stored and displayed. For the display part, I have made a simple spatial automatic path here to find the most appropriate route, and virtualize the objects outside the equipment at end a and end Z, so as to display the pipeline more clearly:

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Cross floor links can also be clearly presented:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Conference Room

According to customer requirements, the meeting room scene should also be modeled. After colleagues’ on-site photo inspection, the structure of the conference room is not complex, so we still let the artist sister operate the knife and quickly completed the conference room model:

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Of course, the scene is not fixed. For example, double clicking the projector can let him play video on the projection screen; Double click the door to open it, and so on. This is because we have divided the model and defined the action.

For example, double click the TV screen on the wall below to display the statistical information diagram of the machine room.
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Continue to double-click the statistical chart on the screen to directly display the 2D statistical chart program interface for interaction.
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

This is also a mixed advantage of 2D and 3D technologies using HTML5.

park

The customer asked that the park where the computer room is located should also be added to the scene. It’s reasonable to think about it. After the project is large, the computer room will be distributed on different floors of several buildings. It is convenient to view it only with a 3D panoramic scene. It’s not very difficult. Ask the art girl for help. Sister is faster than developers. In a few hours, a new real estate was born in 3D max. Turn to obj, import the system, and quickly open the browser to see the effect:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

An experience here is that if you want to double-click the building to enter, you need to split the building into a separate model to load and monitor events.

earth

The problem comes again. The customer said that there are many computer rooms in Beijing and Shanghai all over the country, which need unified display and management. It seems that the park is not enough. We need a national map. What if the customer says there is another computer room in the United States in a few days? Just show it directly to the whole earth in one step. Wait until the customer asks Mars to have a computer room.

It’s too simple and convenient to make a earth in 3D. Map and halo, and come out in minutes:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Next, highlight China’s region and highlight China’s position. This method is to prepare a transparent map outline of China, as shown in the following figure:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Then overlay the map on the earth as a map and adjust the position:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Next, make several nodes in the data center. Just use a small ball!
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

In order to prevent it from looking boring, the connection of the data center is displayed with mobile animation. Each data center uses a luminous picture animation to make a rotating luminous effect, which looks much more vivid.

Of course, the final effect of our project is as follows:

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Do you feel tall in an instant? This is not over yet. Another colleague took my code and added some messy effects, which turned into this:

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

It mainly adds some geographical hot spots, satellites around the earth, and some ballistic missile attack animation effects. It is said that a national defense unit needs such a display method. I don’t know the details. In short, it feels a little sci-fi.

When it comes to ballistic attack effect, it is also interesting to think of another display interface of network attack in the project. Although it is 2D, it also has good animation effect:

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

The explosion effect and ballistic effect are drawn with some 2D APIs in HTML5 canvas, such as blur, gradient, etc. It is very intuitive to comprehensively use 2D + 3D to present network attacks. The response process of network attack can also be displayed and analyzed through 3D swimlane diagram:
Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

So far, a multi-level and large-scale integrated 3D computer room system “from earth to equipment port” has been constructed. How about HTML5’s 3D technology? Isn’t it a “little toy”? As long as it is carefully built, it can fully support various large-scale industrial applications. Let’s not linger and wait. Let’s hurry to learn the 2D and 3D technologies of HTML5!

Finally, the old rule is that students who feel that the pictures are not enjoyable and need to see the real face of the 3D computer room can send an email to[email protected], ask for the program code, still sincerely welcome everyone to express their views and make common progress~

Create the most beautiful HTML5 3D computer room (brother mono's strong return, amazing release in the fourth quarter)

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]