tech

UIToolkitで自作プログレスバーの作成

  • POSTS
こんにちは、カシカでエンジニアをしております、村本と申します。 Unityを使った開発の中でUIToolkitでプログレスバーの自作コンポーネントを作った話をします。 作成中のアプリケーションでデータ処理状況を表示するプログレスバーを追加することになり、デザインが上がってきました。 左右が丸くなっているデザインでした。 UIToolkit標準のプログレスバーのデザインを変更するには限界があるため、自作することにしました。 仕様 0~100%で数値を指定します。数値は半円を含まない位置を基準とします。 0%の時は背景色のみ 100%の時は前景色のみとします。 開発 作成中のアプリケーションには既に似たデザインのスライダーがありました。背景部分で数値の範囲による状態の違いを表現する機能を持っています。 数値の部分が半円かどうかの違いはありますが、スライダーのつまみ以外は同じような構成にできるだろうと思い、これを参考にプログレスバーを実装することにしました。 この時点ではプログレスバーの幅が複数種類必要になる可能性があったため、進捗部分の幅は%で指定したいと思いました。 そこで下記画像に示すような構造にしようと実装を始めました。 ところが実装中に問題が発生しました。端の半円をborder-radiusの指定で作ろうと思ったのですが、UIToolkitでは要素の幅がborder-radiusの指定値の倍未満だと半円部分の比率が変わってしまうようです。(Unity2022.3.16f1) そこで回避するために、こういう構造にしました。 ところが、今度は別の問題が発生しました。このアプリケーションではフルHDを基本にウィンドウサイズに合わせて画面を拡大縮小する処理が入っていて、ウィンドウサイズによって要素と要素の隙間が開いて見える現象が発生してしまいました。 そこで、上記の問題を解決するために、半円部分と塗り部分をひとつのVisualElementにまとめる方法を思い付きました。paddingで左右に半円分の幅を確保するという方法です。下記画像のような構造になりました。 この方法だと重ねるレイヤー数も減り、隙間ができる問題も解消します。参考にした元のスライダーは塗り部分が真っ直ぐのデザインのためこの構造にはできなかったのですが、このプログレスバーは塗り部分の右側が半円になっているデザインなので実現できました。 実装 最終的にこのような実装になりました。 ProcessProgressBarComponent.uxml <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False"> <Style src="ProcessProgressBarComponent.uss" /> <ui:VisualElement class="process-progress-component" style="flex-grow: 1; flex-direction: row;"> <ui:VisualElement name="process_progress_bar"> <ui:VisualElement class="process-progress-bg" /> <ui:VisualElement name="process_progress_fill" class="process-progress-fill" /> </ui:VisualElement> </ui:VisualElement> </ui:UXML> ProcessProgressBarComponent.uss #process_progress_bar { margin-left: 4px; margin-top: 4px; width: 100px; height: 8px; border-radius: 4px; background-color: #707070; opacity: 1; } .

Webブラウザで動作するVRMビューワの作成

  • POSTS
こんにちは、カシカでエンジニアのインターンをしております、石飛と申します。 今回はVRMモデルを表示する簡単なwebアプリを作る方法を解説します。 VRMを表示し、カメラのコントロール、モーションの変更、表情の変更の 基本的なコントロールができるWEBアプリの作っていきます。 やりたいこと VRMとは人型アバターモデルのためのファイルフォーマットです。 実際のデータはニコニ立体などから入手することができます。 今回の例でもこのサイトに公開されているニコニ立体ちゃんを利用します。 公式のガイドに従えば、Unity、Blender、Maya等の標準的なCG開発環境でVRM形式のデータを読み込むことができます。 ですが、今回はwebブラウザでVRMデータを表示することを目的とします。 実際に作ったアプリのスクリーンショットを下に示しています。 VRMデータを読み込んで表示することはもちろん、カメラを移動して様々な方向からモデルを観察することができます。 また、VRMモデルの操作として、表情の変更やFBX形式のモーションデータの適用も可能です。 (完成版のイメージと主な機能) 主なソフトウェア 作るとはいってもJavaScript系の既存ソフトウェアを組合わせるだけで、簡単な機能はすぐに実現できます。 ここでは、今回の用途において要となるNode.jsとthree-vrmの概要を説明します。 具体的な環境構築の方法はこちらの記事を参考にしてください。 Node.js JavaScriptの実行環境としてNode.jsを利用します。 Node.jsがどういうものなのかについては、こちらの記事でわかりやすく解説されています。 端的に言えば、ローカルで完結した環境でWebアプリを開発できるようにするものです。 Node.jsではnpmというパッケージ管理ツールを使うことになります。 上の記事の受け売りですが、知っている人には「Pythonにおけるpip、Rubyにおけるgem(RubyGems)、Debianにおけるapt、MacにおけるHomebrew、Rustにおけるcargo」と考えればすぐに理解できるかと思います。 なので次に説明するthree-vrmも $ npm i @pixiv/three-vrm のようにして、npmコマンドでインストールします。 three-vrm JavaScriptで3DCGを描画するためのライブラリとしてThree.jsがよく知られています。 このThree.jsでVRMモデルを扱えるようにしたライブラリがthree-vrmであり、pixivがオープンソースで公開しています。 three-vrmのページからリンクが張られているexamplesでは、VRMの基本的な操作を扱ったデモがまとめられています。 今回はこれらデモを参考にしてアプリケーションに機能を追加します。 ビューワの実装 先述の通りにこちらの記事に従って環境構築すると、正面を向いたモデルがブラウザで確認できるかと思います。 srcフォルダ内にあるindex.tsを編集してから $ npm run build $ npm run start ビルド・実行し直すことで機能を追加できます。 編集にあたってthree-vrmのexamplesを参考にすると述べましたが、具体的には各デモに対応するhtmlファイルのscriptブロックを参照します。 カメラのコントロール Three.jsの機能を用いることで、マウスドラッグによる視点操作が容易に実装できます。 こちらはデモのbasicを参考にしましょう。OrbitControlsをインポートし、シーン設定時にcontrolを生成していることが分かります。 // camera controls const controls = new OrbitControls( camera, renderer.domElement ); controls.screenSpacePanning = true; controls.target.set( 0.0, 1.

