Rust(wasm)とJavaScript(WebGL)のデータ受け渡し　Rust+WebGLでポリゴン描画 (1/2)

前回の記事はJavaScriptでのWebGLの画面クリアだけだったので、今度はRustによるポリゴン描画を行います。WebGLのAPIを呼び出すだけで簡単できると考えていましたが、データの受け渡しが思った以上に複雑でした。OpenGLの知識があればポリゴン描画自体は難しくないので、主にRust⇔JavaScript間のデータの受け渡し方法について書いていきます。

WebGLについての誤算

WebGLもOpenGLと同じようにバッファやシェーダーなどのリソースを作成した際は、GLuintの整数値（ハンドル）が返ってくると思っていました。違いました。WebGLBufferやWebGLShaderといったオブジェクトが返され、これを使ってGL命令を実行。Rust(wasm)で直接JavaScript側のオブジェクトを管理できない様なので対策が必要です。それと、Rust(wasm)から直接WebGL(WebAPI)は呼び出せないため、JavaScriptを経由する必要があります。

 

Rust⇔JavaScript間のデータ受け渡し

Rustの構造体やJavaScriptのオブジェクトなどを直接やり取りすることはできないため、データ受け渡しする処理を用意しないといけません。とりあえず今回必要なものは、RustからJSオブジェクトの間接的な保持、文字列の受け渡し（シェーダー）、Rust⇒JSのバイナリデータ（頂点情報）転送です。

直接受け渡しできるデータ

JavaScriptで扱う64bit浮動小数で表現できる数値型のみです。32bit以下の整数（u32 i32 u16 u8など）、32bit浮動小数（f32）、64bit浮動小数（f64）です。あとwasmがターゲットの場合、usizeは32bit整数になるようなので使用可能です。

RustによるJSオブジェクトの管理

整数値による間接的なオブジェクト管理、いわゆるハンドルによる管理を採用します。Win32（C/C++）とかでよく使われている方法です。JS側に配列を用意し、作成したWebGLオブジェクトを格納、その配列index（ハンドル）をRust側に返す。Rust側はそのハンドルでWebGLのAPIを呼び出す。というような仕様にします。

これでいいのか不安だったので、wasm-bindgen/web-sysのWebGL使用例を調べてみたところ、同じ方法で実装していました。この方法で問題なさそうです。

文字列　Rust⇔JavaScript

Rust(wasm)のメモリは、JavaScriptからはArrayBufferとしてアクセスできます。Rustのポインタ＝ArrayBuffer先頭からのオフセット値なっているので、Rust文字列のポインタ(オフセット値:usize)とサイズを受け取れば、Rust側のメモリ（文字列）にアクセスすることができます。ただし、RustはUTF8、JavaScriptはUTF16なので文字コードの変換が必要になります。

UTF8⇔UTF16　文字コード変換(JavaScript)

TexDecoder、TexEncoderという便利なものが。Edgeが対応してませんでした。一部分の機能しか利用しないのでpolyfillはせずに文字コード変換をwikipediaを見ながら自作しました（簡単な動作確認のみ）。Uint8Array⇒StringとString⇒Uint8Array。高速な変換が必要になればRustの文字コード変換を使う予定。

