기술 변화의 삶 : 지능형 제조 3D 시각화의 CPU 시뮬레이션 (코드 기사)

머리말

기술은 삶을 변화시키고 기술의 발전은 생활 방식에 엄청난 변화를 가져 왔습니다. 통신 기술의 지속적인 진화와 함께 5G 기술은 역사적인 순간에 등장했으며 언제 어디서나 모든 것이 상호 연결되는 시대가 도래했습니다. 5G 기술은 더 빠른 연결 속도와 전례없는 사용자 경험을 제공 할뿐만 아니라 제조, 마이크로 일렉트로닉스 및 집적 회로 개발에 막대한 개발 기회와 과제를 제공합니다. 5G 기술의 상업적 구현에서 5G 네트워크 칩은 낮은 전력 소비, 낮은 대기 시간, 높은 신뢰성 및 고정밀이라는 기술적 과제에 직면 해 있습니다.

이 기사에서는 익숙한 CPU를 예로 들어 JavaScript, WebGL 및 HTML5 기술을 사용하는 HT 기반 CPU 모니터링 시스템을 소개합니다.

대규모 데이터 센터에서는 CPU 온도, 사용률 등의 실시간 모니터링이 매우 중요합니다. 서버 수준에서 CPU 온도를 모니터링하면 서버의 CPU 온도를 실시간으로 파악하고, 적시에 에너지 효율성 문제를 발견하고, 서비스 지연 및 서버 다운 타임을 방지하고, 비용을 절감 할 수 있습니다. 실시간 CPU 사용량 모니터링 등을 통해 서버의 CPU 사용량을 실시간으로 확인하고 서버 자원을 합리적으로 할당 할 수 있습니다.

 

시스템 미리보기

PC 단

3D 동적 시각화 사례 미리보기 주소 : https://www.hightopo.com/demos/index.html

변하기 쉬운

 

데모의 장면은 2D와 3D의 조합으로 구성되어 있으며, 이동 단말기의 왼쪽 상단 데이터 상자에는 이동 단말기가 자이로 스코프를 켰을 때만 표시되는 휴대폰 자이로 스코프 데이터가 표시됩니다.

 

기능 실현

 

페이지 열기 장치 결정

모바일 인터넷 시대에 모바일 및 PC 웹 사이트 구축은 똑같이 중요합니다. PC 단말기에 비해 이동 단말기는 언제 어디서나 브라우징, 프로모션, 모바일 마케팅을 실현할 수있어 HT가 설계하고 개발 한 시스템은 이동 단말기 접속 및 디스플레이와 잘 호환 될 수 있습니다.

더 나은 사용자 경험을 제공하기 위해 Demo는 Navigator 개체의 userAgent 속성을 사용하여 사용자 요청이 PC 또는 모바일 터미널에서 오는지 확인하고 다른 애니메이션 처리 및 데이터 표시를 수행합니다. Navigator 개체에는 브라우저에 대한 정보가 포함되어 있으며 해당 userAgent 속성은 브라우저가 HTTP 요청에 사용하는 사용자 에이전트 헤더의 값을 선언합니다. 다음은 Windows 및 Android 측에 인쇄 된 userAgent 정보입니다.

 

 

코드에 해당하는 userAgent 속성 정보를 기반으로 정규식을 사용하여 요청이 모바일 터미널에서 오는지 여부를 확인합니다 (주로 Android 및 IOS 터미널 고려).

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

 

애니메이션 원리

이 데모는 HT의 내장 ht.Default.startAnim 함수를 사용하여 애니메이션을 생성하며, 프레임 기반 및 시간 기반 애니메이션을 지원합니다. 저는 시간 기반 방법을 사용합니다. 즉, 사용자가 기간을 사용하여 애니메이션 기간 (밀리 초)을 지정합니다. 여유 매개 변수는 사용자가 균일 한 변경, 느린 우선 및 빠른 효과와 같은 수학 공식을 통해 함수를 정의하고 애니메이션을 제어 할 수 있도록하는 데 사용됩니다. 액션 함수의 첫 번째 매개 변수 v는 easing (t) 함수로 계산 된 값을 나타내고 t는 현재 애니메이션의 진행률 [0, 1]을 나타내며 일반적인 속성 변경은 v 매개 변수에 따라 수행됩니다. finishFunc 매개 변수는 애니메이션이 종료 된 후의 작업을 나타냅니다. 이 예제의 startAnim 함수는 다음 구조의 JSON 매개 변수 구조를 사용합니다.

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

 

180도 회전하고 시야각 높이기

 

3D 장면의 화각은 눈 (카메라 위치)과 중심 (타겟 위치)에 의해 결정되므로 화각을 변경하면이 두 매개 변수를 변경할 수 있습니다.이 데모에서는 HT의 내장 된 moveCamera 방법을 사용하여 달성합니다. 애니메이션은 원의 매개 변수 방정식을 사용하여 눈의 x 값과 z 값을 계산하여 180도 회전을 완료합니다. 회전하는 동안 t의 변화에 ​​따라 반경과 각도가 모두 변하고 각도 변화의 범위는 [-Math.PI / 2, Math.PI / 2]에서 (t-0.5) * Math.PI까지입니다. 원의 매개 변수 방정식은 다음과 같습니다.

 

회전하는 동안 y 값도 t에 따라 변경되어 3D 장면의 화각이 향상됩니다. finishFunc 매개 변수는 여러 애니메이션 효과를 얻기 위해 애니메이션이 끝난 후 호출 할 다음 애니메이션을 정의하는 데 사용됩니다.

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

