HTML5WebGLに基づくCPUシミュレーションの3D視覚化

序文

テクノロジーは人生を変え、テクノロジーの発展はライフスタイルに大きな変化をもたらしました。通信技術の絶え間ない進化により、5G技術は歴史的な瞬間に出現し、いつでもどこでもすべてを相互接続する時代が到来しました。5Gテクノロジーは、接続速度の高速化と前例のないユーザーエクスペリエンスをもたらすだけでなく、製造、マイクロエレクトロニクス、および集積回路の開発に大きな開発機会と課題をもたらします。5Gテクノロジーの商用実装では、5Gネットワ​​ークチップは、低消費電力、低遅延、高信頼性、高精度という技術的な課題に直面しています。

この記事では、おなじみのCPUを例として取り上げ、JavaScript、WebGL、およびHTML5テクノロジを使用したTupuソフトウェアHTに基づくCPU監視システムを紹介します。

大規模なデータセンターでは、CPUの温度や使用率などをリアルタイムで監視することが非常に重要です。サーバーレベルでCPU温度を監視することで、サーバーCPUの温度をリアルタイムで理解し、エネルギー効率の問題を時間内に発見し、サービスの遅延とサーバーのダウンタイムを防ぎ、コストを節約できます。CPU使用率などのリアルタイム監視により、サーバーのCPU使用率をリアルタイムで確認し、サーバーリソースを合理的に割り当てることができます。

システムプレビュー

PC 端

3D視覚化動的ケースプレビュー/トライアルアドレス：https：//www.hightopo.com/demos/index.html

モバイル

 

デモのシーンは、2Dと3Dの組み合わせで作成されています。モバイル端末の左上のデータボックスには、モバイル端末がジャイロスコープをオンにしたときにのみ表示される携帯電話のジャイロスコープデータが表示されます。

 

機能実現

 

ページを開くデバイスを決定する

モバイルインターネットの時代では、モバイルWebサイトとPCWebサイトの構築も同様に重要です。PC端末と比較して、モバイル端末はいつでもどこでもブラウジング、プロモーション、モバイルマーケティングを実現できるため、HTが設計および開発したシステムは、モバイル端末のアクセスと表示との互換性があります。

より良いユーザーエクスペリエンスを提供するために、デモでは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シーンの視野角は、目（カメラの位置）と中心（ターゲットの位置）によって決まります。したがって、視野角を変更すると、これら2つのパラメーターが変わる可能性があります。このデモでは、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);        }    });}

アニメーションを実行するときは、他の2つのアニメーションの呼び出しを遅らせて、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);
});

オリエンテーションイベントには3つの重要な値があります：

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システムを意味します。

 

モーションイベントの処理

方向イベント処理と同様に、モバイルイベント処理も最初に登録してデバイスモーションをリッスンします。

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

モバイルイベントには、次の4つの属性が含まれています。

ジャイロスコープのサポートが必要なDeviceMotionEvent.accelerationアクセラレーションを意味するプロパティ値。DeviceMotionEvent.accelerationInclusiveGravity重力加速。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テクノロジー、Internet of Things、人工知能の開発により、最も重要で最も基本的なテクノロジーとしての集積回路は、確実により速く開発されます。国内情報産業の急速な発展に伴い、優れた中国の「コア」の独立した研究開発が差し迫っています。この記事では、よく知られているCPUを例として使用して、小宇宙でのHTのアプリケーションを紹介します。より詳細なニーズとより良いアイデアがあれば、それらを提起してください。詳細に説明し、差別化されたサービスをカスタマイズすることもできます。