Diary

Tips

modoのWebビューでアイテムセレクター作ってみた

今回は「Webビュー」を使用したアイテムセレクターの作り方について書いてみたいと思います。htmlの編集に慣れていれば簡単にグラフィカルなアイテムセレクターやツールパレットを作ることができます。

 

CBOX Selectorの使用方法

Webビューに以下のURLを表示してご使用ください。

http://kai-tei.daa.jp/contents/diary/img/2019/CBOX_Selector.htm

WEB ビューの表示方法は「メニュー / レイアウト / パレット / 新規パレット」を実行後に、パレット右上の▼アイコンから「アプリケーション / ウェブ ビュー 」を選択します。
ギアアイコンまたはタイトルを右クリックで表示した「ホームページ」に上記のURLを入力し、「ホームページへ」ボタンをクリックします。

Webビューは以下のような記述でPCローカルにあるhtmlファイルも表示することもできます。Webビューにhtmlをドラッグアンドドロップして表示することもできます。コマンドをカスタマイズしたい場合はhtmlをローカルに保存してご使用ください。

resource:ModoIntroScreen.html

 

WEB ビューとは

Webビューはmodo 10.2で追加されたビューポートで、modo内でhtmlファイルを表示することができます。modo 11.0の初回起動時に表示されるイントロダクションスクリーンはWebビューを使用しています。

イントロダクションスクリーンは以下のコマンドで表示することができます。

introScreen.start show:1

イントロダクションスクリーンの元になっていると思われるファイルは以下のディレクトリあります。

C:\Program Files\Foundry\Modo\12.2v1\resrc\ModoIntroScreen.html

modoのWebビューのレンダリングエンジンはQtの古いブラウザ機能を使用しているらしいです。このためChromeのような近代的なブラウザに比べて制限があるかも知れません。

 

Webビューからコマンドを実行する方法

Webビューはハイパーリンクを使用してmodoのコマンドを実行することができます。コマンドは javascript:lx.cmdExecute(‘ コマンド ‘) のように記述します。

以下は<A>タグの記述例です。

<a href=”javascript:lx.cmdExecute(‘select.item RootItem set’)”>ルートアイテム選択</a>

テキストリンクの単純なサンプルです。

http://kai-tei.daa.jp/contents/diary/img/2019/webView_1.htm

CBOX Selectorでは画像を使用したいので「クリッカブルマップ」や「イメージマップ」と呼ばれる機能を使用しました。クリッカブルマップは画像にリンクを設定して、特定の場所をクリックしたときにURLに移動するための機能です。Webだと天気予報の地図で地域を選択するのによく使われます。

以下は<map>タグの記述例です。クリック範囲をピクセル指定します。

<map name=”Map”>
<area shape=”rect” coords=”193,653,343,675″ href=”javascript:lx.cmdExecute(‘select.item RootItem set’)” alt=”RootItem” title=”RootItem”>
</map>

クリッカブルマップの範囲は「HTML Imagemap Generator」のようなサービスや、Dreamweaver で手軽に作成することができます。

 

クリッカブルマップのレスポンシブ対応

アイテムセレクターとして使用するために工夫した点として、クリッカブルマップのレスポンシブ対応があります。

レスポンシブというのはどんな画面サイズの端末でも快適にWebページを見ることを目指したウェブデザインの手法です。現在はPC、タブレット、スマホ、ガラケーなど端末によってWebの視聴環境が様々あると思います。どんな環境でも快適に見れるWebサイトの方がユーザビリティーが高いのでよいとされています。

このサイトもレスポンシブに対応しています。ブラウザの表示幅を変えると、表示幅に応じてレイアウトやデザイン、フォントサイズが変わるのがわかると思います。

アイテムセレクターとして使用するぶんには大がかりな設定は必要ありませんが、カードビューと同様にウィンドウサイズに応じて画像がスケールしたほうが便利です。
htmlとcssだけではクリッカブルマップをレスポンシブ対応させることができないので「jQuery RWD Image Maps」というスクリプトを使用しました。「jQuery」はJavaScript用の便利ライブラリです。詳細はhtmlのソースを見てください。

