Design: データJS / WASMコンテキストを渡すための最もパフォーマンスの高い方法

JavaScriptとWebAssemblyの間でデータをコピーするか、WebAssemblyにデータを所有させるかを決定する必要があります。

データをコピーする場合は、 forループを自分で作成するのではなく、 TypedArray.prototype.set（）を使用できます。

let instance = ...;
let myJSArray = new Float32Array(...);
let length = myJSArray.length;
let myWasmArrayPtr = instance.exports.allocateF32Array(length);
let myWasmArray = new Float32Array(instance.exports.memory.buffer, myWasmArrayPtr, length);

// Copy data in to be used by WebAssembly.
myWasmArray.set(myJSArray);

// Process the data in the array.
instance.exports.processF32Array(myWasmArrayPtr, length);

// Copy data out to JavaScript.
myJSArray.set(myWasmArray);

WebAssemblyがデータを所有している場合は、 WebAssembly.Memoryバッファー上にビューを作成し、それをJavaScript関数に渡すこともできます。

let instance = ...;
let length = ...;
let myArrayPtr = instance.exports.allocateF32Array(length);
let myArray = new Float32Array(instance.exports.memory.buffer, myArrayPtr, length);

// Use myArray as a normal Float32Array in JavaScript, fill in data, etc.
...

// Process the data in the array.
instance.exports.processF32Array(myArrayPtr, length);

// No need to copy data back to JavaScript, just use myArray directly.

embindなどのツールを使用して、これを少し使いやすくすることもできます。

うわー、ありがとう@binjiこれはすごいですね。 それはまさに私が探していたものです。 また、サンプルコードの作成に時間を割いていただきありがとうございます。 これも非常に役立ちます。 私は今晩それを試して、ローダーimplのいくつかの改善をプルリクエストします。 これはhttps://github.com/AssemblyScript/assemblyscriptでWASMとのインターフェースに使用されています：）（そのため、embindに出くわしませんでした。これは、emscriptenでの使用に最適です）

これに関してwebassembly.orgのドキュメントを拡張するオプションがありますか？

例：ここ：

https://webassembly.org/docs/web/

可能であれば、これを喜んで行います。

ここで説明するのも良い考えだと思います。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory

@binjiオフトピックです。プロジェクトにまだ気付いていない場合は、 https：//github.com/torch2424/wasmBoyをお勧めします。 また、このプロジェクトは、forループを使用してROMメモリを設定するため、提案したソリューションからもメリットが得られる可能性があります。

これに関してwebassembly.orgのドキュメントを拡張するオプションがありますか？

この変更や他の多くの変更を加えて、webassembly.orgを更新する必要があることに同意しました。 そこにあるドキュメントはまだ設計リポジトリからのものですが、仕様リポジトリははるかに新しく正確です。

webassembly.orgよりもはるかに多くのWeb開発者がそのサイトを使用することを考えると、MDNにいくつかの例を追加する方がおそらく簡単で優れています。

トピックから外れて、プロジェクトにまだ気付いていない場合は、 https：//github.com/torch2424/wasmBoyをお勧めします。

はい、@ torch2424を知っています。 :-)私も自分のwasmベースのゲームボーイエミュレーターを持っています： https ：

webassembly.orgよりもはるかに多くのWeb開発者がそのサイトを使用することを考えると、MDNにいくつかの例を追加する方がおそらく簡単で優れています。

了解しました。今夜更新を投稿します。 公開されるか見てみましょう。

はい、@ torch2424を知っています。 :-)私も自分のwasmベースのゲームボーイエミュレーターを持っています： https ：

ハハ、かっこいい！ 私はdefします。 試してみてください:)ゼルダでエミュレータがクラッシュしないに違いありません-剣を手にしたときのリンクの目覚め（ビーチで）;））

wasmBoyのクラッシュを修正する時間を見つけたいと思っています:)

おい！ あなたがwasmboyを見つけたラッド！ 😄はい、 @ binjiのエミュレーターは間違いなくもっと正確ですハハ！ 私が確実に取り組む必要がある何か。 しかし、皮肉なことに、私はリンクの目覚めを使用して、いつもwasmboyをテストしています。 私はそれがあなたに墜落したことに驚いています。

フィードバックに基づいていくつかのバグを開きました：
https://github.com/torch2424/wasmBoy/issues/141-メモリの受け渡し
https://github.com/torch2424/wasmBoy/issues/142-ゼルダの伝説（スクリーンショットでそれは私のために働きます）

とにかく、会話/問題を狂わせたくない、私は私が開いた問題に移ります。 しかし、フィードバックに感謝します！ 😄

WebAssemblyがデータを所有している場合は、WebAssembly.Memoryバッファー上にビューを作成し、それをJavaScript関数に渡すこともできます。

重要な注意点の1つは、WebAssemblyインスタンスがメモリを拡張すると、メモリバッファへのビューが無効になることです。 WebAssemblyインスタンスへのそれ以降の呼び出しを超えて存続するビューへの参照を保存することは避けてください。

@binjiこれを使用するときにAssemblyScript側に何を置くか教えてください。 標準機能ではないことに気づきました。

let myWasmArrayPtr = instance.exports.allocateF32Array(length);

私は次のように書き、それは機能しますが、それが正しい方法であるかどうかを知りたいのです。

export function allocateF32Array(length: usize): usize {
    return memory.allocate(length * sizeof<f32>());
}

memory.free()で解放するために別のAS関数を記述し、配列をJS側に転送した後に呼び出す必要がありますか？

@fmkang @binjiが説明したのはJS側でした（間違っている場合は訂正してください）。

Typed Arraysを使用すると、Wasm Array Bufferでset（）を使用して、JS側からWASMメモリに効率的に書き込むことができます。

Wasm / AS内からWasmMemoryに書き込みますが、私はまだ標準のforループアプローチを使用しています。例： https ：

しかし、おそらく@MaxGraeyまたは@dcodeIOは、ASまたはWasmランドの内部からこれを最も効率的に行う方法に役立つ可能性がありますか？ 😄これをASリポジトリに移動したほうがいいかもしれませんが

@fmkangあなたは単に

export function allocateF32Array(length: i32): Float32Array {
  return new Float32Array(length);
}

AS側と

let myArray = module.getArray(Float32Array, module.allocateF32Array(length));

JS側では、ローダーを使用

@ torch2424はい、@binjiのコードでは、JS側にあるが、 let myWasmArrayPtr = instance.exports.allocateF32Array(length)名前の関数呼び出しているallocateF32Array （おそらくAssembleScriptでコンパイル）Wasmモジュールでは。 この関数は彼のスニペットにもAS組み込み関数の一部にも記載されていないので、自分で実装する必要があると思います。 対応するWasm配列を指すこのポインタを取得する方法を尋ねています。

@dcodeIOありがとう。 これにより、配列の受け渡しが簡単になるようです。 ここに新しいコメントを投稿する前に、慎重に実験します。 しかし、関数を自分の関数に置き換えた後、ロードするとモジュールがクラッシュします。 コンソールは言う

astest.html:1 Uncaught (in promise) TypeError: WebAssembly Instantiation: Import #0 module="env" error: module is not an object or function

ASコードのどこかにlet a = new Float32Array(10);ようなものを書くと、クラッシュすることさえあります。

@dcodeIO配列を式（ let c: f64[] = [a[0] + b[0], a[1] + b[1]];などのリテラルではなく）で初期化しようとしたり、配列の要素（ let a: f64[] = [0, 0, 0]; a[0] = 1;やlet array = new Array<i32>(); array.push(1);など）に値を割り当てたりしようとすると、Wasmモジュールがクラッシュします。

最初は、これはmemoryをenvに入れないためだと思ったので、次のように書きました。

var importObject = {
    env: { memory: new WebAssembly.Memory({initial:10}) },
    imports: { imported_func: arg => console.log(arg) }
};
WebAssembly.instantiate(wasmBinary, importObject).then(...);

しかし、問題はまだ存在していました。 それから、たまたまabortが不足していることが原因であることがわかりました。 私達は書いた：

env: {
    abort(msg, file, line, column) {
        console.error("abort called at main.ts:" + line + ":" + column);
    }
}

または単にenv: { abort: function(){} } 、そして問題は解決しました。 ただし、エラーメッセージはなく、コードの実行は実際には「中止」されませんでした。 この問題の実際の原因はまだわかりません。

私たちはWebAssemblyを初めて使用します。 私は更新を与えるためだけにこの投稿を書きます。 本当に返信する必要はありません。

@fmkangモジュールをインスタンス化するためにAssemblyScriptローダーを使用していないようです。 これらすべてを自分で実装することもできますが、ローダーは、アボート関数など、モジュールのエクスポートに関する基本的な機能をすでに追加しています。 AssemblyScriptに関して他にご不明な点がございましたら、問題追跡システムでお気軽にお問い合わせせていただきます:)

だから、私はこのテクニックを使ってみました：

