【技術解説】ChatGPTで制作したARアプリ(プロトタイプ)の開発フロー

インタラクションデザイナーのMIZUTANIKIRIN (@mizutanikirin)です。
今回、ほぼChatGPTのみで作成したARアプリの作成フローを紹介します。このARアプリは企画の段階からChatGPTに考えてもらい、コードの作成までをしてもらっています。開発したアプリは以下をご参照ください。

ほぼ #ChatGPT 生成コードのみでARアプリを作ってみました！

90%はChat GPTのコードで、テクスチャや演出周りは自分で作っています。アプリ企画から考えてもらっていたので、こちらでやることはほぼプロンプト入力でした。#designium #AR #ARFoundation pic.twitter.com/g4lLE35u6C

— MIZUTANI KIRIN (@mizutanikirin) April 5, 2023

アイディア出し

まずは以下のプロンプトでアイディアを出してもらいました。

以下の条件でシンプルなインスタレーションを3案考えて、概要を教えて下さい。
- Unityを使用する
- C#を使用する
- ARを使用する
- 今までにないような斬新なアイディアである
- csファイル3ファイルぐらいでできるシンプルな作りである
- 音声インプットがあり、それを使う

納得がいくまで繰り返し何度もアイディアを出してもらい、最終的に以下の出力を採用しました。

案1: AR音声調和の宇宙
ユーザーが音声で異なる周波数や音色を発することで、AR空間に惑星や星雲が生成されるインスタレーションです。異なる音声パラメータが異なる視覚エフェクトを生み出し、独自の宇宙を構築できます。

Main.cs: Unityのメイン制御、音声入力の受け取り、AR宇宙オブジェクト生成処理
VoiceInputManager.cs: 音声入力を解析し、周波数や音色情報を取得
ARSpaceObject.cs: 音声情報に基づいて宇宙オブジェクトを生成するためのクラス

コーディング

次に上記アイディアのアプリを作るために以下のプロンプトでコードを書いてもらいました。

以下の案が面白そうだと思いました。Main.cs、VoiceInputManager.cs、ARSpaceObject.csのコードを書いてください。iOSで実装を想定しています。

> 案1: AR音声調和の宇宙
> ユーザーが音声で異なる周波数や音色を発することで、AR空間に惑星や星雲が生成される
...

結果として以下のMain.cs、VoiceInputManager.cs、ARSpaceObject.csのコードが出力されました。

Main.cs

using UnityEngine;
using UnityEngine.XR.ARFoundation;

public class Main : MonoBehaviour
{
    public GameObject spaceObjectPrefab;
    private VoiceInputManager voiceInputManager;

    void Start()
    {
        voiceInputManager = new VoiceInputManager();
        voiceInputManager.OnVoiceInputReceived += HandleVoiceInput;
    }

    void Update()
    {
        voiceInputManager.ProcessVoiceInput();
    }

    private void HandleVoiceInput(float frequency, float volume)
    {
        ARSpaceObject spaceObject = Instantiate(spaceObjectPrefab).GetComponent<ARSpaceObject>();
        spaceObject.Initialize(frequency, volume);
    }
}

VoiceInputManager.cs 

using UnityEngine;
using System;

public class VoiceInputManager
{
    public event Action<float, float> OnVoiceInputReceived;

    public void ProcessVoiceInput()
    {
        // ここでは、音声入力の解析を行い、周波数と音量を取得します。
        // 実際の実装では、iOSの音声認識APIを利用して、音声データを解析する必要があります。

        // サンプルデータ
        float frequency = 440.0f;
        float volume = 0.5f;

        OnVoiceInputReceived?.Invoke(frequency, volume);
    }
}

ARSpaceObject.cs

using UnityEngine;
using UnityEngine.XR.ARFoundation;
using System.Collections.Generic;

public class ARSpaceObject : MonoBehaviour
{
    private ARRaycastManager raycastManager;
    private ARAnchorManager anchorManager;
    private MeshRenderer meshRenderer;