参考

レスポンシブなイメージマップの作成
https://qiita.com/tknakatsu/items/a37b0cb9939f9f6458e6

 

まとめ

カードビューコマンド範囲、そしてWebビューと3種類のアイテムセレクターの作り方について書いてみました。modoはスクリプトやプラグインが書けなくてもグラフィカルなUIを作ることができて楽しいですね。

基本的にはどの機能を使用してもアイテムセレクターを作ることができますが、各機能の感想を書いておくので参考にしてください。

  • カードビュー
    カード切り替えでフェードしたり少しリッチな見た目にすることができます。手のマウスカーソルアイコンのセンター位置が少し違和感あるくらいで、使用して特に気になるところはありません。htmlの知識がない場合は、cfgファイルを編集するカードビューが簡単かも知れません。
  • コマンド範囲
    modo内で簡単に作成できますが、シーン内にアイテムがあるのが邪魔です。またhtmlのようにページを切り替えることができません。
  • Webビュー
    テキストやクリッカブルマップからコマンドを実行できるので、htmlの編集に慣れていれば手軽にアイテムセレクターを作ることができます。デザインをスタイルシートで管理できるしhtmlの編集と更新も楽です。画像縮小があまり綺麗じゃない点が気になります。

個人的には慣れてるhtmlを使用するのが便利です。好みの方法でアイテムセレクター作ってみてください。

CG News

Maya 2019リリース

Maya 2019がリリースされました。元々リリース時期が遅れがちでしたが、今回は3dsMax 2019から約10ヶ月遅れでのリリースとなりました。

https://help.autodesk.com/view/MAYAUL/2019/JPN/

 

新機能

今回のリリースは、新しいワークフローやパフォーマンス強化する数々の機能により、これまでよりも作業時間を短縮することに重点を置いています。ビューポート 2.0(Viewport 2.0)に対する多数の改善点により、シーンのロードから、オブジェクトの選択、高密度メッシュの処理まで、あらゆる操作のパフォーマンスが向上します。

  • 新しいグラフ エディタ フィルタ
  • タイム エディタ(Time Editor)による更新の停止
  • グラフ エディタ(Graph Editor)の自動フレーム調整(Auto Frame)
  • デフォーマ ウェイトを JSON ファイルとして書き出す
  • モーション キャプチャ サンプル
  • デフォーマの改善
  • キャッシュされた再生(Cached Playback)
  • 評価ツールキット
  • ビューポート 2.0 のパフォーマンスの強化
  • 新しいプロファイラの表示オプション
  • カラー管理
  • レンダー セットアップの改善
  • Arnold ビューポート レンダリング
  • ファイル ブラウザでテクスチャを参照およびロードする場合の操作性の改善
  • mayabatch を実行する場合のパフォーマンスの強化
  • MASH ノードの機能強化
  • スマート プリセット
  • ブレンド シェイプ ターゲット階層の FBX サポート
  • UV エディタ(UV Editor)の改善

 

CG News

プロシージャルコンテンツ作成システム「Deep FX Studio」

新しいプロシージャルコンテンツ作成システム「Deep FX Studio」のベータ版がリリースされました。
https://www.deepfxworld.com/deep_fx_studio.php

ノードベースのUIを使用して流体、粒状材料、破砕、Bullet フィジックス、マルチフィジックスの手続き型シミュレーションを作成することができます。他のアプリへのエクスポートするためにOpenVDBとAlembicがサポートされています。
価格はインディー$149.99、プロフェッショナル$ 349.99の2種類。現在は早期アクセス割引でインディー$99.99、プロフェッショナル$ $233.99です。

LightWave用の流体プラグインDeep Rising FXをスタンドアロン化したソフトなのかな?

 

特徴

100% プロシージャル

Deep FX Studioは、グラフィック用のプロシージャル型コンテンツ作成システムです。アート、アニメーション、ビジュアルエフェクトを作成したい場合はこのアプリケーションが役立ちます。

 

