【问题标题】:Passing arrays and objects from JavaScript to c++ in Web Assembly在 Web Assembly 中将数组和对象从 JavaScript 传递到 c++
【发布时间】:2022-06-12 17:02:38
【问题描述】:

好的,我一直在反对这一点。我更像是一个专注于 JavaScript 和 C# 的开发人员,但我在 c++ 方面有一些经验。我的问题是

  1. 我需要找到一种简单的方法来获取 Javascript 对象并通过 WebAssembly 将其传递给 c++
  2. 我需要对 Javascript 数组做同样的事情
  3. 我可能需要对 Javascript 对象的 Javascript 数组做同样的事情

所以从我在一个简单数组上尝试过的开始:

//c++
int testArr(int * arrIn, int length){
  int results = 0;
  for(int i = 0; i < length; i++){
    results += arrIn[i] + 1;
  }
  return results;
}


//javascript
let arr = [20, 50, 90, 62, 98];
console.log(wasmInstance.exports.testArr(arr, arr.length));

所以这应该是一个整数数组,将它们加1(基本上是为了测试循环)。它返回 5。我希望它返回 325。所以查看类型化数组是下一个合乎逻辑的步骤...

//c++
int testArr(int * arrIn, int length){
  int results = 0;
  for(int i = 0; i < length; i++){
    results += arrIn[i] + 1;
  }
  return results;
}


//javascript
let arr = [20, 50, 90, 62, 98];
let typedArray = new Int32Array(arr);

//test 1
console.log(wasmInstance.exports.testArr(typedArray, arr.length));

//test 2
console.log(wasmInstance.exports.testArr(typedArray.buffer, arr.length));

测试 1 再次返回 5。测试 2 返回 0。

现在只是看看我是否可以让 c++ 返回一个数组:

//c++
int * test(){
  int arr[] = {12, 32, 54, 31};
    return arr;
}

//Javascript
console.log(wasmInstance.exports.test());

返回 -16。有点时髦,可能是由于两者之间的指针问题。现在如果我试试这个:

//c++
int test(){
  int arr[] = {12, 32, 54, 31};
    return arr[0];
}

//Javascript
console.log(wasmInstance.exports.test());

现在它返回 12。

到目前为止,这就是我在传递数组方面所获得的,这在大多数情况下似乎是不可能的。现在,传递对象。神救救我。请善待 c++,因为它不是我最擅长的语言。

//c++
class Vector3{
  public:
    float x;
    float y;
    float z;
    
    Vector3(float X, float Y, float Z){
      x = X;
      y = Y;
      z = Z;
    }
};

int test(Vector3 position){
    return position.x;
}


//javascript
let position = {x: 21, y: 30, z: 12};
console.log(wasmInstance.exports.test(position));

这将返回 0 而不是 21;

现在对于邪恶的三位一体,一组 javascript 对象...

//c++
class Vector3{
  public:
    float x;
    float y;
    float z;
    
    Vector3(float X, float Y, float Z){
      x = X;
      y = Y;
      z = Z;
    }
};

Vector3 test(Vector3 positions[], int length){
    return positions[0];
}


//javascript
let positions = [{x: 21, y: 30, z: 12},{x:15, y: 24, z: 14}]
console.log(wasmInstance.exports.test(positions, positions.length));

这将返回未定义。

所以问题是,我是在 c++、javascript、wasm、所有 3 中搞砸了,还是什么?我花了 3 天时间在互联网上寻找答案,我唯一能找到的是声明这是可能的,没有示例或文档说明如何做到这一点。我找到的最好的文档是 DevRant,它仍然没有给我答案。

那么这可能吗?如果可以,是否有任何我可以遵循的工作示例,或者这根本不可能?

