恒例の年末に記事を書くやつ向けの記事です。 今回は AR.js についてご紹介します。 （過去の記事） 2019 - Three.js 2020 - Google Earth Studio 2021 - Deck.gl この記事でやってみること Step 1 : HTML のみで AR を実現 AR.js Studio (Marker based) QR コードの生成 3D モデルの取得 Step 2 : エンティティの動的追加 AR.js Studio (Location based) 位置座標の取得 (Google Map) 相対位置／座標の角度と距離の対応 Step 3 : インタラクションの追加 モデルの切替 テキスト表示 アニメーション Web AR とは AR（Augmented Reality; 拡張現実）は，現実世界にコンテンツのオーバーレイ（重ねること）を可能にするテクノ

お使いのブラウザではご利用になれません。Google Chrome, Firefoxなど、他のブラウザからお試しください。

3Dモデルアバターを簡単に作成してバーチャルYouTuber(VTuber)になれるツール「Vカツ」が、2022年6月30日をもってサービスを終了すると発表しました。Vカツを使ってVTuber活動を続ける人も多く、突然のサービス終了に戸惑う人も多い中、VTuberの人気ランキングサイトを提供しているユーザーローカルがブラウザとウェブカメラがあれば無料で誰でも簡単にVTuberになれるウェブツール「Webcam VTuber」を発表したので、実際に使ってみました。 Webcam VTuber - ユーザーローカル https://vtuber.userlocal.jp/ ウェブカメラをPCに接続した状態でブラウザから上記URLにアクセスすると、ウェブカメラへのアクセスが求められるので、「許可」をクリックします。 ウェブカメラとの同期に少し時間がかかりますが、数十秒するとブラウザ中央に表示され

VroidStudioと3teneという顔認識ソフトを利用してみる こちらの記事でVroidStudioの簡単な説明をしましたが、VroidStudioを利用してオリジナルで制作したモデルと3teneというWEBカメラで顔認識が出来るvTuber向けのソフトを利用してみたいと思います。

ピクシブは10月31日、オリジナル3Dキャラクター制作ソフト「VRoid Studio」正式版の提供を始めた。利用料は無料。初心者でも直感的に操作できるのが特徴。2018年8月にβ版を公開し、ユーザーからのフィードバックを受けつつ機能を追加。3年越しでの正式版の提供となる。 3Dの素体をベースに、顔パーツ、髪形、服装などさまざまなアイテムを追加。モデリングすることなく3Dキャラクターを制作できる。それぞれのパーツには調整用のパラメーターを設けており、特に顔と体についてはアレンジ用に、さらに多くのパラメーターが設定している。 服は複数のテンプレートから好みの形を選んで作成可能。服を組み合わせた「重ね着」に対応する。リアルタイムに服のテクスチャを描いてキャラクターを制作できるテクスチャ編集機能や、制作した顔や服のパーツを他のモデルにも利用できる「カスタムアイテム」機能も実装する。メガネやけもみ

3Dキャラクター制作ソフトウェア 『VRoid Studio』正式版を無料提供開始 ～直感的な操作感と高いカスタマイズ性！誰でも3D創作が楽しめる～ ピクシブ株式会社（本社：東京都渋谷区、代表取締役：國枝信吾、以下ピクシブ）は、3Dアバター事業「VRoidプロジェクト」において、提供する3Dキャラクター制作ソフトウェア『VRoid Studio』の正式版を10月31日（日）にリリースしました。 『VRoid Studio』正式版のダウンロードはこちら 『VRoid Studio』は、表現力を活かしてオリジナルキャラクターを簡単に作れる3Dキャラクター制作ソフトウェアです。2018年8月3日（金）にベータ版を一般公開し、この度、ユーザーの皆さまからいただいてきたフィードバックと、世界的な3Dキャラクターモデルの需要の高まりを受け、正式版の提供を開始しました。本ソフトウェアは、公式サイトとSt

たくさんのプリセットアイテムとパラメータを搭載。ゼロからモデリングをしなくても、アイテムを選んで組み合わせ、パラメータを調整するだけでキャラクターメイキングができます。

このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D

こんにちは、石川と申します。普段はデイリーポータルＺというサイトで編集をやっております。 拙宅には、「おもちゃが無限に出てくる機械」があります。 機械から出てきたおもちゃの数々です（おもちゃ以外の物もあるけど）。もちろんこれはごく一部です。なんたって無限なので。 ちょっと想像してみてほしいんですけど、例えばあなたの趣味がカメラだったとするじゃないですか。一眼レフのカメラとかレンズとかが無限に出てくる機械があったらどうします？ 端的に言って最高じゃないですか。もちろん、そんな機械はないです。でも、あなたに子供がいた場合、子供にそれを体験させてあげることは可能です。なぜなら「おもちゃが無限に出てくる機械」があるから。 で、その「おもちゃが無限に出てくる機械」の本体が、こちらです。 机の上にある青いやつ。3Dプリンタといいます。普通のプリンタは紙に写真や文字を印刷しますが、3Dプリンタは簡単に言