let myArrayPtr = instance.exports.allocateF32Array(length);
let myArray = new Float32Array(instance.exports.memory.buffer, myArrayPtr, length);

// Use myArray as a normal Float32Array in JavaScript, fill in data, etc.
...

// Process the data in the array.
instance.exports.processF32Array(myArrayPtr, length);

しかし、私のprocessF32Array関数はRuntimeError: memory access out of boundsます。 私はローダーFWIWを使用していません。 私も試しました：

let myArray = module.getArray(Float32Array, module.allocateF32Array(length));

しかし、私のモジュールには「getArray」がなく、どのように取得するのかわかりません。

WebAssemblyとの間で配列をコピーする方法を探していたところ、このスレッドに出くわしました。 他の誰にとっても、 AssemblyScriptと@ torch2424のライブラリas-bindを使用して配列をコピーすることができました

これが私の簡単なテストです：

AssemblyScript

export function sum(arr: Float64Array): f64 {
  let sum: f64 = 0;
  for(let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

JavaScript（ノード）

const { AsBind } = require("as-bind");
const fs = require("fs");
const wasm = fs.readFileSync(__dirname + "/build/optimized.wasm");

const asyncTask = async () => {
  const asb = await AsBind.instantiate(wasm);

  // Make a large array
  console.time('Making array');
  let arr = new Float64Array(1e8).fill(1);
  console.timeEnd('Making array');

  // Find the sum using reduce
  console.time('Reduce');
  let sum1 = arr.reduce((acc, val) => acc + val, 0);
  console.timeEnd('Reduce');

  // Find the sum with for loops
  console.time('JS For');
  let sum2 = 0;
  for(let i = 0; i < arr.length; i++) sum2 += arr[i];
  console.timeEnd('JS For');

  // Find the sum with WebAssembly
  console.time('Wasm For');
  let sum3 = asb.exports.sum(arr);
  console.timeEnd('Wasm For');

  console.log(sum1, sum2, sum3);
};

asyncTask();

私のマシンでは、次の出力が得られました。

Making array: 789.086ms
Reduce: 2452.922ms
JS For: 184.818ms
Wasm For: 2008.482ms
100000000 100000000 100000000

このメソッドを使用して配列をWebAssemblyにコピーする場合、かなりのオーバーヘッドがあるように見えますが、合計よりもコストのかかる操作のトレードオフには価値があると想像できます。

編集：

AssemblyScriptから合計を削除して、配列コピーのみの実行時間を分離しました。

export function sum(arr: Float64Array): f64 {
  let sum: f64 = 0;
  return sum;
}

そして、ベンチマークを再実行しました。

Wasmの合計なし

Making array: 599.826ms
Reduce: 2810.395ms
JS For: 188.623ms
Wasm For: 762.481ms
100000000 100000000 0

したがって、データコピー自体が1億f64超える

@pwstegmanランダムな入力データを使用し、jsエンジンがループを最適化しないようにする別のベンチマークを作成しました： https ： //webassembly.studio/？f = 5ux4ymi345e

また、ChromeとFFでは結果が異なります。

Chrome 81.0.4044.129

js sum: 129.968017578125ms
sum result = 49996811.62100115

js reduce: 1436.532958984375ms
js reduce result = 49996811.62100115

wasm sum: 153.000244140625ms
wasm sum result = 49996811.62100115

wasm reduce: 125.009033203125ms
wasm reduce result = 49996811.62100115

wasm empty: 0.002685546875ms

こんにちは。
私は基本的にWASMに精通しているという点で新生児であり、ここや＃1162の人々と同じ問題に遭遇しました。 （これはより最近の活動があるので、私はここで対＃1162を求めています。）
簡単な調査の結果、デモを作成して理解しようとしましたが、データのコピーの出し入れを避けるために、ビューを型付き配列としてWASMメモリに公開する方法になりました。これがJSの観点からの要点です。 ：

// need to know the size in advance, that's OK since the impl makes some init 
const fft = new Module.KissFftReal(/*size=*/N);depending on the size anyway

// get view into WASM memory as Float64Array (of size=N in this case)
const input = fft.getInputTimeDataBuffer();

// fill 'input' buffer

// perform transformation, view into WASM memory is returned here (of size=(N + 2) in this case, +2 for Nyquist bin)
const output = fft.transform();

// use transformation result returned in 'output' buffer

これは行く方法ですか？ より良い解決策はありますか？ このトピックに関するコメント/リフレッシュをいただければ幸いです。

psちょっと醜いですが、実際には私にとっては素晴らしい働きをします（私が理解して感謝できる限り）