.js String(UTF16) ⇒ Uint8Array(UTF8)function string_to_utf8(str) {
    var u8_ary = new Uint8Array(str.length*4);//最長*4
    var ptr8 = 0;
    for(var i = 0;i < str.length; ++i){
        // utf16 > utf32
        var utf32 = 0;
        var utf16_0 = str.charCodeAt(i);
        if( utf16_0 >= 0xd800 && utf16_0 < 0xdc00){//high
            if(i+1>str.length)return;// 不正な文字列
            var utf16_1 = str.charCodeAt(++i);
            if( utf16_1 >= 0xdc00 && utf16_1 < 0xe000){//low
                utf32 = ((utf16_0 & 0x03c0)<<10) + 0x10000;
                utf32 += (utf16_0 & 0x003f)<<10;
                utf32 += (utf16_1 & 0x03ff);
                //000u uuuu xxxx xxxx xxxx xxxx
                //1101 10ww wwxx xxxx 1101 11xx xxxx xxxx  ( wwww = uuuuu-1
            }else{
                return;// 不正な文字列
            }
        }else if(utf16_0 >= 0xdc00 && utf16_0 < 0xe000){
            return; // 不正な文字列
        }else{
            utf32 = utf16_0;
        }

        if(ptr8+4 > u8_ary.length)return;//不正な文字列

        // utf32 > utf8
        if(utf32 < 0x80){
            u8_ary[ptr8++] = utf32;
        }else if(utf32 < 0x800){
            u8_ary[ptr8++] = 0xc0 + (utf32 >> 6);
            u8_ary[ptr8++] = 0x80 + (utf32 & 0x3f);
        }else if(utf32 < 0x10000){
            u8_ary[ptr8++] = 0xe0 + (utf32 >> 12);
            u8_ary[ptr8++] = 0x80 + ((utf32 >> 6) & 0x3f);
            u8_ary[ptr8++] = 0x80 + (utf32 & 0x3f);
        }else if(utf32 < 0x110000){
            u8_ary[ptr8++] = 0xf0 + (utf32 >> 18);
            u8_ary[ptr8++] = 0x80 + ((utf32 >> 12) & 0x3f);
            u8_ary[ptr8++] = 0x80 + ((utf32 >> 6) & 0x3f);
            u8_ary[ptr8++] = 0x80 + (utf32 & 0x3f);            
        }
    }

    return Uint8Array.from(u8_ary.subarray(0,ptr8));
}

.js Uint8Array(UTF8) ⇒ String(UTF16)function utf8_to_string(u8_ary)
{
    var str = "";
    var ptr8 = 0;
    var len8 = u8_ary.length;

    // Stringの1文字追加効率悪い？　とりあえずキャッシュ
    var str_cache = new Uint16Array(256);
    var cptr = 0;

    do {
        var utf32 = 0;
        do {//utf8 > utf32
            // 0xxx xxxx
            var c0 = u8_ary[ptr8++];
            if( c0 < 0x80 ){utf32 = c0; break;}

            // 110yyyyx
            if( (c0 & 0xe0) == 0xc0 ){ //len = 2
                if( ptr8+1 > len8)break;
                if( (c0 & 0x1e) == 0 )break;// yyyyどれか必ず1 
                var c1 = u8_ary[ptr8++];
                if( (c1 & 0xc0) != 0x80 )break;//10ではない
                utf32 = ((c0 & 0x1f)<<6) | (c1 & 0x3f);
                break;
            }

            // 1110yyyy 10yxxxxx 10xxxxxxx
            // yyyy yxxx xxxx xxxx
            if( (c0 & 0xf0) == 0xe0 ){ //len = 3
                if( ptr8+2 > len8)break;
                var v = (c0 & 0x0f) << 12;
                var c1 = u8_ary[ptr8++];
                if( (c1 & 0xc0) != 0x80 )break;//10ではない
                v |= (c1 & 0x3f) << 6;
                var c2 = u8_ary[ptr8++];
                if( (c2 & 0xc0) != 0x80 )break;//10ではない
                v |= (c2 & 0x3f);
                if( (v & 0xf800) == 0 )break;//yyyyyどれか必ず1
                utf32 = v;
                break;
            }
            // 1111 0yyy 10yy xxxx 10xxx xxx 10xx xxxx
            // y yyyy xxxx xxxx xxxx xxxx
            if ( (c0 & 0xf8) == 0xf0 ) { //len = 4
                if( ptr8+3 > len8)break;
                var v = (c0 & 0x07) << 18;
                var c1 = u8_ary[ptr8++];
                if( (c1 & 0xc0) != 0x80 )break;//10ではない
                v |= (c1 & 0x3f) << 12;
                var c2 = u8_ary[ptr8++];
                if( (c2 & 0xc0) != 0x80 )break;//10ではない
                v |= (c2 & 0x3f) << 6;
                var c3 = u8_ary[ptr8++];
                if( (c3 & 0xc0) != 0x80 )break;//10ではない
                v |= (c3 & 0x3f);       
                if( (v & 0x1f0000) == 0 )break;//yyyyyどれか必ず1
                utf32 = v;
                break;
            }
        }while(0);

        // 不正なコード
        if(utf32 <= 0 || utf32 > 0x10ffff)return;

        // キャッシュ書き込み
        if(cptr+2 > str_cache.length){
            str += String.fromCharCode.apply(null,str_cache.slice(0,cptr));
            cptr = 0;
        }

        if(utf32 < 0x10000) {
            str_cache[cptr++] = utf32;
        }else{
            //000u uuuu xxxx xxxx xxxx xxxx
            //1101 10ww wwxx xxxx 1101 11xx xxxx xxxx  ( wwww = uuuuu-1
            var u1 = (utf32 & 0x01f0000) - 0x10000;
            var u2 = (utf32 & 0x000fc00);
            var u3 = (utf32 & 0x00003ff);
            str_cache[cptr++] = 0xd800 + (u1>>10) + (u2>>10);
            str_cache[cptr++] = 0xdc00 + u3;
        }

    }while(ptr8 < len8);

    str += String.fromCharCode.apply(null,str_cache.slice(0,cptr));
    // apply 配列の各要素を引数に分解　スタックに積まれるので数に制限あり

    return str;
}

