SlideShare ist ein Scribd-Unternehmen logo
1 von 48
Downloaden Sie, um offline zu lesen
A-Frame
Hands-on
2017/01/29 杉井庸一
お願い
HTML、Javascriptの知識がある人を前提に書いています。
以下の機器をご用意ください
◦ ハンズオン用のPC
◦ インターネットにつなげられる機器(ポケットWiFiやテザリングなど)
事前に以下のソフトウェアをインストール願います。
◦ Google Chrome (スマホで確認したい人は、スマホにもGoogle Chrome)
◦ Node.js
◦ HTML開発に使用するお好きなテキストエディタ
自己紹介
杉井 庸一 @ 修羅の国( 広島に単身出張中 )
興味本位で買ったRicohThetaS、の画像を見るお手軽なViewer
がほしくて、いろいろ調べてA-Frameに出会う。
ブラウザで手軽にコンテンツを作れるのが面白くて、いろいろ
作ってFacrebookで公開していたら、いつの間にかハンズオンを
開催@福岡することに。
仕事はバックエンドのシステムエンジニア。JavaやらSQLやらを好
みます。実はA-Frameに出会うまでJavascript使ったことなかった
です。
環境設定
A-Frameのボイラープレートを使って環境構築します。
以下よりボイラープレートのZIPファイルを取得して解凍する。
◦ https://aframe.io/docs/0.4.0/introduction/getting-started.html
◦ コマンドプロンプト(Macはターミナル)を起動し、解凍したフォル
ダへ移動します。初回設定のコマンドを実行する。
◦ > npm install
◦ ※各種ダウンロードします。しばらく時間がかかります。
サーバ起動のコマンドを実行する。
◦ > npm start
◦ ※既定のブラウザが起動し、index.htmlを表示します。
終了する際は、以下のコマンドを実行する。
◦ > Ctrl + c
詳細は、ZIPファイルに同梱のREADME.mdを確認ください。
目次
環境設定
A-Frameとは
3Dシーンを扱うための基礎知識
◦ 座標、向き、大きさ
◦ 登場人物
◦ カメラ
◦ ライト
Hands-on(1)
◦ ソース構成
◦ 各エンティティ説明
Hands-on(2)
◦ DOMの操作
◦ Entity-Component-System
◦ 追加コンポーネント
◦ ソース構成
◦ 実装手順
Hands-on(3)
◦ コンポーネントの作成
◦ Javascriptのデバッグ方法
◦ 実装手順
A-frameとは
A-frameとは
ブラウザ上でVRを実現するための技術として
WebVRという規格があります。それを簡単に
実現するためのライブラリがA-Frameです。
WebVR1.0規格を策定・提案しているMozillaが
A-Frameを作成しています。
ブラウズとしては、Firefox、Chrome、Edgeが
WebVR対応を表明しています。
A-frameとは
複雑なWebGL、Three.jsをラップし、比較的簡
単なHTML、Javascriptを用いてブラウザでVR
を実現するライブラリ。
ブラウザだけではなく、OculusやHTCViveなど
のHMDや、モバイルVRもサポート。
内部的にはThree.jsを使用し、加えてEntity-
Component-Systemに代表されるゲーム開発
のベストプラクティスを取り込んでいます。
A-frameとは
公式サイト:https://aframe.io/
Document:https://aframe.io/docs/
ソース:https://github.com/aframevr/aframe
リンク集:
https://github.com/aframevr/awesome-
aframe
もちろんEnglishです。
3Dシーンを扱うための
基礎知識
座標、向き、大きさ
座標(POSITION)
◦ Y-up 右手座標系
◦ X座標:向かって右がプラス
◦ Y座標:向かって上がプラス
◦ Z座標:向かって後ろがプラス
向き(ROTATION)
◦ 向きの単位は度。
◦ 0~360などを指定。マイナス値も指定可能。
大きさ(SCALE)
◦ 長さの単位はメートル。
◦ 例: 目線の高さは、Y座標:1.6
登場人物
シーン(SCENE)
◦ 3D空間そのもの。ここにカメラ、ライト、エンティ
ティを配置して3DCGの世界を構築していきます。
カメラ(CAMERA)
◦ 構築した3DCGの世界をどのように見るかはカメ
ラによって決まります。
ライト(LIGHT)
◦ ライトがなければ3DCGの世界は真っ暗です。光
源を設定しましょう。
エンティティ(ENTITY)
◦ 3DCG空間に存在する物です。球や平面など
様々です。
カメラ
A-Frameにてデフォルトで使われている
PerspectiveCameraを説明します。
画角(FOV)
◦ 視野角です。広いと魚眼になります。
ファークリップ(FAR)
◦ 最長距離。これより遠いと映りません。
ニアークリップ(NEAR)
◦ 最短距離。これより近いと映りません。
アスペクト(ASPECT)
◦ 縦横比:width / height
◦ 通常は「画面幅/画面高さ」を設定
ライト
ライトには様々な種類があります。
平行光源(DIRECTIONAL)
◦ 太陽光を表現する。
環境光源(AMBIENT)
◦ 拡散光を表現する。
半球光源(HEMISPHERE)
◦ 地面からの照り返しを表現する。
点光源(POINT)
◦ 豆電球のような光源を表現する。
スポットライト(SPOT)
◦ 一部を局所的に照らす光源を表現する。
Hands-on(1)
A-FRAMEに触れてみよう
ソース構成(Index.html)
A-Frameライブラリ
の読み込み
0.4.0に変更
ここにエンティティ
を追加していきま
す。
ENTITY
A-SCENE
HTMLのBody句内に<a-scene>~</a-scene>と
記載して使用します。
すべてのEntityはこのSCENEに属します。
シーンをつかさどる様々なプロパティを持って
います。
デフォルトでカメラとライトを持っています。
A-BOX
a-sceneタグ内に、<a-box>~</a-box>と記載し
て使用します。
四角の立方体や直方体、壁などを生成できま
す。
v0.1.0以前はa-cubeというタグ名でした。
ENTITY
A-SPHERE
a-sceneタグ内に、<a-sphere>~</a-sphere>と
記載して使用します。
球を生成できます。
設定によっては、半球なども生成できます。
A-CYLINDER
a-sceneタグ内に、<a-cylinder>~</a-cylinder>
と記載して使用します。
円柱を生成できます。
ENTITY
A-PLANE
a-sceneタグ内に、<a-plane>~</a-plane>と記
載して使用します。
2Dの平面を生成できます。
A-SKY
a-sceneタグ内に、<a-sky>~</a-sky>と記載して
使用します。
半径5000の巨大な球を生成し、背景として利
用します。
RicohThetaSなどで撮影した360度天球画像を、
このa-skyのsrc属性に画像指定してViewerと
する例が多くみられます。
ENTITY
A-CAMERA
デフォルトが用意されています。
a-scene内に新たに作成するとデフォルトが消
えて、置き換わります。
A-LIGHT
デフォルトが用意されています。
a-scene内に新たに作成するとデフォルトが消
えて、置き換わります。
A-ANIMATION
Entityの属性を変化させることによりアニメー
ションを実現する。
変化させるEntityタグの子Entityとして設定す
る
属性 説明
attribute アニメーションさせる親エンティティの属性。
direction From-To間の方向、向き設定
from 開始時値
to 終了時値
dur アニメーション間隔(msec)
repeat アニメーション回数。回数制限なしの場合
は”indefinite”を指定
easing アニメーションの進み具合
(例)
<a-box position="-1 0.5 -3">
<a-animation
attribute = "position"
direction = "alternate"
from = "-1 0.5 -3"
to = "-1 1 -3"
dur = 1000
repeat = "indefinite"
>
</a-animation>
</a-box>
次メジャーバージョン(v0.5.0)から廃止予定
A-frame inspector
Ctrl + Alt + iと入力する。
ブラウザ上で、エンティティの新規作成や修正
を行うことができます。
移動:右クリック+マウス移動
回転:左クリック+マウス移動
前後:マウスホイール
作成したエンティティはHTML形式でExportす
ることもできます。
a-framer.com
英語が苦手な人向けに、ドキュメント(v0.3.0
ベース)の主要部分を翻訳されたサイトがあり
ます。
http://www.a-framer.com/
本日ハンズオン主催の米本さんが作成されて
います。
本家の英語ドキュメントのニュアンスがわから
ない場合など、一読することをお勧めします。
Hands-on(2)
JAVASCRIPTでA-FRAMEを操る
どんなの作る?
ランダム迷路を作成します。
迷路作成ロジックの結果(二次元配列)を使っ
てa-frame上に壁(a-box)を作成することで迷
路を実現します。
aframe-extrasという追加ライブラリを使用しま
す。a-boxにstatic-body、a-cameraにkinematic-
bodyの機能を追加して、衝突を実現します。
DOMの操作
A-FrameのDOMは通常のHTMLと同様にJavascriptで操作可能です。
DOMの取得
◦ document.querySelector(“#DOMのID”);
DOMの作成
◦ document.createElement(“タグ名”);
属性の設定
◦ 対象DOM.setAttribute(“属性名”, “値”);
DOMの追加
◦ 親DOM.appendChild(追加するDOM);
(例)
var sceneEntity = document.querySelector("#sceneId");
var boxEntity = document.createElement("a-box");
boxEntity.id = “box01”;
boxEntity.setAttribute("position", "0 1.7 0");
sceneEntity.appendChild(boxEntity);
Entity-Component-System
A-Frameはエンティティ・コンポ―ネント・システム(ECS)の形式に基づいています。これはインヘ
リタンス(継承)よりもコンポーザビリティに重きを置くゲーム開発では一般的な形式です。
◦ エンティティ:本質的には何もせず、レンダリングも行わない汎用的なオブジェクトを指す。
◦ コンポーネント:エンティティの中に挿入され形、動き、機能を与えるための再利用可能なモジュール。
挿入すればそのまま実行される。
◦ システム:コンポーネントのクラスにグローバルスコープ、サービス、マネジメントを提供する。
ECSでは、エンティティに異なるコンポーネントを挿入することにより、リッチなアクションを伴った
複雑なエンティティを作ることができます。
ハンズオンでは、壁を通り抜けないように衝突を表現するコンポーネントを追加し、壁との距離
に応じて壁の表示/非表示を実現するコンポーネントを作成します。
追加コンポーネント
A-Frameには様々な追加コンポーネントが存在します。RegistryやGithubで見つけましょう。
名前 内容
aframe-extras Utility集。様々なコンポーネント
aframe-bmfont-text-component 3Dシーン内にテキストを表示する
aframe-look-at-component 指定したEntityの方向を自動で向き続ける
aframe-crawling-cursor 面に沿ってCursorが張り付くように表現
aframe-leap-hands LeapMotionを扱うことができる
・・・
ソース構成
添付のZIPファイルをA-Frameボイラープレート
フォルダ直下に解凍する。
> npm start で起動し、
http://localhost:3000/maze/ へアクセスする。
迷路ロジックは実装済み。3Dシーンに迷路エ
ンティティを作成していきます。
修正するのはindex.htmlだけです。
本ページに添付している「ソースファイル」か
ら取得してください。
aframe-boilerplate-master
│ .gitignore
│ AFRAME_SITE.yml
│ index.html
│ LICENSE
│ package.json
│ README.md
└─maze
│ index.html
└─js
maze.js
実装手順1
var sceneEntity = document.querySelector("#maze-scene");
後でA-BOXを追加するため、追加先のA-SCENEを
取得します。
IDの設定に間違いがないことを確認しましょう。
実装手順2
var wall = document.createElement("a-box");
sceneEntity.appendChild(wall);
A-BOXエンティティを作成し、A-SCENEに追加します。
足元に小さなBOXが現れています。
A-BOXの場所を設定しましょう。
実装手順3
wall.setAttribute("position", posX + " 0 " + posZ);
A-BOXエンティティ追加前に、位置(POSITION)を
指定します。位置情報は迷路のXZ座標に壁の横
幅をかけた「posX」、「posZ」を使用します。
このままでは壁が小さすぎます。
実装手順4
wall.setAttribute("width", width);
wall.setAttribute("height", width);
wall.setAttribute("depth", width);
A-BOXエンティティ追加前に、大きさ(WIDTH,
HEIGHT, DEPTH)を指定します。設定値は、変数設
定(width)している壁幅を利用しましょう。
しかしこれだと、壁が半分床に埋まっており、高さ
が足りません。
実装手順5
posX + " " + width/2 + " " + posZ
A-BOXエンティティ追加前に、Y軸位置を調整して
壁をすべて床の上に表示します。設定値は、変数
設定(width)している壁幅を利用しましょう。
見た目は迷路となりましたが、壁を突き抜けます。
実装手順6
A-BOXエンティティ追加前に、static-bodyコンポー
ネントを追加し、壁との衝突を表現します。
これで迷路としては最低限完成です。色・画像を
付ける、アニメーションさせるなど手を加えてみて
ください。
wall.setAttribute("static-body", "");
aframe-extras
今回利用した「physics」、「static-body」、「kinematic-body」以外にも、様々なコンポーネントが存
在します。サンプルサイトで動作およびソースを確認し、取り込んでみてください。
https://github.com/donmccurdy/aframe-extras
https://sandbox.donmccurdy.com/vr/
A-Frame助け合い所@Facebook
ある程度作れるようになると、一人では解決できないことも出てきます。
そんな時には、Facebookの「A-Frame助け合い所」に投稿してみんなで解決しましょう!
私も参加していますので、ハンズオンでの疑問や質問など気軽に質問してください。
Hands-on(3)
A-FRAMEのコンポーネントを作成する
どんなの作る?
Hands-on(2)で作成した迷路に機能・ふるまい
を加えます。
カメラとの距離に応じて、壁の表示/非表示制
御を加えることで、直前までどこに壁があるか
わからないようにします。
Hands-on(2)ではコンポーネントを利用しまし
たが、今回はコンポーネントを自分で作成しま
す。
コンポーネントの作成
エンティティにつける新しい機能・ふるまいを
作成します。
conponent-name: コンポーネントの名前。エン
ティティにつける際の名称となります。英字で
好きな名前をつけます。
schema: エンティティにつけるときに引数を設
定できます。
init: 最初に呼ばれる処理です。主に初期化
や必要な情報を取得する処理を書きます。
tick: 画面が描画される1フレーム毎に呼ばれ
る処理です。連続した処理が必要な場合に使
います。
AFRAME.registerComponent(‘component-name', {
schema: {
// コンポーネントの引数設定。
},
init: function () {
// 初期処理
},
tick: function() {
// 1フレーム毎の処理(最大60回/秒)
}
});
Javascriptのデバッグ方法(Chrome)
Javascriptの動作確認方法を紹介します。
デバッグ画面を表示する。
◦ F12を押すとデバッグ画面になります
コンソール出力を確認する。
◦ Consoleタブを選択すると、ログが表示されます
コンソールへ値を出力する
◦ Javascript内でconsole.log(変数)と入力すると、変数
値がコンソールへ出力されます。
ブレイクポイントで途中経過を確認する
◦ Sourcesタブでソースを表示し、行番号部分をクリッ
クすると、処理がそこで止まるようになります。
AndroidスマホChromeもPCからデバッグ可能。
実装手順1
まずはA-BOXに、今回作成するコンポーネント
を追加しましょう。作成するコンポーネントは
maze.js内にひな形を用意しています。
wall.setAttribute("visible-wall", "");
実装手順2
this.el.object3D.visible = false;
js/maze.jsを開きます。
初期処理で、壁を非表示とします。
実装手順3
毎フレーム毎にカメラの位置と、壁の位置を
取得します。
var cameraPosition = this.el.sceneEl.camera.el.object3D.position;
var wallPosition = this.el.object3D.position;
実装手順4
if (wallPosition.distanceTo(cameraPosition) < 10) {
if (this.el.object3D.visible == false) {
this.el.object3D.visible = true;
}
}
以下の場合に、壁を表示します。
・カメラと壁の距離が10m以内
・壁がまだ非表示状態のもの
実装手順5
} else {
if (this.el.object3D.visible == true) {
this.el.object3D.visible = false;
}
}
逆に以下の場合に、壁を非表示とします。
・カメラと壁の距離が10m以上
・壁が表示状態のもの
実装手順6
distance: {default: 10},
10
↓
this.data.distance
“”
↓
“distance: 5”
10m固定としている距離を引数として渡せるよう
に修正。A-BOX側に引数設定を入れます。
ハンズオンは以上です
ありがとうございました