Gaussian Splatting 簡単なガイド

  • POSTS
こんにちは、アルフォンソと申します。カシカのエンジニアです。 今日は、Gaussian Splattingを簡単に使い始める方法を説明したいと思います。 This article English version is HERE 例のクマのgaussian splatingデモも展示してます。 pic.twitter.com/eJC9IbRAkB — 株式会社カシカ (@kashikacojp) September 18, 2023 Gaussian Splatting インストール はじめに、Gaussin Splattingを使うのために、いろいろな プログラムとライブラリをインストールする必要があります。 ハードウェア要件 CUDA-ready GPU / CUDA 7.0+ 24 GB VRAM (小さいデータであれば、少ないVRAMでも可能) ソフトウェア要件 Git Conda Visual Studio 2019 (または新しいバージョン) CUDA Toolkit SDK 11.8 COLMAP ImageMagik FFMPEG CondaとVisual StudioとGitのインストールは、インストーラをダウンロードして、指示に従ってください。簡単です。 CUDA Toolkitのインストールは少し面倒かもしれません, インストールするにはこのガイドをお勧めします here. nvcc (CUDAコンパイラ)をPATHに入れるのは忘れないでください。 まだ, Colmap と ImageMagick と FFMPEGダウンロードしてインストールする必要があります。インストールの後でインストールのフォルダーをPATHに入れていください。 次のステップでは、Gaussian Splatting gitのリポジトリのクローンを作成するのために、次のコマンドを使用してください。

NeRFモデルの品質を上げる方法

  • POSTS
English version is here こんにちは、私の名前はアルフォンソです。カシカの新メンバーです。 この記事では、AI とコンピューター グラフィックスの最新技術について、最新情報をお届けします。 今日はNeRFについてお話しします。 NeRFとは ? NeRF は、Neural Radiance Fields for View Synthesis の頭字語です。これは、カリフォルニア大学バークレー校で開発された 新しい AI ベースのレンダリング手法です。 この新しい手法は、カメラの姿勢がわかっている一連の画像を入力として使用するディープ ニューラル ネットワークに基づいています。 画像とカメラのポーズのセットは、3D 座標 (x、y、z) とカメラの視線方向 (thetha、phi) の 5D 座標入力セットとして表示されます。 ネットワークの出力は、放射輝度と場所に依存するボリューム密度になります。これは、ボリューム レンダリングをトレースしたものです。 簡単に言えば、NeRF は、入力写真の表示パースペクティブに依存するボリューム/輝度レンダリングを生成する AI ツールのように想像できます。 多くの人がさまざまな角度から物体を見つめているようなイメージで、NeRF は各人の「神経情報(neural information)」を使用して物体自体を作成します Ben Mildenhall, et. al. NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis 2020 NeRFの入力 - 写真撮影 写真はスマホやデジカメで撮影します。解像度が高いほど良いです。 オブジェクトの写真が さまざまな角度と視点 から撮影されていることが非常に重要です。 正面の写真だけを撮ると、NeRF はオブジェクトのボリュームをレンダリングするのに十分な情報を持ちません。 (正面のみを撮影したため、カメラがなくモデルの背面がノイジーです。) また、写真の数 も重要です。大量の画像を撮る必要はありません。 そのため、10 ~ 30 枚の写真をお勧めしますが、これは対象物によって変わる可能性があり、対象物をカバーするのに十分な写真です。 撮影枚数が多すぎると、カメラ位置の推定が遅くなり、難しくなり、視点の悪いカメラが生成される可能性があります。

