Slide 1

Slide 1 text

OpenAI APIで 超ぷち点群データ を 生成させて表示した話 #Babylonjs勉強会 2024/7/15 かーでぃ

Slide 2

Slide 2 text

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


Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

仕組み 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 プロンプト JSON 描画

Slide 8

Slide 8 text

プロンプト 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 3次元JSONを与えると、マイクラのようにブロックを組み上げ、それ表現するコードがあります。 # 例題 以下の3次元配列のJSONをそのコードに与えると、画面上に白い板が上下に 2枚作成されます。 1次元目はX軸方向、2次元目は Z軸方向、3次元目は Y軸方向に組みあがっていく3次元配列の 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だけで解説文等は不要です。

Slide 9

Slide 9 text

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"}] ], …

Slide 10

Slide 10 text

2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 こんなんできました?①

Slide 11

Slide 11 text

2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 こんなんできました?②

Slide 12

Slide 12 text

2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 こんなんできました?③

Slide 13

Slide 13 text

まとめ ● 我ながら、アイデアは良さげ(と思ってる!) ● 範囲を広げることができれば、マ〇ク〇風マップだって! ● ただ、安定稼働にはプロンプトの調整必須 2024/7/15 Babylon.js勉強会⚡ゆるほめLT会
 超ぷち点群データを生成させて表示した話
 #Babylonjs勉強会
 https://toyokeizai.net/articles/-/441222

Slide 14

Slide 14 text

以上、かーでぃでした。