Blend4Web対Unity。 インターネットのための戦い

なぜBlend4Webに興味を持ち、それを勉強し始めたのかと友人が私に尋ねたとき、明確な答えはうまくいきませんでした。 はい、Unityを使用していますが、これがメインのツールです。 その機能は、あらゆるアイデアの実装に十分です。 しかし、私はBlenderも長年使ってきたので大好きです。 すべてのモデル、アニメーション、映画のシーンは私が独占的に作ります。 Blend4Webは、WebGLの非常にまともなリアルタイムエンジンのように見えます。



そしてある時点で、私はBlend4Webがこのような人気のあるUnityと競争できるかどうか、もしそうなら、どの分野で...









Blend4Webを知るという話は珍しく、簡単なYouTubeビデオから始まりました。 ある種の感情的な連鎖がありました。視聴されたビデオに重点を置いていること、開発者のウェブサイトを訪れた後の興味、学習の興奮です。 私の記事はHabréに掲載されました：「 Blend4Web：最新の国内ソフトウェア産業のレビュー 」。 Blend4Webが何であるかを知らない場合は、これに慣れることをお勧めします。



もう一度マウスをクリックしたくない人のために、文字通り、私はレビュー記事の結論を語り直します。 忘れないでください、これはすべて主観的な意見です！

• Blenderとの完全な統合。 プラグインまたはBlend4Web SDKをインストールすると、プログラムの主な機能を補完するが重複しない新しいオプションが表示されます。 したがって、すべての創造的な作業はBlenderで行われます。
• リアルタイムでの簡単なエクスポート。 オプションで、コード、グラフィック、および実行に必要なすべての依存関係を含む1つのHTMLファイルを取得できます。 ただし、実行可能コードを出力してWebページに統合するより洗練された方法があります。
• 既存のコントロールボタン、設定、人気のソーシャルネットワークでの共有を使用してシーンを再生するための既製のプレーヤー。
• プログラミングなしでインタラクティブ機能を作成する絶好の機会。 より複雑なタスクの場合、Blend4Web APIを使用してJavaScriptスクリプトを記述することができます。
• 国内開発。 ドキュメント、レッスン、ロシア語のフォーラム（英語版もあります）。
• GPLの下でのオープンソース。 エンジンの開発者は、Blenderチームと積極的に協力し、エディターの開発に参加しています。 商用目的では、エンジンのライセンスが必要です。
• アクティブな開発。 新しいリリースは毎月です。 これは開発者にとって一種のバーのようです。

もちろん、すべてがそれほどスムーズではありません。 エンジンを操作する過程で、原始的な論理コンストラクター、複雑な設定システム、APIの混乱など、特定の問題を発見しました。 一般的に、興味のある人は誰でも- 最初の記事を読んで、私はメイントピックに目を向けます。



UnityとBlend4Webのような異種のツールを比較する試みは、レビューを書く前から生じていました。 最初の知り合いでは十分ではなかったので、私は後者の研究を続けました。 そして今、おそらく、私はすでにこれらの「動物」を自分たちで掘り下げる準備ができています。



両方の「レスラー」の体重カテゴリーは明らかに同じではありません。 Unityは、クロスプラットフォームゲームに非常に人気のある環境であり、堅実な生活年齢、大きなコミュニティ、膨大な数のリリースされたプロジェクトを持っています。 Blend4Webは、興味深い傾向のある活発に開発されているテクノロジーですが、非常に若いものです。 したがって、これまでのゲーム開発の面での正直な戦いは私には不可能のようです。 私はUnityが強力な活動に焦点を当てることに決めました。 WebGLでのインタラクティブなプレゼンテーションについて説明します。 この記事では、仮想プレゼンテーションを開発してWebGLにエクスポートする際に、両方のエンジンの長所と短所を正確に示します。



タスクは次のとおりでした-航空機エンジンのデモンストレーションモデルを作成し、主要コンポーネントの動作と簡単な注釈を示します。 UnityとBlend4Webの作業は同時に行われました。 同じモデル、同じ目標ですが、パフォーマンスは完全に異なります。 今後は、主に設定した時間制限のために、UnityとBlend4Webの両方に興味深いチップをいくつか捨てなければならなかったと言います。 それでも、私は航空デザイナーでもエンジニアでもありません。 使用されたエンジン操作スキームは、ウィキペディアから取得されました。 どこかに不正確なことがある可能性があります。

視覚部分