Weitere ähnliche Inhalte

Was ist angesagt?

オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022GREE VR Studio Lab
 
モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践GREE/Art
 
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみようAI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみようTakashi Yoshinaga
 
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXRHoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXRTakashi Yoshinaga
 
Mixed Reality Toolkit V3について
Mixed Reality Toolkit V3についてMixed Reality Toolkit V3について
Mixed Reality Toolkit V3についてTakahiro Miyaura
 
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!Takashi Yoshinaga
 
DRIVE CHARTを支えるAI技術
DRIVE CHARTを支えるAI技術DRIVE CHARTを支えるAI技術
DRIVE CHARTを支えるAI技術Yusuke Uchida
 
A-frameハンズオンのQA集
A-frameハンズオンのQA集A-frameハンズオンのQA集
A-frameハンズオンのQA集Youichi Sugii
 
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVROculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVRTakashi Yoshinaga
 
俺のサイジング
俺のサイジング俺のサイジング
俺のサイジングToru Makabe
 
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発Takashi Yoshinaga
 
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVRA-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVRTakashi Yoshinaga
 
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)聡 大久保
 
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション  ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~『SHOWROOM』の大規模化に伴う技術課題のソリューション  ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~DeNA
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Akihiro Suda
 
GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)OSgeo Japan
 
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフローUnityTechnologiesJapan002
 

