Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Draw onto Frame as if it was a Skia Canvas #1479

Merged
merged 48 commits into from
Feb 21, 2023
Merged

feat: Draw onto Frame as if it was a Skia Canvas #1479

merged 48 commits into from
Feb 21, 2023

Conversation

mrousavy
Copy link
Owner

@mrousavy mrousavy commented Feb 16, 2023

What

"Draw onto Frame" aka "Write-back Frame Processors".

This is the fourth PR attempting to do this. It's hella complicated so I had to start from scratch a few times.

New API:

const frameProcessor = useFrameProcessor((frame) => {
  'worklet'
  frame.drawRect(...)
  frame.drawPath(...)
  frame.render(someShader)
}, [])

..and it will be applied to the Frame in realtime.

ezgif com-gif-maker-2

TODOs:

  • iOS: Get Skia Context in Frame Processor Worklet Runtime
  • iOS: Draw Frame to Skia Canvas as Preview View
  • iOS: Draw onto Frame as if it was a Canvas from JS (Frame Processor)
  • iOS: Also apply the draw commands to the video recording (startRecording())
  • iOS: Also apply the draw commands to the photo (takePhoto())
  • Android: Get Skia Context in Frame Processor Worklet Runtime
  • Android: Draw Frame to Skia Canvas as Preview View
  • Android: Draw onto Frame as if it was a Canvas from JS (Frame Processor)
  • Android: Also apply the draw commands to the video recording (startRecording())
  • Android: Also apply the draw commands to the photo (takePhoto())

Changes

Tested on

Related issues

@github-actions
Copy link
Contributor

github-actions bot commented Feb 16, 2023

yarn.lock changes

Click to toggle table visibility
Name Status Previous Current
@shopify/react-native-skia ADDED - 0.1.175
@types/pixelmatch ADDED - 5.2.4
@types/pngjs ADDED - 6.0.1
@types/ws ADDED - 8.5.4
canvaskit-wasm ADDED - 0.38.0
pixelmatch ADDED - 5.3.0
pngjs ADDED - 6.0.0
react-reconciler ADDED - 0.27.0
ws UPDATED 7.5.9 8.12.1

src/Frame.ts Show resolved Hide resolved
Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

cpplint

cpp/JSITypedArray.h|115| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|116| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|117| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|118| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|119| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|121| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|122| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|129| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|130| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|132| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|132| Is this a non-const reference? If so, make const or use a pointer: jsi::Object &jsObj [runtime/references] [2]
cpp/JSITypedArray.h|134| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|135| Is this a non-const reference? If so, make const or use a pointer: jsi::ArrayBuffer &buffer [runtime/references] [2]
cpp/JSITypedArray.h|142| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|143| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|144| Single-parameter constructors should be marked explicit. [runtime/explicit] [5]
cpp/JSITypedArray.h|148| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|149| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|150| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|151| Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]
cpp/JSITypedArray.h|149| Add #include for vector<> [build/include_what_you_use] [4]
cpp/JSITypedArray.h|181| Add #include for move [build/include_what_you_use] [4]

}

// directly write to C++ JSI ArrayBuffer
auto dst = (jbyte*)arrayBuffer.data(runtime);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Using C-style cast. Use reinterpret_cast<jbyte*>(...) instead [readability/casting] [4]

int getPlanesCount() const;
int getBytesPerRow() const;
long getTimestamp() const;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Use int16/int64/etc, rather than the C type long [runtime/int] [4]


class PropNameIDCache {
public:
const jsi::PropNameID &get(jsi::Runtime &runtime, Prop prop) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

return *(this->props[key][prop]);
}

const jsi::PropNameID &getConstructorNameProp(jsi::Runtime &runtime, TypedArrayKind kind);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

private:
std::unordered_map<uintptr_t, std::unordered_map<Prop, std::unique_ptr<jsi::PropNameID>>> props;

jsi::PropNameID createProp(jsi::Runtime &runtime, Prop prop);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

TypedArrayBase(TypedArrayBase &&) = default;
TypedArrayBase &operator=(TypedArrayBase &&) = default;