流体シミュレーション

高精度の最先端の液体シミュレーションを作成します。リキッドスタジオショットや猛烈な滝を作りましょう。

 

粒状シミュレーション

リアルなグラニュラーアニメーションを必要とするものを作成するために、何百万もの粒状パーティクルを簡単にシミュレートします。

 

Bullet Physicsの統合

強力な物理エンジンのBulletは、今や業界標準となっており密接に統合されています。映画のような剛体アニメーションを作成できます。

 

マルチフィジックス

Bulletと最先端の物理ベースのアニメーションツールを組み合わせて、マルチフィジックスワークフローの威力を最大限に引き出しましょう。ゴム製のアヒルを手動でアニメートする必要はありません。自動的にシミュレートしてください。

 

破砕

破壊的な物を作成するために、オブジェクトを簡単に破壊してあなたのシミュレーションに送り込みます。またはあなたの他のお気に入りのツールに作品をエクスポートします。

 

Open VDB サポート

OpenVDBは業界標準を変えるもう1つのゲームです。この強力なボリュメトリックツールキットはさまざまなことに使用できます。

 

データ交換

Collada、OBJファイルをあなたのお気に入りのツールからデータをエクスポートして、簡単にそれらをインポートできます。Alembicファイルを使用して他のアプリケーションにデータをエクスポートすることもできます。

 

Pythonスクリプト

Pythonを使用して独自のロジックをプロシージャル型ワークフローをスクリプト化します。

Tips

modoのコマンド範囲でアイテムセレクター作ってみた

前回はカードビューを使用したアイテムセレクターの作り方について書いてみましたが、今回は「コマンド範囲」を使用したアイテムセレクターの作り方について書いてみたいと思います。

■ サンプルファイル

 

コマンド範囲とは

コマンド範囲はmodo 901 で追加された機能で、ポリゴンをクリックしてコマンドを実行する機能です。
「コマンド範囲割り当て」ダイアログを見てわかる通りアイテム選択することを意図した機能ですが、スクリプトやモデリングコマンドを設定して使用することもできます。

これはMayaのリグでよく見かけるコントローラーが数多く表示されるリグと異なり、ドリームワークスのツールピクサーのPrestoのようにアニメーション専用ツールで見かける、アニメーションしたい部分を直感的に選択するための機能を実現するための仕組みと思われます。

 

コマンド範囲の作成方法

ポリゴンを選択して「コマンド範囲割り当て」を実行し、以下のような選択コマンドを設定することでアイテムを選択しています。「名称」はマウスオーバー時のツールチップとして表示されるので、わかりやすい名前を設定するとよいです。簡単ですね。

select.item アイテム名 set

 

コマンド範囲はポリゴンに設定されているので、アイテムを別のシーンに読み込めば、そのままアイテムセレクターとして使用することができます。
セレクター用のアイテムをシーンの邪魔にならない位置に移動して、専用のビューポートを表示すればカードビューのような使い方もできます。

コマンド範囲はポリゴンをそのまま使用できるので、カードビューを使用したアイテムセレクターより手軽に作成することができるんじゃないかと思います。
次回はWebビューを使用したアイテムセレクターの作り方について書いてみたいと思います。

 

参考

CG News

MadView3D

シンプルなクロスプラットフォーム3Dオブジェクトビューアだそうです。.lwo .lws .lxo .glft .fbx .stl など多くのフォーマットに対応してるみたい。
最近はあまりオブジェクトビューア使わなくなったなあ。
https://www.geeks3d.com/20180823/madview3d-0-3-0-simple-cross-platform-3d-object-viewer/

動作環境

Windows、Linux、macOS、Raspberry Pi 、Tinker Board

 

サポートしてる3Dファイルフォーマット

