Unity絡みでキレ散らかしたり、時間食われた内容を都度都度メモってく。

Unityでビルドした後、VisualStudio上でのキー入力の挙動がおかしくなる

【環境】
VisualStudio 2019
Unity 2020.1.13
【状況】
ソースコード内を選択し文字入力箇所がコード内であっても、十字キーやBackSpaceキー、そしてctrl+cやctrl+sなどのショートカットキーが効かない。
(例：十字キー左を押すとなぜかソースコードの拡大率の部分の編集になる)
なお、ツール→オプション→環境→キーボード→リセットも効果なし。
【対処】
方法１.VisualStudioを一度落として再度立ち上げる。
方法２.別ソースコードが開かれている場合、編集ソースコードを切り替える。(その後元のコードに戻ると直ってる)

Unity (#1) Advent Calendar 第１日目を飾るにはものすごくふさわしくない超地味な内容となっています。申し訳ございません。

以前に
Unity(WebGL)でC#の関数からブラウザー側のJavaScript関数を呼び出すまたはその逆(JS⇒C#)に関する知見(プラグイン形式[.jslib])
という長ったらしいタイトルの記事を書きましたが、今回はこれの更新版＋αという内容となっています。
前回の記事はもう古くなってしまったので、改めて調査をしました。
(古い記事は一応古いバージョンとして残しておきます)

調査したUnityのバージョン: 2019.4.1f1 (と2020.2.0b2.3094)
(文中ではそれぞれ 2019, 2020 と省略して表記します)

どうしてもES6+でコードが書けない

なんかemscriptenの最新バージョンだとES6+でコードが書けるようになったとかならないとか。ただしUnityで使用されているemscriptenではいまだ(Unity 2020)にES6+でコード書くと怒られます。

同じ関数名の関数はどちらかが上書きされる

複数の.jslibを用意してコンパイルすると、同じスコープ(ブロック)に展開されます。
なので、別々の.jslibファイルであっても同じ関数名の関数を定義した場合、どちらかが上書きされてしまいますので注意が必要です。ですので、名前が被らないような少し長めな関数名にすることがいいでしょう。
(どのような順番で上書きされるのかまでは未調査)
特に、アセットストアにあるWebGL用のアセットをインポートすると高確率で.jslibファイルがありますので、もしかするとこういったアセットの.jslibの関数を上書きしてしまう可能性があることに注意してください。

逆に、これがとても有効に働くときもあります。それがUnity自身が用意している.jslib(実際は.js)の上書きです。
例えば、WebCamTextureのWebGLビルド用ソースはWebCam.jsというファイルになっています。ただ、このWebCam.jsは複数カメラが接続された状態でのカメラの選択などが行えないなどの非情なまでのバグがあります。このWebCam.jsで定義されている関数と同じ関数名で正しく動作する関数を定義した.jslibファイルを用意してコンパイルすればきちんとカメラデバイスを選択できるようになります。
きちんとデバイスを選択できるようにしたサンプル

dynCallパターン

dynCallのパターンが2019では 165パターンに結構増えており、さらに2020においては566パターンとめちゃくちゃ増えてます。
ちなみに、C:\Program Files\Unity\Hub\Editor[version]\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\Emscripten にあるemscripten-version.txtの内容を見ると2019, 2020ともに"1.38.11"となっており一緒でした。
同じバージョンなのになぜパターン数が違うのかが疑問です。

dynCallデータ型に'j'が追加される(2019～)

データ型に'j'が追加されています。
ドキュメントから引用させていただくと

• 'v': void type
• 'i': 32-bit integer type
• 'j': 64-bit integer type (currently does not exist in JavaScript)
• 'f': 32-bit float type
• 'd': 64-bit float type

となっており'j'はBigIntとして扱うのでしょう。
(なぜ'j'なのかをDiscordで聞いてみたら'i'の次だからそうです)
とすると、HEAP64やHEAPU64があるのかと予想しましたが2020でもありませんでした。
このIssueの最後の開発者コメントで、WASM_BIGINTフラグを有効にすることでHEAP64が追加されるということです。
調べてみるとWASM_BIGINTフラグは1.39.13で追加されたもので、試せる環境が手元にないため未検証です。

Runtimeオブジェクトの廃止(2019～)

古いバージョンでは、dynCall()などのメソッドはRuntimeオブジェクトにありましたが、このRuntimeが廃止されているようで見当たりませんでした。dynCall()も見当たりません。ですので、dynCall()の代わりに直接dynCall_viといったパターン分用意されたメソッドを使用します。

古いバージョン(2018以前?)でのdynCall_viiの実行

// ptrCSFuncは、C#側関数のポインター
Runtime.dynCall('vii', ptrCSFunc, [arg1, arg2]);

新しいバージョン(2019以降)でのdynCall_viiの実行

Module.dynCall_vii(ptrCSFunc, strPtr1, strPtr2);

数値配列を渡す(引数)、数値配列を戻す(戻り値)

配列を引数に渡すと.jslib側ではポインターとして受け取ります。ですのでポインターから配列に戻す処理が必要です。
戻り値として配列を戻す場合は、_malloc()したポインターで戻すということをしなければなりません。
固定長配列でしたら、それほど苦労せずに受け渡すことができますが、問題は可変長配列の場合です。
特に戻り値として戻す場合は、1つのデータにしなければなりません。
配列の最初の要素に要素数を追加するという方法も考えたのですが、バイト配列だと最大でも要素数が256までになってしまいますのでこの方法はあまり有効ではありません。頑張って導き出した答えが、最初の4バイトを要素数にし以降を配列のデータとすることでとりあえずできました。
unsafeを使えばある程度すっきりしたコードになりパフォーマンスも上がりますが、ここではあえて(皆さん嫌いな)Marshalを使った方法をとってみました。

可変長配列を受け取り、可変長配列を戻すサンプルコード

// Unity

[DllImport("__Internal")]
private static extern IntPtr byteArrayFunc(byte[] arg, int length);

private static byte[] ptrToByteArray(IntPtr ptr)
{
    int len = Marshal.ReadInt32(ptr);
    byte[] arr = new byte[len];
    Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
    return arr;
}

private static void test() {
    // byte[]を渡し、byte[]の戻り値を受け取る
    byte[] byteArrayArg = new byte[] { 1, 2, 3 };
    IntPtr ptrByteArray = byteArrayFunc(byteArrayArg, byteArrayArg.Length);
    byte[] byteArrayRet = ptrToByteArray(ptrByteArray);
    Debug.Log($"byteArrayFunc ret: [{string.Join(", ", byteArrayRet.Select(x => x.ToString()).ToArray())}]");
}

// .jslib

$utils: {
    arrayToReturnPtr: function (arr, type) {
        var buf = (new type(arr)).buffer;
        var ui8a = new Uint8Array(buf);
        var ptr = _malloc(ui8a.byteLength + 4);
        HEAP32.set([arr.length], ptr >> 2);
        HEAPU8.set(ui8a, ptr + 4);
        return ptr;
    },
},

byteArrayFunc: function (arg, len) {
    debugger;
    var byteArray = HEAPU8.subarray(arg, arg + len);
    console.log('byteArrayFunc arg: ' + utils.arrayToString(byteArray));

    var ret = [3, 2, 1];
    var ptr = utils.arrayToReturnPtr(ret, Uint8Array);
    return ptr;
}

_free()するタイミング

前述のサンプルコードを見ていただくと一つ問題に気付いた方もいると思います。
_malloc()したのですから_free()しなければいけません。
戻り値として_malloc()したポインターを戻す場合、いつ_free()するかという問題にあたります。
return ステートメント以降で行わないといけないですが、当然returnステートメント以降は実行されません。
簡単な方法としてはsetTimeout()を使って_free()を実行することで一応、回避可能です。

// .jslib

    //前述のサンプルコードのarrayToReturnPtr関数部分
    arrayToReturnPtr: function (arr, type) {
        var buf = (new type(arr)).buffer;
        var ui8a = new Uint8Array(buf);
        var ptr = _malloc(ui8a.byteLength + 4);
        HEAP32.set([arr.length], ptr >> 2);
        HEAPU8.set(ui8a, ptr + 4);
        // setTimeout()で_free()を行う
        setTimeout(function() { _free(ptr) }, 0);
        return ptr;
    },
//...

もっと確実な方法としては、面倒ではありますが.jslib側に_free()を行う関数を用意しておき、C#側から戻り値を受け取り用が済んだらその関数を実行することです。

// Unity

// _free()を行う関数追加
[DllImport("__Internal")]
private static extern void execFree(uint arg);

[DllImport("__Internal")]
private static extern IntPtr byteArrayFunc(byte[] arg, int length);

private static byte[] ptrToByteArray(IntPtr ptr)
{
    int len = Marshal.ReadInt32(ptr);
    byte[] arr = new byte[len];
    Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
    // 用が済んだら_free()を行う
    execFree((uint)ptr);
    return arr;
}

private static void test() {
    // バイト配列を渡し、バイト配列の戻り値を受け取る
    byte[] byteArrayArg = new byte[] { 1, 2, 3 };
    IntPtr ptrByteArray = byteArrayFunc(byteArrayArg, byteArrayArg.Length);
    byte[] byteArrayRet = ptrToByteArray(ptrByteArray);
    Debug.Log($"byteArrayFunc ret: [{string.Join(", ", byteArrayRet.Select(x => x.ToString()).ToArray())}]");
}

// .jslib

// _free()を行う関数を追加
execFree(ptr) {
    _free(ptr);
}

byteArrayFunc: function (arg, len) {
    debugger;
    var byteArray = HEAPU8.subarray(arg, arg + len);
    console.log('byteArrayFunc arg: ' + utils.arrayToString(byteArray));

    var ret = [3, 2, 1];
    var ptr = utils.arrayToReturnPtr(ret, Uint8Array);
    return ptr;
}

可変長の文字列配列を渡す、文字列配列を戻す

じゃあ、可変長数値配列の受け渡しができたなら文字列配列も受け渡しできたい。文字コードはUTF8で。
数値配列の受け渡しを応用すれば一応できました。

// Unity

[DllImport("__Internal")]
private static extern void execFree(uint arg);

[DllImport("__Internal")]
private static extern IntPtr stringArrayFunc(string[] arg, int length);

private static byte[] ptrToByteArray(IntPtr ptr)
{
    Debug.Log($"ptr: {(uint)ptr}");
    int len = Marshal.ReadInt32(ptr);
    Debug.Log($"byteArry len:{len}");
    byte[] arr = new byte[len];
    Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
    execFree((uint)ptr);
    return arr;
}

private static string[] ptrToStringArray(IntPtr ptr)
{
    int len = Marshal.ReadInt32(ptr);
    Debug.Log($"stringArry len:{len}");
    IntPtr[] ptrArr = new IntPtr[len];
    Debug.Log(ptrArr);
    Marshal.Copy(IntPtr.Add(ptr, 4), ptrArr, 0, len);
    List<string> ret = new List<string>();
    for (var i = 0; i < len; i++)
    {
        var byteArray = ptrToByteArray(ptrArr[i]);
        var str = Encoding.UTF8.GetString(byteArray);
        ret.Add(str);
    }
    execFree((uint)ptr);
    return ret.ToArray();
}

public static void test()
{
    string[] stringArrayArg = new string[] { "foo", "bar", "baz" };
    IntPtr ptrStringArray = stringArrayFunc(stringArrayArg, stringArrayArg.Length);
    string[] stringArrayRet = ptrToStringArray(ptrStringArray);
    Debug.Log($"stringArrayFunc ret: [{string.Join(", ", stringArrayRet)}]");
}

// .jslib

stringArrayFunc: function (arg, len) {
    var strArray = [];
    for (var i = 0; i < len; i++) {
        var ptr = HEAP32[(arg >> 2) + i];
        var str = Pointer_stringify(ptr);
        strArray.push(str);
    }
    console.log('strArrayFunc arg: ' + strArray);

    var ret = ['hoge', 'fuga', 'piyo', 'hogera', 'ほげほげ', '叱る'];
    var retPtr = utils.stringArrayToReturnPtr(ret);
    return retPtr;
}

見ていただくとわかる通り、可変長数値配列の受け渡しもそうですが、可変長文字列配列の受け渡しはさらにめんどいことに。はっきり言ってJSONで受け渡したほうが楽です。
文字列を_malloc()した場合は、Unity側で自動で_free()してくれるのですが、C#側でUTF8に変換したいためにbyte[]に変換しているため自動で_free()されません。
(Marshal.PtrToStringAnsi()で一応、ポインターから文字列に変換することは可能ですがUTF16に変換されてしまいます。.NET5ではMarshal.PtrToStringUTF8()というまんまな関数が用意されましたが、いかんせんUnityでの.NET5のサポートはまだまだ先になるようです)

固定長数値配列の参照渡し

UnityのWebXR Exporterというアセットのソースを覗いてたら、お！っと思うコードが記述されていました。

// Unity

[DllImport("__Internal")]
private static extern void refIntArrayFunc(float[] a, int l);

int[] refIntArray = new int[3];
refIntArrayFunc(refIntArray, a.Length);

// .jslib

refIntArrayFunc: function (arg, len) {
    Module.refIntArray = new Int32Array(buffer, arg, len);
}

このように書くことで、C#側のrefIntArrayと.jslib側のModule.refIntArrayは参照渡しの関係となり、.jslib側でModule.refIntArrayの値を変更すると、(returnステートメントなしに)C#のrefIntArrayに値が反映されます。

テクスチャー

テクスチャーは、C#側で生成し、Texture.GetNativeTexturePtr()でポインターを取得し、ポインターを.jslibの関数に渡す。.jslib側でGL.textures[ptr]でテクスチャーを参照することが可能"らしいです"。
"らしいです"というのは、C#で

var texture = new Texture2D(0, 0, TextureFormat.ARGB32, false);
var ptr = texture.GetNativeTexturePtr();

としても、ptrは0になり有効な値になってくれません。
"もし、有効なポインターを取得する方法をご存じの方がいらっしゃればぜひご教授をお願いします"

仮に有効なポインターの値が取得できた場合は

// .jslib

textureFunc(ptr) {
    GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[ptr]);
    GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, true);
    GLctx.texImage2D(GLctx.TEXTURE_2D, 0, GLctx.RGBA, GLctx.RGBA,GLctx.UNSIGNED_BYTE, video);
    GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, false);
}