TypedArrayKind getKind(jsi::Runtime &runtime) const;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

TypedArrayKind getKind(jsi::Runtime &runtime) const;

template <TypedArrayKind T>
TypedArray<T> get(jsi::Runtime &runtime) const &;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

template <TypedArrayKind T>
TypedArray<T> get(jsi::Runtime &runtime) const &;
template <TypedArrayKind T>
TypedArray<T> get(jsi::Runtime &runtime) &&;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

template <TypedArrayKind T>
TypedArray<T> get(jsi::Runtime &runtime) &&;
template <TypedArrayKind T>
TypedArray<T> as(jsi::Runtime &runtime) const &;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

template <TypedArrayKind T>
TypedArray<T> as(jsi::Runtime &runtime) const &;
template <TypedArrayKind T>
TypedArray<T> as(jsi::Runtime &runtime) &&;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

template <TypedArrayKind T>
TypedArray<T> as(jsi::Runtime &runtime) &&;

size_t size(jsi::Runtime &runtime) const;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

TypedArray<T> as(jsi::Runtime &runtime) &&;

size_t size(jsi::Runtime &runtime) const;
size_t length(jsi::Runtime &runtime) const;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]


size_t size(jsi::Runtime &runtime) const;
size_t length(jsi::Runtime &runtime) const;
size_t byteLength(jsi::Runtime &runtime) const;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

size_t size(jsi::Runtime &runtime) const;
size_t length(jsi::Runtime &runtime) const;
size_t byteLength(jsi::Runtime &runtime) const;
size_t byteOffset(jsi::Runtime &runtime) const;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

size_t length(jsi::Runtime &runtime) const;
size_t byteLength(jsi::Runtime &runtime) const;
size_t byteOffset(jsi::Runtime &runtime) const;
bool hasBuffer(jsi::Runtime &runtime) const;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

TypedArray &operator=(TypedArray &&) = default;

std::vector<ContentType<T>> toVector(jsi::Runtime &runtime);
void update(jsi::Runtime &runtime, const std::vector<ContentType<T>> &data);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]


std::vector<ContentType<T>> toVector(jsi::Runtime &runtime);
void update(jsi::Runtime &runtime, const std::vector<ContentType<T>> &data);
void updateUnsafe(jsi::Runtime &runtime, ContentType<T> *data, size_t length);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

std::vector<ContentType<T>> toVector(jsi::Runtime &runtime);
void update(jsi::Runtime &runtime, const std::vector<ContentType<T>> &data);
void updateUnsafe(jsi::Runtime &runtime, ContentType<T> *data, size_t length);
uint8_t* data(jsi::Runtime &runtime);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Is this a non-const reference? If so, make const or use a pointer: jsi::Runtime &runtime [runtime/references] [2]

TypedArray &operator=(TypedArray &&) = default;

std::vector<ContentType<T>> toVector(jsi::Runtime &runtime);
void update(jsi::Runtime &runtime, const std::vector<ContentType<T>> &data);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Add #include for vector<> [build/include_what_you_use] [4]

if (getKind(runtime) != T) {
throw jsi::JSError(runtime, "Object is not a TypedArray");
}
return std::move(*this).get<T>(runtime);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[cpplint] reported by reviewdog 🐶
Add #include for move [build/include_what_you_use] [4]

@mrousavy mrousavy marked this pull request as ready for review February 21, 2023 13:57
@mrousavy mrousavy merged commit 12f850c into v3 Feb 21, 2023
@mrousavy mrousavy deleted the feat/skia-in-fp branch February 21, 2023 14:00
mrousavy added a commit that referenced this pull request Jul 31, 2023
* Create Shaders.ts

* Add `previewType` and `enableFpsGraph`

* Add RN Skia native dependency

* Add Skia Preview View on iOS

* Pass 1

* Update FrameHostObject.mm

* Wrap Canvas

* Lockfiles

* fix: Fix stuff

* chore: Upgrade RNWorklets

* Add `previewType` to set the Preview

* feat: Add Example

* Update project.pbxproj

* `enableFpsGraph`