.3d、.3ds、.3mf、.ac、.ac3d、.acc、.amf、.ase、.ask、.assbin、.b3d、.blend、.bvh、.cob、.csm、.dae、.dxf、.enff、.fbx、.glb、.gltf、.hmp、.ifc、.ifczip、.irr、.irrmesh、.lwo、.lws、.lxo、.md2、.md3、.md5anim、.md5camera、.md5mesh、.mdc、.mdl、.mesh、.mesh.xml、.mot、.ms3d、.ndo、.nff、.obj、.off、.ogex、.pk3、.ply、.pmx、.prj、.q3o、.q3s、.raw、.scn、.sib、.smd、.stl、.stp、.ter、.uc、.vta、.x、.x3d、.x3db、.xgl、.xml、.zgl

 

MadView3Dの機能

  • 周回および飛行カメラモード
  • トラックボールモード
  • ワイヤフレームまたはソリッドレンダリングモード
  • 球状環境マッピングレンダリングモード
  • UVマッピングをチェックするためのデバッグマップ
  • 3Dオブジェクトに関する情報:面と頂点の数、サブメッシュとマテリアルの数と名前
  • 3Dピッキング(SPACEキー+マウスの左クリック)によるメッシュ選択またはリスト内の選択
  • 背景色のカスタマイズ
  • ライト色のカスタマイズ
参考資料

Wacomのサービスを再起動するソフトウェア

Wacomのタブレットが使用中に動作がおかしくなることがあります。そんなときPCを再起動後の再起動を必要とせずドライバを再起動してくれるソフトです。
ドライバアップデートしたのが原因か、自宅のSAI2の筆圧が調子悪いので試してみよ。

 

ワコムサービスリスタータ2.0.1

GUIなし。exeを起動するとリスタートしてダイアログを表示する。最終更新日 2016年4月11日。https://github.com/hiro0218/wacom-service-restarter/releases

 

ワコム タブレットサービス シッター Ver. 1.3

GUIありの常駐ソフト。Settings.xmlファイルで監視対象のプロセスを指定できるっぽいので、プロセス名が変わった場合にも使えそう。最終更新日 2015年3月15日。
http://higeneko.net/app/WacomServiceSitter/publish-jp.htm

ちなみに開発されてるのはMS内でXBOX等のゲームソフトの開発をされてる方です。https://blogs.msdn.microsoft.com/ito/

参考資料

FIRST MAN | VFX Featurette

巨大なスクリーンに映像映して撮影とか、クレーン車使った撮影風景が見られて興味深いです。

参考資料

Unblending Web App

画像から「色分解」してレイヤー分けするサービスが公開されています。イラスト入れて試したけど、面白いです。
https://unblending.ongaaccel.jp/

Unblending Web App

Unblendingとは、Color Blending(=色混合)の逆操作(=色分解)を実現する技術です。これにより、デジタルイラストレーションなどの画像データを入力として、それを再構成可能な半透明レイヤー群に分解することができます。

参考資料

Spider-Versemの独創的なビジュアル

Spider-Versemのビジュアルに関する記事が公開されています。
https://www.fxguide.com/featured/why-spider-verse-has-the-most-inventive-visuals-youll-see-this-year/

Sony Pictures Imageworks(SPI)のアーティストとビジュアルエフェクトチームは、古い漫画本の外観に敬意を表している見事なビジュアルスタイルを実験しました。

映画の中の漫画要素は次のとおりです。

  • ピンぼけを暗示するための位置ずれ
  • グラフィック要素 – 「BOOM」や「POW」のように枠を埋めるために使用されます
  • パネル化 – アクションをパネルに分割し、アニメーションのフレームレートがあるパネルから次のパネルへのジャンプを模倣します。
  • ハーフトーンドット – トーンとテクスチャをレンダリングする
  • 色 – 定義された形状に分割して、よりわかりやすい感じにします
  • 手描き – 煙、火花、爆発などの特定の効果はアーティストによって手描きされます

 

ピンぼけ

カラーオフセットの不完全性をエミュレート。

 

モーションブラー

アニメーションの大部分は画像は1フレームではなく2フレームで保持されます。24ではなく1秒あたり12画像です。これはCGではめったにありません。監督は漫画本のスタイルに忠実であり続けるために一時停止したときに、フィルムの各フレームが絵画のように見えることを望んでいました。このトレインショットのようなシーンでは、電車の上に線が配置され、ロールシャッター効果が導入されて、動きのない場所でモーションブラーが発生するようになります。

 

