こんにちは、カシカでエンジニアのインターンをしております、石飛と申します。 今回は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.

Hello, Alfonso here a engineer in Kashika. Today, I want to explain you how you can start using Gaussian Splatting very easy. この記事の日本語版はこちら 例のクマのgaussian splatingデモも展示してます。 pic.twitter.com/eJC9IbRAkB — 株式会社カシカ (@kashikacojp) September 18, 2023 Install Gaussian Splatting code. First you must install several programs and libraries to be able to use Gaussin Splatting. Hardware Requirements CUDA-ready GPU with Compute Capability 7.0+ 24 GB VRAM (if you try small data, less vram is ok.

こんにちは、アルフォンソと申します。カシカのエンジニアです。 今日は、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のリポジトリのクローンを作成するのために、次のコマンドを使用してください。

この記事の日本語版はこちら Hello my name is Alfonso. A new member of Kashika. In this space, I will try to keep you updated about the latests technolgies on AI and Computer Graphics. Today, I will talk about you about Instant-NGP. What is NERF ? NeRF is the acronym from Neural Radiance Fields for View Synthesis. It is a new AI based randering technique developed in UC Berkley. This new technique is based on a deep neural network that uses as input a set of images with know camera poses.

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 枚の写真をお勧めしますが、これは対象物によって変わる可能性があり、対象物をカバーするのに十分な写真です。 撮影枚数が多すぎると、カメラ位置の推定が遅くなり、難しくなり、視点の悪いカメラが生成される可能性があります。

こんにちは、カシカの山本です。 先日開催しましたカタチスペースTwitterコンテスト、ありがたいことに沢山の方に「#カタチゴハン」をアップして頂きました！ この機会にカタチスペースを知って頂いた方も多くいらっしゃったようで、面白い！すごい！というお声を伺いメンバー一同大変嬉しく思っています。 そんなカタチスペースTwitterコンテスト、沢山の投稿作品の中から審査結果を発表したいと思います！ Twitterコンテスト結果発表 **最優秀賞** Daichi on カタチスペース / https://t.co/XsyJZUIOrg #カタチスペース #カタチゴハン — Daichi@RUNTEQ 29th gen (@nagaemon1111) May 21, 2022 **優秀賞** 福岡合馬産筍とブルーチーズのラザニアだ！ natsumikan on カタチスペース / https://t.co/Jp92etu5Ee #カタチスペース#カタチゴハン — natsumikan (@isononatsumikan) May 21, 2022 Skip on カタチスペース / https://t.co/yuqVp4j3vZ #カタチスペース #カタチゴハン — Skip (@Skip369) May 21, 2022 **準優秀賞** 屋台のおっちゃんがきれいに並べてくれた planethouki on カタチスペース / https://t.co/YZylBllXQ3 #カタチスペース #カタチゴハン — planet★箒星 (@planethouki) May 21, 2022 博多ゆずモモ鍋@だっ家

こんにちは、カシカの山本です。 カタチスペースの普及活動と開発を担当しています。 今回から私もカシカブログの更新を行っていきますので、よろしくお願いします！ ※5/19　追加情報を更新しました さて、2周年を迎えたカタチスペースですが、皆さんは普段どのように利用されていますか？ 私自身もそうなのですが、やはり皆さんの投稿を見ていると、普段のランチやちょっと特別なディナーなど「ごはん」のカタチが多くアップロードされているようです。 普通はスマホで「写真」として記録を残していくかと思いますが、カタチスペースなら「3D」で質感やサイズ感も実物に近い形で保存でき、目の前にARで表示することも出来ます。 カシカでは、この感動をより多くの人に体験して頂きたい、3DやARをもっと楽しんで頂きたいと考えています。 ということで、カタチスペース史上初のイベント 「カタチスペースTwitterコンテスト」 を開催します！！ 今回のテーマは 「カタチゴハン」 普段のランチやちょっと特別なディナーなど、ゴハンを撮影して応募しましょう！ 晩御飯で食べたモダン焼き ランチのオムライス。お好きなものを撮影して応募してください。 カタチスペースのTwitterアカウントをフォロー後、小物モード でランチやディナーを撮影後。撮影したカタチのシェアボタンから 「#カタチゴハン 」を付けてTwitterに投稿することで応募が完了します。 コンテストということで、賞品として総額1万円分のAmazonギフト券をご用意させて頂きました！ 応募締切は5/20(金)の23時59分まで。結果発表は5/31(火)を予定しています。 ※福岡XR部とのコラボイベント開催により、応募締切を5⁄21(土)23時59分まで延長することになりました。 詳細は後述の追加情報よりご確認ください。 是非、受賞を目指してご応募下さい！ コンテスト詳細 テーマ ゴハン 対象 iPhoneX以降をお持ちの方 応募方法 ①カタチスペースTwitterアカウントをフォロー ②カタチスペースアプリをダウンロード ③普段のランチやディナーなどを”小物モード”で撮影 ④撮影したカタチのシェアボタンから「#カタチゴハン」をつけてツイート 表彰 最優秀賞：Amazonギフト券3000円分

カシカ広瀬です。 学術目的や博物館等に向けた3Dスキャン+ARの相談が増えてきました。 私はこういった分野の仕事はおおよそ20年くらい前から取り組んだことがあります。京都の有名なお寺の所蔵品、特に美術的な価値の高い壁の絵や仏像をデジタルアーカイブして博物館シアター向けのコンテンツに仕上げる仕事ですが、当時は数億円かけた巨大プロジェクトでした。 今でもそのレベルでやろうとしたら数億かかるのは間違いなく、カタチスペースでこのような巨大プロジェクトと全く同じことができるとは言えませんが、似たコンセプトのことをもっと身近に・気軽・手軽に実現できるようになっています。 特にパンデミック状況の昨今では、人の密集度を下げながらオンラインで、どのように自分たちのアセットの魅力を伝えていくかに多くの人が知恵を絞っています。 ご参考例 サントリー山崎蒸溜所VRツアー これはマターポートというシステムを使ったものです。企業ミュージアムをデジタルコンテンツ化してオンライン公開しています。 カタチスペースでデジタルアーカイブしてみた カタチスペースの魅力はなんといっても3D+AR制作からアウトプットまでの手軽さです。制作もスナップ写真感覚、Web公開まで全自動と、「とりあえず一回やってみようか」とアクションを起こしてみるのに最適です。 私は専門家ではありませんが3Dのデジタルアーカイブに何が向いてるのかな？と少しアイデアを出して個人的に試してみました。 第一弾はキノコです。 私たちが普段キノコと呼んでいるのは「子実体」という植物でいう花的なものです。こいつは野外でみかけると非常に美しくてめちゃくちゃ所有欲に駆られるのですが、残念ながらその形状の保存には全く適していなくて、持ち帰っても数時間でしおしおにしおれ、種類によっては水分を放出して自己崩壊に至り、その美しい姿は見る影もなく溶け去ってしまいます。 せいぜいこうやって写真で記録しておくくらいですね。著者撮影テングタケ。2019年9月、青森。 博物館などでは乾燥した色も褪せてしまったキノコの標本を展示してますね（これはこれで価値あるものです）。 でもキノコの美しくも生々しい色や形を維持できるとしたら？デジタル、3Dならできるのでは？と思ってやってみました。 オー、マジェスティック！ スーパーで買ったエリンギが突如としてリビングの床に屹立する雄姿をご覧ください（本物は食べちゃいました、これCGだよ、念のため）。形状保存の難しいキノコが、そのリアルな姿をデジタルで保っています。今度から山でキノコを拾った方はカタチスペースでその場で、その日のうちに3Dスキャンアーカイブすることをお勧めします。いや、むしろカタチスペースを片手にキノコ狩りに出かけるべきでしょう。 AR、3Dデータの確認はこちらから 傘の裏側のヒダまで綺麗にデータ化 続いてシイタケです。いいですね。傘の裏側のヒダまで綺麗にデータ化できています。 実際に3Dデータをご確認いただく場合は以下。 秋田県産 近所のスーパーで138円（税抜） サイズが小さいのを若干懸念していましたが、このサイズでもモデル化できるのですね。 少し実務レベルに落とし込んでみましょう。 例えば既に標本やサンプルのデータベースか何かで管理している場合は、コメント欄などにカタチスペースのURLを記載しておくとよさそうです。外部公開しない設定にしておけば撮影者のみが確認できます。 外部に公開を考えている場合はカタチスペースを埋め込んだURLを公開ページに表示されるようにするだけで、3D+ARで気軽に対象物を観察できるサイトができてしまいます。 新しく何かを立ち上げるのではなく、既存のものにプラグ&プレイで追加できてしまうのもカタチスペースの大きな魅力の一つです。 年度末を控え、何か有効なご予算の用途をご検討の方。ご研究のアウトリーチやデータ整理、標本のデジタルアーカイブのご相談等承りますのでお気軽にご相談ください。 お問い合わせ カタチスペースアプリは無料でダウンロードして利用することができます。 カタチスペースアプリのインストールはこちらから 撮り方のコツ動画 カタチスペース　サービスサイト カタチスペースのTwitterアカウント(@katachispace)運用中！ サービスのアップデートや最新情報を発信しております。 是非フォローをお願いいたします。 Follow @katachispace .iframe-center { display: flex; justify-content: center; flex-direction: column; align-items: center; } .

こんにちは、カシカの広瀬です。 Shopifyは言わずと知れたEC運営のプラットフォームですが、ShopifyにはARの表示機能がついていることをご存じですか？ どんなものかイメージがつかない方はこちらのサイトで体験してみましょう。 ページ遷移後、右上のキューブ型のボタンを押すだけです。 が、ボタンを押す前にまずこのスタンドを買って机に置いたらどうなるか、まず自分の頭で創造してみてください。終わった方からページ遷移してキューブボタンを押してデスクにかざしてください。 どん。 でかっ！ いかがでしたか？専用アプリのDLやプラグインのインストールなしにデスクの上にスタンドが出てきて、設置したときの様子が具体的になりましたね！この具体的なイメージの提供がARショッピング最大のメリットです。 買った後の「コレジャナイ」を可能な限り減らし、シッピングや問い合わせのコスト、返品を減らしていく。さらにサイト運営の面では滞在時間、巡回のページ増加も見込め、商品に対する理解度やブランドへの親密度を上げていくこともできます。 こんな便利AR機能がShopifyでは追加料金などは無しに提供されています。つまり、自分の売りたい商品の3Dデータさえあれば、ShopifyでだれでもARショッピング体験を消費者にお届けすることができるということですね。 ではここで具体的な話ですが、スタンドのARデータはどのようなプロセスでShopifyにアップしたのでしょうか？ 少々込み入った話をしますと、現在、工業製品の設計はCADというコンピューターを使ったデザインと製造のプロセスがほとんどで、工業製品のARの起点はCADにあると思ってください。気になる方はプロダクトデザイナーさんに聞いてみるといいでしょう。 先のスタンドのARはこの5ステップを踏んでいると考えて差し支えありません。これ、結構すごい労力なんです。 ②～④のステップは最悪外注コストが発生します。これが日本国内でやれば最低20万くらいはかかるので、商品ラインナップを揃えていこうとしたら仰天コストになるのは目に見えていてその時点で二の足を踏みますね…。これがARショッピングの大きな罠です。 でもやってみたいですよね？ 無料かつ簡単に実現できるんです。 そう、カタチスペースならね！ たったの3ステップ、しかも一人でできる。 ①はカタチのスキャンのコツを見て試してみてください。 ②は今のところサービスとしては提供していないので、やってみたい方はお問い合わせ、もしくはこちらの記事を見ながらDIYもできます。いずれカタチスペースのオプションとして提供するようになるかもしれません。 今回は特別にサンプルのデータも用意しておきましたので、とりあえず試してみたい、という方はこちらからデータをDLしてみてください。 ③Shopifyの管理画面から「商品管理 > 全ての商品 > 商品を追加する」をクリック。 商品登録のページで、メディアの欄に3Dデータ(.glb形式)をアップロード。 あとはその他の商品情報を入力し、「保存する」をクリックして完了。 画像をアップするのとまったく同じ操作で、ページに上記のスタンドのようなARショッピング機能を付けることができました。 いかがでしょう？無料で、しかも一人で作業できるなら、試してみない手はないですね。ShopifyでECを運営してる方はぜひぜひお試しいただければと思います。 コンタクト カタチスペースアプリは無料でダウンロードして利用することができます。 カタチスペースアプリのインストールはこちらから 撮り方のコツ動画 カタチスペース　サービスサイト カタチスペースのTwitterアカウント(@katachispace)運用中！ サービスのアップデートや最新情報を発信しております。 是非フォローをお願いいたします。 Follow @katachispace

こんにちは！カシカの奥です。 最近はメタバース関連でカタチスペースのカタチをメタバースでも利用できないか？というお問い合わせが増えてきました。 カタチスペースでは、商品を実物の大きさで見るARだけでなく、メタバースで利用されるVR、また皆さんに身近なパワーポイントでも カタチを活用することができます。 今回は、カタチスペースのメタバース活用法についてご紹介します！ 目次 カタチスペースからのカタチのダウンロード方法 カタチのメタバース(VR)への持っていきかた おまけ編 (パワーポイントに持ち込む！) カタチスペースからのカタチのダウンロード方法 早速試してみます。 ピザとウナギ弁当をメタバースに持って行きましょう。 自分で作成したカタチは、WEBからダウンロードすることができます。 カタチを置くボタンの下の点３のアイコンをクリック・タップしてください。 上のボタンからダウンロードします。 （このダウンロードボタンは、自分のスキャンしたカタチのみ表示されます。） カタチの3DデータはglTF(.GLB)というフォーマットでダウンロードでき、 ゲームエンジンのUnity/UnrealEngineを始め、プレゼンツールのパワーポイントまで様々なソフト読み込める3Dデータ形式になります。 カタチのメタバース(VR)への持っていきかた メタバースは様々なプラットフォームがありますが、ここではOculus Homeに読み込む方法を紹介します。 カタチスペースからダウンロードしたGLBファイルを上記のOculus Homeの_importフォルダ以下に移動させてください。 メタバースに取り込む準備はこれだけです。 あとは普通にOculus を起動してみましょう。 Oculusを起動し、HOMEに映り、メニューから「イベントリー」→「インポート」を選択します。 すると、先ほどコピーした、フォルダのカタチの3Dデータを見ることができます。 あとは、対称の3DデータのアイコンをつかむとHOMEの空間にカタチを配置することができます。 先日スキャンしたドーナツも配置できます。 Oculus Homeでは、3Dオブジェクトを自由に大きくしたりできるので、 ソファ的に配置してもおもしろいですね。 また、インポートした3Dオブジェクトは何個でも置くことができるので、家具やソファなどを取り込んで、レイアウトシミュレーションに活用したり、展示会などの設置シミュレーションをすることもできます。 現実世界では、物体を用意したり、動かしたり大変な作業もVR空間では簡単に行うことができます。