meshdiff

Gitで管理されたメッシュを視覚的に比較するためのツールです。

動作環境

このツールは下記に依存しています。動作確認に使用したバージョンも次の通りです。

• git client (v2.15.1)
• three.js (r118)
• imaya/zlib.js (develop)
• Google Chrome (v83)
• Visual Studio Code (v1.46.1)
  Live Server extension (5.6.1)

インストール方法

このツールの動作にはいくつかのjsファイルとツールのインストールが必要です。

• jsディレクトリに下記ファイルをコピーして下さい
  • three.min.js (three.js)
  • STLLoader.js (three.js)
  • OrbitControls.js (three.js)
  • inflate_stream.min.js (imaya/zlib.js)

各ファイルをコピーするとjsフォルダはこのようになります。

• ローカル環境で動作するHTTPサーバをインストールして下さい
  Visual Studio CodeのLive Server拡張機能を利用することを推奨します。
  Dockerで実行可能にするDockerfileを作成して頂いたのでそちらの利用も可能です。

git情報の格納

このツールはtarget以下にgit clone --mirrorされたフォルダ内のgit情報からメッシュファイル（STLファイルのみ）をリストアップします。次のようにgit cloneを行って下さい。

meshdiff/target$ git clone --mirror https://HOWTOUSE.git (メッシュを含むリポジトリ)

cloneした後、gitオブジェクトがpackされている場合はこれを展開する必要があります。次のようにすると確認できます。

meshdiff/target$ cd HOWTOUSE.git
meshdiff/target/HOWTOUSE.git$ cd objects/pack
meshdiff/target/HOWTOUSE.git/objects/pack$ ls
nanika-hash-value.idx
nanika-hash-value.pack

上のように.packファイルが存在する場合はこれを展開します。
.packファイルをobjectsよりも上の階層へ移動し、git unpack-objectsコマンドを実行します。

meshdiff/target/HOWTOUSE.git/objects/pack$ mv nanika-hash-value.pack ../..
meshdiff/target/HOWTOUSE.git/objects/pack$ cd ../..
meshdiff/target/HOWTOUSE.git$ git unpack-objects < nanika-hash-value.pack

objects以下に00～FFからなる名前のディレクトリが展開されていれば成功です。

展開済のtargetの内容を更新する方法

更新したい各ディレクトリへ移動し次のようにコマンドを実行します。

meshdiff/target$ cd HOWTOUSE.git
meshdiff/target/HOWTOUSE.git$ git fetch --all
meshdiff/target/HOWTOUSE.git$ git pack-refs --all

使い方

meshdiffをブラウザ上で実行するためにHTTPサーバを起動します。

VSCodeのLiveServerを利用する場合

meshdiffのルートディレクトリをVScodeのフォルダーを開くで開いたのち、VSCodeのLive Server拡張機能を起動します。画面の右下に起動ボタンがあるので操作します。

起動すると次のようなインタフェースにブラウザからアクセスできます。

Dockerを利用する場合

Dockerを利用する場合は、Tiryohさんが作成されたDockerfileを利用して下さい。

各インタフェースの使用方法は次の通りです。

• フォルダ名入力
  target以下に作成したgit情報のディレクトリ名を入力します。
• ブランチ名入力
  meshdiffが取り出すブランチ名を入力します。デフォルトはmasterです。
• Gitデータロード
  指定されたGitデータをtargetディレクトリ内からロードします。コミット数が多い場合は時間がかかります。
• ファイル選択
  表示するメッシュファイルを選択します。
• モデルスケール選択
  メッシュの描画スケールを選択します。
• リビジョン選択
  選択したメッシュファイルのリビジョンを選択します。Beforeが赤色、Afterが緑色で表示されます。
• 透過率
  表示しているメッシュの透過率を指定します。
• Afterを保存
  Afterのリビジョンリストで選択しているメッシュをブラウザのダウンロード機能で保存します。
• メッシュ表示 メッシュを表示します。
  • マウス左ドラッグ
    表示を回転します。
  • マウス右ドラッグ
    表示を平行移動します。
  • スクロール
    表示を拡大/縮小します。
  • XYZ表示
    赤:X軸、緑:Y軸, 青:Z軸 です。
  • グリッド表示
    1cm四方のグリッドで25cmの範囲を表示しています。
• クリア
  メッシュ表示をクリアします。