    void Awake()
    {
        raycastManager = FindObjectOfType<ARRaycastManager>();
        anchorManager = FindObjectOfType<ARAnchorManager>();
        meshRenderer = GetComponent<MeshRenderer>();
    }

    public void Initialize(float frequency, float volume)
    {
        Vector2 screenCenter = new Vector2(Screen.width / 2, Screen.height / 2);
        List<ARRaycastHit> hits = new List<ARRaycastHit>();
        if (raycastManager.Raycast(screenCenter, hits, TrackableType.Planes))
        {
            Pose hitPose = hits[0].pose;
            transform.position = hitPose.position;
            ARAnchor anchor = anchorManager.AddAnchor(hitPose);
            transform.SetParent(anchor.transform);

            // ここで、frequencyとvolumeに基づいてオブジェクトの見た目や振る舞いを設定します。
            UpdateAppearance(frequency, volume);
        }
    }

    private void UpdateAppearance(float frequency, float volume)
    {
        // オブジェクトのサイズを音量に基づいて変更
        float scaleFactor = volume * 2;
        transform.localScale = new Vector3(scaleFactor, scaleFactor, scaleFactor);

        // オブジェクトの色を周波数に基づいて変更
        float colorValue = frequency / 1000.0f;
        Color newColor = new Color(colorValue, colorValue, colorValue);
        meshRenderer.material.color = newColor;
    }
}

出力されたコードは簡易的であったり、必要な詳細なコードが抜けていたり、エラーがあったりしました。それらについて詳細なコードなどを書いてもらえるようにプロンプトで依頼をして修正を繰り返し、ベースとなる部分を完成させました。これ以降はChatGPTと会話をするような感じで作っています。

ブラッシュアップ

次に見た目の部分を作っていきました。現状、音声入力があったときに単に球が表示されるだけだったので、以下のように宇宙に関するコードの生成を行ってもらいました。

ジェネレイティブな星雲はスクリプトで作れますか？

これ以外にも色々と作ってはもらいましたが、コードだけだとどうしても見た目がいいのができず(※1)、方向転換して生成されるものを以下のプロンプトを入力して再度アイディアを出してもらいました。

(※1) Unity上でパーティクル使って作成しないといけなかったり、Textureを使わないと見た目がいいのができないと判断しました。こちらでそれらを用意してもいいですが、今回はChatGPTだけで作りたかったのでここで方向転換しています。

声を出したら何が出ると面白いと思いますか？

結果として以下をアイディアを採用して、その後コードの出力、ブラッシュアップを繰り返し、見た目部分の作業を終えました。(ここの作業はアートディレクター的な感覚)

抽象的なアート：音声に基づいてさまざまな形状やパターンの抽象的なアートが生成されることで、視覚的な魅力を持つインタラクティブな体験ができます。音声の特徴によって、異なる形状や動きが生まれることで、ユニークな作品が生まれます。

調整

これまでの作業で大体は作れましたが、演出面(Animation)と色の調整が必要でした。これらに関してはChatGPTに依頼すると逆に時間がかかるというのと自分の感性で調整がしたかったので、最後は自分が調整をしました。一番上のツイートで「90%はChatGPTで」と言っていますが、残り10%がこの調整で行った作業です。

以上がARアプリの制作フローです。

感想

この後に他のARアプリも作成していますが、大体同じような流れで作成をしています。ChatGPTにコードを書いてもらうとわりとエラーありのコードを出力するので、その修正依頼をするのがまどろっこしい印象はあります。
ただ、簡易的なアプリではありますが、企画からChatGPTだけでこれぐらいのレベルのアプリが作れてしまうのはすごいなという印象をもちました。

エンジニア募集中！

デザイニウムはWebAR ができるウェブエンジニア を募集中です💻話題のApple Vision Pro向けアプリをはじめとした、多彩なXRコンテンツの開発に携われる刺激的な環境です🤩✨テーマを持ってR&Dに取り組むことも歓迎しています。就業はフルリモートなので、全国どこからでも応募できます🏢

カジュアル面談も大歓迎です。ぜひご応募お待ちしています👍