この作業段階を考えて、私はBlend4Webのドキュメントに目を通しました（長い間Unityの機能を知っていました）。 視覚効果のセットで、非常に興味深い機能に出くわしました。 実行が簡単で、両方のエンジンに共通し、プレゼンテーションに最適な視覚的なスキームを開発する必要がありました。 結果は次のセットです。

• テクスチャのないシンプルなパターン。 標準シェーダーのみによる魅力。
• グラデーションの背景。 テクスチャを拒否しました！ モノフォニックの塗りつぶしはあまりにも原始的です。
• 1つの指向性光源、影、環境光。
• 粒子なし。 彼らの助けを借りて、写真とプロセスの可視性を大幅に改善できることは明らかです。 しかし、私は時間を無駄にしたくありませんでした。

まず、ターボファンエンジンの主要コンポーネントの3次元モデルが作成されました（図2）。





図 2



両方のエンジンの初期モデリングは、任意の3次元エディターで実行できます。 当然、Blend4Webの場合、Blender自体でモデルを作成するのが最適ですが、側面からモデルをインポートすることを妨げるものは何もありません。 Unityの場合、事実上の標準はFBX形式です（エンジンによって直接インポートされる元のブレンドファイルを使用できます）。



Blend4Webでは、標準のBlenderシェーダーを「現状のまま」使用できます。 したがって、金属部品を視覚化する最も簡単な方法を選択しました-WardIso反射シェーダーにハード放射をインストールしました。 絵はかなりまともでした。 ただし、Blenderレンダリングの結果とブラウザでの完成したシーンのエクスポートを比較すると、何かが欠けていることがわかりました-影はありませんでした。 これは、私がBlend4Webを置いた最初のマイナスです。 Blenderシーン設定の優れた「理解」にもかかわらず、Blend4Webエンジンでは特定の機能を有効にする必要があります。 Blenderマテリアルに既にシャドウを含めているため、これはthis笑のように見えますが、なぜ他の場所にチェックを入れる必要があるのですか？



そのため、Blend4Webでシャドウを有効にするには、シーンパネルでグローバルシャドウのレンダリング機能を有効にし、各オブジェクトのシャドウ（キャストと受信）オプションを個別に有効にする必要があります。 図3では、関連する項目をマークしています。 これでBlend4Webのモデル設定が完了し、Unityに移行します。





図 3



通常、Unityは問題なくBlenderで作成されたモデルをインポートします。 今回は法線が混同されました。 さて、オブジェクトの明暗法が場所を変えると、おそらくこの不快な効果に出会ったでしょう。 これは、Blenderの法線を再計算するか（編集モードのオプションメッシュ->法線のグループ）、またはUnityインポート設定（ 法線と接線 ）で処理されます。 最も興味深いのは、通常のレンダリング中とBlend4Webのエクスポート後の両方で、Blenderの同じオブジェクトに問題がなかったことです。



そうでなければ、すべてがうまくいきました。 Unityは必要なマテリアルを自動的に作成し、それらを少し調整するだけで十分でした。 Unityの物理シェーダーが上にあり、非常に必要なメタリックの輝きを追加できました。 シャドウに関しては、オブジェクトをインポートするときに自動的に含まれます。



次のステップは環境のセットアップでした。 最初に、Unityの機能を検討します。



この実験では基本的にテクスチャを放棄したため、Skyboxを使用するオプションは適切ではありませんでした。 当初、背景としてグラデーションを設定するつもりでしたが、Unityはそのままで無地の色または手続き型のSkyboxを提供します（見た目が悪かったですか？）。 悲しいかな、後者は、下半球と上半球の間に鋭い境界があるため、作業シーンではあまり良く見えません。 したがって、原始的な塗りつぶしで停止する必要がありました。





図 4



アンビエントライトがオンになったのと同じように、光源はデフォルトですでにシーンにありました。 実際のところ、これでUnityの設定は終わりました。



Blend4Webについては、その後、周囲の世界のより豊富な設定を発見しました。 このシーンで私はほとんど必要ありませんが、それでもいいです。 まず、標準のBlenderの背景を使用しても問題はありません。 単色が必要で、異なるバージョンのグラデーションが必要な場合-いずれにしても、エンジンはワールドパネル設定を正しく選択しました。 これは、環境光など、シーンの他のパラメーターにも適用されます。



第二に、Blend4Webはより良い手続き型のSkydomeと微調整を提供します。 一般に、Blend4Webに問題はありませんでした。



視覚的な部分で作業の段階を要約します。