Was ist angesagt? (20)

オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
オープンソースで構築するWebメタバース ~Mozilla Hubsで学ぶUX開発から運用コスト最小化まで #CEDEC2022
 
LiDARとSensor Fusion
LiDARとSensor FusionLiDARとSensor Fusion
LiDARとSensor Fusion
 
モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践モバイル×VRにおける3Dサウンド実践
モバイル×VRにおける3Dサウンド実践
 
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみようAI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
AI x OpenCV x WebAR: Selfie Segmentationを使ってみよう
 
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXRHoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
 
Mixed Reality Toolkit V3について
Mixed Reality Toolkit V3についてMixed Reality Toolkit V3について
Mixed Reality Toolkit V3について
 
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
 
DRIVE CHARTを支えるAI技術
DRIVE CHARTを支えるAI技術DRIVE CHARTを支えるAI技術
DRIVE CHARTを支えるAI技術
 
A-frameハンズオンのQA集
A-frameハンズオンのQA集A-frameハンズオンのQA集
A-frameハンズオンのQA集
 
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVROculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
 
俺のサイジング
俺のサイジング俺のサイジング
俺のサイジング
 
UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発UnityとVuforiaで始めるAR開発
UnityとVuforiaで始めるAR開発
 
A-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVRA-Frameで始めるOculus Quest対応WebVR
A-Frameで始めるOculus Quest対応WebVR
 
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
Hololens2 MRTK2.7(OpenXR) でのビルド環境構築(環境設定からビルドまで)
 
5分でわかる Unity点群
5分でわかる Unity点群5分でわかる Unity点群
5分でわかる Unity点群
 
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション  ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~『SHOWROOM』の大規模化に伴う技術課題のソリューション  ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
『SHOWROOM』の大規模化に伴う技術課題のソリューション ~演者・視聴者の熱量を支える負荷対策、HTML5対応など~
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
 
GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)GeoPackageを使ってみた(おざき様)
GeoPackageを使ってみた(おざき様)
 
MRTK3を調べてみた
MRTK3を調べてみたMRTK3を調べてみた
MRTK3を調べてみた
 
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
【Unite Tokyo 2019】MeshSyncを有効活用したセルルックプリレンダーのワークフロー
 

Andere mochten auch

OER presentation
OER presentationOER presentation
OER presentationtfromma
 
соотношение понятий норма и деятельность
соотношение понятий норма и деятельностьсоотношение понятий норма и деятельность
соотношение понятий норма и деятельностьВиктория Горбунова
 
Critical thinking as modus operandi alice ghimisian
Critical thinking as modus operandi  alice ghimisianCritical thinking as modus operandi  alice ghimisian
Critical thinking as modus operandi alice ghimisianAndrew Katz
 
MARKET RESEARCH PPT
MARKET RESEARCH PPTMARKET RESEARCH PPT
MARKET RESEARCH PPTDinesh Kumar
 