新型iPad Pro登場

  • POSTS
こんにちは! 株式会社カシカ社長の奥です。 新しいiPad Proが発売されましたね。 今回の目玉はなんといっても LiDARセンサー搭載。 弊社ではカタチスペースという、写真を撮るだけで簡単に立体ARをつくれるサービスをリリースしていますが、 今回のiPad ProのLiDARセンサーでより正確なカタチが撮影しやすくなるのではないかと期待しています。 LiDARセンサーって何なの? appleのサイトより引用: https://www.apple.com/jp/ipad-pro/ LiDAR とは、Light Detection And Rangingの略称で、 車の自動運転のためのセンサーや航空機に空撮計測などでよく利用されている距離センサーです。 計測方式は、赤外線の光を発し、その光が物体に衝突してから跳ね返ってきた時間で 物体と光源との距離を計測する方式です。 下記がわかりやすい説明のサイトかと思います。 https://jp.techcrunch.com/2017/02/13/20170212wtf-is-lidar/ これまでも距離を計測するセンサーはありましたが、 光の特性を利用する一部のセンサーは晴天の屋外では利用できないものがあります。 車や航空機でも利用される方式のセンサーがタブレット端末に搭載されたというのは 3Dスキャンを利用する業界でも非常に大きな話題となっています。 LiDARセンサーでARはどう変わるのか? 早速、iPadでカタチスペースのARを試してみました。 ARをやっているとすぐにわかるのですが、iPhoneなどではARを前に 「iPhoneを動かしてください」と表示がでます。しかし新型iPadでは そのような表示は出ずに、いきなりARのオブジェクトが目の前に出てきます。 煩わしい、ARのための準備体操が要らないわけです。 これはユーザーにとってはとても便利ですね。 オクルージョンを試してみました。 すごいですね。ARオブジェクトがちょうどある位置に手を差し入れると 重なる部分だけARオブジェクトの中に指が沈む感じがみえます。 iPhoneXR以降のiPhoneは人の手や体がARオブジェクトの手前か後ろかを判定し、 ARオブジェクトに重なる場合ARオブジェクトを表示したり、隠蔽(オクルージョン)する機能があります。 カタチスペースで撮影したARオブジェクトを目の前に表示し、 手で触ろうとすると、オブジェクトの手前に手があると手が見えて、 奥に差し入れると、オブジェクトが見えるようになります。 iPhone11ではどうだったかというと、 オクルージョンされなくはないのですが、ARオブジェクトよりも手前に手がある位置なはずなのですが ARオブジェよりも奥に手があるような表示になっています。 自分のiPhoneやAndroidで試してみたい方はこちらのURLからすぐに試すことができます。 このカタチを見てみる LiDARセンサーでカタチはうまく撮れるのか? LiDARセンサーによる、ARの表示の性能が良かったので、 LiDARセンサーによるカタチの撮影の機能向上も期待しちゃいますよね。 まずはインカメラで撮影したいつものクマのぬいぐるみのAR インカメラのTrueDepthセンサーは iPhone11とほぼ変わらない感じですね。 また、ARを見るときは大きい画面だと目の前を覆う面積が広いので、没入感あります。 さて、LiDARセンサーを使った機能をAppleが公開したサンプルで試します。 動画バージョン: 結構ポリゴンが荒いですね。 ポリゴン自体はかなり高速に生成されているのでカタチの撮影でも利用できそうですが、 ちょっと三角形の大きさが荒すぎるので、このままではカタチに使うのは難しそうです。 ちなみにインカメラでカタチ撮影した時のポリゴンはこんな感じです。 こっちのほうが三角形の目が細かいですね。ちゃんとしたカタチを見るためには、 このくらいの三角形の細かさが必要になってきます。 Appleの今後に期待 じゃぁLiDARセンサーだめなんじゃ?という訳ではないです。 おそらく、Appleの意図としては、ARの表示向けの新機能なので、 ARを計測するためのセンサーではないというところでしょう。 しかし、LiDARセンサーは、従来のデュアルアウトカメラよりも 高性能な奥行情報を取得できる可能性は高く、 それは今回のオクルージョンの結果からも明らかで、 その奥行情報を利用したカタチの生成は、かなり期待していいと思います。