【问题讨论】:

  • 前段时间我玩过 emscripten。你可以试试这个例子github.com/werto87/emscripten_webidl
  • 没关系。我认为真正的答案是不可能通过 Web Assembly 将数组、对象或对象数组从 Javascript 传递到 c++ 或以其他方式取回它们。原因似乎是不可能在两者之间共享指针,并且没有办法解决这个问题。这实际上意味着 WebAssembly 仅限于简单的字符串、字符、int、double、float 等。除此之外的任何东西都是白日梦,至少在我被证明不是这样之前,我是这样看待它的。谢谢你的工具。它没有解决它,但它确实帮助我缩小了范围。
  • 字符串可能,但数组不可能听起来很可疑。我更新了示例以在 java 脚本中使用一组 c++ 对象。请注意,它是一个快速实现来显示数组有效。
  • 帽子不太对劲。您可以使用emscripten::val 对象类型将javascript 数组从std::array 对象中复制,该对象类型允许您存储任何javascript 对象。结帐documentation。有一个 emscripten::val::vecFromJSArray 函数从 JS 数组返回 std::vector&lt;T&gt;
  • 是的,你可以,但你应该使用 Emscripten 文档emscripten.org/docs/porting/connecting_cpp_and_javascript/… 中描述的 EMSCRiPTEN_BINDINGS 我有时间会发布答案。

标签: javascript c++ webassembly


【解决方案1】:

对我来说,当我意识到在 c/c++ 和 JavaScript 之间来回传递数据最好使用 数字 来完成时,我的灵光时刻来临了;具体来说,指针指向数据和有关数据的信息(堆上的大小)。来自 JavaScript 世界并使用指针/堆有点吓人,但我有几个例子,我认为它们是一个好的开始。

下面的 sn-p 显示了将数字数组从 JavaScript 传递给“c++”和“c++”将值的总和返回给 JavaScript 的工作示例。我使用引号是因为 c++ 代码已使用 emscripten 编译到名为 /build/sum.wasm 的文件中,并且所有内容都使用名为 /build/sum.js 的文件“粘合”在一起,可以看到包含在 /index.html 文件中。

const MAX_TRIES = 10;
let numTries = 0;
const moduleInterval = setInterval(() => {
  if (!Module) {
    numTries++;
  }

  if (numTries >= MAX_TRIES) {
    clearInterval(moduleInterval);
  }

  // Wait for "runtime initialization"
  // Module is defined in build/sum.js
  if (Module && Module.calledRun) {
    clearInterval(moduleInterval);

    const TYPES = {
      i8: { array: Int8Array, heap: "HEAP8" },
      i16: { array: Int16Array, heap: "HEAP16" },
      i32: { array: Int32Array, heap: "HEAP32" },
      f32: { array: Float32Array, heap: "HEAPF32" },
      f64: { array: Float64Array, heap: "HEAPF64" },
      u8: { array: Uint8Array, heap: "HEAPU8" },
      u16: { array: Uint16Array, heap: "HEAPU16" },
      u32: { array: Uint32Array, heap: "HEAPU32" }
    };

    function transferNumberArrayToHeap(array, type) {
      const typedArray = type.array.from(array);
      const heapPointer = Module._malloc(
        typedArray.length * typedArray.BYTES_PER_ELEMENT
      );

      Module[type.heap].set(typedArray, heapPointer >> 2);

      return heapPointer;
    }

    function containsFloatValue(array) {
      return array.some((value) => !Number.isInteger(value));
    }

    function sumArrayValues(array) {
      const hasFloatValue = containsFloatValue(array);
      let pointerToArrayOnHeap;
      try {
        pointerToArrayOnHeap = transferNumberArrayToHeap(
          array,
          hasFloatValue ? TYPES.f32 : TYPES.i32
        );
        return Module.ccall(
          hasFloatValue ? "sumFloatArray" : "sumIntArray", // The name of C++ function
          "number", // The return type
          ["number", "number"], // The argument types
          [pointerToArrayOnHeap, array.length] // The arguments
        );
        // Note: The method can also be called directly
        // return Module[hasFloatValue ? '_sumFloatArray' : '_sumIntArray'](arrayOnHeap, array.length);
      } finally {
        Module._free(pointerToArrayOnHeap);
      }
    }

    const sumInt = sumArrayValues([20, 50, 90, 62, 98]);
    const sumFloat = sumArrayValues([20, 50, 90, 62, 98, 0.5]);

    const outputElement = document.querySelector("#output");
    outputElement.innerHTML = `Sum of integers: <strong>${sumInt}</strong>
<br>
Sum of floats: <strong>${sumFloat}</strong>`;
  }
}, 10);
<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Sum</title>
</head>