Управление развитием образования на основе данных
Управление развитием образования на основе данныхУправление развитием образования на основе данных
Управление развитием образования на основе данныхВиктория Горбунова
 
15205193 pss7-ans
15205193 pss7-ans15205193 pss7-ans
15205193 pss7-ansCarrie Wong
 
Управление развитием образования на основе данных
Управление развитием образования на основе данныхУправление развитием образования на основе данных
Управление развитием образования на основе данныхВиктория Горбунова
 
кейс образовательное право наумкина-1
кейс  образовательное право наумкина-1кейс  образовательное право наумкина-1
кейс образовательное право наумкина-1Виктория Горбунова
 
Desarrollo de peridismo digital en mexico
Desarrollo de peridismo digital en mexicoDesarrollo de peridismo digital en mexico
Desarrollo de peridismo digital en mexicoMariel Talamantes
 
гришина диагностическая карта
гришина диагностическая картагришина диагностическая карта
гришина диагностическая картаТатьяна Гришина
 
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULACarlaCasti
 

Andere mochten auch (20)

HUKUM
HUKUMHUKUM
HUKUM
 
Wwm resume
Wwm resumeWwm resume
Wwm resume
 
OER presentation
OER presentationOER presentation
OER presentation
 
соотношение понятий норма и деятельность
соотношение понятий норма и деятельностьсоотношение понятий норма и деятельность
соотношение понятий норма и деятельность
 
