CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。ブラウザから実行する方法を追加し、タイトルをEditorの使い方に変更しましたこれまでBablon.jsについていくつか書いてきましたが、いずれもソースコードを直接書いてコンテンツを作る、というものでした。Editor」もあります。Editorを使うことで、コーディングなしでこんな表現ができます。今回は、この表現を作る方法を紹介しながらEditorを使う基本手順をまとめました。Editorとは、UnityのようなGUIベースでWebGLコンテンツを作る開発環境です。下記にアクセスし、Webブラウザ上で実行することができます。Editorまた、HTMLコードをWindows/Mac向け実行形式に変換するElectronでビルドできる環境も整っています。Startedの中に実行形式のURLがあります。@luaacroという方です。unofficialと書いてありますが、Babylon.jsの公式HPで紹介されており、実質的には標準なのではと思いました。EditorでできることGUIでオブジェクトを配置したり、スクリプトをアタッチして特定の動作をさせることができます。editorがあるので、動画編集のようなカメラワークでムービーのようなものを作ることもできます。提供ページにはこのように紹介されています。Babylon.js以下の1から9に使い方が書いてあります。これが公式で公開されている使い方と考えてよさそうです。Documentationただ、Unityを使う感覚で使うとうまく動かすことができず、初めは3Dモデルの読み込みすらできませんでした。そこで、実際に3Dモデルを読み込んでPBRでレンダリングするまでの手順を詳しく紹介することで、注意点を解説していきます。Editorのデスクトップ版で試していますが、ブラウザ版でも動くはずです。Editorのモデルインポート機能は.babylon拡張子にしか対応していません。そのため、何かのモデルを取り込みたいときは、何らかの手段で.babylon拡張子に変更する必要があります。Max、Clara.ioなどから変換するための方法が紹介されています。このブログでは以前、UnityとBlenderを使う方法を紹介しました。CrossRoad.babylon形式に変換したら、任意のフォルダに配置します。このフォルダが、この後自分が作るBabylon.jsのファイル一式を格納する場所になります。Blenderを使う場合、出力設定でAllではなく、Selectedを選び、対象のモデルをInspector上で選択してからFile/Exportを選びます。Editorを起動します。起動すると、かならずこのような雨が降っているシーンが表示されます。それぞれのエリアには名前が付いています。Projectを選択します。いう表示が出るのでYesを選択します。新しくプロジェクトを作ると、シーンを構成していたオブジェクトは消えます。Viewerには、TextureやMaterialが使えるようになってると見えますが、実際は使えないので無視してください。meshesを選択します。出てくるウインドウで対象の.babylonを選択して「開く」をクリックします。メッシュが複数ある場合、どれを取り込むか聞かれます。今回は全て選択しました。今回は、TurbosquidからSwordの3Dモデルを取得し、Blenderから.babyon形式に変換しました。Lightを追加しました。この時点でこうなります。Viewerから割り当てます。Viewerから表示させます。files」を選ぶと使いたいテクスチャを取り込めます。ここではデフォルトシーンで使われていた「environment.dds」と、Swordモデルに付いていたUV展開されたテクスチャ「Sting_Base_Color.png]を取り込みました。environment.ddsは以下より取得しました。Probeなどのメニューがあります。こちらは試したら追記します。Viewerには、デフォルトシーンで使われていたマテリアルの名前とサムネイルが残っています。Viewerから生成します。Viewerから表示させます。ViewerでAddを選択すると、このようにどんなマテリアルを作るかという指定画面が出ます。ここでは刃の部分を光らせたいので、PBRSpecularGlossinessMaterialを選択します。Viewerから先ほどのPBRSpecularGlossinessMaterialをクリックします。Viewがこのマテリアルの設定情報に変わります。Text..の"None"となっている箇所をクリックしてenvironment.ddsを選択します。View)で刃の部分のモデルを選択します。Viewが刃のモデルの情報に変わるので、MaterialのところでさっきのPBRのマテリアルを指定します。マテリアルの割り当て前と後です。刃に金属光沢が見えるようになりました。剣の柄の部分にマテリアルを割り当てる3.5と同様にマテリアルを作成します。Materialを選択します。MaterialのDiffuseにテクスチャを割り当て、柄の3Dモデルに割り当てます。この時点でこうなります。目処がついたら追記していきます。Particleを割り当てて剣を魔法のエフェクトをつける(2018/12/3追加)長くなるのでこちらに書きました。スクリプトをアタッチして、エフェクトをコントロールできるようにする(2018/12/9追加)長くなるのでこちらに書きました。(予定)シーンを出力してブラウザで実行できるようにする(2018/12/16追加)長くなるのでこちらに書きました。使うファイルは全て同じフォルダに入れるUnityだと、別のフォルダから何かをドラッグしても、プロジェクトフォルダの中にコピーが作られます(コピー)。Proなどの動画編集ソフトでは、プロジェクト管理ファイルの中で、該当ファイルのパスが記録されます(参照)。Editorではコピーも参照も作られないため、全てのデータを同一フォルダに集める必要があります。Cameraを使い分けるUnityでは、マウスホイールやAltキーの組み合わせで、BlenderのときはマウスホイールやShiftやCtlキーの組み合わせでカメラアングルを変更できました。Cameraを使うことでアングルを変更できます。Cameraを使います。Projectを選択するとプロジェクトを保存できます。プロジェクト管理情報は、.editprojectという拡張子です。これも同じフォルダに入れておき、次回Editorを起動したときにフォルダの中身を全て選択してからドラッグすれば、プロジェクトを再生できます。私の環境では、なぜかモデルが二重に表示され、背景色が保存前と違っていました。手順がおかしいのか、使ったモデルが問題があるのか、自分の環境に問題があるのか不明ですが、原因と解決方法がわかったら更新します。meshした情報が入っていて2重に表示されるそうです。.editorprojectだけを使うか、2重になった状態でダブっているオブジェクトを削除してから再度保存すれば問題は解消されました。背景色が変わる問題は解決できてませんが、今の所背景色は大きな問題ではないので、もう少し使う中で解決したら方法を追記します。終わりにやはりGUIベースの開発環境があるととてもやりやすいと思いました。今回紹介したようにごく簡単な操作でクオリティの高いWeb向けのレンダリングができるので、さらに調べてみようと思います。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。