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 ゲーム向けの音 2D 衝突検出 タイルとタイルマップの概要 Web上の 3D ゲームの概要 Web上の 3D ゲームの概要 基本の 3D理論の説明 A-Frame Babylon.js PlayCanvas を利用した基本的なデモの制作 Three.js を使った
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
GitHub - aframevr/aframe: :a: Web framework for building virtual reality experiences.
👓 Virtual Reality Made Simple: A-Frame handles the 3D and WebXR boilerplate required to get running across platforms including mobile, desktop, and all headsets (compatible with a WebXR capable browser) just by dropping in <a-scene>. ❤️ Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR and AR enthu
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
WebARでVroid(3Dモデル)を出現させてみる - Qiita
概要 この記事はWebARでVroidを出現させてみるチュートリアルです。 Vroidとは 無料の3Dキャラクターメイカー「VRoid Studio」 Vroidとはpixivが2018年7月にリリースしたVroid Studioで作成されたVRMファイル形式の3Dモデルのことです。 モデリングの知識がなくても簡単に可愛いキャラクターを作成できます。 Vroid Hubでは、有志が作成したモデルがアップロードされています。 WebARとは WebARとは、ブラウザ上でAR(拡張現実)を利用できるようにした技術のことです。 アプリの場合はユーザが使い始めるためにアプリをダウンロードしなければなりませんが、ブラウザ上で動くWebアプリであれば、手軽にVRを楽しむことができます。 今回はA-FrameというフレームワークとAR.jsというライブラリを使用して作成していきます。 手順 WebARの
最近のAR技術調査 - Qiita
概要 ARについての調査結果&知見をまとめていきます。 ARとは AR(拡張現実)とは、現実世界に3Dモデルなど仮想のオブジェクトを重ね合わせたもののことを指します。 他にも似たようなものにVR(仮想現実),MR(複合現実),SR(代替現実)などがあり、全て合わせてXRと呼ばれたりします。 参考：VR・AR・MR・SRの違いとは？それぞれの活用方法を紹介 - エレコム ARの種類① ARには、主にビジョンベース型とロケーションベース型の2つの方法があります。 さらに、ビジョンベース型は、マーカー型とマーカーレス型があります。 ビジョンベース型：カメラを通した画像で空間を特定し、仮想の物体を表示する。 マーカー型：特定の図形をカメラで認識させる方法。 マーカーレス型：カメラに映る平面などを認識する方法。 ロケーションベース型：GPSで位置情報を取得することで空間を特定し、仮想の物体を表示する
WebARとは？業界別の活用事例から開発方法まで徹底解説 | XR-Hub
現在、プロモーションやゲーム、業務効率化まで、様々な産業で活用されているテクノロジー、AR（拡張現実）。 スマートフォンでARを体験する際、多くの場合専用のアプリをインストールしなければならない点がネックでした。 その問題を一気に解決するのが、WebARです。 今回の記事では WebARとは：ネイティブアプリとの違い WebARの活用メリット WebARの活用事例5選 WebAR作り方：の開発方法とコスト といった点解説していきます。 WebARを活用した企画を実施しようと考えている企業担当者の方、WebARのアプリケーションを開発してみたいクリエイターの方はぜひ参考にしてみてください！ WebARとは：ブラウザで体験できるARコンテンツ・技術のこと WebARとは、専用アプリを必要とせずに、Webサイト上で動作するARサービスのことです。 「ポケモンGO」によって一般的になったAR（拡張
トランプ氏が会見、開票作業を「詐欺」と主張
（ＣＮＮ） トランプ米大統領は４日未明、ホワイトハウス内で記者会見し、各州で進む大統領選の開票作業を「詐欺が進行中だ」と根拠なく批判した。 トランプ氏は会見で、「何百万もの人たちがこちらに票を入れた」「とても残念な集団が、その人たちの選挙権を取り上げようとしている」と主張。誤解を招く表現や明白なうそを連発し、民主的な選挙の手順を否定するに等しい発言を繰り返した。 現時点で自身が優勢となっている州は、開票率にかかわらず勝利と判定するべきだと言い張った。 ３日夜の早い時点で勝利を宣言し、盛大に祝う予定だったとしたうえで、「我々が完全に勝っていた。それなのに突然取り止めになった」「これは米国民に対する詐欺だ。我が国の恥だ」と述べた。 実際には未集計の票が大量に残っているにもかかわらず、「率直に言って我々はこの選挙に勝った」と宣言し、連邦最高裁に訴えると表明した。
「なんてこった」4年前の衝撃…パックンが語る大統領選：朝日新聞デジタル
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
愛想尽かす若者、評価高める労働者…トランプ票の行方は：朝日新聞デジタル
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
UE4 AIで使う移動と停止のまとめ - Let's Enjoy Unreal Engine
UE4にはAIを移動させるための機能が沢山あります。 ちょっと多すぎて、いつも移動はできるのに、どれで停止させられるのかわかりづらいですね… 個人的な備忘録も兼ねてまとめておきたいと思います。 まずUE4でAIに移動で使うための機能は大きく2種類あります。 ・ブループリントで利用するMoveTo系 ・ビヘイビアツリーで利用するMoveTo系 大きく分けると、この2種類ですが、それぞれに色々なノードがあります。 これらの移動系ノードと停止系ノードについて解説していきましょう。 ちなみにビヘイビアツリーの場合には、移動はビヘイビアツリーで行いますが、停止は全てブループリント上で行いますので注意してください。 移動する前の話 まず前提としてキャラクターを移動させるには、"Character Movement Component"もしくは"Floating Pawn Movement Compon
UE4で外部ファイルを扱ってみる - EagleGames 制作メモ
概要 ブループリントで外部ファイル（パラメータなど）を扱う方法を模索。 DataTable形式でCSVファイルをインポートする方式はありますが ゲーム制作だと、動的に読み込めるとパラメータ調整はしやすくなりますので 開発が進んでくると必要になってくるかなと思います。 （DataTableだと動的に読みなおす、というより設定し直すという感じのため） DataTableに関しての参考URL [UE4] CSVデータを扱う方法 DataTable編 | historia Inc - 株式会社ヒストリア Unreal Engine | データ駆動型のゲームプレイエレメント 既存プラグインでの対応方法例 Json-Queryプラグイン JSON Query - Epic Wiki Json形式をサーバーやローカルで指定するとJsonの値を取得できる。 ※このプラグインを導入する流れは下記のalwei
Node.jsでコマンドライン引数を取得する - Qiita
実装段階で値を変えながら試したい場合に、毎回忘れてしまうのでメモしておく。 コマンドライン引数を渡す 通常通り、引数を渡します。
PythonでExcelファイル（xlsx）を読み書きするopenpyxlの使い方 | note.nkmk.me
Pythonのライブラリopenpyxlを使うとExcelファイル（.xlsx）を読み書き（入出力）できる。使い方を説明する。 BitBucketのレポジトリと公式ドキュメントは以下のリンクから。 openpyxl / openpyxl — Bitbucket openpyxl - A Python library to read/write Excel 2010 xlsx/xlsm files — openpyxl 2.5.3 documentation PythonでExcelファイルを扱うライブラリの違いや使い分けなどは以下の記事を参照。 関連記事: PythonでExcelファイルを扱うライブラリの比較 openpyxlは既存のExcelファイルの書式を保ったまま編集・追記（セルの値の変更、新たなセルの追加など）したい場合に便利。書式などは気にせず数値や文字列のデータを読み込んで分
Node.jsでExcelファイルのread/write - Qiita
概要 Node.js で Excelファイルが扱える xlsx を紹介します Excelファイルの読み書きができます PCにExcel入れて無くても大丈夫 なんで Node.js？ VBAだとMacで動かない VBAのエディタ使いづらい コードのバージョン管理しづらい xlsxのよさげなポイント Node.js で Excelファイルが扱える 対応フォーマットがめっちゃ多い https://github.com/SheetJS/js-xlsx#file-formats リファレンス見る限り色々できそう サンプル workbook, worksheetの読み込み const XLSX = require("xlsx"); const Utils = XLSX.utils; // XLSX.utilsのalias // Workbookの読み込み const book = XLSX.readF
[UE4] Input入門｜株式会社ヒストリア
今回は、BluePrintから、キーボードやマウスなどの入力を利用する方法を紹介します。 １．基本的なキーイベントの取得 まずはもっとも単純な、キーが押された時と離された時のイベントを取得します。 UnrealEditorを開いて、↓のメニューからLevel Blueprintを開きます。 「Event Graph」内を右クリックして、アクションリストを開きます。[Input -> Keyboard Events] の中に、キーボードのボタンがずらーっと並んでいます。 この中から、取得したいキーを選択してノードを作成します。今回は「Z」キーを選択します。 「Z」というノードが作られます。 これで、Zキーが押された時に「Pressed」、離された時に「Released」に処理が流れてきます。 それぞれに簡単な文字列表示のノードをつないで、結果を確認してみましょう。 「Play」で実行してビュ
![[UE4] Input入門｜株式会社ヒストリア](https://cdn-ak-scissors.b.st-hatena.com/image/square/820ab07333162af8df401e0161fd034a520033b0/height=288;version=1;width=512/https%3A%2F%2Fhistoria.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2014%2F05%2Finput.jpg)
Unreal EngineでIoT、はじめる時の基礎（通信REST、グラフ描画、地図連携） - Qiita
はじめに この記事は、NTTテクノクロスのAdvent Calendar 2019の12日目の記事です。 NTTテクノクロスの赤間(AKM)です。普段はIoT基盤をクラウド上にアジャイルに開発・構築する仕事をしています。そして、最近、趣味でUnreal Engine 1をはじめました。 この記事では Unreal Engine を IoTの可視化 に使うという視点で、基礎的な部品についてまとめてみたいと思います。 通信 (REST) グラフ描画 (棒グラフ、直交座標グラフ、時系列グラフ) 地図連携 (OpenStreetMap) なお、この記事だけで上記3つを組み合わせた IoT可視化システム は構築できません。あしからず。 1. デジタルツイン さて、デジタルツイン というキーワードをご存知でしょうか。 現実(Real) の世界とそっくりな 仮想(Virtual) 世界を 対(つい) と
UE4のライティング解体新書～効果的なNPRのためにライティングの仕組みを理解しよう～
講演動画：https://www.youtube.com/watch?v=ta5D8nsfHI8 2018年10月14日に行われた「UNREAL FEST EAST 2018」におけるソレイユ株式会社様と Winter Crown Works様の講演で使用されたスライドです。 ●公式サイト https://unrealengine.jp/unrealfest/ ＝＝＝ 知っているようで知らないUE4内部のライティングの仕組みを解説。NPRだからこそライトの理解は大事。フォワードとディファードの違いも掘り下げます。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Women Who Code - Empowering women to excel in tech careers
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
https://jp.techcrunch.com/2020/10/04/oculus-quest-2/
ヴィーガンはなぜ、あなたが考えているほど地球に優しくないのか
UE4 AIでの移動系ノードまとめ（Simple Move To Actor、Simple Move To Location、Move To Location or Actor、Move To Location、Move To Actor、AI MoveTo） 凛(kagring)のUE5/UE4とゲーム制作と雑記ブログ
Unreal Engine のアセットのメタデータ | Unreal Engine 5.4 ドキュメンテーション | Epic Developer Community
Datasmith のメタデータを使用する | Unreal Engine Documentation
https://docs.unrealengine.com/ja/Engine/Blueprints/BP_HowTo/WorkingWithMaps/3/index.html
Unreal Engine でのウィジェットの作成 | Unreal Engine 5.4 ドキュメンテーション | Epic Developer Community
PCWatch | 簡易水冷なんて飾りです!?偉い人にはそれが分からんのですよ ～“ホンキ”の冷却なのか“雰囲気”なのか。いま明かされる簡易水冷の事実
blueprintUE | PasteBin For Unreal Engine
Character blueprint with Click Events
How to add "Actor on Clicked" event to pawn?