といったコードを書くことにより、そのテクスチャーにimgエレメントの画像や、videoエレメントの映像、WebRTCなどのMediaStreamの映像などもほぼ直接的に表示できるようになる"はずです"。

最後に

Unity (#1) Advent Calendar 第1日目の内容は以上となります。
ちょっとネタに走った感はありますが、.jslibを書けるようになればUnityだけではできないこと、特にJS(Web)のいろんなAPIなどをUnityに取り入れることが可能となりますのでぜひかけるようになりましょう！

あ、あとまとめたテストコードも載せておきます

// Unity

using AOT;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Runtime.InteropServices;
using System.Text;
using UnityEngine;

public class jslibtest : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void execFree(uint arg);


    [DllImport("__Internal")]
    private static extern byte byteFunc(byte arg);

    [DllImport("__Internal")]
    private static extern short shortFunc(short arg);

    [DllImport("__Internal")]
    private static extern int intFunc(int arg);

    [DllImport("__Internal")]
    private static extern float floatFunc(float arg);

    [DllImport("__Internal")]
    private static extern double doubleFunc(double arg);

    [DllImport("__Internal")]
    private static extern IntPtr byteArrayFunc(byte[] arg, int length);

    [DllImport("__Internal")]
    private static extern IntPtr shortArrayFunc(short[] arg, int length);

    [DllImport("__Internal")]
    private static extern IntPtr intArrayFunc(int[] arg, int length);

    [DllImport("__Internal")]
    private static extern IntPtr floatArrayFunc(float[] arg, int length);


    [DllImport("__Internal")]
    private static extern IntPtr doubleArrayFunc(double[] arg, int length);

    [DllImport("__Internal")]
    private static extern IntPtr stringArrayFunc(string[] arg, int length);

    [DllImport("__Internal")]
    private static extern void refIntArrayFunc(int[] arr, int len);

    private int[] refIntArray = new int[3];

    private void Start()
    {
        test();

        refIntArrayFunc(refIntArray, refIntArray.Length);
        StartCoroutine(chekRefArray());
    }

    IEnumerator chekRefArray ()
    {
        while(true)
        {
            yield return new WaitForSeconds(0.3f);
            Debug.Log($"refIntArray: [{string.Join(", ", refIntArray.Select(x => $"{x}"))}]");
        }
    }

    private void Update()
    {
    }

    private static byte[] ptrToByteArray(IntPtr ptr)
    {
        Debug.Log($"ptr: {(uint)ptr}");
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"byteArry len:{len}");
        byte[] arr = new byte[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        execFree((uint)ptr);
        return arr;
    }

    private static short[] ptrToShortArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"shortArry len:{len}");
        short[] arr = new short[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        return arr;
    }

    private static int[] ptrToIntArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"intArry len:{len}");
        int[] arr = new int[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        return arr;
    }

    private static float[] ptrToFloatArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"floatArry len:{len}");
        float[] arr = new float[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        return arr;
    }

    private static double[] ptrToDoubleArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"doubleArry len:{len}");
        double[] arr = new double[len];
        Marshal.Copy(IntPtr.Add(ptr, 4), arr, 0, len);
        return arr;
    }

    private static string[] ptrToStringArray(IntPtr ptr)
    {
        int len = Marshal.ReadInt32(ptr);
        Debug.Log($"stringArry len:{len}");
        IntPtr[] ptrArr = new IntPtr[len];
        Debug.Log(ptrArr);
        Marshal.Copy(IntPtr.Add(ptr, 4), ptrArr, 0, len);
        List<string> ret = new List<string>();
        for (var i = 0; i < len; i++)
        {
            var byteArray = ptrToByteArray(ptrArr[i]);
            var str = Encoding.UTF8.GetString(byteArray);
            ret.Add(str);
        }
        execFree((uint)ptr);
        return ret.ToArray();
    }

    public static void test()
    {
        byte byteArg = 210;
        byte byteRet = byteFunc(byteArg);
        Debug.Log($"byteFunc ret: {byteRet}");

        short shortArg = 210;
        short shortRet = shortFunc(shortArg);
        Debug.Log($"shortFunc ret: {shortRet}");

        int intArg = 210;
        int intRet = intFunc(intArg);
        Debug.Log($"intFunc ret: {intRet}");

        float floatArg = 210.123f;
        float floatRet = floatFunc(floatArg);
        Debug.Log($"floatFunc ret: {floatRet}");

        double doubleArg = 210.321d;
        double doubleRet = doubleFunc(doubleArg);
        Debug.Log($"doubleFunc ret: {doubleRet}");


        byte[] byteArrayArg = new byte[] { 1, 2, 3 };
        IntPtr ptrByteArray = byteArrayFunc(byteArrayArg, byteArrayArg.Length);
        byte[] byteArrayRet = ptrToByteArray(ptrByteArray);
        Debug.Log($"byteArrayFunc ret: [{string.Join(", ", byteArrayRet.Select(x => $"{x}"))}]");

        short[] shortArrayArg = new short[] { 4, 5, 6 };
        IntPtr ptrShortArray = shortArrayFunc(shortArrayArg, shortArrayArg.Length);
        short[] shortArrayRet = ptrToShortArray(ptrShortArray);
        Debug.Log($"shortArrayFunc ret: [{string.Join(", ", shortArrayRet.Select(x => $"{x}"))}]");

        int[] intArrayArg = new int[] { 7, 8, 9 };
        IntPtr ptrIntArray = intArrayFunc(intArrayArg, intArrayArg.Length);
        int[] intArrayRet = ptrToIntArray(ptrIntArray);
        Debug.Log($"intArrayFunc ret: [{string.Join(", ", intArrayRet.Select(x => $"{x}"))}]");

        float[] floatArrayArg = new float[] { 1.1f, 2.2f, 3.3f };
        IntPtr ptrFloatArray = floatArrayFunc(floatArrayArg, floatArrayArg.Length);
        float[] floatArrayRet = ptrToFloatArray(ptrFloatArray);
        Debug.Log($"floatArrayFunc ret: [{string.Join(", ", floatArrayRet.Select(x => $"{x}"))}]");

        double[] doubleArrayArg = new double[] { 5.5d, 6.6d, 7.7d };
        IntPtr ptrDoubleArray = doubleArrayFunc(doubleArrayArg, doubleArrayArg.Length);
        double[] doubleArrayRet = ptrToDoubleArray(ptrDoubleArray);
        Debug.Log($"doubleArrayFunc ret: [{string.Join(", ", doubleArrayRet.Select(x => $"{x}"))}]");

        string[] stringArrayArg = new string[] { "foo", "bar", "baz" };
        IntPtr ptrStringArray = stringArrayFunc(stringArrayArg, stringArrayArg.Length);
        string[] stringArrayRet = ptrToStringArray(ptrStringArray);
        Debug.Log($"stringArrayFunc ret: [{string.Join(", ", stringArrayRet)}]");
    }
}

