Unity WebGL Calls Rust Wasm

Unity WebGL Calls Rust Wasm

(Jin Qing’s Column, May., 2023)

Reference: https://zenn.dev/ruccho/articles/261136f7bdb003

In this article, a Rust function is compiled into wasm, and then got called by the Unity WebGL.

Rust

Create Rust wasm project from wasm-pack template like this:

E:\temp\ttt2>cargo generate rustwasm/wasm-pack-template --name unity-wasm-example
⚠️   Favorite `rustwasm/wasm-pack-template` not found in config, using it as a git repository: https://github.com/rustwasm/wasm-pack-template.git
   Destination: E:\temp\ttt2\unity-wasm-example ...
   project-name: unity-wasm-example ...
   Generating template ...
   Moving generated files into: `E:\temp\ttt2\unity-wasm-example`...
Initializing a fresh Git repository
✨   Done! New project created E:\temp\ttt2\unity-wasm-example

Edit src/lib.rs:

mod utils;

use wasm_bindgen::prelude::*;

...

#[wasm_bindgen]
pub fn add(lhs: i32, rhs: i32) -> i32 {
    lhs + rhs
}

Build:

E:\temp\ttt2\unity-wasm-example>wasm-pack build --target no-modules
[INFO]:   Checking for the Wasm target...
[INFO]:   Compiling to Wasm...
...
[INFO]:    Your wasm pkg is ready to publish at E:\temp\ttt2\unity-wasm-example\pkg.

Unity

Create a Unity project, create a script file and drag it onto the camera object:

using System.Runtime.InteropServices;
using UnityEngine;

public class NewBehaviourScript : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern int add(int lhs, int rhs);

    // Start is called before the first frame update
    void Start()
    {
        int z = add(1234, 6789);
        Debug.Log($"z={z}");
    }
}

Copy pkg/unity_wasm_example.js to Assets/Plugins/unity_wasm_example.jspre.

Delete one line of script_src, append 4 lines:

let wasm_bindgen;
(function() {
    const __exports = {};
    let script_src;
    if (typeof document !== 'undefined' && typeof document.currentScript !== 'null') {
-        script_src = new URL(document.currentScript.src, location.href).toString();
    }
    let wasm = undefined;

    const cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } );

    if (typeof TextDecoder !== 'undefined') { cachedTextDecoder.decode(); };

    let cachedUint8Memory0 = null;

    function getUint8Memory0() {
        if (cachedUint8Memory0 === null || cachedUint8Memory0.byteLength === 0) {
            cachedUint8Memory0 = new Uint8Array(wasm.memory.buffer);
        }
        return cachedUint8Memory0;
    }

    function getStringFromWasm0(ptr, len) {
        ptr = ptr >>> 0;
        return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
    }
    /**
    */
    __exports.greet = function() {
        wasm.greet();
    };

    /**
    * @param {number} lhs
    * @param {number} rhs
    * @returns {number}
    */
    __exports.add = function(lhs, rhs) {
        const ret = wasm.add(lhs, rhs);
        return ret;
    };

    async function __wbg_load(module, imports) {
        if (typeof Response === 'function' && module instanceof Response) {
            if (typeof WebAssembly.instantiateStreaming === 'function') {
                try {
                    return await WebAssembly.instantiateStreaming(module, imports);

                } catch (e) {
                    if (module.headers.get('Content-Type') != 'application/wasm') {
                        console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);

                    } else {
                        throw e;
                    }
                }
            }

            const bytes = await module.arrayBuffer();
            return await WebAssembly.instantiate(bytes, imports);

        } else {
            const instance = await WebAssembly.instantiate(module, imports);

            if (instance instanceof WebAssembly.Instance) {
                return { instance, module };

            } else {
                return instance;
            }
        }
    }

    function __wbg_get_imports() {
        const imports = {};
        imports.wbg = {};
        imports.wbg.__wbg_alert_3dc4baf25d9f67ff = function(arg0, arg1) {
            alert(getStringFromWasm0(arg0, arg1));
        };

        return imports;
    }

    function __wbg_init_memory(imports, maybe_memory) {

    }

    function __wbg_finalize_init(instance, module) {
        wasm = instance.exports;
        __wbg_init.__wbindgen_wasm_module = module;
        cachedUint8Memory0 = null;


        return wasm;
    }

    function initSync(module) {
        if (wasm !== undefined) return wasm;

        const imports = __wbg_get_imports();

        __wbg_init_memory(imports);

        if (!(module instanceof WebAssembly.Module)) {
            module = new WebAssembly.Module(module);
        }

        const instance = new WebAssembly.Instance(module, imports);

        return __wbg_finalize_init(instance, module);
    }

    async function __wbg_init(input) {
        if (wasm !== undefined) return wasm;

        if (typeof input === 'undefined' && script_src !== 'undefined') {
            input = script_src.replace(/\.js$/, '_bg.wasm');
        }
        const imports = __wbg_get_imports();

        if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
            input = fetch(input);
        }

        __wbg_init_memory(imports);

        const { instance, module } = await __wbg_load(await input, imports);

        return __wbg_finalize_init(instance, module);
    }

    wasm_bindgen = Object.assign(__wbg_init, { initSync }, __exports);

})();

+ wasm_bindgen(Module.streamingAssetsUrl + "/unity_wasm_example_bg.wasm").then(result => {
+     wasm_bindgen.memory = result.memory;
+     Module["unity_wasm_example"] = wasm_bindgen;
+ });

Create Assets/Plugins/unity_wasm_example.jslib:

mergeInto(LibraryManager.library, {

    add: function (lhs, rhs) {
        return Module["unity_wasm_example"].add(lhs, rhs);
    },
});

Copy pkb/unity_wasm_example_bg.wasm into Assets/StreamingAssets/.

Build the Unity project into WebGL.