La tecnología cambia la vida: simulación de CPU de visualización 3D de fabricación inteligente (artículo de código)

Prefacio

La tecnología cambia la vida y el desarrollo de la tecnología ha traído enormes cambios en el estilo de vida. Con la evolución continua de la tecnología de la comunicación, la tecnología 5G ha surgido según lo requieren los tiempos, y ha llegado la era de la interconexión de todo en cualquier momento y lugar. La tecnología 5G no solo brinda una velocidad de conexión más rápida y una experiencia de usuario sin precedentes, sino que también brinda enormes oportunidades de desarrollo y desafíos para el desarrollo de la fabricación, la microelectrónica y los circuitos integrados. En la implementación comercial de la tecnología 5G, los chips de red 5G enfrentan desafíos técnicos de bajo consumo de energía, baja latencia, alta confiabilidad y alta precisión.

Este artículo tomará la CPU familiar como ejemplo para presentar un sistema de monitoreo de CPU basado en HT, usando tecnología JavaScript, WebGL y HTML5.

En los grandes centros de datos, la monitorización en tiempo real de la temperatura, la utilización, etc. de la CPU es de gran importancia. Monitorear la temperatura de la CPU a nivel del servidor puede comprender la temperatura de la CPU del servidor en tiempo real, descubrir problemas de eficiencia energética a tiempo, evitar retrasos en el servicio y tiempo de inactividad del servidor y ahorrar costos. El monitoreo en tiempo real del uso de la CPU, etc., puede ver el uso de la CPU del servidor en tiempo real y asignar razonablemente los recursos del servidor.

 

Vista previa del sistema

Borde de la PC

Dirección de vista previa del caso de visualización dinámica 3D: https://www.hightopo.com/demos/index.html

Móvil

 

La escena en la demostración se construye mediante una combinación de 2D y 3D. El cuadro de datos superior izquierdo del terminal móvil muestra los datos del giroscopio del teléfono móvil, que solo se muestran cuando el terminal móvil enciende el giroscopio.

 

Realización de funciones

 

Determinar el dispositivo de apertura de la página

En la era de Internet móvil, la creación de sitios web para dispositivos móviles y PC es de igual importancia. En comparación con el terminal de PC, el terminal móvil puede realizar navegación, promoción y marketing móvil en cualquier momento y en cualquier lugar, por lo que el sistema diseñado y desarrollado por HT puede ser compatible con el acceso y la visualización de terminales móviles.

Para brindar una mejor experiencia al usuario, Demo utiliza la propiedad userAgent del objeto Navigator para determinar si la solicitud del usuario proviene de la PC o del terminal móvil, y realiza diferentes procesamientos de animación y visualización de datos. El objeto Navigator contiene información sobre el navegador y su atributo userAgent declara el valor del encabezado del agente de usuario que utiliza el navegador para las solicitudes HTTP. A continuación, se muestra la información del agente de usuario impresa en los lados de Windows y Android.

 

 

En correspondencia con el código, basado en la información del atributo userAgent, use expresiones regulares para determinar si la solicitud proviene del terminal móvil (considerando principalmente los terminales Android e IOS).

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

 

Principio de animación

Esta demostración utiliza la función ht.Default.startAnim incorporada de HT para generar animación. Esta función es compatible con la animación basada en cuadros y en el tiempo. Yo uso el método basado en el tiempo, es decir, el usuario usa la duración para especificar el período de animación (en milisegundos). El parámetro de aceleración se utiliza para permitir a los usuarios definir funciones y controlar animaciones a través de fórmulas matemáticas, como cambios uniformes, efectos primero lentos y luego rápidos. El primer parámetro v de la función action representa el valor calculado por la función easing (t) y t representa el progreso de la animación actual [0, 1] Los cambios generales de propiedad se llevan a cabo de acuerdo con el parámetro v. El parámetro finishFunc representa la acción después de que finaliza la animación. La función startAnim en este ejemplo usa la estructura de parámetros JSON de la siguiente estructura:

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

 

Gire 180 grados y aumente el ángulo de visión

 

El ángulo de visión en una escena 3D está determinado por el ojo (posición de la cámara) y el centro (posición del objetivo). Por lo tanto, el cambio del ángulo de visión puede cambiar estos dos parámetros. Esta demostración utiliza el método moveCamera integrado de HT para lograrlo. La animación utiliza la ecuación de parámetro del círculo para calcular el valor xy el valor z del ojo para completar una rotación de 180 grados. Durante la rotación, tanto el radio como el ángulo cambian con el cambio de t, y el rango de cambio de ángulo es [-Math.PI / 2, Math.PI / 2] hasta (t-0.5) * Math.PI. La ecuación de parámetros del círculo es la siguiente:

 

Durante la rotación, el valor de y también cambia con t, completando la mejora del ángulo de visión de la escena 3D. El parámetro finishFunc se usa para definir la próxima animación que se llamará después de que finalice la animación, para lograr múltiples efectos de animación.

// 旋转 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);        }    });}