* Cache the `std::shared_ptr<FrameHostObject>`

* Update CameraView+RecordVideo.swift

* Update SkiaMetalCanvasProvider.mm

* Android: Integrate Skia Dependency

* fix: Use new Prefix

* Add example for rendering shader

* chore: Upgrade CameraX

* Remove KTX

* Enable `viewBinding`

* Revert "Enable `viewBinding`"

This reverts commit f2a603f.

* Revert "chore: Upgrade CameraX"

This reverts commit 8dc832c.

* Remove unneeded `ProcessCameraProvider.getInstance()` call

* fix: Add REA hotfix patch

* fix: Fix FrameHostObject dead in runAsync

* fix: Make `runAsync` run truly async by dropping new Frames while executing

* chore: Upgrade RN Worklets to latest

* chore: Upgrade RN Skia

* Revert "Remove KTX"

This reverts commit 253f586.

* Make Skia optional in CMake

* Fix import

* Update CMakeLists.txt

* Update build.gradle

* Update CameraView.kt

* Update CameraView.kt

* Update CameraView.kt

* Update Shaders.ts

* Center Blur

* chore: Upgrade RN Worklets

* feat: Add `toByteArray()`, `orientation`, `isMirrored` and `timestamp` to `Frame` (#1487)

* feat: Implement `orientation` and `isMirrored` on Frame

* feat: Add `toArrayBuffer()` func

* perf: Do faster buffer copy

* feat: Implement `toArrayBuffer()` on Android

* feat: Add `orientation` and `isMirrored` to Android

* feat: Add `timestamp` to Frame

* Update Frame.ts

* Update JImageProxy.h

* Update FrameHostObject.cpp

* Update FrameHostObject.cpp

* Update CameraPage.tsx

* fix: Format Swift
isaaccolson pushed a commit to isaaccolson/deliveries-mobile that referenced this pull request Oct 30, 2024
* Create Shaders.ts

* Add `previewType` and `enableFpsGraph`

* Add RN Skia native dependency

* Add Skia Preview View on iOS

* Pass 1

* Update FrameHostObject.mm

* Wrap Canvas

* Lockfiles

* fix: Fix stuff

* chore: Upgrade RNWorklets

* Add `previewType` to set the Preview

* feat: Add Example

* Update project.pbxproj

* `enableFpsGraph`

* Cache the `std::shared_ptr<FrameHostObject>`

* Update CameraView+RecordVideo.swift

* Update SkiaMetalCanvasProvider.mm

* Android: Integrate Skia Dependency

* fix: Use new Prefix

* Add example for rendering shader

* chore: Upgrade CameraX

* Remove KTX

* Enable `viewBinding`

* Revert "Enable `viewBinding`"

This reverts commit f2a603f.

* Revert "chore: Upgrade CameraX"

This reverts commit 8dc832c.

* Remove unneeded `ProcessCameraProvider.getInstance()` call

* fix: Add REA hotfix patch

* fix: Fix FrameHostObject dead in runAsync

* fix: Make `runAsync` run truly async by dropping new Frames while executing

* chore: Upgrade RN Worklets to latest

* chore: Upgrade RN Skia

* Revert "Remove KTX"

This reverts commit 253f586.

* Make Skia optional in CMake

* Fix import

* Update CMakeLists.txt

* Update build.gradle

* Update CameraView.kt

* Update CameraView.kt

* Update CameraView.kt

* Update Shaders.ts

* Center Blur

* chore: Upgrade RN Worklets

* feat: Add `toByteArray()`, `orientation`, `isMirrored` and `timestamp` to `Frame` (mrousavy#1487)

* feat: Implement `orientation` and `isMirrored` on Frame

* feat: Add `toArrayBuffer()` func

* perf: Do faster buffer copy

* feat: Implement `toArrayBuffer()` on Android

* feat: Add `orientation` and `isMirrored` to Android

* feat: Add `timestamp` to Frame

* Update Frame.ts

* Update JImageProxy.h

* Update FrameHostObject.cpp

* Update FrameHostObject.cpp

* Update CameraPage.tsx

* fix: Format Swift
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant