はじめに

Nember Artとは、Symbolブロックチェーンのテストネットを使ってNFTアートを扱うことができるプラットフォームです。（私の解釈）

作成されたNFTは、ブロックチェーンに乗っかっているデータなので、他のサイトでも見れたりするのが自然かなと思いました。

なので、3D空間に表示してみようと思います。あと、VRで入れるようにしてみようと思います。

Unityで3Dワールドを作る

Unity

Unity Personalなら条件付き無料なので、ぜひ試してみてください。

建物

3Dモデルは買います。

導入した図。

これにNFTのメディアを表示するオブジェクトを追加します。

アート表示

建物にアートを表示していきます。メディアデータはHTTPで取得できるようにしておき、実行時にダウンロードするようにします。

3D表示だけのやつと、VRのやつでやり方が異なります。

3D表示はブラウザで見れるように、WebGLでビルドすることを想定しています。VR用はVRChatのワールドとしてアップロードすることを想定しています。

WebGL用

VRしない場合です。

展示パネルに合わせてQuadを置きます。

MyPanoramaというスクリプトでメディアをダウンロードして表示させるようにします。

using System.Collections;
using UnityEngine;
using UnityEngine.Networking;

public class MyPanorama : MonoBehaviour
{
    [SerializeField] private string url = default;

    void Start() {
        StartCoroutine(GetTexture());
    }

    IEnumerator GetTexture() {
        UnityWebRequest www = UnityWebRequestTexture.GetTexture(url);
        yield return www.SendWebRequest();

        if(www.isNetworkError || www.isHttpError) {
            Debug.Log(www.error);
        }
        else
        {
            var tex2d = DownloadHandlerTexture.GetContent(www);
            GetComponent<MeshRenderer>().material.mainTexture = tex2d;
        }
    }
}

次に、視点移動ができるように、キーボードやマウスの入力をもとに、カメラを動かしていきます。

これもすでにあるものを使用します。

Prefabを配置するだけで完了です。

あとはPlayするとキーボードのWASDやカーソル操作やマウスでカメラを操作できます。

VRChat用

VRChatのSDKを導入し、外部URLから画像をダウンロードできるコンポーネントを付けていきます。

SDKをダウンロード。

展示パネルに合わせてQuadを置き、VRCPanoramaコンポーネントを付けます。

ドキュメントに従って必要なオブジェクトを配置します

最後にアップロードです。

あとはVRChatにログインして、ワールドに入るだけです。

バックエンド

バックエンド側には、2つの機能が必要です。1つはメディアデータを提供するHTTPエンドポイントで、もう1つはメディアデータを取得しておいてリサイズしたりキャッシュしたりする機能です。

これらはAzureの関数アプリで作りました。

メディアのキャッシュ

こちらを参考にします。

以下のような関数を作成しました。

AddQueueは定期実行しており、新しいブロックがないかを確認し、あったらQueueに登録します。

そのQueueをトリガーに、FetchTransactionsが起動し、対象のブロックからトランザクションを取得して、NFTが作られたトランザクションをフィルターしてQueueに登録します。

最後に、トランザクションのメタデータから、IPFSから画像を取得して、リサイズなどを行ったうえでBlobに書き込みます。

こんな感じでBlobに溜めていきます。

画像のAPI

HTTPエンドポイントを作ります。リクエストが来たらBlobに保存された画像を読み取り、レスポンスに入れて返します。

URLは、クエリ文字列でnumber=1という風に番号を指定する形にします。

クライアント側はNFTのメディアのIPFSハッシュを知らないのと、（VRChatでは）動的なURL生成ができないからです。

関数アプリの前にはAzure CDNを配置しました。

できたもの

おわりに

かなり端折って説明しました。

是非ともいろんな人にいろんなものを作って欲しいと思います。