<body>
  <div id="output"></div>
  <!-- /build/sum.js is a file built using emscripten -->
  <script src="https://w8r7ug.csb.app/build/sum.js"></script>
</body>

</html>

完整的工作代码、原始 c++ 文件和带有编译命令的 README 可以在这里找到:https://codesandbox.io/s/cpp-javascript-webassembly-basic-example-w8r7ug/index.js

简而言之:

  1. 编译c++代码
em++ -o build/sum.js sum.cpp -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']" -s "EXPORTED_FUNCTIONS=['_free','_malloc']" -g
  1. 在您的 JavaScript 文件中,使用以下方式将您想要发送到堆的数据传输:
function transferNumberArrayToHeap(array, type) {
  const typedArray = type.array.from(array);
  const heapPointer = Module._malloc(
    typedArray.length * typedArray.BYTES_PER_ELEMENT
  );

  Module[type.heap].set(typedArray, heapPointer >> 2);

  return heapPointer;
}
  1. 同样在您的 JavaScript 文件中调用编译后的 c++ 函数并传递有关数据的信息(指针和大小)。
Module.ccall(
    hasFloatValue ? "sumFloatArray" : "sumIntArray", // The name of C++ function
    "number", // The return type
    ["number", "number"], // The argument types
    [pointerToArrayOnHeap, array.length] // The arguments
);
// Or call the method  directly
Module[hasFloatValue ? '_sumFloatArray' : '_sumIntArray'](pointerToArrayOnHeap, array.length);

要回答您的问题,是的,可以将复杂数据从 JavaScript 传递到 c/c++ 并接收回数据,上面有一个传递数字数组并接收总结一下。




现在我想提供一个更复杂的数据示例,包括数组和对象。最后,在下一个示例之后,可以更轻松地来回传递复杂数据并推理代码。这是我推荐的方式,即使对于上面这样的基本示例也是如此。

使用msgpack 可以轻松“在 JSON 等多种语言之间交换数据”。编译和以前一样。只需在您的 c++ 中添加一点关于如何在 msgpack 中定义数据的信息,即可对 JavaScript 文件中的数据进行编码和解码。

完整的代码和自述文件可以在https://codesandbox.io/s/cpp-javascript-webassembly-msgpack-example-wh8bwy?file=/index.js 找到。下面的sn-p也会运行代码。

const MAX_TRIES = 10;
let numTries = 0;
const moduleInterval = setInterval(() => {
  if (!Module) {
    numTries++;
  }

  if (numTries >= MAX_TRIES) {
    clearInterval(moduleInterval);
  }

  // Wait for "runtime initialization"
  // Module is defined in build/vector3.js
  if (Module && Module.calledRun && msgpack5) {
    clearInterval(moduleInterval);
    
    const msgpack = msgpack5();

    const encodedPositions = msgpack.encode([{
        positionId: "position1",
        x: 21,
        y: 30,
        z: 12
      },
      {
        positionId: "position2",
        x: 15,
        y: 24,
        z: 14
      }
    ]);
    let inputPointer = Module._malloc(encodedPositions.length);
    Module.HEAP8.set(
      encodedPositions,
      inputPointer / encodedPositions.BYTES_PER_ELEMENT
    );

    const outputPointer = Module._malloc(8);
    const processedVector3IdsPointer = Module.ccall(
      "processVector3",
      "number", ["number", "number", "number"], [inputPointer, encodedPositions.length, outputPointer]
    );

    // OUTPUT
    let offset = Module.getValue(outputPointer, "i64");
    const processedVector3IdsData = new Uint8Array(
      Module.HEAPU8.subarray(
        processedVector3IdsPointer,
        processedVector3IdsPointer + offset
      )
    );

    const processedVector3Ids = msgpack.decode(processedVector3IdsData);
    console.log("Successfully Processed ids: ", processedVector3Ids);

    Module._free(inputPointer);
    Module._free(outputPointer);
    Module._free(processedVector3IdsPointer);
  }
}, 10);
<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Vector3</title>
</head>

<body>
  <p>See console</p>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/msgpack5/6.0.0/msgpack5.min.js"></script>
  <!-- /build/vector3.js is a file built using emscripten -->
  <script src="https://wh8bwy.csb.app/build/vector3.js"></script>
</body>

</html>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-07-29
    • 2021-11-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多