私にとっては、Unityは経験の浅いユーザーにより忠実です。 基本的なシーン機能はデフォルトですでに有効になっています。 オブジェクトの影、適切に構成された環境光、手続き型スカイボックスがあります。これにより、追加設定なしですぐにオブジェクトが表示されます。 「反転」法線を除いて、モデルのインポートに特別な問題はありませんでしたが、ここでは、おそらく自分でどこかを台無しにしました。



Blend4Webでは、これらの同じパラメーターを手動で構成する必要がありますが、「すぐに使える」はるかに大きな可能性を提供します。 したがって、たとえば、私のシーンでは、ポストエフェクト（ブルーム、ブラー、太陽光線など）は使用しませんでしたが、マウスを数回クリックするだけでそれらをオンにすることができました。 もちろん、Unityにも独自のポストエフェクトセットがありますが、そのためにはそれらをインストールし、使用方法を把握する必要があります。



そしてもちろん、「ツーインワン」システムはプロジェクトの作業を大幅に促進します。 Blenderを知っていれば、問題なくWebGLにエクスポートされたシーンを作成できます。

論理部

Blend4Webのデモとドキュメントを検討した結果、このエンジンは2つの理由でサイトの仮想コンテンツを作成するのに非常に便利であるという結論に達しました。 第一に、Blenderとの統合、そして第二に、Blenderと連携する能力はプログラマーのためではありません。 そのため、APIを使用せず、Blenderパネルで利用可能なもののみを使用することが決定されました。



それで、何をしなければならなかった：

• さまざまな角度からのシーンのグローバルな表示、およびズームとパン。
• モデルの選択された部分を強調表示し、それに関する情報を出力します。

簡単ではないですか？ それはただ結果がエンジンで異なっていただけです...



Blend4Webのレビュー記事で、シーンをhtmlにエクスポートするときに自動的に統合する便利なプレーヤーについて既に書いています。 その結果、ユーザーはあらゆる側面からオブジェクトを自由に表示でき、人気のソーシャルネットワークで情報を共有することさえできます。 さらに、デザイナーの側では、すべての設定がBlenderパネルにあるため、1行のコードがなくてもこの効果を得るために最小限の身体の動きをする必要があります。



そして、それはプレゼンテーションを本当に簡単にします！ 実際、私はここで何もしませんでした。なぜなら、すべてがすでに最初の問題を解決する準備ができていたからです。



では、Unityに移りましょう。 Blend4Webとは異なり、既製のプレーヤーはここでは提供されないため、自分で作成する必要があります。 また、「すぐに使える」ロジックのビジュアルエディタもありません。すべてスクリプトで実行されます。 もちろん、アセットストアでは、適切なロジックエディターまたは既製のコードブランクを選択できますが、実験の純度のために、基本的な構成のみに制限します。 Blend4Webのこの部分では、意図的にUnityを提供していると思います！



次のタスクの実装に困惑しました。 複数のボタンを作成し、押すとモデルの一部が透明になり、目的のボタンが強調表示されると想定しました。 最初の問題は、Blend4WebにGUIシステムがまったくないことです。



もちろん、フィクションの目標はcであり、私はすぐにカメラに碑文で飛行機を「スタック」しますが、ブラウザーウィンドウのサイズを変更すると、すべてのボタンがワークスペースの外側に「左」になります。 プラグイン設定で画面の境界線へのオブジェクトのバインドを見つけることができなかったので、半分の対策を行う必要がありました。 カメラの下部にコントロールボタンを配置したので、ウィンドウのサイズに関係なく、ボタンは見えたままになりました。



この問題を正常に解決した後、イベントハンドラーを使用しました。 Blend4Web開発者は、NLAシーケンスとそれらによって追加されたいわゆるスロットを使用してロジックを作成することをお勧めします（NLAは非線形アニメーション用のBlenderビジュアルエディタです）。 シーンパネルでそれらを有効にして設定できます（図5）。





図 5



各スロットは、ドロップダウンメニューから選択された一意の操作です。 彼らの助けを借りて、シーン内のオブジェクトの選択を追跡し、アニメーションを制御し、条件付きまたは無条件のトランジションを実行し、簡単な数学計算、オブジェクトの表示と非表示、およびWebリンクに関連するいくつかの機能を使用できます。 そしてそれだけです。



空白はそれほど多くありませんが、単純なロジックを構成できます。 これらのスロットはすべて、階層を表示せずに1つの列に配置されるため、限られたセットではなく、使用するのに不便です。 本当に混乱します。



