How to share an ArrayBuffer with c++ and js using JSI without copying?

[bendgk]

I came across #564 and wanted to implement this in my react-native jsi turbo module (new-arch)

I wasn't really able to find many example of how to do this, so I resorted to reading the code surrounding jsi::MutableBuffer and jsi::Runtime::createArrayBuffer(std::shared_ptr<jsi::MutableBuffer>)

The result that I came up with is pretty much the following:

//world.h
class PhysicsFrame : jsi::MutableBuffer {
    public:
    std::vector<double> buffer;
    PhysicsFrame();
    ~PhysicsFrame();
    size_t size() const override;
    uint8_t *data() override;
};

namespace joltphysics {
  class world {
    private:
      //bunch of private members ...
      PhysicsFrame physics_frame;
    public:
      //other world methods
  }
}

//world.cpp
joltphysics::world::world(
    facebook::react::JoltPhysicsModule &module, 
    jsi::Runtime& rt, 
    const std::shared_ptr<facebook::react::CallInvoker> &jsInvoker
)
:
  physics_frame()
{
  //... some world initialization stuff above this(it works)

  //create the physics frame ArrayBuffer
  auto physics_frame_sp = std::make_shared<PhysicsFrame>(physics_frame);
  auto arrayBuffer = jsi::ArrayBuffer(rt, std::reinterpret_pointer_cast<jsi::MutableBuffer>(physics_frame_sp));

  rt.global().setProperty(rt, "__PhysicsFrame", arrayBuffer);
}

PhysicsFrame::PhysicsFrame() {
    buffer.reserve(cMaxBodies * 7);
}

PhysicsFrame::~PhysicsFrame() {
    buffer.clear();
}

size_t PhysicsFrame::size() const {
    return buffer.size() * sizeof(double);
}

uint8_t *PhysicsFrame::data() {
    return reinterpret_cast<uint8_t *>(buffer.data());
}

The important bits here are the following:

//create the jsi::ArrayBuffer from the jsi::MutableBuffer
auto arrayBuffer = jsi::ArrayBuffer(rt, std::reinterpret_pointer_cast<jsi::MutableBuffer>(physics_frame_sp));
//set the ArrayBuffer to the global object
rt.global().setProperty(rt, "__PhysicsFrame", arrayBuffer);

In my JS I access the __PhysicsFrame like so:

const physicsBuffer: ArrayBuffer = global["__PhysicsFrame"]
const physicsFrameBuffer = new Float64Array(physicsBuffer)

While this indeed gives me an ArrayBuffer and a Float64Array typed array (not undefined)
changing the underlying data of the std::vector buffer doesn't seem to anything from the js side of things.

Im pretty lost and appreciate anyones help 🙂

[tmikov]

I see a couple of smaller problems:

• You should inherit publicly from jsi::MutableBuffer like this: class PhysicsFrame : public jsi::MutableBuffer.
• You should never use std::reinterpret_pointer_cast<>. If find yourself needing it, it is a sign that something is almost certainly wrong. I think that if you change the inheritance to public, you can remove the cast.

I don't think either of these explain your problem, but there is something else that I am curious about: where are you setting the size of buffer? It is not included in the code you pasted. As it is, the buffer has size 0, so JS has a an array with size 0.

[bendgk]

My buffer is mutated inside the step function of the file: world.cpp

I'll provide some context, I'm creating a native JSI wrapper for the popular open source physics engine JoltPhysics

Modifying the buffer is done in two locations:

1. Initial Physics Body Creation (using buffer.push_back())

    //push position to physics frame
    physics_frame.buffer.push_back(body.position.x);
    physics_frame.buffer.push_back(body.position.y);
    physics_frame.buffer.push_back(body.position.z);

    //push rotation to physics frame
    physics_frame.buffer.push_back(static_cast<double>(creation_settings.mRotation.GetX()));
    physics_frame.buffer.push_back(static_cast<double>(creation_settings.mRotation.GetY()));
    physics_frame.buffer.push_back(static_cast<double>(creation_settings.mRotation.GetZ()));
    physics_frame.buffer.push_back(static_cast<double>(creation_settings.mRotation.GetW()));

2. When the step function is called to step the scene the buffer is indexed and modified.

void joltphysics::world::step(jsi::Runtime &rt, const std::shared_ptr<facebook::react::CallInvoker> &jsInvoker_) {
    //more physics step logic above...

    //update the physics frame
    for (int i = 0; i < bodies.size(); i++) {
        auto body_id = bodies[i];

        auto position = body_interface.GetPosition(body_id);
        auto rotation = body_interface.GetRotation(body_id);

        //update positions
        physics_frame.buffer[i*7] = position.GetX();
        physics_frame.buffer[i*7+1] = position.GetY();
        physics_frame.buffer[i*7+2] = position.GetZ();

        //update rotations
        physics_frame.buffer[i*7+3] = rotation.GetX();
        physics_frame.buffer[i*7+4] = rotation.GetY();
        physics_frame.buffer[i*7+5] = rotation.GetZ();
        physics_frame.buffer[i*7+6] = rotation.GetW();
    }

    //more physics step logic below...
}

Again the important bits here being:

• physics_frame is a member of world and extends jsi::MutableBuffer
• buffer size from the c++ side of things seems to point to the correct data and work.
• My solution used to copy the entire physics_frame.buffer back to js by emitting a Native DeviceEvent and that seemed to work fine

EDIT: just checked buffer on the cpp side of things has all the correct data and size, just not being replicated to js?

[bendgk]

I'm wondering if for some reason the pointer returned from buffer.data() can't be shared with JS?

uint8_t *PhysicsFrame::data() {
    return reinterpret_cast<uint8_t *>(buffer.data());
}

I'm not really sure, maybe I'm doing something else wrong, but looking at MutableRawBuffer.h from react-native-vision-camera they just malloc the pointer, though im not really sure if theres any difference here.

[tmikov]

Are you sure that the buffer size is non-zero when you call jsi::ArrayBuffer? The size of the ArrayBuffer cannot change after creation, it has to be created with its final size.

[bendgk]

Ah you are indeed correct, It had slipped my mind that the size of the whole buffer needs to be pre-allocated. This seems to have resolved the issue, thanks 👍