🐶AR.jsを使ってWebAR年賀状を作る🐶 - Intelligent Technology's Technical Blog
こんにちは、野口🐴です。 みなさん年賀状書いていますでしょうか。 ITIの今年の年賀状は趣向を凝らしてWebAR年賀状を作ってみました。 🔰Why WebAR🔰 なぜWebARをしようと思ったのかというと、今までスマホではAndroidでしかできなかったブラウザからのカメラアクセスがiOS11(Safari)からできるようになったためです。 Webを使ったARアプリならスマホアプリと違ってインストール不要なため、アクセスがより容易となります。 🔮ライブラリ🔮 以下の2つのライブラリを使用してマーカー型WebARアプリを作成します。 AR.jsはWebでARを実現することができるオープンソースライブラリです。 A-FrameはMozillaが開発したWebVRフレームワークでHTMLタグだけで簡単に3D空間を構築できます。 github.com aframe.io 🐈できたもの
AR.js Documentation
AR.js - Augmented Reality on the Web AR.js is a lightweight library for Augmented Reality on the Web, which includes features like Image Tracking, Location based AR and Marker tracking. Location Based documentation updated and enhanced for AR.js 3.4 What Web AR means (Augmented Reality on the Web) Augmented Reality is the technology that makes possible to overlay content on the real world. It can
スマホARを作ろう - こくぶん研究室
スマホ AR を作ろう はじめに 不思議で楽しい AR ニンテンドー3DSの「ARゲームズ」（2011）で「AR」という言葉が一気に知られるようになりました。そしてポケモンGO（2016）の流行で、一気にたくさんの人が AR を利用するようになりました。 AR (Augmented Reality; 拡張現実) は、カメラの映像にCGなどを重ねて表示することで、現実世界を情報で拡張した体験を生む技術です。単純に「不思議」と思える、楽しいものですね。 スマホで AR も簡単に Processing で AR このサイトでも Processing を使って AR アプリを作る方法を紹介しました。パソコンとWebカメラがあれば、簡単に作れることを紹介しました。でも、パソコンだけでなく、スマホでも作りたいですね。もちろん、スマホで AR コンテンツを作る方法はこれまでもありました（例えばこちら）。
「AR.js」でオリジナルのマーカーを設定する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近、AR.jsに関するあれこれを記事にしていました。これを誰かへのプレゼントにうまく使えないかなあといろいろ調べていたのですが、その中でオリジナルのマーカー設定ができたら素敵だなと思ったので、今回はその方法をまとめてみました。 オリジナルのマーカーの作成 作成自体は非常に簡単。ジェネレーターサイトが用意されています。 AR.js Marker Training このサイトを使って、「AR.js」で認識するためのの『マーカー画像』と『.patt』ファイルを生成します。その『.patt』ファイルをWebサーバーにアップロードし、ソースコードを読み込むように埋め込んでいくという手順です。 まずは、ファイルをジェネレーターで用意します。 アクセスするとこのようなサイトが表示されます。 その中の、左上の『UPLOAD』のボタンをクリックするとファイルを選択できます。好きな画像をアップロードしてみま
【AR.js入門】簡単にWebARで遊んでみた【A-Frame使うよ】 - Qiita
※ 2019/11/6 更新 GitHub Pagesのリンクが変わったので更新 はじめに この記事はUUUM Advent Calendar 2018 22日目の記事です！ ARで遊びたくなったので、WebでARやる方法しらべてみたんですが、意外と簡単でした。 みなさん一緒にARで遊びましょうー！ 【もくじ】 はじめに この記事について とりあえずデモ 具体的な作り方 手順 ソースコード A-Frameのタグの紹介 オブジェクトファイルについて 実践 おわりに この記事について 【この記事の対象者】 ARで遊びたい人 WebAR初心者 a-frameもよくしらないけど知りたい 【この記事の目指すところ】 WebARで遊べる簡単なサイトを作る 【この記事で使うライブラリの紹介】 aframe WebVRを手軽にできるようにしたライブラリ。つよい。 https://github.com/af
超簡単！A-Frameアニメーションの書き方まとめ | 子育て×エンジニアの超自由研究ブログ
更新日: 2020-05-01 今回は、VRコンテンツをHTML風に簡単に書けるA-Frameを使って、WordPress記事内に作成した3Dコンテンツにアニメーションをつけてみようと思います！どれも簡単に書けるので試してみると面白いとおもいます！ ちなみに、A-Frameでアニメーションを記述する際には、<a-entity> にプロパティとして記述する方法と、<a-animation>というタグを使う方法がありますが、後者はdeprecateとなっており<a-entity>を使ったほうがよいです。 バージョン0.9.0の公式ドキュメントでは、Core API一覧からanimationは削除され、components一覧に記載されるようになっています。 Entityの準備今回は以下のように２つの平面（plane）を準備します。コードを以下のような感じです。この赤色の平面に対して、アニメーシ
A-Frame – Building Blocks for the VR Web
Subscribe to get updates on A-Frame and our VR projects! Subscribe
A-Frame を使った基本的なデモの作成 - ゲーム開発 | MDN
Web のゲーム開発紹介 Web のゲーム開発紹介 ビデオゲームとの違い ツール Canvas CSS Full screen Gamepad IndexedDB JavaScript Pointer Lock SVG Typed Arrays Web Audio WebGL WebRTC WebSockets WebVR Web Workers XMLHttpRequest ゲーム開発テクニック asm.js の同期スクリプトを利用する 起動パフォーマンスを最適化する ピア通信チャンネルとして WebRTC を利用する Web ゲームの効率的なアニメーション Web ゲーム向けの音 2D 衝突検出 タイルとタイルマップの概要 Web上の 3D ゲームの概要 Web上の 3D ゲームの概要 基本の 3D理論の説明 A-Frame Babylon.js PlayCanvas を利用した基本的
A-Frame を使ってみた - Qiita
はじめに お手軽にVR表現ができるとのことで使ってみました。 何か動きがあるものを表示してみようと思います。 準備 "aframe.min.js" を読み込む。 <html> <head> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head> <body> <a-scene> <a-cylinder position="0 0.5 -3" radius="0.5" height="1.0" color="#88005D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#000000"></a-
a-frame のデモを触ってみる - Qiita
はじめに 以前、「手軽にVRで遊んでみたい。」と銘打って webVR の a-frame というフレームワークを少しいじってみました。 a-frame に目をつけた理由は以下の通り まず、webVR が特別なアプリのインストールを必要としない。 PC・スマホなどブラウザを開くことができれば様々なデバイスで実行できる。 複雑なことをしないのならば html をちょっと書くだけで VR ができる。 ちなみに、前回言い忘れたが Ver.1.0.0 のメジャーアップデートで webXR に対応しているらしい。やったね。 というわけで、私は前回は a-frame の「Building a Basic Scene」にしたがってただの赤い箱を出力するところまではやったわけです。 <html> <head> <script src="https://aframe.io/releases/1.0.1/afr
VR表現をカンタンに実装できる？「A-Frame」であそんでみたよ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
その中で「A-Frame」というWebVRフレームワークをつかって球体をさらっと表示させていました。今回はこの「A-Frame」を使ってどんなことができるのか、いろいろ試してみた結果をお話ししたいと思います。 「A-Frame」とは WebVRをHTMLの記述で簡単に作成できるフレームワークで、Three.jsがベースになっています。シンプルなものなら、タグを記述するだけでWebVRが実装できます。 公式ページ: https://aframe.io/ スマートフォンだと、 iOSのSafari AndroidのChrome なども対応しており、 PCだと最新バージョンの Firefox Chrome Safari に対応しているとのことです。 参考URL: https://aframe.io/docs/0.8.0/introduction/vr-headsets-and-webvr-bro
A-FrameとAR.jsで超簡単AR（PC・スマホ・マルチマーカー対応） - Qiita
背景と目的 2017年7月11日に A-Frame のブログにて「Creating Augmented Reality with AR.js and A-Frame」という記事が公開されました。VR用フレームワークの A-Frame と、AR用フレームワークの AR.js の組み合わせで、超簡単なARの実装方法が紹介されています。 これまで Processing + NyARToolkit が「簡単」と感じてよく遊んできましたが、A-Frame + AR.js はもっと簡単で、PCでもスマホでも難なく動作しました。単純なコンテンツを作って遊ぶだけなら、これで十分かもしれないと感じています。 既にご存じの方も多いと思いますが、日本語情報が少なめですし、自分なりの学習結果を簡単にまとめておきます。 とにかく動かす OBJ形式のCGモデルを表示（マルチマーカー） ＜2019/08/05 追記＞
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Building an Augmented Reality Treasure Hunt with A-Frame and AR.js - Women Who Code
GitHub - mridulrb/AR_Treasure_Hunt_using_A-Frame_and_AR.js: Use A-Frame & AR.js to create an Augmented Reality Treasure Hunt using HTML, CSS & JavaScript.
How To Create An AR Treasure Hunt using A-Frame and AR.js | by Mridul Bhandari | Towards AI | Sep, 2020 | Medium
GitHub - aframevr/aframe: :a: Web framework for building virtual reality experiences.