Blend4WebはほとんどのBlenderアニメーションをサポートしていることを念頭に置いて、小さな論理チェーンを作成しました。ボタンのクリックを追跡し、アニメーションを開始します。 アニメーションとして、パーツのマテリアルの透明度をスムーズに変更しました。 予想どおり、Blenderは簡単に許可しましたが、Blend4Webは許可しませんでした。



残念ながら、1〜2時間は何もできませんでした。 時間の損失が大きすぎたため、コンセプト自体を変更する必要がありました。 今、画面上でエンジンカバーをクリックすることが提案され、その後透明になりました（実際、異なる透明度のオブジェクトが変更されます。最良のソリューションではありません）。



このような不注意に解決されたタスクに悩まされて、私はすでに慎重にモデルの一部にコンテキスト情報の表示を実装し始めました。 ただし、ここでは開発者からの嬉しい驚きが期待されていました。 空のオブジェクト（補助ダミー）をシーンの適切な場所に追加し、パネルの必要なテキストフィールドに入力するだけで十分であることが判明しました。 エクスポート後、かわいいショートネームのショートカットが画面に表示されます。 それらをマウスでクリックすると、コンテキストヘルプが開きます（図6）。





図 6



Unityに関しては、すべてがそれほど単純ではありません。 本格的なGUI、考えられないほど複雑なロジックを記述する機能がありますが、典型的なプレゼンテーションの作成を簡素化する特別な準備はありません。 したがって、スクリプトのジャングルには入りませんが、フィナーレ-HTMLへのエクスポートに進みます。



したがって、Blend4Webを使用すると、シーン全体、制御コード、および自分自身を1つのHTMLファイルにまとめることができます。 テストシーンはすばやく（1秒以内）、文字通りワンクリックで組み立てられます。 そのサイズは1.8 MBです。



それでは、Unityに移りましょう。 デフォルトのWebGLエクスポート設定をすべて残して、処理を開始しました。 現在（これらの言葉を書いている時点で）何が起こっているのかは、何とも言えません！ 彼は部屋を歩き回り、カモメを飲み、天井に吐き出し、すべてが輸出されました。 少なくとも5分間、この混乱が起こりました（Blend4Webの2番目と比較してください）。 しかし、ほとんどの場合、完成したエクスポートファイルを含むフォルダーのサイズ-140メガバイトに殺されました!!! 私には言葉がありません...



更新 ：知識のある人は、Unityマニュアルのより厳密な調査と同様に、デモの実際のサイズは140メートルではなく、約19であることを提案しました。 私が理解したように、サーバーの裁量で何を与えるか。

/更新 ：

最終比較

正直に言うと、Unityでこのような素晴らしい結果が得られた後、私は書く気はありません。 WebGLへのエクスポートは比較的最近登場し、プレビューバージョンとして位置付けられています（執筆時点では、Unity 5.0.1がインストールされていました）。 おそらく将来、すべてが変わるでしょうが、現時点では、Blend4Webのエクスポート結果はUnityの同様のものよりも計り知れないほど優れています。



最終結果を要約します。



私の意見では、Blend4Webプラグインは仮想プレゼンテーションを作成するためのより便利で思慮深いツールであり、その理由は次のとおりです。

• ソリッドビジュアルレンダリング機能。 テストシーンを作成するために必要なものだけを検討しました。 Blend4Webのドキュメントを見て、多くの興味深いものを見てください。
• シーン、オブジェクトおよびロジックの動作を設定するための準備。 プログラミングをしなくても、アプリケーションのメインロジックを作成し、状況依存ヘルプを作成し、選択時にオブジェクトを強調表示し、シーンを装飾することができました。
• 軽快なエクスポートと小さな完成したファイル。

Blend4Webを使用する場合の短所の検出：

• GUIなし
• プリミティブで不便なロジックエディター。

また、エンジンのドキュメントを確認したいと思います。 レッスン、公式ガイド、テストプロジェクトがあり、それは良いことです。 しかし、多くの機能の使用に関する特定の小さな例は見つかりませんでした。公式のリファレンスは、しばしばドライリスティングに限定されています。 これにより、実験に時間を浪費することになります。



ユニティに関しては、この比較で彼は明らかな大失敗を被った。 彼の親しみやすさと複雑なプロジェクトの開発能力にもかかわらず、この分野ではプレゼンテーションを作成するための高速で効果的なツールを提供できません。 はい、そしてこれまでのところWebGLにエクスポートすることは最高のものになりたいと思っています。



見たい人のために：

Blend4Webでのプレゼンテーション （1.8Mb）

Unityでのプレゼンテーション （142 Mb）