Lightning Talk: ChatGPT x A-Frame
1.3K Views
April 20, 23
スライド概要
第３回 オモシロAIごった煮会〜ChatGPTもNovelAIもLiDARも音楽AIもまるっと
https://omoshiroai.connpass.com/event/279360/
ChatGPTなんでも勉強会@ジーズアカデミー
https://gsfukuoka.connpass.com/event/279487/
2023/5/10
AI Meeting用にアップデート
可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。
関連スライド
各ページのテキスト
ChatGPTとA-Frame
A-Frame p WebブラウザでVRなどの3D表現を簡単に実現するフレームワーク p HTMLのタグを書くだけで3Dオブジェクトを配置できる p Firefox、Chrome、Edge、Safariなど主要なブラウザが対応 p Meta QuestやHoloLens 2などのXRのHMDにも対応
A-Frameを体験 A-Frameのページにアクセス (https://aframe.io/) A-Frame
A-Frameを体験 基本サンプル Hello WebVRをクリック 画⾯をクリック p 回転︓マウスでドラッグ p 左右︓[←][→]キー p 前後︓[↑][↓]キー ※前後左右は⾃分がどちらに動くかで考える A-Frame
サンプルコードを⾒てみよう Hello WebVR A-Frame Hello WebVRに関する記述 (たったこれだけ︕)
ソースの確認 <html> <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"> </script> </head> <body> <a-scene> 表⽰するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> p ヘッダー部でA-Frameの機能を提供するライブラリを取り込む p <a-scene>と</a-scene>の間に描画に関する記述をする
ソースの確認 <a-scene> 位置 回転 ⾊ <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> p 基本図形はa-xxxタグで提供されている https://aframe.io/docs/1.4.0/primi tives/a-box.html (例︓a-boxの詳細)
ChatGPTでA-Frameのソースを書かせてみる ちゃんと書いてくれる
ChatGPT API [ChatGPT APIとは] 開発者がChatGPTモデルを使⽤して⾃然⾔語処理を⾏うためのAPI。 APIを⽤いることで、開発者は⾃⾝のプログラムの中で簡単にChatGPT を利⽤して、テキスト⽣成、⽂章要約、質問応答、⾔語翻訳などのタス クを実⾏可能。 HTTP通信のPOSTで命令を送信するだけで利⽤できる。
A-Frameの特徴 p WebブラウザでVRなどの3D表現を簡単に実現するフレームワーク p HTMLのタグを書くだけで3Dオブジェクトを配置できる p Firefox、Chrome、Edge、Safariなど主要なブラウザが対応 p Meta QuestやHoloLens 2などのXRのHMDにも対応
AR化してみた︓筆談GPT Video
⾃⼰紹介 ⽒名︓吉永崇 (Takashi Yoshinaga) 仕事︓AR/VR応⽤に関するR&D。主に医療⽀援 ウェアラブル・モーションキャプチャ技術開発 Volumetric Video遠隔コミュニケーション コミュニティ︓福岡でAR Fukuokaを主催
次回イベント告知 1 参加登録 #AR_Fukuoka
次回イベント告知 2 参加登録 #AR_Fukuoka