.rs Rustで文字コード変換// Vec<u16>(UTF16) ⇒ String(UTF8)
fn utf16_to_string(b : &Vec<u16>) -> String {
    std::char::decode_utf16(b.iter().cloned())
                .map(|r| r.unwrap_or(std::char::REPLACEMENT_CHARACTER))
                .collect::<String>()
}

// String(UTF8) ⇒ Vec<u16>(UTF16)
fn string_to_utf16(s : &String) -> Vec<u16> {
    s.encode_utf16().collect::<Vec<u16>>()
}

Rust⇒JS　引数に文字列

文字列のアドレスとサイズをJavaScriptに渡します。UTF8からUTF16への変換が必要。

例.rs　RustからJSのcolosle.logextern "C" {
    fn js_console_log(ptr : usize, size : usize);
}
#[no_mangle]
fn hello_rust() {
    let s : &str = "こんにちは、JavaScript";//UTF8
    unsafe {    
        js_console_log(s.as_ptr() as usize, s.len());
    }
}

例.js　RustからJSのcolosle.logvar wasm_inst;   // = WebAssembly.instantiate()

function js_console_log(str_ptr, str_byte_len) {
    // wasmメモリ ArrayBuffer
    var u8_array = new Uint8Array(wasm_inst.exports.memory.buffer);

    // 文字列切り出し
    var u8_sub = u8_array.subarray(str_ptr, str_ptr + str_byte_len);

    console.log( utf8_to_string(u8_sub) );
}

Rust⇔JS　文字列受け渡し

JSからString(Rust)のメソッドを呼び出す関数を用意します。Stringのnew、reserve、as_mut_ptr、set_lenの4つ。RustとJS間でStringのポインタ(*mut String as usize)を使って文字列の受け渡しができます。最初、mallocのような関数を使う予定でしたがポインタとサイズの2つを受け渡す必要があるので、Stringのポインタ1つで済むこの方法を採用しました。使い方を間違うとRust側のメモリをぶっ壊すので取扱注意。WebGLのシェーダーコンパイルエラーログ取得で使用します。

例.rs　JSから文字列取得extern "C" {
    fn js_get_string_from_js() -> usize;
}

// JavaScriptから文字列取得
fn get_string_from_js() -> String {
    unsafe {
        let ptr = js_get_string_from_js();
        if( ptr == 0){ String::new() }
        // 生ポインタから所有権を取り戻す
        else { *Box::from_raw(ptr as *mut String) }
    }
}

// JavaScript用関数