var lib = {
    $utils: {
        arrayToString: function (arr) {
            var ret = '[';
            for (var i = 0; i < arr.length; i++) {
                var spl = i === arr.length - 1 ? '' : ', ';
                ret += arr[i].toString() + spl;
            }
            return ret + ']';
        },
        arrayToReturnPtr: function (arr, type) {
            var buf = (new type(arr)).buffer;
            var ui8a = new Uint8Array(buf);
            var ptr = _malloc(ui8a.byteLength + 4);
            HEAP32.set([arr.length], ptr >> 2);
            HEAPU8.set(ui8a, ptr + 4);
            // setTimeout(function() { _free(ptr) }, 0);
            return ptr;
        },
        stringArrayToReturnPtr: function (strArr) {
            var ptrArray = [];
            var enc = new TextEncoder();
            for (var i = 0; i < strArr.length; i++) {
                var byteArray = enc.encode(strArr[i]);
                var ptr = utils.arrayToReturnPtr(byteArray, Uint8Array);
                ptrArray.push(ptr);
            }
            var ptr = utils.arrayToReturnPtr(ptrArray, Uint32Array);
            return ptr;
        }
    },

    execFree: function (ptr) {
        console.log('free ptr: ' + ptr);
        _free(ptr);
    },

    byteFunc: function (arg) {
        console.log('byteFunc arg: ' + arg);

        var ret = 128;
        return ret;
    },

    shortFunc: function (arg) {
        console.log('shortFunc arg: ' + arg);

        var ret = 128;
        return ret;
    },

    intFunc: function (arg) {
        console.log('intFunc arg: ' + arg);

        var ret = 128;
        return ret;
    },

    longFunc: function (arg) {
        console.log('longFunc arg: ' + arg);
        var ret = 128;
        return ret;
    },

    floatFunc: function (arg) {
        console.log('floatFunc arg: ' + arg);

        var ret = 128.123;
        return ret;
    },

    doubleFunc: function (arg) {
        console.log('doubleFunc arg: ' + arg);

        var ret = 128.123;
        return ret;
    },

    byteArrayFunc: function (arg, len) {
        var byteArray = HEAPU8.subarray(arg, arg + len);
        console.log('byteArrayFunc arg: ' + utils.arrayToString(byteArray));

        var ret = [3, 2, 1];
        var ptr = utils.arrayToReturnPtr(ret, Uint8Array);
        console.log('jslib ptr: ' + ptr);
        return ptr;
    },

    shortArrayFunc: function (arg, len) {
        var shortArray = HEAP16.subarray(arg, len);
        console.log('shortArrayFunc arg: ' + shortArray);

        var ret = [6, 5, 4];
        var ptr = utils.arrayToReturnPtr(ret, Int16Array);
        return ptr;
    },

    intArrayFunc: function (arg, len) {
        var intArray = HEAP32.subarray(arg, len);
        console.log('intArrayFunc arg: ' + intArray);

        var ret = [9, 8, 7];
        var ptr = utils.arrayToReturnPtr(ret, Int32Array);
        return ptr;
    },

    floatArrayFunc: function (arg, len) {
        var floatArray = HEAPF32.subarray(arg, len);
        console.log('floatFunc arg: ' + floatArray);

        var ret = [3.3, 2.2, 1.1];
        var ptr = utils.arrayToReturnPtr(ret, Float32Array);
        return ptr;
    },

    doubleArrayFunc: function (arg, len) {
        var doubleArray = HEAPF64.subarray(arg, len);
        console.log('doubleFunc arg: ' + doubleArray);

        var ret = [6.6, 5.5, 4.4, 3.3, 2.2];
        var ptr = utils.arrayToReturnPtr(ret, Float64Array);
        return ptr;
    },

    stringArrayFunc: function (arg, len) {
        var strArray = [];
        for (var i = 0; i < len; i++) {
            var ptr = HEAP32[(arg >> 2) + i];
            var str = Pointer_stringify(ptr);
            strArray.push(str);
        }
        console.log('strArrayFunc arg: ' + strArray);

        var ret = ['hoge', 'fuga', 'piyo', 'hogera', 'ほげほげ', '叱る'];
        var retPtr = utils.stringArrayToReturnPtr(ret);
        return retPtr;
    },

    refIntArrayFunc: function (arg, len) {
        console.log('ref len:' + len);
        Module.refIntArray = new Int32Array(buffer, arg, len);
        Module.sampleValue = 0;
        setInterval(function () {
            console.log('refIntArray update: ' + Module.refIntArray.length + ' ' + Module.sampleValue );
            for (var i = 0; i < Module.refIntArray.length; i++) {
                Module.refIntArray[i] = Module.sampleValue + i;
            }
            Module.sampleValue += Module.refIntArray.length;
        }, 1000);
    }
};
autoAddDeps(lib, '$utils');
mergeInto(LibraryManager.library, lib);

はじめまして、N高等学校一年のdaichiと申します。
プログラミング初心者の私が、学習の記録を残そうと思って書いてます。
良ければアドバイスなど頂けると幸いです。

今月やったこと

unityにほぼ初めて触りました！（前に触ったことはあったけどしっかりやってなかったです）
N予備校のunity講座を進め初めて学習しました！

このような3DアクションゲームをN予備校に従いながら作りました！

改善点

C#を勉強出来ていないので何やってるのかわからなかった…
paizaなどでC#を勉強するなどする。
勉強すれば、基礎として何を書いているかわかるはず…

あとがき

めちゃくちゃ初心者なので、こういう学習方法あるよとか、アドバイスいただけるとありがたいです…

こちらは Unity #2 Advent Calendar 2020 の 1日目の記事です ?

背景

kintone hack 2019やCybozu Days 2020で、kintoneのアプリのデータをUnity内で可視化するプロジェクトを披露してきました。

このプロジェクトの中でも自分が気に入ってるのは、kintone内の案件管理データベースから直近の売上金額を集計し、売上の分だけプレイヤーの目の前にコインを大量に降らせるという、ファンキーでリッチなデータ可視化方法でした。

金だー！金だー！

実はこの大量コイン生成を実現するのに何回か失敗したので、この記事ではコインの降らし方について案内をします。なお、kintoneからデータを取得する方法については別記事で書き上げているので、この記事では割愛します。

コインを生成してみた

コインをUnityの環境内に生成するのは簡単です。生成したいオブジェクトをprehabとして準備し、Instantiateすれば生成されます。Instantiateする際の角度はランダムになるように調整もできます。

Vector3 CoinPosition = new Vector3(0,3,0);
float CoinRotationX = Random.Range(0.0f,360.0f);
float CoinRotationY = Random.Range(0.0f,360.0f);
float CoinRotationZ = Random.Range(0.0f,360.0f);
Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));

コツン⌒☆*

簡単ですね。では、これを大量に降らせるようにコードをいじってみましょう。

コインを複数生成してみた

コインを複数生成するので、単純にループ処理でInstantiateすれば良いのかなっと思ってforループで実装してみました。これでコインが連続でチャリンチャリーンっと滝のように流れてくるはずです。

int NumberOfCoins = 100;

for(int i=0; i<NumberOfCoins; i++)
{
    Vector3 CoinPosition = new Vector3(0,3,0);
    float CoinRotationX = Random.Range(0.0f,360.0f);
    float CoinRotationY = Random.Range(0.0f,360.0f);
    float CoinRotationZ = Random.Range(0.0f,360.0f);
    Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));
}

(　ﾟдﾟ)

(つд⊂)ｺﾞｼｺﾞｼ

(；ﾟдﾟ)

(つд⊂)ｺﾞｼｺﾞｼ
　　
（；ﾟ Дﾟ） …?! what?

爆　☆　散

爆散しました・・・何が起きたんでしょうか・・・おそらく同じ場所にBox Colliderがついているオブジェクトが一瞬に生成されたことで、オブジェクト同士が反発してしまい、爆散してしまったんだと思います。最初からクライマックスですね。

コインの生成位置をずらしてみた

ほぼ同じタイミングで特定の位置にコインが生成されるとコイン同士が反発しあって爆散するので、コインの生成位置を1つ1つずらしながら生成すれば良いのでは？という考えで実装をさらに進めてみましょう。位置をずらすけれど、だいたい同じエリアに生成させたい・・・となると螺旋状に降らせるのが良いかもしれません。

簡単な実装方法として、X軸とY軸をAdjuster変数で少しずつずらして、一周したらY軸を少しあげるようにしてみました。キレイな螺旋ではありませんが、爆散を防ぐには十分だと思います。

int NumberOfCoins = 100;

Vector3 AdjusterA = new Vector3(0.25f, 0, 0);
Vector3 AdjusterB = new Vector3(0, 0, 0.25f);
Vector3 AdjusterC = new Vector3(-0.25f, 0, 0);
Vector3 AdjusterD = new Vector3(0, 0.5f, -0.25f);

Vector3 CoinPosition = new Vector3(0,3,0);

for(int i=0; i<NumberOfCoins; i++)
{
    switch (i % 4)
    {
        case 0:
            CoinPosition = CoinPosition + AdjusterA;
            break;
        case 1:
            CoinPosition = CoinPosition + AdjusterB;
            break;
        case 2:
            CoinPosition = CoinPosition + AdjusterC;
            break;
        case 3:
            CoinPosition = CoinPosition + AdjusterD;
            break;
    }
    float CoinRotationX = Random.Range(0.0f,360.0f);
    float CoinRotationY = Random.Range(0.0f,360.0f);
    float CoinRotationZ = Random.Range(0.0f,360.0f);
    Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));
}

ドバドバドバドバドバー⌒☆*

コインが爆散してませんし、これは中々良い感じにコインを降らせたのではないでしょうか。

コインの生成タイミングを遅らせてみた

実は先程のコインを降らせる方法に欠点がありました。

カメラが小さな範囲しか捉えてないのであればこの方法でも良いんですが、生成するコインが増えれば増えるほどコインがタワーのように高くなってしまいます。

少しズームアウトして全体を見てみましょう：

30コインの場合↓

100コインの場合↓

300コインの場合↓

んー、これは見た目がかなり悪いですね。

4コインごとにY軸の値を増やしてるので、コインが増えたら当然その分コインのタワーは高くなります。

Y軸という「位置」をずらすことにより爆散を防いでいたのですが、こんどは生成する「時間」をずらしてみましょう。UnityではWaitForSeconds() 関数を使用すれば、コインとコインが生成される間にディレイを設定することができ、例え同じ位置に生成されても先に落ちたコインと次に落ちるコインがぶつからないように調整することが可能です。なお、WaitForSeconds() 関数はcoroutineの中でしか使用が出来ないので、下記のように関数化して修正する必要があります。Y軸の修正も忘れずにしておきましょう。

void Start()
{
    StartCoroutine("InstantiateCoinsWithDelay");
}

private IEnumerator InstantiateCoinsWithDelay()
{
    int NumberOfCoins = 100;

    Vector3 AdjusterA = new Vector3(0.25f, 0, 0);
    Vector3 AdjusterB = new Vector3(0, 0, 0.25f);
    Vector3 AdjusterC = new Vector3(-0.25f, 0, 0);
    Vector3 AdjusterD = new Vector3(0, 0, -0.25f);

    Vector3 CoinPosition = new Vector3(0,3.5f,0);

    for(int i=0; i<NumberOfCoins; i++)
    {
        switch (i % 4)
        {
            case 0:
                CoinPosition = CoinPosition + AdjusterA;
                break;
            case 1:
                CoinPosition = CoinPosition + AdjusterB;
                break;
            case 2:
                CoinPosition = CoinPosition + AdjusterC;
                break;
            case 3:
                CoinPosition = CoinPosition + AdjusterD;
                break;
        }

        float CoinRotationX = Random.Range(0.0f,360.0f);
        float CoinRotationY = Random.Range(0.0f,360.0f);
        float CoinRotationZ = Random.Range(0.0f,360.0f);
        Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));
        yield return new WaitForSeconds(0.1f);
    }
}

ぽこぽこぽこぽこー⌒☆*

良い感じですね。円を描きながら(いや、実際は四点を順番に回ってるだけなので四角か)、コインとコインの生成の間にディレイを入れているので、爆散せずに済んでいます。

コインをさらに自然に生成してみた

いや、自然にコインを生成するってなんやねん ( ´Д｀)っ))Дﾟ)・∵.

っと思いながら書いてますが、ようは雨が降るようなイメージでコインを降らしてみたいんですよね。

なのでコインの人工的な螺旋状の降り方を一旦やめて、自然界での天気のように「特定のエリア内に」かつ「ランダムな場所に」かつ「ランダムな間隔で」コインを降らせようと思います。