YMT 2016
YMT 2016YMT 2016
YMT 2016
 
дорожная карта реализации проекта
дорожная карта реализации проектадорожная карта реализации проекта
дорожная карта реализации проекта
 
инд план обновленный наумкина
инд план обновленный наумкинаинд план обновленный наумкина
инд план обновленный наумкина
 
Hibrido dinámico local
Hibrido dinámico localHibrido dinámico local
Hibrido dinámico local
 
Critical thinking as modus operandi alice ghimisian
Critical thinking as modus operandi  alice ghimisianCritical thinking as modus operandi  alice ghimisian
Critical thinking as modus operandi alice ghimisian
 
MARKET RESEARCH PPT
MARKET RESEARCH PPTMARKET RESEARCH PPT
MARKET RESEARCH PPT
 
Управление развитием образования на основе данных
Управление развитием образования на основе данныхУправление развитием образования на основе данных
Управление развитием образования на основе данных
 
15205193 pss7-ans
15205193 pss7-ans15205193 pss7-ans
15205193 pss7-ans
 
Управление развитием образования на основе данных
Управление развитием образования на основе данныхУправление развитием образования на основе данных
Управление развитием образования на основе данных
 
кейс образовательное право наумкина-1
кейс  образовательное право наумкина-1кейс  образовательное право наумкина-1
кейс образовательное право наумкина-1
 
EDUCOMP
EDUCOMPEDUCOMP
EDUCOMP
 
Desarrollo de peridismo digital en mexico
Desarrollo de peridismo digital en mexicoDesarrollo de peridismo digital en mexico
Desarrollo de peridismo digital en mexico
 
гришина диагностическая карта
гришина диагностическая картагришина диагностическая карта
гришина диагностическая карта
 
кейс оценка качества
кейс оценка качествакейс оценка качества
кейс оценка качества
 
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
08_SINGULARS_PRESENTACIÓ_MOOC_EDUCACIÓ_EMOCIONAL_AULA
 
отчет по практике 1 часть
отчет по практике 1 частьотчет по практике 1 часть
отчет по практике 1 часть
 

Ähnlich wie A frameハンズオン 20170129

CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみたリモートデバッグツール Weinerをつかってみた
リモートデバッグツール WeinerをつかってみたMasakazu Muraoka
 
配布用Cacti running with cherokee
配布用Cacti running with cherokee配布用Cacti running with cherokee
配布用Cacti running with cherokeeyut148atgmaildotcom
 
Tizen web app を FireFox OS へ移植する方法を考えた
Tizen web app を FireFox OS へ移植する方法を考えたTizen web app を FireFox OS へ移植する方法を考えた
Tizen web app を FireFox OS へ移植する方法を考えたNaruto TAKAHASHI
 
車載組込ブラウザの過去7年と今を40分でまとめてみる
車載組込ブラウザの過去7年と今を40分でまとめてみる車載組込ブラウザの過去7年と今を40分でまとめてみる
車載組込ブラウザの過去7年と今を40分でまとめてみるnaohikowatanabe
 
15分で知るVagrant (NSEG 2013-08-24)
15分で知るVagrant (NSEG 2013-08-24)15分で知るVagrant (NSEG 2013-08-24)
15分で知るVagrant (NSEG 2013-08-24)hiro345
 
Nutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdfNutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdfsatorukondou
 
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミットMochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミットKatsuaki Sato
 
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)parrotstudio
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewRakuten Group, Inc.
 
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作るワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作るRisa Yuguchi
 