漫画本のパネル

ストーリーのさまざまな時点で、フレームは複数の漫画本のフレームに分割されます。映画撮影の観点からは、これは本当に頭痛の種でした。

 

ハーフトーンとクロスハッチ

4色印刷の驚くべきデジタル版とクロスハッチインキングとハーフトーンドットの組み合わせを使用して、質感と視覚的な関心を高めています。

 

ライン アクション

コンピュータはすべて正しく処理するので、常に正しい視点とジオメトリを使用できます。アートで興味深く表現力があるのは、人間が創造するものと密接に関連するすべての不完全性です。デザインと感情は正確さとリアリズムよりも優先されました。

 

特別なモデリングの考慮事項

漫画のアーティストが遠近感を誇張することは珍しいことではありませんが、3Dでは新しいレベルの複雑さをもたらします。これは映画の中で、街の環境作業の中で大いに行われました。

映画の中でマイルが建物から飛び降りて街に戻ったとき、ニューヨークの建物はすべて彼の周りの輪のように方向づけられています。それらの建物は地面に対して垂直ではありません。ひどく傾いていて、その高さは5倍から8倍まで変わります。

 

異なるアニメーションスタイルの統合

この映画の驚くべき功績の1つは、スクリーン上にそのような異なるスタイルで非常に多くのまったく異なるキャラクターを提供しながら、それらがあたかもそれらが同じ光源によって照らされる同じ物理的空間にあるかのように感じさせることです。

アニメーターは通常1週間に約4秒のアニメーションを作成しますが、Spider-Man:Spider-Verseでは、パイプラインは非常に複雑で画期的なので、1週間に平均1秒のアニメーションしか作成できませんでした。このためより多くのアニメーターを雇ってワークロードを引き受け、独自のビジュアルスタイルを実現しました。結局、30以上の異なる国からのアーティストが異なったスタイルを統合して、映画の作品に貢献しました。

 

顔とリグ

キャラクターリグの大部分は、以前のリグやブレンドシェイプモデルとそれほど変わりませんでした。しかしPeniは大きな例外だ。

アニメの外観を実現するために彼女の顔は「デカール」として置き換えられました。Peniには正式な顔のジオメトリ形状はありません。彼女の外見はアニメーションによるものですが、完全に平らな、そして平らな陰影付きのデカールに変換されます。

 

クラシック漫画本ツール

この映画は、印刷された漫画本か高められた多くのデバイスやツールを使用しています。最も注目すべきことは、説明文や観客の指示としてスクリーン上のテキストを使用することです。これらのテキストボックスは、カメラの動きの一部としてオーバーレイまたは移動されます。

 

漫画のサウンドFX

焦点と深さを示すために、より絵画的なスタイルに移動することに加えて、効果音を強調するためにスクリーン上にクラシカルなテキストを追加します。

サウンドはアニメーション後に行われましたが、チームはサウンドの設計とサウンドエフェクトチームによるアクションの時間を考慮しています。

 

参考資料

SSSS_GRIDMAN 3Dショット

SSSS_GRIDMANの3DCGショットが公開されています。迫力があり特撮っぽいアクションがいいですね。

続きを読む

参考資料

CLIP STUDIO PAINT EX用プラグイン「超解像X2」

CLIP STUDIO PAINT EX用プラグイン「超解像X2」が公開されています。小さい画像を綺麗に拡大するフィルタープラグインです。機械学習を使用した物のようですね。
http://www.clip-studio.com/clip_site/download/clipstudiopaint/cspplugin?a=mid600001

概要

超解像拡大で、ぼやけずに拡大を行うことが出来ます。1〜2倍までの倍率を指定する事が可能です。線画のレイヤーなど、透明の画像にも適用することが出来ます。NVIDIAのビデオカードを搭載している場合は処理が大幅に軽減されます。