最も美しい HTML5 3D コンピューター ルームを作成する (MONO が強力なリターンと驚異的なリリースで第 4 シーズンに戻ってきます)_html/css_WEB-ITnose

はじめに

初対面の皆さん、こんにちは。簡単に自己紹介をさせてください。私はモノ兄弟、男性、趣味人です。 。 。プログラミングに関しては、1 年以上前に HTML5 と WebGL の落とし穴に落ちて以来、一度も這い上がることができず、現在 3D コンピューター室と関連する 3D アプリケーションを勉強しています。この記事は「最も美しい 3D コンピューター ルームの構築」シリーズの第 4 シーズンです。興味のある方は最初からご覧ください:

HTML5 は見た目が美しいだけではありません (第 1 弾: Rainbow)。爆発写真)

HTML5、見た目が美しいだけじゃない (パート 2: 最も美しい 3D コンピューター室を作成する)

最も美しい HTML5 3D コンピューター室を作成する (シーズン 2)

最も美しい HTML5 3D コンピューター室を作成する (シーズン 3) )

HTML5 ではなく、見た目が美しいだけです (パート 3: トポロジカル マップのグループ化)

1 年以上作成した後、自分の作品もタイムライン上で整理する必要があるとは思いませんでした。ドラゴンボートフェスティバルで順番にクリアしたばかりのX-MENシリーズ？しかし、約束します、この記事はマット・アポカリプスを殺すよりもはるかに優れており、少なくともウルヴァリンと同じくらい強いです。

-------------------------------------------------うわははは、お兄さんはBGMを自作する男です ----------------------------------------------- ------

昔を思い出して

とりとめのない話をした後、再会した観客の友人たちに私が言いたいことはすべて下の写真にあります:

半分以上経って。 1年間のブランクがありましたが、実は私は怠けているわけではなく、大きな動きを抑えています。この間、友人たちから次々とメッセージや手紙をいただき、プロジェクトも大きく前進しましたので、それを以下の記事でシェアさせていただきます。

読者の質問に答える

これ以上ナンセンスはやめて、本題に入りましょう。まず最初に、私が最近皆さんと話し合っている質問について話したいと思います。「HTML5 が優れているのか、それともプラグインが優れているのか?」

勉強しているかプロジェクトに取り組んでいるかに関係なく、何人かの友人がこの問題について言及しました。 web3d 技術は隆盛を極めていますが、大きくはプラグイン派と HTML5 派の 2 つに分かれています。プラグイン派の技術ルートは、ブラウザに同社製のプラグインをインストールし、そのプラグイン上で3D開発機能を提供するというものだ。代表的なものとしては、FlashプラグインやUnity3Dプラグイン（略してU3D）などがあります。もう 1 つの流派は、プラグイン不要の HTML5 ルートです。これは、H5 の WEBGL 標準と Canvas テクノロジを使用して、プラグインをインストールせずにブラウザに 3D/2D テクノロジを実装します。

このプラグインの利点は、さまざまな古いブラウザ (古いバージョンの IE など) に適応できることであり、効率が向上するはずです。欠点は、プラグインをインストールする必要があり、携帯電話とタブレットをまたいで使用するには、プラグインに必要な言語を使用する必要があるという点です。 HTML5 の利点は、プラグインのインストールが必要ないこと、効率が非常に良いこと、言語がシンプルで統一されていること、すべてが JavaScript であること、そして現在最もホットな技術方向であることです。

私は「プラグインは死ななければならない」という開発トレンドを信じています。納得できない場合は、Flash と、Flex テクノロジの罠にはまり、未だにそこから抜け出すことができないプログラマを見てください。彼らは、他人が HTML5 を学び、高給を得ているのを見て、うんざりしています。 Unity3D がいつか別の Flash にならないと誰が保証できますか?日々出現する HTML5 テクノロジとアプリケーションの急速な発展を見ていると、プラグインと H5 のどちらが優れているのかなど、退屈な問題について議論する時間は十分にあるので、本題に取り掛かったほうがよいでしょう。合意に達したら、この大きなアップデートの波を見てみましょう。

Eagle Eye

前回の小コンピューター室の機能は基本的に完成しており、お客様もデモンストレーション効果に非常に満足しております。お客様は以前弊社が構築した2Dシステムを利用されており、イーグルアイ機能（つまりサムネイル）をご覧になっていたため、今回も迷わず3D計算機室監視インターフェースにイーグルアイ機能の追加をご要望いただきました。これはしばらくの間困難でした。

アイデアを見つけるために、まず以前に作成した 2D トポロジー マップを開いてインスピレーションを探しました。 Eagle Eye は次のようになります。

上記のインターフェイスは、顧客のために同僚が作成した仮想マシンのアクティブ化と構成のための編集インターフェイスです。右下隅のビューは Eagle Eye のサムネイルです。同僚に相談したところ、2D で Eagle Eye を実装する場合は、2D の大きな画像のメモリ サムネイルを作成して、それを Eagle Eye ビューに更新するか、大きな画像で属性の変更が発生したときに監視することを検討できると言いました。 Eagle Eye ビューを更新するサムネイルを動的に生成します。ただし、3D では異なります。小さいサイズの WebGL キャンバスを作成し、リアルタイムで更新する場合、負荷は大きくならないはずです。そこで、右下隅に新しいネットワークを試してみることにしました。

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

同時に、カメラを頭の上に固定し、垂直に下を向いて、マウス操作機構を削除しました。何度も試行錯誤した結果、最終的に効果を確認するために大きなシーン キャンバスの右下に鷲の目のキャンバスを配置しました:

デバイス エディタ

このプロジェクトには 200 以上の異なるデバイスがあると言われています、各デバイス パネルはすべて異なります。各デバイスをモデリングするのは純粋に物理的な作業ではないでしょうか。アートチームに任せたとしても工数がかかり、モデルの再利用性も高くありません。慎重に検討した結果、プロジェクト チームはデバイス パネル用のエディタを緊急に開発しました。これにより、この問題はうまく解決されました。標準的なラックデバイスを例として試してみましたが、それでも非常に高速でした:

エディターに共通のポートやパネルが全て用意されており、ドラッグして位置合わせしてロゴを配置すれば、すぐにまともなスイッチが登場します。ボタンをクリックして json をエクスポートし、プロジェクトで直接使用できます。もちろん、ここでの私の使用法は、機器をキャビネットに置き続けることです。ラックエディターは私が開発したもので、効果は同様です。デザインした機器をキャビネットの位置に直接ドラッグアンドドロップできます。

次に、キャビネットを部屋にドラッグし、部屋の形状を決定します。 :

3D ボタンを直接クリックしてプレビューします:

ちなみに、ここで注意すべきことは、通常、キャビネットの列には専用のコラム キャビネットが装備されていることです。回路やその他の情報を制御するための回路構成がポップアップ表示されます。 インターフェイス:

このインターフェイスには、ドラッグ アンド ドロップで直接生​​成できるエディターもあり、より便利だと言われています。

その他のシーン

実際、キャビネット シーンの編集では、モデルを少し変更するだけで他の業界でも使用できます。

3D Warehouse

たとえば、キャビネットを棚に、サーバーを商品に、簡単なドラッグ アンド ドロップで、何が起こるでしょうか?それは想像できるでしょう。

3D ファクトリー

生産および加工ワークショップでキャビネットを工作機械に変えて、ドラッグ アンド ドロップしてアラーム情報を追加するだけで、どのようなものになるかを想像し続けてください。

3D 変電所

もう 1 つの例は、シーン内のモデルを変電所内の変圧器、建物、ガントリーなどに置き換え、アラームやインタラクションを追加する屋外変電所監視アプリケーションではないでしょうか。

3Dガソリンスタンド

モデルをガソリンスタンドに変更すると、ガソリンスタンドのSCADAと監視アプリケーションになります:

3D産業制御アプリケーション

もちろん、接続されていれば、ハードウェアは業界で使用できます さまざまな検出と制御:

もちろん、自動制御アプリケーションにはデータの収集、保存と転送、クラウドプラットフォームの構成システムなどのコンテンツが必要になる場合については、別の記事を書きます。将来的にはチャンスがあります。

パイプライン

コンピューター室には、ネットワーク ケーブル、光ファイバー、一部のビジネス接続関係など、多くの物理的または論理的なリンク情報があります。これらのパイプラインをコンピューター ルームに表示するには、パイプラインをモデル化し、保存し、表示する必要があります。表示部分では、最適なルートを見つけるための簡単な空間自動パスを作成し、A 側と Z 側の機器の外側のオブジェクトをぼかしてパイプラインをより明確に表示しました。

フロア間リンクの場合

会議室

顧客の要件に従って、会議室のシーンもモデル化する必要があります。同僚が現場で写真を撮って検査した後、会議室の構造は複雑ではなかったので、それでもアーティストの妹に作業を任せて、すぐに会議室のモデルを完成させました:

もちろん、ここでのシーンは次のとおりです。プロジェクターをダブルクリックして、ドアをダブルクリックして開くように指示することもできます。これは、モデル内のアクションを分割して定義しているためです。

例えば、下の壁にあるテレビ画面をダブルクリックすると、コンピュータ室の統計情報グラフが表示されます。

画面上の統計グラフをダブルクリックし続けると、対話用の 2D 統計グラフ プログラム インターフェイスが直接表示されます。

これは、HTML5 の 2D テクノロジーと 3D テクノロジーを使用するハイブリッドの利点でもあります。

公園

お客様は、コンピューター室がある公園もシーンに追加するようにとのご要望でしたが、よく考えれば当然のことです。プロジェクトが大規模になると、コンピューター ルームが複数の建物の異なるフロアに分散され、それを表示するには、3D パノラマ シーンを入力する必要があります。これはそれほど難しいことではありません。アーティストの女の子に助けを求めてください。女の子は開発者よりも早く、数時間以内に 3D Max でまったく新しいプロパティが誕生しました。 obj を変換し、システムにインポートし、すぐにブラウザを開いて効果を確認します。

ここでの経験の 1 つは、ダブルクリックして建物に入ることを可能にしたい場合は、建物を個別のモデルに分割する必要があるということです。イベントをロードして監視します。

地球

問題が再び起こります。お客様は、北京、上海など全国に多数のコンピュータ室があり、それらを統一的に表示、管理する必要があると述べました。もはや公園だけでは十分ではなく、全国地図が必要なようです。数日後に顧客が米国に別のコンピューター室があると言ったらどうなるでしょうか?ワンステップで地球全体を直接表示するだけです。顧客が火星のホテルの部屋を求めてくるまで待ちましょう。

3D で地球を作成するのはとても簡単で便利です。テクスチャとハローを追加すると、数分で完成します。

次に、中国の地域を強調表示して、我が国の地位を強調します。この方法では、以下に示すように、中国の透明な地図輪郭を準備します。

次に、その地図をテクスチャとして地球上に重ね合わせ、位置を調整します。

次に、いくつかのデータセンター ノードを作成します。小さなボールを使うだけ！

退屈にならないように、データセンターの接続は流れるようなアニメーションで表示され、回転する光る効果を生み出すために、各データセンターがより鮮やかに見えます。

もちろん、私たちのプロジェクトの最終的な効果は次のとおりです:

あなたはすぐに優越感を感じますか?これはまだ完成していません。別の同僚が私のコードを利用して、厄介なエフェクトを追加して、次のようになりました。

主に、いくつかの地理的なホットスポット、地球を周回する衛星、および弾道ミサイル攻撃のアニメーションを追加しました。某国防部隊ではこのような表示方法が必要だそうですが、詳細は分かりません、要するにSFっぽい感じです。

弾道攻撃のエフェクトと言えば、プロジェクト内の別のネットワーク攻撃表示インターフェイスを思い出します。これも非常に興味深いものです。2D ですが、優れたアニメーション効果もあります。

ここの爆発エフェクトと弾道エフェクト。ブラー、グラデーションなど、HTML5 キャンバスでの一部の 2D API 描画がすべて使用されます。 2D+3D を使用してネットワーク攻撃を表現するのは非常に直感的です。ネットワーク攻撃への対応プロセスは、3D スイムレーン図を通じて表示および分析することもできます。

この時点で、「地球からデバイス ポートまで」のマルチレベルの大規模な包括的な 3D コンピュータ ルーム システムが構築されています。 。 HTML5 の 3D テクノロジーはどうですか? それは「小さなおもちゃ」ではありませんよね?慎重に構築されている限り、さまざまな大規模な産業アプリケーションを完全にサポートできます。私たちプログラマーは、待っているのではなく、急いで HTML5 の 2D および 3D テクノロジーを学ぶべきです。

最後になりましたが、古いルールでは、写真では十分ではないと感じ、3D コンピューター室の実際の外観を見たい場合は、tw-service@servasoft.com に電子メールを送信してプログラム コードをリクエストすることができます。ご意見を表明し、一緒に進歩してくださる方を心から歓迎します~