Tizen web app について調べたよ
Tizen web app について調べたよTizen web app について調べたよ
Tizen web app について調べたよNaruto TAKAHASHI
 
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.jsめんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.jsHiroaki Okubo
 
Flash Playerの作り方
Flash Playerの作り方Flash Playerの作り方
Flash Playerの作り方Yu Kobayashi
 
160531 IoT LT #15 @ 日本IBM
160531 IoT LT #15 @ 日本IBM160531 IoT LT #15 @ 日本IBM
160531 IoT LT #15 @ 日本IBMToshiki Tsuboi
 

Ähnlich wie A frameハンズオン 20170129 (20)

CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみたリモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
 
配布用Cacti running with cherokee
配布用Cacti running with cherokee配布用Cacti running with cherokee
配布用Cacti running with cherokee
 
Tizen web app を FireFox OS へ移植する方法を考えた
Tizen web app を FireFox OS へ移植する方法を考えたTizen web app を FireFox OS へ移植する方法を考えた
Tizen web app を FireFox OS へ移植する方法を考えた
 
車載組込ブラウザの過去7年と今を40分でまとめてみる
車載組込ブラウザの過去7年と今を40分でまとめてみる車載組込ブラウザの過去7年と今を40分でまとめてみる
車載組込ブラウザの過去7年と今を40分でまとめてみる
 
Lt
LtLt
Lt
 
15分で知るVagrant (NSEG 2013-08-24)
15分で知るVagrant (NSEG 2013-08-24)15分で知るVagrant (NSEG 2013-08-24)
15分で知るVagrant (NSEG 2013-08-24)
 
Platform.html5
Platform.html5Platform.html5
Platform.html5
 
Nutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdfNutanixログほいほい作ってみた.pdf
Nutanixログほいほい作ってみた.pdf
 
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミットMochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミット
 
4th tokushimaapp
4th tokushimaapp4th tokushimaapp
4th tokushimaapp
 
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
どきっ!三行で作るランダムダンジョン!?~WEBもあるよ!~ - 2010/8/21 群馬Web研究会(勉強会)
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
Osoljp201204
Osoljp201204Osoljp201204
Osoljp201204
 
Hack U TokyoTech 2016
Hack U TokyoTech 2016Hack U TokyoTech 2016
Hack U TokyoTech 2016
 
ワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作るワイヤーフレームを高速にXDらしく作る
ワイヤーフレームを高速にXDらしく作る
 
Tizen web app について調べたよ
Tizen web app について調べたよTizen web app について調べたよ
Tizen web app について調べたよ
 
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.jsめんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.js
 
Flash Playerの作り方
Flash Playerの作り方Flash Playerの作り方
Flash Playerの作り方
 
160531 IoT LT #15 @ 日本IBM
160531 IoT LT #15 @ 日本IBM160531 IoT LT #15 @ 日本IBM
160531 IoT LT #15 @ 日本IBM
 

A frameハンズオン 20170129

Hinweis der Redaktion

  1. WebVR対応ブラウザ情報  https://iswebvrready.org/
  2. https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame https://framesynthesis.jp/tech/2015/12/aframe/
  3. 公式サイトのblogの情報は有益です。様々なA-Frameの使い方や新しいライブラリの紹介など週1で更新されていますので、チェックすると面白いかと。
  4. http://www4.atwiki.jp/tmagic_teu/pages/84.html
  5. Easingについて http://easings.net/ja A-Frame RoadMap https://github.com/aframevr/aframe/blob/master/ROADMAP.md
  6. https://github.com/aframevr/aframe-inspector
  7. http://mikan-daisuki.hatenablog.com/entry/2015/10/22/220439
  8. aframe-extras  https://github.com/donmccurdy/aframe-extras aframe-bmfont-text-component  https://github.com/bryik/aframe-bmfont-text-component aframe-look-at-component  https://github.com/ngokevin/aframe-look-at-component aframe-crawling-cursor  http://vr-lab.voyagegroup.com/entry/2016/11/02/101503 aframe-leap-hands  https://github.com/openleap/aframe-leap-hands
  9. 詳しく知りたい人は、以下のサイトで学習できます。  https://aframe.io/docs/0.4.0/guides/building-with-components.html
  10. Javascriptデバッグ  http://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3 Android Chromeのデバッグ  http://qiita.com/hojishi/items/12b726f8b02ef3d713e4