void Start()
{
    StartCoroutine("InstantiateRandomCoins");
}

private IEnumerator InstantiateRandomCoins()
{
    int NumberOfCoins = 300;
    Vector3 CoinPosition = new Vector3(0,0,0);

    for(int i=0; i<NumberOfCoins; i++)
    {
        CoinPosition = new Vector3(Random.Range(0,1.6f),Random.Range(4.0f,4.8f),Random.Range(0,1.6f));
        float CoinRotationX = Random.Range(0.0f,360.0f);
        float CoinRotationY = Random.Range(0.0f,360.0f);
        float CoinRotationZ = Random.Range(0.0f,360.0f);
        Instantiate(CoinPrefab, CoinPosition, Quaternion.Euler(CoinRotationX,CoinRotationY,CoinRotationZ));
        yield return new WaitForSeconds(Random.Range(0.01f,0.07f));
    }
}

雨っぽく見えるように、ついでに雲のオブジェクトも配置してみました。どうでしょうか、少しは自然界の雨のように見えますでしょうか。人工的なコインを大量に降らせてるから雨もくそもないんですけどね。アハハ。自分でも何作ってんのか良くわからんです。

「雨なんて降って・・・」

「いや」「雨だよ」

参考

今回の記事に使用したアセットや参考資料です

• コインのアセット: Medieval Gold
• 女の子のアセット: Free Voxel Girl
• 雲のアセット: 3LE Low Poly Cloud Pack
• 参考Qiita記事1: UnityからkintoneのREST APIを叩く方法
• 参考Qiita記事2: kintoneアプリに溜めたゲームスコア情報をUnity内に表示させる

この記事について

Unityアセットストアで買ったCorgi Engineをなんとか使ってみようとする覚え書きです。
超初心者が超初心者にあてた、あまり参考にならないアレ。

もくじ

ようそつなので基礎から書く。

1. 大まかな流れ
2. シーンの準備
   1. そのまま放り込めるもの
   2. ちょっと準備が必要なもの１　LevelManager
   3. ちょっと準備が必要なもの２　レベル
   4. 調整とか
   5. Tips　カメラがどうなっているかの確認方法
   6. ひとまずこうなる
3. プレイヤーのコーギー君作成
   1. コーギー君のもとを作る
   2. コーギー君を人体錬成する
   3. 見た目を追加する
   4. 調整
   5. プレハブ化とスポーン設定
4. テストプレイ
5. 総括と今後

大まかな流れ

基本的な流れは以下の通り。

• まずコーギーエンジンを使えるように「最小限のシーン」を用意する
• プレイヤーキャラであるコーギー君を作成する
• 細かな調整を行う

シーンの準備

まず空のシーンを作って、それを「最小限のシーン要件」とやらにしてみる。

そのまま放り込めるもの

下の表にあるプレハブアセットを空っぽのシーンに放り込む。

必要なファイル	場所
GameManagers	Assets> CorgiEngine> Common> Prefabs> LevelManagers
UICamera	Assets> CorgiEngine> Common> Prefabs> GUI
RegularCamera	Assets> CorgiEngine> Common> Prefabs> Camera

ちょっと準備が必要なもの１　LevelManager

シーンに空のオブジェクトを作って、そこにコンポーネントとしてLevelManagerをくっつける。
LevelManagerはスクリプトとしてアセット内に用意されてて、Assets> CorgiEngine> Common> Scripts> Managersに入ってる。

ちょっと準備が必要なもの２　レベル

キャラクターが立てる地面を用意する。
まず空のオブジェクトを作り、その中へDemoにある丁度よさげな足場をドラッグ＆ドロップ。

調整とか

1. 初めから入ってるMainCameraを消す。代わりにさっき入れたRegularCameraを使うから古いのはいらないのだ。
2. RegularCameraの位置を0.0.-5くらいに直す。カメラさんが明後日の場所を映していては意味ないのだ。
3. LevelのZ位置を修正する。カメラに足場が映らないとかよくある。

Tips　カメラがどうなっているかの確認方法

ひとまずこうなる

プレイヤーのコーギー君作成

コーギー君のもとを作る

空のオブジェクトを作り、そこにコンポーネントとしてCharacterをくっつける。
CharacterはAssets> CorgiEngine> Common> Scripts> Agents> Coreに入ってる。

コーギー君を人体錬成する

Characterの一番下にあるAutoBuild Player Characterを押すと自動でプレイヤーが出来上がる。
すごい！！！
出来上がりは下の通り。

見た目を追加する

このままだと透明人間なので、コーギー君用スプライトを追加する。

おお、なんとかわいいコーギー君なんでしょう！
プロジェクトの中にSpritesというフォルダを作成し、そこにコーギー君の画像を格納します。
　※この画像は練習等ご自由にお使いください。

さっき人体錬成した透明コーギー君へコンポーネント「スプライトレンダラー」を追加し、スプライトに画像を指定します。

調整

おお、なんという大きさだコーギー君！

調整項目は以下の通り

• 拡大縮小をx0.3,y0.3とする
• BoxCollider2Dのサイズをx6.26、y4.34とする
• BoxCollider2Dのオフセットをx0、y-0.53とする

プレハブ化とスポーン設定

出来上がったコーギー君をプロジェクトビューへドラック&ドロップ。プレハブ化する。
不要になったシーン内のコーギー君は削除しておく。
そののちLevelManagerのPlayerPrefabsへコーギー君プレハブを設置する。

テストプレイ

なんということでしょう！
透明な四角い箱に囲まれたコーギー君が元気に2段ジャンプするではありませんか！
ピクリとも身体を動かさず動き回る様は不気味というほかない。

総括と今後

できれば次はコーギー君にアニメーションを追加したり、透明な四角い箱を研究したりしたい。

まったくの初心者ですので、「もっとこうした方がいい」というアドバイス等ありましたら是非ともお教えいただければ幸いです。
……特に、プレイヤーキャラの拡大縮小をいじったのは今後に響かないかが心配です。

はじめに

波を作ってみたので紹介します。
YouTube

C# Job Systemで波動方程式を実装し、ShaderGraphで水を描画しています。

GitHub
https://github.com/rngtm/Unity-JobSystem-WaveEquation

§1 . 波動方程式

2次元の波の運動は以下の数式で表されます。

\frac{\partial^2 u }{\partial t^2} = s^2 \left( \frac{\partial^2 u }{\partial x^2} + \frac{\partial^2 u }{\partial y^2} \right)

$u = u(x,y,t)$ は水面の波の変位、$s$は波の伝わる速さを表しています。

§2 . 関数f(x, y)の2階微分の計算

ここで、関数xとyの関数 $f(x,y)$　の2階微分は、ある小さな値 $h$ を使って以下の式で計算することができます。

$$
\frac{\partial^2}{\partial x^2}f(x, y) = \frac{f(x + h, y) + f(x - h,y) - 2 f(x,y)}{h^2} + O(h^2)
$$

$$
\frac{\partial^2}{\partial y^2}f(x, y) = \frac{f(x, y + h) + f(x,y - h) - 2 f(x,y)}{h^2} + O(h^2)
$$

$O(h^2)$は誤差を表しており、$h$を$0$に近づけるほど、誤差$O(h^2)$は0に近づきます。

※上記の式はテイラー展開を利用することで導出できますが、ここでは説明しません。
参考 : https://na.cs.tsukuba.ac.jp/jikken/wp-content/uploads/2016/07/wave.pdf

§3 . 波の加速度の計算

ここでは、時刻tにおける波の変位を $u(x,y)$ と表します。

先ほどの §2. の計算式の $ f(x,y) \rightarrow u(x,y)$ と置き換えると、$u$の$x, y$に関する2階微分を得ることができます。
$h$は$\Delta x, \Delta y$に置き換えます。

$$
\frac{\partial^2}{\partial x^2}u(x, y) \approx \frac{u(x + \Delta x, y) + f(x - \Delta x,y) - 2 u(x,y)}{(\Delta x)^2}
$$

$$
\frac{\partial^2}{\partial y^2}u(x, y) \approx \frac{u(x, y + \Delta y) + f(x,y - \Delta y) - 2 u(x,y)}{(\Delta y)^2}
$$

2階微分の足し合わせに波の伝わる速さ $s^2$を乗算すると、波の加速度 $ \frac{\partial^2 u }{\partial t^2} $　が求まります。

$$
\frac{\partial^2 u }{\partial t^2} = s^2 \left( \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u }{\partial y^2} \right)
$$

§4. MonoBehaviourで波動方程式を実装してみる