애니메이션을 실행할 때 다른 두 애니메이션의 호출을 지연하여 CPU 버클을 들어 올리고 사라지게하여 더 나은 시각 효과를 얻기 위해 애니메이션을 엇갈리게 할 수 있도록해야합니다. 이 부분은 ht.Default.callLater (func, scope, args, delay)를 사용하여 애니메이션 함수 호출을 지연시키고 마지막 매개 변수 delay는 지연 시간 간격을 정의합니다.

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

 

원근 스위치

이 섹션에서는 페이지가 PC 또는 휴대폰에서 열리는 지 여부에 따라 moveCamera 메서드를 사용하여 다른 관점으로 전환합니다. PC 시야각 전환을 예로 들어서 getEye () 메서드를 통해 카메라 위치를 시작 위치로, 종료 위치를 미리 정의 된 값으로 가져옵니다. 동작 매개 변수를 통해 시작 위치에서 끝 위치로의 시야각 전환을 정의합니다.

// 视角切换
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 쉘 숨겨진 애니메이션

 

더 나은 시각 효과를 가져 오려면 ht.Default.callLater ()를 사용하여 관점을 전환하는 동안 CPU 쉘 숨기기 애니메이션 호출을 지연하십시오. getElevation ()을 통해 3D 좌표계에서 쉘의 초기 y 좌표를 가져오고, setElevation () 메서드를 사용하여 애니메이션 중에 y 좌표를 설정하고, 애니메이션이 종료 된 후 visible 속성을 false로 설정합니다. 코드 쇼 :

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

 

칩이 나오고 숨쉬는 빛 렌더링

 

시야각이 전환 된 후 CPU 쉘이 숨겨진 상태에서 CPU의 내부 구조가 점차 나타납니다. 쉘 숨김과 동일하게이 부분도 setElevation 메소드로 완성됩니다.

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

 

칩의 애니메이션과 출현 사이의 간격은 1 초입니다. 호흡 광 렌더링 애니메이션이 켜져 있습니다. shape3d.blend 및 shape3d.opacity를 사용하여 호흡 광의 색상과 투명도를 각각 설정합니다.

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

 

애니메이션의이 부분은 easeBothStrong 메서드를 사용합니다. 즉, 느리게 시작하고 t를 4 승으로 감속합니다. 코드 구현은 다음과 같습니다.

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

 

PC에서 애니메이션 종료

 

애니메이션이 끝나면 PC 터미널은 인터랙 터를 재설정하고 선의 흐름과 지상 점의 회전 애니메이션을 시작합니다.

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

 

휴대 단말 애니메이션이 끝나면 휴대 전화 자이로 스코프 데이터를 읽고 표시하며 구체적인 원리와 구현은 휴대 전화 센서 데이터 부분에 있습니다.

 

휴대폰 센서 데이터

HTML5는 이동 단말기의 방향 및 이동에 대한 정보를 얻기 위해 여러 DOM 이벤트를 제공합니다. Deviceorientation은 장치의 물리적 방향 정보를 제공하고 Devicemotion은 장치의 가속 정보를 제공합니다.

 

오리엔테이션 이벤트 처리

장치 방향 변경 정보를 받으려면 장치 방향 이벤트를 등록하고 수신해야합니다.

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

오리엔테이션 이벤트에는 세 가지 중요한 값이 있습니다.

속성 값 의미 DeviceOrientationEvent.alpha 장치를 수평으로 배치했을 때 z 축의 회전 각도 범위는 [0,360]입니다. DeviceOrientationEvent.beta 장치를 수평으로 배치 할 때 x 축을 따른 회전 각도 범위는 [-180, 180]입니다. DeviceOrientationEvent.gamma 장치를 수평으로 배치 할 때 y 축의 회전 각도 범위는 [-90, 90]입니다.

다음은 이벤트 처리를위한 간단한 코드입니다.

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

IOS 및 Android에서 휴대 전화 하드웨어 용으로 제공하는 알파 값이 정확히 동일하지 않으므로 webkitCompassHeading 속성을 사용하여 IOS인지 Android인지 확인해야합니다. webkitCompassHeading이 비어 있지 않으면 IOS 시스템을 의미합니다.

 

모션 이벤트 처리

방향 이벤트 처리와 유사하게, 모바일 이벤트 처리는 devicemotion을 가장 먼저 등록하고 수신합니다.

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

모바일 이벤트에는 4 개의 속성이 있습니다.

자이로 스코프 지원이 필요한 DeviceMotionEvent.acceleration 가속을 의미하는 속성 값입니다. DeviceMotionEvent.accelerationIncludingGravity 중력 가속. DeviceMotionEvent.rotationRate 회전 속도입니다. DeviceMotionEvent.interval 장치에서 데이터를 가져 오는 빈도 (밀리 초)입니다.

다음은 이벤트의 간단한 코드입니다.

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

 

요약하자면

강력한 칩은 강력한 산업을 의미합니다. 5G 기술, 사물 인터넷, 인공 지능의 발달로 가장 중요하고 가장 기초적인 기술인 집적 회로는 확실히 더 빨리 발전 할 것입니다. 국내 정보 산업의 급속한 발전과 더불어 좋은 중국 "핵심"에 대한 독자적인 연구 개발이 임박했다. 이 기사에서는 잘 알려진 CPU를 예로 들어 소우주에서 HT를 적용하는 방법을 소개합니다. 더 심층적 인 요구 사항과 더 나은 아이디어가 있다면 언제든지 제기 할 수 있습니다. 심도있게 논의하고 차별화 된 서비스를 맞춤화 할 수도 있습니다.