// Stringをヒープに配置＆生ポインタ（所有権放棄）
#[no_mangle]
fn rust_js_string_new() -> usize {
    let stack = Box::new( String::new() );
    unsafe { Box::into_raw(stack) as usize }
}
// 文字列領域を確保
#[no_mangle]
fn rust_js_string_reserve(str_ptr : usize, add_size : usize) -> usize {
   if str_ptr == 0 { return 0; }//nullpo
   unsafe {
        let s = str_ptr as *mut String; 
        (*s).reserve(add_size);// try_reserveは1.37stableでは使えない
        (*s).as_mut_ptr() as usize
   }
}
// 文字列領域を確定
#[no_mangle]
fn rust_js_string_set_len(str_ptr : usize, len : usize) {
   if str_ptr == 0 { return; }//nullpo
   unsafe {
       let s = str_ptr as *mut String; 
       (*s).as_mut_vec().set_len(len);
   }
}

例.js　Rustへ文字列を渡すvar wasm_inst;   // = WebAssembly.instantiate()

// return : *mut String
function get_string_from_js() {
    var js_str = "Rust：JSから文字列を受け取る";
    var utf8 = string_to_utf8(js_str);

    // String::new()
    var str_ptr = wasm_inst.exports.rust_js_string_new();
    // String::reserve(),as_mut_ptr()
    var buff_ptr = wasm_inst.exports.rust_js_string_reserve(str_ptr, utf8.length);
    if( buff_ptr == 0 )return 0;//メモリ確保失敗

    // 書き込み
    var u8_array = new Uint8Array(wasm_inst.exports.memory.buffer);
    var u8_buff = u8_array.subarray(buff_ptr, buff_ptr+utf8.length);
    u8_buff.set(utf8);
    // String::as_mut_vec().set_len()
    wasm_inst.exports.rust_js_string_set_len(str_ptr, utf8.length);
    
    return str_ptr;
}

バイナリデータ（頂点情報、テクスチャ画像など）

文字列と同じ方法で受け渡しします。数値データであれば、文字コードの変換などが不要なため、単純なメモリアクセスだけになります。

例.rs　JSへバイナリーデータを渡すextern "C" {
    fn set_binary_to_js(ptr: usize, byte_size: usize);
}

#[no_mangle]
fn hello_rust() {
    let vertex : [f32;9] = [
        0.0, 0.0, 0.0,
        1.0, 0.0, 0.0,
        0.0, 1.0, 0.0 ];
    unsafe{
        set_binary_to_js(vertex.as_ptr() as usize, vertex.len()*4);
    }
}

例.js　Rustからバイナリーデータを受け取るvar wasm_inst;   // = WebAssembly.instantiate()

function set_binary_to_js(ptr, byte_size)
{
    var u8_array = new Uint8Array(wasm_inst.exports.memory.buffer);
    var buff_u8 = u8_array.subarray(ptr, ptr+byte_size);
    //console.log(buff_u8);

    // WebGL 頂点データやテクスチャはバイナリデータ
    // 頂点データがf32でもUint8ArrayでOk 
    //gl.bufferData(buff_u8, gl.STATIC_DRAW);
    //gl.texImage2D(,,,,,,,,buff_u8);
    //などwasmのメモリをそのまま渡せる
    //（メモリアライメントは必要かも）
}

まとめ

RustからWebGLを呼び出すのに必要な準備が整ったので、次回実際にポリゴン描画を行うプログラムを作成します。

JavaScriptからArrayBufferを通してRust側のメモリにアクセスできるので、大抵のデータ送受信、オブジェクト操作は実装可能です。面倒くさいですが。ただし、使い過ぎはRustのメモリ管理の厳密さを消してしまうので注意が必要です。個人的な設計思想ですが、RustのソースコードにJavaScript特有の処理が現れないようにして、JavaScrit(WebGL)をC/C++(OpenGL)に置き換えられるぐらい（実際にはしませんが）の依存関係と独立性を持たせるつもりです。ブラウザ内にwasmで動く仮想ゲーム機とそのAPIを作る感じです（WASIを少し意識してます）。
代表的なバインダーwasm-bindgenのWebGLチュートリアルではRustソースコードにFloat32Arrayなどの記述があったため、利用を見送ります。

>> Rust(wasm)とJavaScript(WebGL)のデータ受け渡し　Rust+WebGLでポリゴン描画 (2/2)