まずはC# Job Systemを使わず、通常のMonoBehaviourで波動方程式シミュレーションを実装してみました。

ソースコード全体(WaveMesh2D.cs)

WaveMesh2D.cs

using System.Linq;
using UnityEngine;

/// <summary>
/// 2次元の波動方程式の実装
/// </summary>
[RequireComponent(typeof(MeshFilter))]
[RequireComponent(typeof(MeshRenderer))]
public class WaveMesh2D : MonoBehaviour
{
    [SerializeField] private Vector2Int resolution = new Vector2Int(16, 16); // メッシュ解像度
    [SerializeField] private float s = 0.5f; // 波の伝わる速さ
    [SerializeField] private Vector2 meshSize = new Vector2(8f, 8f);
    private Mesh mesh;
    private Vector3[] vertices = null;
    private Vector3[] normals = null;
    private float[,] waveTable; // 波の変位
    private float[,] waveSpeedTable;

    [SerializeField] private float rainForceMin = 0.1f;
    [SerializeField] private float rainForceMax = 0.3f;
    [SerializeField] private int rainIntervalFrame = 10;

    // Start is called before the first frame update
    void Start()
    {
        // 波のデータ作成
        waveTable = new float[resolution.x, resolution.y];
        waveSpeedTable = new float[resolution.x, resolution.y];

        // 波の初期化
        InitializeWave();

        // メッシュの作成
        CreateMesh();
    }

    /// <summary>
    /// 波の初期状態の設定
    /// </summary>
    private void InitializeWave()
    {
        // 座標(1,1)を中心にして、水を持ち上げます
        Vector2 center = new Vector2(1f, 1f);
        for (int yi = 1; yi < resolution.y - 1; yi++) // 端点(yi = 0, yi = resolution.y - 1 ) は固定する
        {
            for (int xi = 1; xi < resolution.x - 1; xi++) // 端点(xi = 0, xi = resolution.x - 1 ) は固定する
            {
                var p = GetVertexPosition(xi, yi);
                float r = (new Vector2(p.x, p.z) - center).magnitude;
                float h = Mathf.Exp(-r * 8.0f) * 2.0f;
                h = Mathf.Clamp01(h);
                waveTable[xi, yi] = h;
            }
        }
    }

    void FixedUpdate()
    {
        SolveWaveEquation(Time.fixedDeltaTime);
    }

    // 2次元波動方程式の実装
    void SolveWaveEquation(float deltaTime)
    {
        float dx = meshSize.x / resolution.x;
        float dy = meshSize.y / resolution.y;

        // 位置を元に加速度 (d/dt)^2 u の計算
        for (int yi = 1; yi < resolution.y - 1; yi++)
        {
            for (int xi = 1; xi < resolution.x - 1; xi++)
            {
                float wave = waveTable[xi, yi];
                float waveX1 = waveTable[xi - 1, yi];
                float waveX2 = waveTable[xi + 1, yi];
                float waveY1 = waveTable[xi, yi - 1];
                float waveY2 = waveTable[xi, yi + 1];

                // (d/dx)^2 u     
                float dudx2 = (waveX1 + waveX2 - 2f * wave) / dx / dx;

                // (d/dy)^2 u     
                float dudz2 = (waveY1 + waveY2 - 2f * waveTable[xi, yi]) / dy / dy;

                float waveAccel = s * s * (dudx2 + dudz2);
                waveSpeedTable[xi, yi] += waveAccel * deltaTime;
            }
        }

        // 速度の反映
        for (int yi = 1; yi < resolution.y - 1; yi++)
        {
            for (int xi = 1; xi < resolution.x - 1; xi++)
            {
                waveTable[xi, yi] += waveSpeedTable[xi, yi] * deltaTime;
            }
        }

        UpdateMesh();
    }

    /// <summary>
    /// メッシュ作成
    /// </summary>
    void CreateMesh()
    {
        mesh = new Mesh();

        // 頂点の作成
        int vertexCount = resolution.x * resolution.y;

        // 頂点・法線・UV作成
        vertices = new Vector3[vertexCount];
        normals = new Vector3[vertexCount].Select(x => new Vector3(0, 1, 0)).ToArray();

        var uv = new Vector2[vertexCount];
        int vi = 0;
        for (int yi = 0; yi < resolution.y; yi++)
        {
            for (int xi = 0; xi < resolution.x; xi++)
            {
                vertices[vi] = GetVertexPosition(xi, yi);
                uv[vi] = new Vector2((float)xi / (resolution.x - 1), (float)yi / (resolution.y - 1));
                vi++;
            }
        }

        // 頂点インデックス作成
        int triangleCount = (resolution.x - 1) * (resolution.y - 1) * 6;
        int[] triangles = new int[triangleCount];
        int offset = 0;
        int ti = 0;
        for (int yi = 0; yi < resolution.y - 1; yi++)
        {
            for (int xi = 0; xi < resolution.x - 1; xi++)
            {
                triangles[ti++] = offset;
                triangles[ti++] = offset + resolution.x;
                triangles[ti++] = offset + 1;
                triangles[ti++] = offset + resolution.x;
                triangles[ti++] = offset + resolution.x + 1;
                triangles[ti++] = offset + 1;

                offset += 1;
            }

            offset += 1;
        }

        mesh.SetVertices(vertices);
        mesh.uv = uv;
        mesh.SetTriangles(triangles, 0);

        GetComponent<MeshFilter>().mesh = mesh;
    }

    /// <summary>
    /// メッシュ更新
    /// </summary>
    private void UpdateMesh()
    {
        float dx = meshSize.x / resolution.x;
        float dy = meshSize.y / resolution.y;
        int vi = 0;
        for (int yi = 0; yi < resolution.y; yi++)
        {
            for (int xi = 0; xi < resolution.x; xi++)
            {
                vertices[vi] = GetVertexPosition(xi, yi);
                vi++;
            }
        }

        for (int yi = 0; yi < resolution.y - 1; yi++)
        {
            for (int xi = 0; xi < resolution.x - 1; xi++)
            {
                // 法線の計算
                float dudx = (waveTable[xi + 1, yi] - waveTable[xi - 1, yi]) / dx;
                float dudy = (waveTable[xi, yi] - waveTable[xi - 1, yi]) / dy;
                normals[xi + yi * resolution.x] = new Vector3(-dudx, 1.0f, -dudy).normalized;
            }
        }

        mesh.SetVertices(vertices);
        mesh.SetNormals(normals);
    }

    /// <summary>
    /// 現在の頂点座標の取得
    /// </summary>
    private Vector3 GetVertexPosition(int x, int y)
    {
        return new Vector3(
            (float) x / resolution.x * meshSize.x - meshSize.x / 2f,
            waveTable[x, y],
            (float) y / resolution.y * meshSize.y - meshSize.y / 2f
        );
    }
}

波動方程式の計算部分(抜粋)

    // 2次元波動方程式の計算 (FixedUpdate()から呼ぶ想定)
    void SolveWaveEquation(float deltaTime)
    {
        float dx = meshSize.x / resolution.x;
        float dy = meshSize.y / resolution.y;

        // 波の速度の計算
        for (int yi = 1; yi < resolution.y - 1; yi++)
        {
            for (int xi = 1; xi < resolution.x - 1; xi++)
            {
                float wave = waveTable[xi, yi]; // u(x, y)
                float waveX1 = waveTable[xi - 1, yi]; // u(x - dx, y)
                float waveX2 = waveTable[xi + 1, yi]; // u(x + dx, y)
                float waveY1 = waveTable[xi, yi - 1]; // u(x, y - dy)
                float waveY2 = waveTable[xi, yi + 1]; // u(x, y + dy)

                // (d/dx)^2 u     
                float dudx2 = (waveX1 + waveX2 - 2f * wave) / dx / dx;

                // (d/dy)^2 u     
                float dudz2 = (waveY1 + waveY2 - 2f * wave) / dy / dy;

                // 加速度(d/dt)^2 u の計算
                float waveAccel = s * s * (dudx2 + dudz2);

                // 加速度を使って速度を更新
                waveSpeedTable[xi, yi] += waveAccel * deltaTime;
            }
        }

        // 速度を使って位置を更新
        for (int yi = 1; yi < resolution.y - 1; yi++)
        {
            for (int xi = 1; xi < resolution.x - 1; xi++)
            {
                waveTable[xi, yi] += waveSpeedTable[xi, yi] * deltaTime;
            }
        }

        UpdateMesh();
    }

補足 : メッシュの法線の計算方法

水面メッシュの点$P(x,y,u(x,y))$ における長さ1の法線ベクトル $ \vec{n}$の計算方法を軽く紹介します。
法線ベクトルの計算は、C#では以下のような実装になっています。

// 法線の計算
float dudx = (waveTable[xi + 1, yi] - waveTable[xi - 1, yi]) / dx;
float dudy = (waveTable[xi, yi] - waveTable[xi - 1, yi]) / dy;
normals[xi + yi * resolution.x] = new Vector3(-dudx, 1.0f, -dudy).normalized;

\vec{n} = 
\begin{vmatrix}
- \Delta u_x / \Delta x \\
- \Delta u_y / \Delta y \\
1
\end{vmatrix}
\\\\
\Delta u_x = u(x + \Delta x, y) - u(x, y)
\\\\
\Delta u_y = u(x, y + \Delta y) - u(x, y)

法線ベクトルの導出(ちょっと長いです)

■法線ベクトルの導出

水面にある点$P$からx方向に少しずれた位置にある水面上の点 $Q$と、
y方向に少しずれた位置にある水面上の点 $R$ を考えます。
$\vec{PQ}$ と $\vec{PR}$ の外積を計算することで、点Pの法線方向のベクトルを得ることができます。

■法線の計算

点P, Q, R は以下のようなベクトル形式で表すことができます。

P = \begin{pmatrix}
x \\
y \\
u(x,y)
\end{pmatrix}

Q = \begin{pmatrix}
x + \Delta x \\
y \\
u(x+\Delta x,y)
\end{pmatrix}

R = \begin{pmatrix}
x \\
y + \Delta y \\
u(x,y + \Delta y)
\end{pmatrix}

$\vec{PQ}$ と $\vec{PR}$ は以下のようなベクトルになります。

\vec{PQ} = \begin{pmatrix}
\Delta x \\
0 \\
u(x+\Delta x,y) - u(x,y) 
\end{pmatrix}
= \begin{pmatrix}
\Delta x \\
0 \\
\Delta u_x
\end{pmatrix}

\vec{PR} =  \begin{pmatrix}
0 \\
dy \\
u(x,y+\Delta y) - u(x,y) 
\end{pmatrix}
= \begin{pmatrix}
0 \\
dy \\
\Delta u_y
\end{pmatrix}

$\vec{PQ}$ と $\vec{PR}$ の外積を計算すると、以下のようになります。

\vec{PQ} \times \vec{PR}  
= 
\begin{pmatrix}
\Delta x\\
0 \\
\Delta u_y
\end{pmatrix}
\times
\begin{pmatrix}
0 \\
\Delta y \\
\Delta u_y
\end{pmatrix}
=
\begin{pmatrix}
- \Delta y \Delta u_x \\
- \Delta x \Delta u_y \\
\Delta x \Delta y
\end{pmatrix}
=
\begin{pmatrix}
- \Delta u_x / \Delta x \\
- \Delta u_y / \Delta y \\
1
\end{pmatrix}
\Delta x \Delta y

$ \vec{PQ} \times \vec{PR} $ を正規化すると、係数の $ \Delta x \Delta y $ は消え、長さ1の法線ベクトル $\vec{n}$ を得ます。

| \vec{PQ} \times \vec{PR} |
= \begin{vmatrix}
- \Delta u_x / \Delta x \\
- \Delta u_y / \Delta y \\
1
\end{vmatrix}
= \vec{n}

z方向下向きの法線ベクトルが欲しいときは、-1倍します。

\begin{vmatrix}
\Delta u_x / \Delta x \\
\Delta u_y / \Delta y \\
-1
\end{vmatrix}

(法線ベクトルの導出おわり)

---

$5. C# Job Systemで波動方程式を実装する

§4. の 波動シミュレーションをJobSystemに移植します。

移植に当たって以下のようなcsファイルを用意しました。

csファイル名	説明
WaveParameter.cs	波のパラメータを保持する構造体
WaveSpeedJob.cs	波動方程式を計算し、波の速度を更新するジョブ
WavePositionJob.cs	波の速度を利用して、波の位置を更新するジョブ。 WaveSpeedJobの後に実行
WaveMesh2D_Job.cs	波の状態をMeshへ反映するMonoBehaviourクラス
WaveJobSystem.cs	JobSystemを実行する大元のMonoBehaviourクラス

Unity上での実装を見たい方は、GitHubリポジトリをご覧ください
https://github.com/rngtm/Unity-JobSystem-WaveEquation

ソースコード

WaveParameter.cs (波のパラメータの構造体)

WaveParameter.cs

using System;
using UnityEngine;

/// <summary>
/// 波のパラメータ
/// </summary>
[Serializable]
public struct WaveParameter
{
    public int NumX; // グリッドの数(X)
    public int NumY; // グリッドの数(Y)
    public float DeltaX; // グリッド間の距離(X方向)
    public float DeltaY; // グリッド間の距離(Y方向)
    public float V; // 波が伝わる速さ
    public Vector2 MeshSize; // メッシュの大きさ
}

WaveSpeedJob.cs (波の速さを更新するジョブ)

WaveSpeedJob.cs

using Unity.Burst;
using Unity.Collections;
using Unity.Jobs;

/// <summary>
/// 波の加速度・速度を計算するJob
/// </summary>
[BurstCompile]
public struct WaveSpeedJob : IJobParallelFor
{
    [ReadOnly] public WaveParameter Parameter;
    [ReadOnly] public NativeArray<float> WaveArray; // 波の変位u
    public NativeArray<float> Accel; // 波の加速度　(d/dt)^2 u
    public NativeArray<float> Speed; // 波の速さ (d/dt) u
    public float DeltaTime;

    public void Execute(int index)
    {
        int xi = index % Parameter.NumX;
        int yi = index / Parameter.NumX;

        // 端点の場合は何もしない
        if (xi == 0 || xi == Parameter.NumX - 1) return;
        if (yi == 0 || yi == Parameter.NumY - 1) return;

        float wave = GetWave(xi, yi);
        float waveX1 = GetWave(xi - 1, yi);
        float waveX2 = GetWave(xi + 1, yi);
        float waveY1 = GetWave(xi, yi - 1);
        float waveY2 = GetWave(xi, yi + 1);

        float d2ux = (waveX1 + waveX2 - 2f * wave) / (2f);
        float d2uy = (waveY1 + waveY2 - 2f * wave) / (2f);

        float dvdx = (Parameter.V / Parameter.DeltaX);
        Accel[index] = dvdx * dvdx * (d2ux + d2uy) * DeltaTime;
        Speed[index] += Accel[index] * DeltaTime;
    }

    float GetWave(int xi, int yi)
    {
        return WaveArray[xi + yi * Parameter.NumX];
    }
}

WavePositionJob.cs (波の位置(変位u)を更新するジョブ)

WavePositionJob.cs

using Unity.Burst;
using Unity.Collections;
using Unity.Jobs;

/// <summary>
/// 波のSpeedを元にして、波の変位uを更新するJob
/// </summary>
[BurstCompile]
public struct WavePositionJob : IJobParallelFor
{
    [ReadOnly] public float DeltaTime;
    [ReadOnly] public NativeArray<float> Speed; // 波の速さ (d/dt) u
    public NativeArray<float> Position; // 波の速さ (d/dt) u

    public void Execute(int index)
    {
        // 波の変位の更新
        Position[index] += Speed[index] * DeltaTime;
    }
}

WaveMesh2D_Job.cs (波のメッシュを管理するMonoBehaviourクラス)

WaveMesh2D_Job.cs

using System.Linq;
using Unity.Collections;
using UnityEngine;

/// <summary>
/// 波のメッシュを管理するクラス(C# JobSystemから動かす)
/// </summary>
[RequireComponent(typeof(MeshFilter))]
[RequireComponent(typeof(MeshRenderer))]
public class WaveMesh2D_Job : MonoBehaviour
{
    private WaveParameter parameter;
    private NativeArray<float> waveTable;
    private Vector2Int resolution; // メッシュ解像度
    private Mesh mesh = null;
    private Vector3[] vertices = null;
    private Vector3[] normals = null;

    /// <summary>
    /// 波の初期化
    /// </summary>
    public void Create(WaveParameter parameter, NativeArray<float> waveArray)
    {
        this.parameter = parameter;
        resolution = new Vector2Int(parameter.NumX, parameter.NumY);
        waveTable = waveArray;
        CreateMesh();
    }

    /// <summary>
    /// メッシュ作成
    /// </summary>
    void CreateMesh()
    {
        mesh = new Mesh();

        // 頂点の作成
        int vertexCount = resolution.x * resolution.y;

        // 頂点・法線・UV作成
        vertices = new Vector3[vertexCount];
        normals = new Vector3[vertexCount].Select(x => new Vector3(0, 1, 0)).ToArray();

        var uv = new Vector2[vertexCount];
        int vi = 0;
        for (int yi = 0; yi < resolution.y; yi++)
        {
            for (int xi = 0; xi < resolution.x; xi++)
            {
                vertices[vi] = GetVertexPosition(xi, yi);
                uv[vi] = new Vector2((float)xi / (resolution.x - 1), (float)yi / (resolution.y - 1));
                vi++;
            }
        }

        // 頂点インデックス作成
        int triangleCount = (resolution.x - 1) * (resolution.y - 1) * 6;
        int[] triangles = new int[triangleCount];
        int offset = 0;
        int ti = 0;
        for (int yi = 0; yi < resolution.y - 1; yi++)
        {
            for (int xi = 0; xi < resolution.x - 1; xi++)
            {
                triangles[ti++] = offset;
                triangles[ti++] = offset + resolution.x;
                triangles[ti++] = offset + 1;
                triangles[ti++] = offset + resolution.x;
                triangles[ti++] = offset + resolution.x + 1;
                triangles[ti++] = offset + 1;

                offset += 1;
            }

            offset += 1;
        }

        mesh.SetVertices(vertices);
        mesh.uv = uv;
        mesh.SetTriangles(triangles, 0);

        GetComponent<MeshFilter>().mesh = mesh;
    }

    /// <summary>
    /// メッシュ更新
    /// </summary>
    public void UpdateMesh()
    {
        float dx = parameter.MeshSize.x / resolution.x;
        float dy = parameter.MeshSize.y / resolution.y;
        int vi = 0;
        for (int yi = 0; yi < resolution.y; yi++)
        {
            for (int xi = 0; xi < resolution.x; xi++)
            {
                vertices[vi] = GetVertexPosition(xi, yi);
                vi++;
            }
        }

        for (int yi = 1; yi < resolution.y - 1; yi++)
        {
            for (int xi = 1; xi < resolution.x - 1; xi++)
            {
                // 法線の計算
                float dudx = (GetWave(xi + 1, yi) - GetWave(xi - 1, yi)) / parameter.DeltaX;
                float dudy = (GetWave(xi, yi) - GetWave(xi - 1, yi)) / parameter.DeltaY;
                normals[xi + yi * resolution.x] = new Vector3(-dudx, 1.0f, -dudy).normalized;
            }
        }

        mesh.SetVertices(vertices);
        mesh.SetNormals(normals);
    }

    private Vector3 GetVertexPosition(int x, int y)
    {
        return new Vector3(
            (float) x / resolution.x * parameter.MeshSize.x - parameter.MeshSize.x / 2f,
            GetWave(x, y),
            (float) y / resolution.y * parameter.MeshSize.y - parameter.MeshSize.y / 2f
        );
    }

    private float GetWave(int x, int y)
    {
        return waveTable[x + y * resolution.x];
    }
}

WaveJobSystem.cs (JobSystemを実行するMonoBehaviourクラス)

WaveJobSystem.cs

using Unity.Collections;
using Unity.Jobs;
using UnityEngine;

public class WaveJobSystem : MonoBehaviour
{
    [SerializeField] private WaveMesh2D_Job waveMesh = null;
    [SerializeField] private WaveParameter parameter = new WaveParameter();
    private NativeArray<float> accelArray;
    private NativeArray<float> speedArray;
    private NativeArray<float> waveArray;

    void Start()
    {
        // Native Arrayのメモリ割り当て
        int arrayLength = parameter.NumX * parameter.NumY;
        accelArray = new NativeArray<float>(arrayLength, Allocator.Persistent);
        speedArray = new NativeArray<float>(arrayLength, Allocator.Persistent);
        waveArray = new NativeArray<float>(arrayLength, Allocator.Persistent);

        // 波の初期状態の設定
        InitializeWave();

        // Mesh作成
        waveMesh.Create(parameter, waveArray);
    }

    private void FixedUpdate()
    {
        RunJob();
        waveMesh.UpdateMesh();
    }

    /// <summary>
    /// ジョブの実行
    /// </summary>
    private void RunJob()
    {
        float deltaTime = Time.fixedDeltaTime;
        var speedJob = new WaveSpeedJob
        {
            Accel = accelArray,
            Speed = speedArray,
            WaveArray = waveArray,
            Parameter = parameter,
            DeltaTime = deltaTime,
        };

        var speedHandle = speedJob.Schedule(speedArray.Length, 1);

        var positionJob = new WavePositionJob
        {
            Speed = speedArray,
            Position = waveArray,
            DeltaTime = deltaTime,
        };

        var positionHandle = positionJob.Schedule(speedArray.Length, 1, speedHandle);
        positionHandle.Complete();
    }

    /// <summary>
    /// 波の初期化
    /// </summary>
    private void InitializeWave()
    {
        Vector2 center = new Vector2(1f, 1f);
        int i = 0;
        for (int yi = 0; yi < parameter.NumY; yi++)
        {
            for (int xi = 0; xi < parameter.NumX; xi++)
            {
                var p = GetVertexPosition(xi, yi);
                float r = (new Vector2(p.x, p.z) - center).magnitude;
                float h = Mathf.Exp(-r * 8.0f) * 2.0f;
                h = Mathf.Clamp01(h);
                waveArray[i++] = h;
            }
        }
    }

    /// <summary>
    /// 頂点座標取得
    /// </summary>
    /// <param name="x"></param>
    /// <param name="y"></param>
    /// <returns></returns>
    private Vector3 GetVertexPosition(int x, int y)
    {
        return new Vector3(
            (float) x / parameter.NumX * parameter.MeshSize.x - parameter.MeshSize.x / 2f,
            GetWave(x, y),
            (float) y / parameter.NumY * parameter.MeshSize.y - parameter.MeshSize.y / 2f
        );
    }

    /// <summary>
    /// 波の取得
    /// </summary>
    /// <param name="x"></param>
    /// <param name="y"></param>
    /// <returns></returns>
    private float GetWave(int x, int y)
    {
        return waveArray[x + y * parameter.NumX];
    }

    /// <summary>
    /// NativeArrayの解放 (確保したNativeArrayは自分で開放する必要がある)
    /// </summary>
    private void OnDestroy()
    {
        waveArray.Dispose();
        speedArray.Dispose();
        accelArray.Dispose();
    }
}

JobSystemのBurst対応について

BurstCompileアトリビュートをJobの頭につけることで、Burst対応されます。

WavePositionJob.cs

[BurstCompile]
public struct WavePositionJob : IJobParallelFor
{
...

$6. ShaderGraphで水を描画する

水の描画方法は複数考えられます。
・地面のレンダリング結果に水面を上から重ねる
・地面レンダリングのUVを水面の法線でゆがませる
・光を水面で屈折させて地面を描画する
など

今回はRayを水面で屈折させて地面を描画することにしてみました。

Rayの屈折

Rayを水面で屈折させて、地面を描画します。

具体的な手順

1) Cameraから、水面メッシュへ向けてRayを飛ばす
2) メッシュ上の法線を利用して、Rayの向きを屈折させる
3) 屈折したRayが地面にぶつかった位置の座標をテクスチャ座標として利用して、地面テクスチャを描画する

ShaderGraphの実装

Ray向きの計算部分

Rayの屈折部分

ここではメッシュ法線を利用して、Rayの向きを屈折させています。

カスタムノード Refract

ShaderGraphには屈折させるノードは存在しないので、カスタムノードでRefract(屈折)ノードを作成しました。

カスタムノード Refractの実装について

カスタムノード Refractの実装

カスタムノードの中身では、Custom Functionで屈折処理を実装しています。

Refract

OutDir = refract(RayDir, Normal, eta);

RayDir, Normal について

RayDirはRayの向き、NormalはRayとメッシュが当たる位置の法線Nです。

etaについて

etaは屈折率の比を表しています。
空気(1.0)から水(1.333)へ入射する場合、はeta = 0.75になります。

eta = \frac{1.0}{1.333} \approx 0.75

Rayの進む距離の計算部分

ここでは、Rayが地面にぶつかるまでの距離を計算しています。

Ray位置の計算

ここでは、Rayの地面上の位置を計算しています。

地面テクスチャサンプリング処理

地面のRayのXZ座標を使って地面テクスチャをサンプリングしています。

サンプリング結果は、Albedoとして出力します。

結果