Lightning Talk: ChatGPT x A-Frame

1.2K Views

April 20, 23

スライド概要

第3回 オモシロAIごった煮会〜ChatGPTもNovelAIもLiDARも音楽AIもまるっと
https://omoshiroai.connpass.com/event/279360/
ChatGPTなんでも勉強会@ジーズアカデミー
https://gsfukuoka.connpass.com/event/279487/

2023/5/10
AI Meeting用にアップデート

profile-image

可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(tryAR)を主催。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

ChatGPTとA-Frame

2.

A-Frame p WebブラウザでVRなどの3D表現を簡単に実現するフレームワーク p HTMLのタグを書くだけで3Dオブジェクトを配置できる p Firefox、Chrome、Edge、Safariなど主要なブラウザが対応 p Meta QuestやHoloLens 2などのXRのHMDにも対応

3.

A-Frameを体験 A-Frameのページにアクセス (https://aframe.io/) A-Frame

4.

A-Frameを体験 基本サンプル Hello WebVRをクリック 画⾯をクリック p 回転︓マウスでドラッグ p 左右︓[←][→]キー p 前後︓[↑][↓]キー ※前後左右は⾃分がどちらに動くかで考える A-Frame

5.

サンプルコードを⾒てみよう Hello WebVR A-Frame Hello WebVRに関する記述 (たったこれだけ︕)

6.

ソースの確認 <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>の間に描画に関する記述をする

7.

ソースの確認 <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の詳細)

8.

ChatGPTでA-Frameのソースを書かせてみる ちゃんと書いてくれる

9.

ChatGPT API [ChatGPT APIとは] 開発者がChatGPTモデルを使⽤して⾃然⾔語処理を⾏うためのAPI。 APIを⽤いることで、開発者は⾃⾝のプログラムの中で簡単にChatGPT を利⽤して、テキスト⽣成、⽂章要約、質問応答、⾔語翻訳などのタス クを実⾏可能。 HTTP通信のPOSTで命令を送信するだけで利⽤できる。

11.

A-Frameの特徴 p WebブラウザでVRなどの3D表現を簡単に実現するフレームワーク p HTMLのタグを書くだけで3Dオブジェクトを配置できる p Firefox、Chrome、Edge、Safariなど主要なブラウザが対応 p Meta QuestやHoloLens 2などのXRのHMDにも対応

13.

⾃⼰紹介 ⽒名︓吉永崇 (Takashi Yoshinaga) 仕事︓AR/VR応⽤に関するR&D。主に医療⽀援 ウェアラブル・モーションキャプチャ技術開発 Volumetric Video遠隔コミュニケーション コミュニティ︓福岡でAR Fukuokaを主催

14.

次回イベント告知 1 参加登録 #AR_Fukuoka

15.

次回イベント告知 2 参加登録 #AR_Fukuoka