超ぷち点群データを 生成させて表示した話

Babalon.jsからOpenAI APIを叩いて、3次元JSONを生成させ、それをBabylon.jsで立体物として表現するテストコードをつくってみました。

Transcript

1. OpenAI APIで 超ぷち点群データ を 生成させて表示した話 #Babylonjs勉強会 2024/7/15 かーでぃ
2. 自己紹介 • 名前： かーでぃ • 今年の抱負： アウトプットの多様性 • 主催、運営： ◦ RPACommunity LT支部、WAトーク支部、 LTを雑に雑談する30分 ◦ BabylonJS勉強会 ゆるほめLT会 ◦ CDLE RPA&クラウドフローグループ ◦ SE友の会　 SE時事ラジオ • モットー：IT知識は広ーく、浅ーく、幅広く • 好き：技術書典、コーヒー、チェアリング 　　　ゆるキャン△、ぼざろ、ガンダム 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会

3. 何がしたかったのか？ 点群データを生成AIで作成し、それをJSONで受け取ることで、自動的に表示まで出来 るようにしたい！ 点群といえば「PointsCloudSystem」だけど、敢えて使わないスタイル！！ 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会

4. 何がしたかったのか？ 点群データを生成AIで作成し、それをJSONで受け取ることで、自動的に表示まで出来 るようにしたい！ 点群といえば「PointsCloudSystem」だけど、敢えて使わないスタイル！！ なぜかって？ 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会

5. 何がしたかったのか？ 点群データを生成AIで作成し、それをJSONで受け取ることで、自動的に表示まで出来 るようにしたい！ 点群といえば「PointsCloudSystem」だけど、敢えて使わないスタイル！！ なぜかって？ コードを作り終わってから気づいたからさ 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会

6. 百聞は一見にしかずと言いますし。 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会

7. 仕組み 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 プロンプト JSON 描画
8. プロンプト 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 3次元JSONを与えると、マイクラのようにブロックを組み上げ、それ表現するコードがあります。 # 例題 以下の3次元配列のJSONをそのコードに与えると、画面上に白い板が上下に 2枚作成されます。 １次元目はX軸方向、２次元目は Z軸方向、３次元目は Y軸方向に組みあがっていく３次元配列の JSONです。 { 'boxLayers': [ [ [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}], [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}], [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}], [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}], [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}] ], [ [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}], [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}], [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}], [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}], [{'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}, {'size': 1, 'color': '#ffffff'}] ] } # 注意点 'boxLayers'は固定で必ず付与し、 JavaScriptのJSON.parseでエラーにならないような JSONとしてください。 sizeは0 or 1となり、1はブロックを生成します。 0はブロックを生成しません。 colorは、ブロックの色になります。 # 要件 5x5x5で表す「〇〇〇」の形状を立体物で表現する、 3次元配列のJSONを作成してください。必要な情報は JSONだけで解説文等は不要です。
9. JSON 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 data.choices[0].message.content 👇 { "boxLayers": [ [ [{"size": 1, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}], [{"size": 1, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}], [{"size": 1, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}], [{"size": 1, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 0, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}], [{"size": 1, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}, {"size": 1, "color": "#ffffff"}] ], …
10. 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 こんなんできました？①
11. 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 こんなんできました？②
12. 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 こんなんできました？③
13. まとめ • 我ながら、アイデアは良さげ（と思ってる！） • 範囲を広げることができれば、マ〇ク〇風マップだって！ • ただ、安定稼働にはプロンプトの調整必須 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 https://toyokeizai.net/articles/-/441222
14. 以上、かーでぃでした。