
2020年の振り返り: 本業、現実拡張表現
本業: Abemaアプリ開発
AbemaTVのNew Deviceチームでアプリ開発。ツイートや登壇はARと現実拡張が中心となっていますが本業はここです。平日5日8時間以上がっつり取り組んでいます!Abemaはサービス開始から4年以上経っていますがまだまだやりたいこと、やりきれていないこと、やれることが沢山。
最近のテレビはOSを搭載していてそこで動作する動画再生アプリを実装し運用しています。JavaScriptさわるの久しぶりでフロントエンド界隈のキャッチアップ大変でした。登場人物多過ぎませんか。1日1個ミドルウェアやライブラリを理解していきました。
JavaScript以外にも環境によって必要なスキルが異なり、ドメイン知識と、運用に持っていくまでの馬力と、高速でドキュメントを読み言語や環境の特性を理解しベストプラクティスを探る力が必要です。
もし無策で多様な環境にそれぞれアプリを作っていたら実装も運用も追いつかないため共通化を志向し設計しています。DDD及びClean Architectureをメンバー全員が理解しディスカッションしながら調整。まだまだブラッシュアップ中ですが来年は成果につながりそうです。私自身この1年でそのあたりの設計知見がグッと増えました。
年始から100日間シェーダーチャレンジやりました
2020年1月1日から100日間シェーダーの投稿を続けました。SwiftとMetalでの実装です。なのでGLSLではなくMetal Shader Language(MSL)。文法はほぼ同じです。
Day 79: Water flow
— SATOSHI (@shmdevelop) March 19, 2020
copied from https://t.co/2o5ylzWfud
100日間連続で動作するMetalシェーダー投稿!
何度書いただろう水の流れ
これもまた美しい
ソースはこちら!https://t.co/3MV4Edw9bv#hundred_days_msl_challenge も要チェック#shader #metal pic.twitter.com/ei6DfFUaTu
もともと2019年から格好良い映像表現を自在に実装したいと思っていてそれを100日チャレンジという仕組みで実行した形です。独自のシェーダー実装を100個作るのが理想ではありますがポキっと折れたらゼロなので継続することを目標にしていました。ShaderToyで「おお!格好良い!」と思うものを写経的に実装し直しながらちょっとだけ理解する、という日々。
Day 81: Rainy window
— SATOSHI (@shmdevelop) March 21, 2020
copied fromhttps://t.co/qtP9WPPFt7https://t.co/nDVkgwMBZz
100日間連続Metalシェーダー実装投稿。
雨の窓!
ブラー頑張ってみたがもっと工夫できた感。
ソースはこちら!https://t.co/rzsB5CUUJ5#hundred_days_msl_challenge タグ履歴 要チェック#shader #metal pic.twitter.com/T4ZRDTHxMT
書くことを継続しながら、たまたま時間の余裕がある時に曖昧だった箇所を調べて改善するなどしました。縦横比率などおかしかったり。おかげで本当にゼロだった知識が急速にレベルアップしました。2021年の年始からどうしようかな。
少し明るくしました。#hundred_days_msl_challenge#shader #metal #hundreddays pic.twitter.com/ma6XK7Woc0
— SATOSHI (@shmdevelop) March 3, 2020
ソースはこちらです。当初は複数プロジェクトで書きながら試行錯誤していったため抜けありますが実際に動作するものはそれだけで有用だと思っています。
iOS界隈でトップ層の一人である堤さんのYoutubeにも参加させて頂きました。
なお堤さん主催のオンラインコミュニティにも参加しています。スキルと発信力のあるエンジニアの方が多数おりいつも刺激を受けています。
XR JAPANに参画
withARハッカソンや100日シェーダーチャレンジを通じてXR JapanというAR/VR/MRでの表現拡張を作るアーティストグループからお声掛け頂きました。メンバーつよつよです。頑張らねば。
プロトタイプ作成しながらいくつかコンテストに応募しています。「Legend Tokyo CHRONICLE」決勝進出。決勝は2021年2月です。より刺さる表現を作って優勝したい。
【XR JAPAN Vol.1】
— XR JAPAN 🇯🇵 (@xr_japan) August 29, 2020
プロダンサー・フリースタイルフットボーラー、
ARクリエイター、
クリエイティブディレクターによる
XRクリエイティブレーベルです。
これは、全てiPhoneを使ってリアルタイムで撮影した映像です。
ARアプリ・映像制作など、お気軽にご相談ください。https://t.co/8ykU7h7wLa pic.twitter.com/g3ma8WuJ6r
【2020年, XR JAPAN制作作品】
— XR JAPAN 🇯🇵 (@xr_japan) December 30, 2020
・Title:SHINOBI
・Performer:@ibukifreestyle @jackalHrsKnk
・Creater:@fusikky @_cokaholic
・Produrer:@kohei_xrhub
水墨画をモチーフにしたShader表現で
和の世界観を表現し,
ダンスの軌跡をARKit3のボディトラッキングで
筆墨した作品. pic.twitter.com/jMFwpZNRg2
【AR × Performance with「感電」(米津玄師)】
— XR JAPAN 🇯🇵 (@xr_japan) September 26, 2020
色々な演出をしていますが
独自のARアプリ(iPhone)で一発撮りした
事後編集一切なしのAR×フリースタイルフットボール映像です。
今回は米津玄師さんの曲に合わせて作ってみました。
Performer:@ibukifreestyle
Creater:@shmdevelop @_cokaholic pic.twitter.com/kejjcPLMhg
xR Developers Community Conference カンファレンスに登壇しました!
スクール、講座受講
NEWVIEW SCHOOL 2020、doxasさん主催の GLSL School に受講生として参加しました。一線で活躍している講師陣の講座と質問できる環境。本当に参加して良かったです。どちらもおすすめ!他にもTokyo Developer Study WeekendでUE4とTouchDesignerによるVR配信の講座を受講したり。
作品作りのテーマ、切り口、切り捨て方など考える材料と軸をたくさん頂きました。あとは量稽古するのみ。以下のような作品を作ったりしました。今も作成続けています。GLSL Schoolはシェーダーの基礎と応用をみっちり。来年1月が最終講義。
AR キュビズム自画像。2020年11月作成。
— SATOSHI (@shmdevelop) December 30, 2020
2020年の東京で生活している私を動く自画像として切り出しました。
映像表現手法のマルチスクリーンと現実空間に多数の映像が浮かばせるARの相乗効果を追求し試行錯誤を重ねました。
その中で偶然一つたどり着いたのがピカソが示したキュビズムでした。 pic.twitter.com/outlwX0wON
FC スーパーマリオブラザーズ ワールド1を可視化してみました!
— SATOSHI (@shmdevelop) August 21, 2020
案外長い道のり?#arkit pic.twitter.com/dHs8EDzZjj
地図にピンを刺すと現実世界の上空から突然ピンが降ってきて部屋の床に刺さる様子を可視化しました(住所は適当)
— SATOSHI (@shmdevelop) August 22, 2020
ピンの材質はプラスチック
余談ですが、位置情報系サービスを開発していた際に近所のファミマに数百本のピンを立てていました
可視化したら恐ろしいことになっていたと思います#arkit pic.twitter.com/ZVdn7j0FVv
ARマインドマップのコンセプト。
— SATOSHI (@shmdevelop) August 22, 2020
マインドマップとARは相性が良いと思っていたのでサクッと作ってみました。動画は音声なし。
人の周りにアイデアの塊が可視化されているとコミュニケーションが進化しそう。#arkit pic.twitter.com/OjJQ7EJRLA
iOSDC、XR Kaigi 登壇
5月頃に現実拡張の一環としてPCの仮想カメラに着目し、実装と表現の検証を行いました。こちらも現在も継続して取り組んでいます。
OSS、検証実装、アイデア プロトタイプなどのアウトプット
Youtubeでの情報配信始めました。DaVinci Resolveの最低限の使い方覚えました。
OSSでいくつかソースをアップしています。この2つは欲しい人にとってマジで有用だと思います。
macにケーブル接続したiPhoneの画面をリアルタイム取得するミニマム実装をGitHubにあげました。
— SATOSHI (@shmdevelop) October 11, 2020
表示のためにリサイズ処理入れています。
macOSで動作。
ヌルヌル動いてくれて嬉しい。https://t.co/6EqSLFq34e pic.twitter.com/wmmcoTJbaZ
https://t.co/m1NHGigtHV
— SATOSHI (@shmdevelop) November 4, 2020
SwiftでのNDI送信実装をGitHubにあげました!
同一LAN内でケーブルなしでiPhoneカメラ映像をリアルタイム送信できます。NDI受信できる各種アプリと連携したい時に参考になるかと。
他にSwiftでの実装例が無くとても有用だと思っています!https://t.co/kMgX1dAnI2#NDI
こちらも整備してアップしたい。
以前実装した ARKit + Swift + Metal + WebRTC。
— SATOSHI (@shmdevelop) November 23, 2020
時雨堂さんのSora Laboを使わさせて頂きました!
これもソース整備したら一部公開しようかと。
けっこう苦労したし、活用方法多数あるし、この組み合わせで他に動く実装ほぼ無いので需要あると思ってます#arkit pic.twitter.com/sJ9aZiqVWY
あとはAR系で検証したりプロトタイプしたものをツイートしたりしてました!
https://t.co/FdrHeRqStT
— SATOSHI (@shmdevelop) August 26, 2020
エレベータ前の2が見えるシーンと
最後に引いた時のスケール感が楽しい
渋谷ミヤシタパークの現地に行った際はこのツイートを思い出してほしい#arkit pic.twitter.com/vbje3YIH7k
Swiftネイティブ実装でリアルタイムに面にMetal Shaderを適用した例。
— SATOSHI (@shmdevelop) September 6, 2020
今回は透過度0.9を指定。
無限にあるシェーダーで色々な表現が可能となる!(見込み) pic.twitter.com/PGTRQ7oYPq
サンフランシスコの空色を部屋に出してみました
— SATOSHI (@shmdevelop) September 12, 2020
DepthからFogを生成してます
iPad Pro、Swift、Shader#arkit #lidar pic.twitter.com/zOUX7Nddk0
映像がリフレクションし面白い映像に pic.twitter.com/p4g1O0hPhJ
— SATOSHI (@shmdevelop) October 2, 2020
今日突然渋谷にもモノリスが置かれていた。高さ約3m。地面を引きずった跡はない。 pic.twitter.com/JnJTpzxxbo
— SATOSHI (@shmdevelop) December 27, 2020
最後に
本業の動画サービス開発を熱量持ってやりつつ未来を見据えARと拡張表現を掘っていきました。SwiftネイティブでのAR表現の調査と実装ではそれなりの知見を持っていると思います。Unity、UE4、TouchDesignerは修行中です。本業もそれ以外も予定詰まり気味でいつ返事できるか分からなく申し訳ありませんが、もし仕事を依頼したい方はTwitterのDM等よりご連絡ください。