Al ejecutar la animación, es necesario retrasar la llamada de las otras dos animaciones para completar el levantamiento y desaparición de la hebilla de la CPU, de modo que la animación se pueda escalonar para lograr un mejor efecto visual. Esta parte usa ht.Default.callLater (func, scope, args, delay) para retrasar la llamada a la función de animación, y el último parámetro delay define el intervalo de tiempo de retraso.

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

 

Interruptor de perspectiva

En esta parte, dependiendo de si la página se abre en la PC o en el móvil, use el método moveCamera para cambiar a diferentes perspectivas. Tome el interruptor del ángulo de visión de la PC como ejemplo, obtenga la posición de la cámara como la posición inicial a través del método getEye () y la posición final como un valor predefinido. Defina el cambio del ángulo de visión desde la posición inicial a la posición final a través del parámetro de acción.

// 视角切换
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 () {…}
    });}

 

Animación oculta del shell de la CPU

 

Para traer mejores efectos visuales, use ht.Default.callLater () para retrasar la llamada para ocultar la animación del shell de la CPU mientras cambia la perspectiva. Obtenga la coordenada y inicial del caparazón en el sistema de coordenadas 3D a través de getElevation (), use el método setElevation () para establecer la coordenada y durante el proceso de animación, y establezca su propiedad visible en falso después de que finalice la animación. el código se muestra a continuación:

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 saliendo y respirando renderizado de luz

 

Una vez que se cambia el ángulo de visión, la estructura interna de la CPU emerge gradualmente mientras que la carcasa de la CPU está oculta. Al igual que la ocultación de la cáscara, esta parte también se completa con el método setElevation.

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

 

El intervalo entre la animación del chip y la aparición es 1s. La animación de renderizado de luz de respiración está activada. Utilice shape3d.blend y shape3d.opacity para establecer el color y la transparencia de la luz de respiración respectivamente.

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);
}

 

Esta parte de la animación usa el método easyBothStrong, es decir, comienza lentamente y desacelera, t a la cuarta potencia, la implementación del código es la siguiente:

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

 

Finalizar animación en PC

 

Cuando finaliza la animación, el terminal de PC reinicia los interactores e inicia el flujo de la línea y la animación de rotación del punto en el suelo.

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);
}

 

Una vez finalizada la animación del terminal móvil, se leerán y mostrarán los datos del giroscopio del teléfono móvil. El principio y la implementación específicos se encuentran en la parte de datos del sensor del teléfono móvil.

 

Datos del sensor del teléfono móvil

HTML5 proporciona varios eventos DOM para obtener información sobre la dirección y el movimiento del terminal móvil. Deviceorientation proporciona la información de dirección física del dispositivo; Devicemotion proporciona la información de aceleración del dispositivo.

 

Manejo de eventos de orientación

Para recibir información sobre el cambio de orientación del dispositivo, debe registrarse y escuchar el evento de orientación del dispositivo:

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

Hay 3 valores importantes en el evento de orientación:

Valor de propiedad que significa DeviceOrientationEvent.alpha Cuando el dispositivo se coloca horizontalmente, el ángulo de rotación a lo largo del eje z, el rango es [0,360]. DeviceOrientationEvent.beta Cuando el dispositivo se coloca horizontalmente, el ángulo de rotación a lo largo del eje x, el rango es [-180, 180]. DeviceOrientationEvent.gamma Cuando el dispositivo se coloca horizontalmente, el ángulo de rotación a lo largo del eje y, el rango es [-90, 90].

El siguiente es un código simple para el manejo de eventos:

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;
}

Vale la pena señalar que los valores alfa proporcionados por IOS y Android para el hardware de teléfonos móviles no son exactamente los mismos, por lo que debe usar la propiedad webkitCompassHeading para determinar si es IOS o Android. Cuando webkitCompassHeading no está vacío, significa sistema IOS.

 

Manejo de eventos de movimiento

Similar al procesamiento de eventos de dirección, el procesamiento de eventos móviles también es el primero en registrarse y escuchar el movimiento del dispositivo:

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

El evento móvil contiene 4 atributos:

Valor de propiedad que significa DeviceMotionEvent.acceleration aceleración, que necesita soporte de giroscopio. DeviceMotionEvent.accelerationIncluyendoGravity aceleración por gravedad. DeviceMotionEvent.rotationRate velocidad de rotación. DeviceMotionEvent.interval La frecuencia a la que se obtienen los datos del dispositivo, en milisegundos.

El siguiente es el código simple del evento:

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;
}

 

para resumir

Un chip fuerte significa una industria fuerte. Con el desarrollo de la tecnología 5G, el Internet de las cosas y la inteligencia artificial, los circuitos integrados, como la tecnología más importante y básica, seguramente se desarrollarán más rápido. Con el rápido desarrollo de la industria de la información nacional, la investigación independiente y el desarrollo de un buen "núcleo" chino es inminente. Este artículo utiliza la conocida CPU como ejemplo para introducir la aplicación de HT en el microcosmos. Si tiene necesidades más profundas y mejores ideas, puede plantearlas. Discutiremos en profundidad y también podemos personalizar servicios diferenciados.