Question

在WebGL2中，大多数现有函数都有其他版本，它们接受ArrayBuffer，这些变量允许在这些缓冲区中传递偏移量和长度。据说，这应该可以更轻松地从WebAssembly内存传递数据而无需创建临时视图，但是有一个陷阱：这些函数仅接受ArrayBufferView。

这种限制的原因是什么？将字节复制到GPU的函数为什么要关心它们的语义（即Uint8 / Int32 / Float32等）？
如何解决它，而不必每次都创建一个DataView（这将完全破坏首先使用这些功能的目的）？一次创建DataView无效，因为WebAssembly内存可以重新分配其缓冲区，并且无法为内存调整大小设置回调。

Answer 1

我不知道为什么texImage2D等采用ArrayBufferView而不只是采用ArrayBuffer。我同意这似乎毫无意义。

在最坏的情况下，您应该只能在缓冲区更改时创建一个新视图。

示例：

;; hello.wat
(module
  ;; Import our trace function so that we can call it in main
  (import "env" "trace" (func $trace (param i32)))
  ;; Define our initial memory with a single page (64KiB).
  (memory $0 1)
  ;; Store a null terminated string at byte offset 0. 
  (data (i32.const 0) "Hello world!\00")
  ;; Export the memory so it can be read in the host environment.
  (export "memory" (memory $0))
  (func $alloc (param $0 i32) (result i32)
    get_local $0
    grow_memory
  )
  (export "alloc" (func $alloc))
  ;; Define the main function with no parameters.
  (func $main
    ;; Call the trace function with the constant value 0.
    (call $trace (i32.const 0))
  )
  ;; Export the main function so that the host can call it.
  (export "main" (func $main))
)

和调用它的js

// hello.js
async function doit() {
  const response = await fetch('../out/main.wasm');
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.compile(buffer);
  const instance = await WebAssembly.instantiate(module, {
    env: {
      trace
    }
  });

  let exports = instance.exports;

  let view = new Uint8Array(exports.memory.buffer);
  function getView() {
    if (view.buffer !== exports.memory.buffer) {
      console.log('new view');
      view = new Uint8Array(exports.memory.buffer);
    }
    return view;
  }

  function trace(byteOffset) {
    let s = '';
    const view = getView();
    for (let i = byteOffset; view[i]; i++) {
      s += String.fromCharCode(view[i]);
    }
    console.log(s);
  }

  exports.main();
  exports.main();
  exports.main();
  exports.alloc(10);
  exports.main();
  exports.main();
  exports.main();
}

doit().then(() => {
  console.log("done");
});

创建新视图的唯一时间是WebAssembly重新分配缓冲区时

由于显然您需要根据传递给WebGL2的type参数而使用不同类型的视图，因此需要一组视图而不是一个视图，并且需要根据type参数获取正确的类型的观点。

从评论中复制：

texImage2D和bufferData等通常不是在紧密循环中调用的函数，因此对它们进行优化以解决上述问题似乎没什么大不了的？该检查很简单，不会影响性能，因此避免了GC
在调用grow_memory时，我找不到任何方法来获取回调。另一方面，如果您要编写自己的Web程序集，则可以轻松地使所有grow_memory调用都通过您自己的函数，并将该函数调用到JavaScript中以更新视图。我猜这就是脚本的作用。它具有一个运行时库。我假设运行时库在他们想要增加内存时被调用，因此他们可以更新其视图。

将WebAsembly内存传递到WebGL2

1 个答案: