Technology changes life: CPU simulation of intelligent manufacturing 3D visualization (code article)

Preface

Technology changes life, and the development of technology has brought about tremendous changes in lifestyle. With the continuous evolution of communication technology, 5G technology emerged at the historic moment, and the era of interconnection of everything at any time and anywhere has come. 5G technology not only brings faster connection speed and unprecedented user experience, but also brings huge development opportunities and challenges to the development of manufacturing, microelectronics and integrated circuits. In the commercial implementation of 5G technology, 5G network chips face technical challenges of low power consumption, low latency, high reliability and high precision.

This article will take the familiar CPU as an example to introduce a CPU monitoring system based on HT, using JavaScript, WebGL and HTML5 technology.

In large data centers, real-time monitoring of CPU temperature, utilization, etc. is of great significance. Monitoring the CPU temperature at the server level can understand the temperature of the server's CPU in real time, discover energy efficiency problems in time, prevent service delays and server downtime, and save costs. Real-time monitoring of CPU usage, etc., can view the server's CPU usage in real time, and reasonably allocate server resources.

 

System preview

PC edge

3D dynamic visualization case preview address: https://www.hightopo.com/demos/index.html

Mobile

 

The scene in the Demo is built by a combination of 2D and 3D. The upper left data box of the mobile terminal displays the mobile phone gyroscope data, which is only displayed when the mobile terminal turns on the gyroscope.

 

Function realization

 

Determine the page open device

In the era of mobile Internet, building mobile and PC websites is of equal importance. Compared with the PC terminal, the mobile terminal can realize browsing, promotion and mobile marketing anytime and anywhere, so the system designed and developed by HT can be well compatible with mobile terminal access and display.

In order to bring a better user experience, Demo uses the userAgent property of the Navigator object to determine whether the user request comes from the PC or the mobile terminal, and do different animation processing and data display. The Navigator object contains information about the browser, and its userAgent attribute declares the value of the user agent header that the browser uses for HTTP requests. The following are the userAgent information printed on the Windows and Android sides.

 

 

Corresponding to the code, based on the userAgent attribute information, regular expressions are used to determine whether the request comes from the mobile terminal (mainly considering the Android and IOS terminals).

isMobile() {
    return (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent));
}

 

Animation principle

This Demo uses the built-in ht.Default.startAnim function of HT to generate animation. This function supports frame-based and time-based animation. I use the Time-Based method, that is, the user uses duration to specify the animation period (in milliseconds). The easing parameter is used to allow users to define functions and control animations through mathematical formulas, such as uniform changes, slow first and then fast effects. The first parameter v of the action function represents the value calculated by the easing(t) function, and t represents the progress of the current animation [0, 1]. The general property changes are carried out according to the v parameter. The finishFunc parameter represents the action after the animation ends. The startAnim function in this example uses the JSON parameter structure of the following structure:

ht.Default.startAnim({
    duration: 500, // 动画周期毫秒数
    easing: function (t) {}, // 动画缓动函数
    action: function (v, t) {…} // 动画过程属性变化
    finishFunc: function () {} // 动画结束后调用的函数
});

 

Rotate 180 degrees and raise the viewing angle

 

The angle of view in a 3D scene is determined by eye (camera position) and center (target position). Therefore, the change of the angle of view can change these two parameters. This Demo uses the built-in moveCamera method of HT to achieve. The animation uses the parameter equation of the circle to calculate the x value and z value of the eye to complete a 180 degree rotation. During the rotation, both the radius and the angle change with the change of t, and the range of angle change is [-Math.PI / 2, Math.PI / 2] through (t-0.5) * Math.PI. The parameter equation of the circle is as follows:

 

During the rotation process, the y value also changes with t, completing the improvement of the 3D scene angle of view. The finishFunc parameter is used to define the next animation to be called after the animation ends, to achieve multiple animation effects.

// 旋转 180 度并抬高视角
startRotationAnimation(onFinish) {    let that = this;    let r = 849
    ht.Default.startAnim({        duration: 6000,
        easing: function (t) { return t; },
        action: function (v, t) { // 圆的参数方程 半径和角度都在变
            let r1 = (1 - t) * r;
            let angle = (t - 0.5) * Math.PI;
            let x = r1 * Math.cos(angle);
            let z = r1 * Math.sin(angle);
            let y = 126 + (1968 - 126) * t * t * t;
            that.g3d.moveCamera([x, y, z]);        },        finishFunc: function () {
            if (!onFinish) {
                return;
            }            onFinish.call(that);        }    });}

When running the animation, it is necessary to delay the call of the other two animations to complete the lifting and disappearing of the CPU buckle, so that the animation can be staggered to achieve a better visual effect. This part uses ht.Default.callLater(func, scope, args, delay) to delay the call to the animation function, and the last parameter delay defines the delay time interval.

ht.Default.callLater(() => { this.startCap1Animation(); }, this, null, 500);
ht.Default.callLater(() => { this.startCap2Animation(); }, this, null, 1000);

 

Perspective switch

In this section, depending on whether the page is opened on the PC or the mobile phone, use the moveCamera method to switch to different perspectives. Take PC viewing angle switching as an example, get the camera position as the starting position through the getEye() method, and the ending position as a predefined value. Define the switching of the view angle from the start position to the end position through the action parameter.

// 视角切换
startMoveAngle3AnimationPC(onFinish) {    let startPos = this.g3d.getEye();    let endPos = [0, 728, 661];
    let that = this;    ht.Default.startAnim({        duration: 2000,
        easing: function (t) { return t * t; },
        action: function (v, t) {
            let x, y, z;            x = startPos[0] + (endPos[0] - startPos[0]) * t;
            y = startPos[1] + (endPos[1] - startPos[1]) * t;
            z = startPos[2] + (endPos[2] - startPos[2]) * t;
            that.g3d.moveCamera([x, y, z]);        },        finishFunc: function () {…}
    });}

 

CPU shell hidden animation

 

In order to bring better visual effects, use ht.Default.callLater() to delay calling the CPU shell hide animation while switching the perspective. Get the initial y coordinate of the shell in the 3D coordinate system through getElevation(), use the setElevation() method to set the y coordinate during the animation process, and set its visible property to false after the animation ends. code show as below:

easing: function (t) { return t * t; },
action: function (v, t) {
    let val = start + (end - start) * t; // start: 起始 y 坐标；end：终止 y 坐标
    that.hide1.setElevation(val);}finishFunc: function () {
    that.hide1.s('3d.visible', false);
}

 

Chip coming out and breathing light rendering

 

After the viewing angle is switched, the internal structure of the CPU gradually emerges while the CPU shell is hidden. Same as the shell hiding, this part is also completed by the setElevation method.

action: function (v, t) {
    let e = start1Y + (end1Y - start1Y) * t
    that.up1.setElevation(e);}

 

The interval between the animation of the chip and the emergence is 1s. The breathing light rendering animation is turned on. Use shape3d.blend and shape3d.opacity to set the coloring and transparency of the breathing light respectively.

easing: easing.easeBothStrong,
action: function (v, t) {
    let val = 255 - (255 - endBlend) * t;
    val = val.toFixed(0);
    let blend = 'rgb(' + val + ',' + val + ',' + val + ')';
    let opacity = startOpa + (endOpa - startOpa) * t
    that.blend.s('shape3d.blend', blend);
    that.opacity.s('shape3d.opacity', opacity);
}

 

This part of the animation uses the easeBothStrong method, that is, it starts slowly and decelerates, t to the fourth power, the code implementation is as follows:

easeBothStrong: function (t) {
    return (t *= 2) < 1 ?
        .5 * t * t * t * t :
        .5 * (2 - (t -= 2) * t * t * t);
}

 

End animation on PC

 

When the animation is over, the PC terminal resets the interactors, and starts the flow of the line and the rotation animation of the point on the ground.

startAnimation() {
    setInterval(() => {
        this.uvOffset = this.uvOffset + this.uvSpeed;
        this.line.s('top.uv.offset', [-this.uvOffset, 0]); // 线的流动
        this.rotationAngle = this.rotationSpeed + this.rotationAngle;
        this.flagReflection.setRotationY(this.rotationAngle); // 点位地面旋转
    }, 16.7);
}

 

After the mobile terminal animation is over, the mobile phone gyroscope data will be read and displayed. The specific principle and implementation are in the mobile phone sensor data part.

 

Mobile phone sensor data

HTML5 provides several DOM events to obtain information about the direction and movement of the mobile terminal. Deviceorientation provides the physical direction information of the device; Devicemotion provides the acceleration information of the device.

 

Handling orientation events

To receive device orientation change information, you need to register and listen for the deviceorientation event:

window.addEventListener('deviceorientation', (e) => {
    this.onOrientationEvent(e);
});

There are 3 important values ​​in the orientation event:

Property value meaning DeviceOrientationEvent.alpha When the device is placed horizontally, the rotation angle along the z axis, the range is [0,360]. DeviceOrientationEvent.beta When the device is placed horizontally, the rotation angle along the x axis, the range is [-180, 180]. DeviceOrientationEvent.gamma When the device is placed horizontally, the rotation angle along the y axis, the range is [-90, 90].

The following is a simple code for event handling:

onOrientationEvent(e) {
    let alpha, beta, gamma, compass;
    let compassFlag = true;
    alpha = e.alpha ? e.alpha : 0;
    beta = e.beta ? e.beta : 0;
    gamma = e.gamma ? e.gamma : 0;
}

It is worth noting that the alpha values ​​provided by IOS and Android for mobile phone hardware are not exactly the same, so you need to use the webkitCompassHeading property to determine whether it is IOS or Android. When webkitCompassHeading is not empty, it means IOS system.

 

Handling motion events

Similar to the direction event processing, the mobile event processing is also the first to register and listen to devicemotion:

window.addEventListener('devicemotion', (e) => {
    this.dataTextarea.s('2d.visible', true);
    this.onMotionEvent(e);
});

The mobile event contains 4 attributes:

Property value meaning DeviceMotionEvent.acceleration acceleration, which needs gyroscope support. DeviceMotionEvent.accelerationIncludingGravity gravity acceleration. DeviceMotionEvent.rotationRate rotation speed. DeviceMotionEvent.interval The frequency at which data is obtained from the device, in milliseconds.

The following is the simple code of the event:

onMotionEvent(e) {
    let MAX1 = 2;
    let MAX2 = 5;
    this.acceleration = e.acceleration.x ? e.acceleration : {
        x: 0,
        y: 0,
        z: 0
    };
    this.accGravity = e.accelerationIncludingGravity.x ? e.accelerationIncludingGravity : {
        x: 0,
        y: 0,
        z: 0
    };
    this.rotationRate = e.rotationRate.alpha ? e.rotationRate : {
        alpha: 0,
        beta: 0,
        gamma: 0
    };
    this.interval = e.interval;
}

 

to sum up

A strong chip means a strong industry. With the development of 5G technology, Internet of Things and artificial intelligence, integrated circuits, as the most important and most basic technology, will surely develop faster. With the rapid development of the domestic information industry, independent research and development of a good Chinese "core" is imminent. This article uses the well-known CPU as an example to introduce the application of HT in the microcosm. If you have more in-depth needs and better ideas, you are welcome to raise them. We will discuss in-depth, and we can also customize differentiated services.