福野泰介の一日一創 - create every day

ものづくり好きによるイベント"NT"、鯖江初開催決定!
NT鯖江2019 - 2019/10/26土-27日@鯖江市嚮陽会館2F大会議室
さばえものづくり博覧会2019にて開催です!
(参考、NT加賀NT金沢Maker Faire KyotoMaker Faire Bay Area


VR鯖江
これを機に鯖江市訪れてもらいたいので開発、Oculus Quest向け、360度写真オープンデータで巡る鯖江市アプリ!スマホVRやPCでも無料で入れる動物園の人気者、レッサーパンダをご覧いただけます。
さばえ360写真オープンデータパノラマさばえ - 360度写真で疑似体験する福井県鯖江市


こちらがVR鯖江で西山公園、結びのチャイムから見た、会場、鯖江市嚮陽会館
172m2の2F大会議室が今回の会場です。


こちら、商工会議所、黒田会頭!
多様な技術に触れてほしい、NT鯖江の開催、本日実行委員会にて、承認!


鯖江市長ももちろん体験済み!


観光に、スポーツに、ものづくりの現場に、夢が広がる最新テクノロジー(鯖江商工会議所にて)
新しもの好きが多くて楽しい、鯖江。


キューティーパイのまゆちゃんも体験


サインの新しい形、VRサインもらいました!


チーム伊勢から入荷したHana道場ロゴ入りIchigoJam用メモリ


早速、はんだづけして作ったもの
小学生メイカーも着々と増えてます!


512kbit、64KBのEEPROM、1KBのIchigoJamのファイルが、なんと64コ、保存可能!(SAVE100〜163)

出展無料の登録はこちら「NT鯖江2019」からどうぞ。
こども、学生、シニア、大人、県内外国外、高専生、どなたでも歓迎です。
技術とものづくりを楽しみましょう!

links
さばえものづくり博覧会2019第1回実行委員会の開催でした。 | 『さばえ.jp』百さんのブログです
- IchigoJam用の外部メモリ発売開始!!【Hana道場ロゴ入り】: Hana道場

日々進化するテクノロジーに、教育現場はどうついていくか?

一日一創2012から、「1to20」のセルフカバー、1から20までをすばやくタッチする「one2twenty VR

one2twenty VR
1から20までの数を楽しく、体を使って覚えられる!?
VRで無限に創れる、eスポーツ!

こどもとVRの問題は懸案ながら、触れる算数、体験できる歴史や理科。VRによる学びは超強力。
テクノロジーを活かすと活かさないの差は広がるばかり。
だからこそ、その本質を伝えよう。


PFU元社長で、ITビジネスプラザ武蔵の館長、長谷川さん!
すべての大人も体験すべきな、VR。ITビジネスプラザに1つあってもいいかも!


金沢市のITビジネスプラザ武蔵のディレクターに就任した、元前原小学校、校長先生の松田さんのお祝い会@金沢!


素敵な町家。


素敵な橋。


素敵な料理(金沢好きの版画家、クリフトンカーフ氏の元お家、いち凛


金沢の素敵な坂、暗がり坂。(クリフトンカーフ氏のギャラリー近く)

地域それぞれに根付くDNAを引き継いだこどもたちの活躍の場、どんどん広げてあげましょう!


one2twenty」 (program in HTML/JavaScript WebVR with A-Frame)

links
-
VRではじめる現代HTML入門 - Oculus Quest x 福井高専生
- 50行で作るVRマイクラ風 / boxcraft for Oculus Quest with A-Frame
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest
- 異次元の分かりやすさ、触って学ぶVR数学、ベジェ曲線編 on Oculus Quest

体験しないことには分からないのが、VR。
3DoFと予備、見渡すことしかできない自由度3のOculus Goや、スマホVRとは別次元の歩き回れる自由度6の6DoF対応、Oculus Questで、デザインツール試作。

大好きなベジェ曲線をVR化してみたところ、想像以上に楽しいものでした。

BezierVR for Oculus Quest

ベジェ曲線とは、視点終点に加えて制御点を2つ加えて計算してつくる曲線。イラストレーターや、スムーズに拡大縮小できるフォントなどで使われています。(2Dベジェ曲線 - 一日一創2012

4点 p[0]〜p[3] から曲線を構成する点 pc(t) ただし tは0以上1以下 を求めるベクトルの計算(線形代数)アルゴリズムは Wikipedia を見るとこんな感じ。(参考、Wikipedia ベジェ曲線

p[4] p4 = p[0] + (p[1] - p[0]) * t p5 = p[1] + (p[2] - p[1]) * t p6 = p[2] + (p[3] - p[2]) * t p7 = p4 + (p5 - p4) * t p8 = p5 + (p6 - p5) * t pc(t) = p7 + (p8 - p7) * t

これをThree.jsベースのA-Frameで表現して、4点を持って動かせるようにしたら、ベジェ曲線エディタのできあがり!両手で直感的にぐねぐね動かしながら、自由に眺められるのが気持ち良すぎて危険なレベル。

PCでもベジェ曲線がでる様子は確認できますが、一度はぜひVRで、ご体験を!
(マウスで視点変更、カーソルで移動、ベジェ曲線編集不可)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>BezierVR</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> <script>'use strict' window.onload = function() { const scene = document.querySelector('a-scene') let p = new Array(4) let pnt = new Array(4) let lines = [] let line1 let line2 const init = function() { for (let i = 0; i < 4; i++) { if (pnt[i]) scene.removeChild(pnt[i]) } for (let i = 0; i < lines.length; i++) { scene.removeChild(lines[i]) } lines = [] const rndw = 1 for (let i = 0; i < 4; i++) { const x = Math.random() * rndw - rndw / 2 const y = Math.random() * rndw + .5 const z = Math.random() * rndw - 1 p[i] = new THREE.Vector3(x, y, z) let box = document.createElement('a-box') box.setAttribute('position', p[i]) const size = 0.05 box.setAttribute('width', size) box.setAttribute('height', size) box.setAttribute('depth', size) box.setAttribute('mixin', 'voxel'); scene.appendChild(box) pnt[i] = box } } const f = function(p0, p1, t) { const p0c = p0.clone() const p1c = p1.clone() return p0c.add(p1c.sub(p0c).multiplyScalar(t)) } const calcBezier = function() { const div = 40 let op = p[0] if (lines.length == 0) { for (let i = 0; i < div + 2; i++) { const line = document.createElement('a-entity') scene.appendChild(line) lines.push(line) } line1 = lines[div] line2 = lines[div + 1] } let col = '#ff0000' for (let i = 1; i <= div; i++) { const t = 1 / div * i const p4 = f(p[0], p[1], t) const p5 = f(p[1], p[2], t) const p6 = f(p[2], p[3], t) const p7 = f(p4, p5, t) const p8 = f(p5, p6, t) const p9 = f(p7, p8, t) let line = lines[i - 1] line.setAttribute('line', { start: op, end: p9, color: col }); op = p9 } col = '#80e000' line1.setAttribute('line', { start: p[0], end: p[1], color: col }); line2.setAttribute('line', { start: p[3], end: p[2], color: col }); } init() calcBezier() let np = -1 let mp = -1 setInterval(function() { let flg = 0 if (np >= 0) { const hp = handright.getAttribute('position') p[np] = hp.clone() pnt[np].setAttribute('position', p[np]) flg = true } if (mp >= 0) { const hp = handleft.getAttribute('position') p[mp] = hp.clone() pnt[mp].setAttribute('position', p[mp]) flg = true } if (flg) calcBezier() }, 1000 / 72) // 72Hz const selectNear = function(hand) { const hp = hand.getAttribute('position') let min = .5 let np = -1 for (let i = 0; i < 4; i++) { let d = p[i].distanceTo(hp) if (d < min) { min = d np = i } } return np } handright.addEventListener('triggerdown', function(evt) { np = selectNear(handright) }) handright.addEventListener('triggerup', function(evt) { np = -1 }) handright.addEventListener('gripdown', function(evt) { np = selectNear(handright) }) handright.addEventListener('gripup', function(evt) { np = -1 }) handleft.addEventListener('triggerdown', function(evt) { mp = selectNear(handleft) }) handleft.addEventListener('triggerup', function(evt) { mp = -1 }) handleft.addEventListener('gripdown', function(evt) { mp = selectNear(handleft) }) handleft.addEventListener('gripup', function(evt) { mp = -1 }) // B button handright.addEventListener('bbuttondown', function(evt) { init() calcBezier() }) } </script> <a-scene> <a-assets> <a-mixin id="voxel" geometry="primitive: box; height: 0.1; width: 0.1; depth: 0.1" material="shader: standard"> </a-mixin> </a-assets> <a-sky color="#335c7c"></a-sky> <a-entity id=handleft oculus-touch-controls="hand: left"></a-entity> <a-entity id=handright oculus-touch-controls="hand: right" laser-controls raycaster="showLine: true; far: .05" line="color: white; opacity: 0.75;"></a-entity> </a-scene> </body> </html>

1ファイル書くだけ簡単、WebVRでVR開発。オススメです!

links
- VRではじめる現代HTML入門 - Oculus Quest x 福井高専生
- 50行で作るVRマイクラ風 / boxcraft for Oculus Quest with A-Frame
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest

神の視点が楽しいマイクラ入門、神様プログラミングの8x9クラフトに次ぐ第三段。 小学生がつくりたいもの上位の「マイクラつくりたい」に最新VR「Oculus Quest」で応えてみました。


白のブロックを自由に置けます。アンドゥーと全消しに対応して、JavaScript+HTMLで全プログラムでたった50行!


boxcraft for Oculus Quest - A-Frame
Oculus Questのブラウザーで、boxcraft.html を開き、右下のVRモードを選択するだけ!


トリガーでボックス設置。まちがったら中指ボタン。全消しはBボタン。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>boxcraft for Oculus Quest - A-Frame</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> <script>'use strict' window.onload = function() { const scene = document.querySelector('a-scene') const list = [] handright.addEventListener('triggerdown', function(evt) { const p = handright.getAttribute('position') const snap = 0.1 let p2 = { x: Math.floor(p.x / snap) * snap + snap / 2, y: Math.floor(p.y / snap) * snap + snap / 2, z: Math.floor(p.z / snap) * snap + snap / 2, } let box = document.createElement('a-box') box.setAttribute('position', p2) box.setAttribute('mixin', 'voxel') scene.appendChild(box) list.push(box) }) handright.addEventListener('gripdown', function(evt) { const b = list.pop() if (b) scene.removeChild(b) }) handright.addEventListener('bbuttondown', function(evt) { const boxes = scene.querySelectorAll('a-box') for (let i = 0; i < boxes.length; i++) scene.removeChild(boxes[i]) }) } </script> <a-scene> <a-assets> <a-mixin id="voxel" geometry="primitive: box; height: 0.1; width: 0.1; depth: 0.1" material="shader: standard"> </a-mixin> </a-assets> <a-entity id=handleft oculus-touch-controls="hand: left"></a-entity> <a-entity id=handright oculus-touch-controls="hand: right" laser-controls raycaster="showLine: true; far: .05" line="color: white; opacity: 0.75;"></a-entity> </a-scene> </body> </html>

VRフレームワーク「A-Frame」を使って、コントローラーのtriggerdownイベントを受け取り、a-boxを格子上に座標変換して設置するプログラムがコンパクトに組めます。


あるき回りながら、いろいろ見渡しながら、3次元空間に重力に縛られず、自在に作って遊べます!
次はカラーパレット?マイクラではできない箱の大きさ変更?派手な爆発エフェクト?
プログラミングで思いのままです!

links
- Oculus Quest | Oculus (64GB 49,800円、購入は公式サイトがオススメ)
- 「Oculus Quest」でVR体験が“爆上げ” 約5万円で最高級を楽しめる新時代に突入 その魅力に迫った (1/4) - ITmedia NEWS
- モバイル時代こそバス! つつじバスロケVRビジュアライズ - リアルタイムオープンデータ x Oculus Quest
- VRではじめる現代HTML入門 - Oculus Quest x 福井高専生

鯖江の悩み、公共交通、バスに乗ってくれない問題。
ジャパンオープンデータアワード最優秀賞その筋屋さんにご来鯖いただき、バス談義。

自家用車と比べて利便性で負けていたバス。 スマホなどのモバイルにより待ち時間という概念が消滅した現在、生産的な時間を過ごす面ではむしろ勝利かも?

まずは関心を持ってもらうことから、最新VR Oculus Quest x バス位置リアルタイムオープンデータ をWebVR、A-Frameで可視化! バスのオープンデータ化、IoT化でどんなまちでも実現できます。


tsutsuji-bus / WebVR
バス停と現在バス位置をボックスで表示し、無駄にバス停の上空から白い箱を降らせてみました。 乗降数などと連動させるとかもおもしろいかも。


バス現在位置は、つつじバスなのでピンク色の一辺2mの立方体。他のボックスは1m。緯度経度を適度に縮尺を合わせて上空から見る感じにしています。

オープンデータ x VRビジュアライズ。奥が深そうです。

体験しないと分からない、Oculus Questの感動。
6/4火、鯖江Hana道場で体験会あり!

小学校で習う不等号記号を使って囲むことにしたものをタグと呼びます。

<!DOCTYPE html> <html> </html>

<!DOCTYPE html> と最初に書くと、HTML5モード、現代HTMLとしてブラウザが解釈してくれます。
<html> これがHTMLタグ、同じ中身でスラッシュで始まる </html> までが、HTMLです。

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

HTMLタグの中に、HEAD(頭)とBODY(体)を追加します。こういう入れ子構造(ツリー構造)で作っていきます。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>simple - A-Frame</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> </body> </html>

HEADには文字コードや、タイトル、拡張したいものなどを書きます。
グローバル社会における文字コードは、utf-8(ユニコードの可変長エンコード体系)が標準です。 (ファイルの保存も utf-8 にしておかないと、文字化けするかも)

index.html と名前をつけて保存して、ブラウザで開いてみましょう。まだ中身(=BODY)がないですが、タイトルに注目!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>simple - A-Frame</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> <a-scene id="scene"> <a-sky color="#000000"></a-sky> <a-plane rotation="-90 0 0" width="50" height="50" color="#333333"></a-plane> </body> </html>

VR空間(=asscene)に背景(=a-sky)と、地面(=a-plane)を作りましょう。色(=color)は、赤緑青の順、0-255まで16bit2桁を3つ続けて#と合わせて表記します。 a-で始まるタグは、WebVR用のフレームワーク A-Frame による拡張タグです。HEADで読み込ませたので使えます。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>simple - A-Frame</title> <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script> </head> <body> <a-scene id="scene"> <a-sky color="#000000"></a-sky> <a-plane rotation="-90 0 0" width="50" height="50" color="#333333"></a-plane> <a-sphere position="0 1.5 -2" radius=".5" color="#EF2D5E"></a-sphere> <a-box position="2 1.5 -2" rotation="0 0 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-cylinder position="-2 1.5 -2" radius="0.5" height="1" color="#FFC65D"></a-cylinder> </a-scene> </body> </html>

球(=a-sphere)を、自分の位置を原点として、真ん中、右へ1.5m、奥に2mの位置(=position)に置きます。同様に箱(=a-box)と円錐(=a-cylinder)も置きました。


simple WebVR - A-Frame
マウスやタッチで視点を動かせます。


PCの場合カーソルキーで移動もできます。

3Dゲームも作れちゃうような気がしてきましたね!
プログラミング言語、JavaScriptを使うと、この3D空間を自在に操れます。

jig.jpロゴを作ってみたものがこちら。

jig.jp logo WebVR - A-Frame


Oculus Questだと、寄ってみたり、歩き回れたりするので楽しさが格別です。
スマホへ画面を転送し、録画しました。

Oculus Quest、Oculus Go、スマホVRを使って自分で作った空間に入ってみましょう!

福井高専でも Oculus Quest は大好評!

スゴイ → もっとやってみたい → 自分でも作ってみたい → じゃあ、作ろう!
この流れは、小学生でも高専生でも一緒です。

HTMLで作る自分だけの3Dホームページ、JavaScriptを学べば画面転換、アニメーションや、ゲームまで!
高専は教えてくれるのを待つところではなく、自分で学び放題な5年間を楽しむところ。

広大でなお広がり続ける技術の世界へようこそ!

歩き回れて49,800円のVR、Oculus Questが到着。良いです。
複数ある外カメラによってモノクロですが外を見ることもできるので実質メガネ!(過言)

2880x1600のOLEDの画質は良く、ヘッドセットの装着感もよし、目の間の距離調整機構もあって、快適。
WebVR対応ブラウザが入っているので、アプリづくりも手軽にできます!
リフレッシュレートは72Hzとパフォーマンスに合わせて控えめになっていますが、スマホの60Hz以上なので十分あり。


test with React VR
アプリ起動して、見渡している様子。スマホにミラーリングできるので、そのまま画面録画。
Oculusと同じFacebook社による「React 360」なので安心。
サンプルを混ぜて、静的ページとして生成しました。


デモ、3枚目の写真は、京都のお寺、7,250円で買えちゃうお手軽360度カメラで撮影したものです。(最高画質、40M画素なのでもっと画質が高い変換方法模索予定)


Oculus Goと比べて、大きくなった箱。


高級感あって収まりも良し。

2016年に作った巨大jig.jpロゴも、アプリ一切触ることなく歩いて見渡せるようになりました。
VR jig.jp BIG logo - A-Frame

自分だけの空間創り放題、公開し放題。これはかなり良いですよ!
Oculus Quest

2次元のテレビやスマホでは伝わらない、VR/AR/MRのスゴさ。実際体験するしかないですねっ。

アメコミ化しためがね大使まゆちゃん。視界がリアルタイムに変換されて、アメコミの世界にいった感覚になれます。・・・と、いくら書いても伝わらないのがもどかしいところ。(アメコミメガネ on スマホVR


めがねフェスでも人気だった、Oculus Go。 自分で創りたくなるのがものづくり好きの性。シンプルながら操作性抜群の Oculus Go controller をwebアプリで取得する方法を調査。 無事、ボタンと加速度の値が取れました!

const gp = navigator.getGamepads()[0]; const corient = gp.pose.orientation; const pad = gp.buttons[0].pressed; const trigger = gp..buttons[1].pressed;

方向とトリガー、パッド部分が押されたかどうかが取得できます。(戻るキーはVRモードが終了してしまう)
* VRDisplay requestPresent した後のみ有効です


視点移動と合わせたシンプルなサンプルとしてまとめて公開したいと思います。


MRの不思議な世界、お子様たちも興味津々。ようこそプログラマブルワールドへ。


まゆちゃんも体験!


NUAGEのメガネアイス!


NUAGEは、めがねグルメグランプリ、二冠!


次回のめがねフェスではどこまで進化しているか!?


めがね大使まゆちゃんとめがね会館 in アメコミ世界

links
- Oculus Go | Oculus (スマホVRの一段上質のVR体験が23,800円!)

Welcome to Megane World! めがねをかけないと損する時代は、もうまもなく!

一足先にスマホMRで体験、見えている人、全員が赤いメガネをかける世界。


6/9-10の2日間はステキなメガネに会える「めがねフェス2018
ステージ、グルメ、ショップ、ワークショップなど、イベント盛りだくさん!隣のめがね会館へもどうぞ!


オススメは800円から買えちゃう、各種スマホVR、ぜひ試着してお気に入りのVRを手に入れてください。
一段上のVR体験、Oculus Go も展示!
発売開始から3分で完売 Oculus Go中国国内モデル、入荷待ちは5万人以上 | Mogura VR - 国内外のVR/AR/MR最新情報


めがねxIT」ブースで体験できるメガネアプリ開発者は鯖江在住の現役高校生プログラマー!
ITの基本、プログラミングを子供も大人も学べる格安パソコン「IchigoJam」の体験コーナーもあります。限定品の販売も!?


めがねのまちさばえ!

links
- めがねフェス2018

2014年、Durovis Diveが教えてくれた、スマホを使って安価に実現するスマホVR。
スマホのスペックが上がり、画面が大きく、残像も少なくなったiPhone Xであの夢にもうチャレンジ!

redrain」WebVR使用、スマホVR用 (base app: ICS MEDIA)
3Dライブラリ three.js で、作りたい空間を作るだけ!
二画面分割して見る方向合わせはライブラリがやってくれます。

1995年、高専1年生の夏に登場し、瞬く間に、専用ゲームが10円ワゴンセールや「ご自由にお持ちください」状態になった、早すぎたVRゲーム機「バーチャルボーイ」(on Wikipedia)


今ではだいぶ市民権を得たが、当時は異様すぎた、没入感抜群の固定式ヘッドセットタイプ。 見える世界は、赤と黒のみのバーチャルな3D空間。多彩な操作方法と、奥行きある斬新な3D表現が楽しかった!(が、一般には受け入れられなかった)


VRゴーグル - otamart
THETAなど、360度動画が多数アップされる中、オタマート公式ショップでのスマホVRの販売開始!
手軽に体験できる千円台、三千円台、五千円台の3ラインナップ。
(* 2019.3.20追記、DAISOで500円商品として登場!)


こちら五千円台、PSVRと同様、ヘッドバンドタイプのVRヘッドセット。後ろのネジを引っ張り、回して締め付け固定。 耳に当たらないので疲れない、スピーカー付き!


イヤホンジャックが格納されてます(Lightningコネクタは付属品ではありません)
フロントカバーを外すことで、外カメラを使ったAR、MRにも対応可能。
ヘッドセット下にあるボタンを押すと、ヒンジを通して画面中央をタップしてくれるので、YouTubeなどの操作が簡単、手軽!


左右レンズの前後と左右を調整できるダイヤルが3つで調整すれば、裸眼視力0.1でもメガネ無しでくっきり見える。

平面では伝わらないVR、体験するとしないとでは大違い。まだの方、ぜひどうぞ!

links
- 必要なのはスマホと1,000円のGoogle Cardboardだけ! WebGLではじめるお手軽VR入門 - ICS MEDIA
- WebVR はじめよう - Qiita
- VRゴーグル - otamart
- RICHO THETAで撮る鯖江の花火360度動画
- 22年前に発売されていた元祖VRゲーム機を楽しむ

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像