どうも、まさとらん（@0310lan）です。 今回は、面倒な「インストール」や「ユーザー登録」など一切不要で、ブラウザから即座に起動できる無料の3Dゲーム開発エディタのご紹介です！ ゲームに限らず、3DコンテンツやVRアプリに興味のある方にもオススメのサービスですよ。 【 nunuStudio 】 「nunuStudio」は、既存のWeb技術（Web GL, Web Audio, Web VR…）を融合して構築されているのが特徴で、3D描画は「Three.js」をベースにしており、物理エンジンは「cannon.js」を活用しています。 ■「nunuStudio」を始めよう！ それでは、実際に「nunuStudio」の開発エディタを使ってみましょう！ まず、サイトにアクセスしたら、トップ画面にあるボタンをクリックします。 いくつかの選択肢が表示されますが、ここでは「Web版」のボタンをクリッ

ピクシブで働く人の姿や、どんな技術を使ってプロダクトを生み出しているのかがみえる。そんなイベント「pixiv Night #02」が、2017年3月14日に代々木のピクシブオフィスにて開催されました。 テーマは「画像処理」ということで、イラスト1枚からグッズを作成できるサービス「pixivFACTORY」の開発チームに所属するhayaが、同サービスの画像処理システムについて、具体的な実装方法を語りました。その内容をお届けします。 買う前に実物を目にしたような体験をさせたい 物を買う時、実物をみたいと思いませんか？ たとえば、オリジナルマグカップを作りたいと考えた場合、イラストを描いて画像ファイルを入稿すれば、イラスト入りマグカップは製造できます。しかし、お金を払って手に入れるものなのですから、どういう見た目になるのかを事前に確認できないと不安になりますよね。 では、イラストが入った状態のグ

HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame WebXRフレームワークの「A-Frame」を使えば、JavaScriptを記述することなく、HTMLにタグを追加するだけでVRコンテンツが作成できます。 次のデモはA-Frameを用いてt作成したオリジナルのVRデモです。中央の円状のカーソルを牛の3Dモデルに重ねることでアニメーションします。 ※パソコンではドラッグ、スマートフォンではジャイロセンサーが検知した傾きで視点が変わります。右下のアイコンをクリックすると、HMDで閲覧できるモードへ切り替わります。 デモを別ウィンドウで開く HTMLをマークアップするようにVRコンテンツを作成しよう VRコンテンツをHTMLのマークアップのように作成するには、JavaScriptライブラリ「A-Frameエー・フレーム」を使用します。「やっぱりJa

アニメGIFに何本か縦線を入れるだけで、アニメGIFを3D化出来ると言う信じられない話が、本日欧米で話題になっておりました。 それでは早速12連発でどうぞ！ 1 2 3 4 5 6 7 8 9 10 11 12 縦線の奥行きでの位置（Y）を決めて、その前後に物をはみ出させたり引っ込めたりすることによって、人間の目があたかも本当に奥行きがあるかのように錯覚してしまうんですねぇ。 いやしかし、我々人間の脳と、こんな事を思いつく方が素晴らしい！ 普段は欧米の最先端テクノロジー業界情報を配信しておりますので、twitterやFacebookページ、Google+で是非フォローをお待ちしております。 また、記事の買い取り行ってますのでKataribeも是非よろしくお願いします！ GIFs: 3D pictures become possible with two straight lines

Unityで開発するメリットは、それほどの知識がなくてもドラッグ＆ドロップで手軽に3Dデータが扱えることと、物理エンジンをすぐに導入できることです。思いついた仕組みを短時間で実際に動かすまで持っていけるため、触り心地やレベルデザインの部分に時間を割くことができます。 また、1つのプロジェクトをiOSやAndroid、Flashといったマルチプラットフォームに書き出せるため、より多くの人に自分の作ったゲームを遊んでもらえます。 モバイル端末のゲーム制作に興味があっても、なかなかネイティブ言語（iOSだとObjective-C、AndroidだとJavaなど）による開発に手が出せなかったような人には、ぜひUnityによる開発を体験してみてほしいと思います。 本連載では、Unityを使用した簡単な3Dゲームを仕上げるまでの過程を解説していきます。実際にUnityで作っていくところから説明していき

JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。 デモを見る (2023年バージョン) デモを見る (2012年バージョン) ※2023年にデモをThree.js r151で動作するようにメンテナンスしました。 WebGLとCanvasの違い 今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。 失敗作A (自前で作成したバージョン) 失敗作B (Three.jsのCanvasレンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した