feat: Draw onto a Skia Canvas in a Frame Processor #1345
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
example/src/CameraPage.tsx
Outdated
| @@ -26,6 +26,7 @@ import { examplePlugin } from './frame-processors/ExamplePlugin'; | |||
| import type { Routes } from './Routes'; | |||
| import type { NativeStackScreenProps } from '@react-navigation/native-stack'; | |||
| import { useIsFocused } from '@react-navigation/core'; | |||
| import { SkCanvas, useDrawCallback } from '@shopify/react-native-skia'; | |||
There was a problem hiding this comment.
[tsc] <1371> reported by reviewdog 🐶
This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
example/src/CameraPage.tsx
Outdated
| @@ -26,6 +26,7 @@ | |||
| import type { Routes } from './Routes'; | |||
| import type { NativeStackScreenProps } from '@react-navigation/native-stack'; | |||
| import { useIsFocused } from '@react-navigation/core'; | |||
| import { SkCanvas, useDrawCallback } from '@shopify/react-native-skia'; | |||
There was a problem hiding this comment.
[tsc] <6133> reported by reviewdog 🐶
'useDrawCallback' is declared but its value is never read.
example/src/CameraPage.tsx
Outdated
| @@ -197,10 +198,10 @@ | |||
| console.log('re-rendering camera page without active camera'); | |||
| } | |||
|
|
|||
| const frameProcessor = useFrameProcessor((frame) => { | |||
| const frameProcessor = useFrameProcessor((frame, canvas: SkCanvas) => { | |||
There was a problem hiding this comment.
[tsc] <2345> reported by reviewdog 🐶
Argument of type '(frame: any, canvas: SkCanvas) => void' is not assignable to parameter of type 'FrameProcessor'.
example/src/CameraPage.tsx
Outdated
| @@ -197,10 +198,10 @@ | |||
| console.log('re-rendering camera page without active camera'); | |||
| } | |||
|
|
|||
| const frameProcessor = useFrameProcessor((frame) => { | |||
| const frameProcessor = useFrameProcessor((frame, canvas: SkCanvas) => { | |||
There was a problem hiding this comment.
[tsc] <7006> reported by reviewdog 🐶
Parameter 'frame' implicitly has an 'any' type.
example/src/CameraPage.tsx
Outdated
| @@ -197,10 +198,10 @@ | |||
| console.log('re-rendering camera page without active camera'); | |||
| } | |||
|
|
|||
| const frameProcessor = useFrameProcessor((frame) => { | |||
| const frameProcessor = useFrameProcessor((frame, canvas: SkCanvas) => { | |||
There was a problem hiding this comment.
[tsc] <6133> reported by reviewdog 🐶
'canvas' is declared but its value is never read.
|
| Name | Status | Previous | Current |
|---|---|---|---|
@shopify/react-native-skia |
- | 0.1.163 | |
@types/pixelmatch |
- | 5.2.4 | |
@types/pngjs |
- | 6.0.1 | |
@types/ws |
- | 8.5.3 | |
canvaskit-wasm |
- | 0.36.1 | |
pixelmatch |
- | 5.3.0 | |
pngjs |
- | 6.0.0 | |
react-reconciler |
- | 0.27.0 | |
scheduler |
0.20.2 | 0.21.0 | |
ws |
7.5.7 | 8.11.0 |
example/src/CameraPage.tsx
Outdated
| @@ -26,6 +26,7 @@ import { examplePlugin } from './frame-processors/ExamplePlugin'; | |||
| import type { Routes } from './Routes'; | |||
| import type { NativeStackScreenProps } from '@react-navigation/native-stack'; | |||
| import { useIsFocused } from '@react-navigation/core'; | |||
| import { SkCanvas, useDrawCallback } from '@shopify/react-native-skia'; | |||
There was a problem hiding this comment.
[tsc] <6192> reported by reviewdog 🐶
All imports in import declaration are unused.
example/src/CameraPage.tsx
Outdated
| @@ -26,6 +26,7 @@ import { examplePlugin } from './frame-processors/ExamplePlugin'; | |||
| import type { Routes } from './Routes'; | |||
| import type { NativeStackScreenProps } from '@react-navigation/native-stack'; | |||
| import { useIsFocused } from '@react-navigation/core'; | |||
| import { PaintStyle, SkCanvas, useDrawCallback } from '@shopify/react-native-skia'; | |||
There was a problem hiding this comment.
[tsc] <6192> reported by reviewdog 🐶
All imports in import declaration are unused.
example/src/CameraPage.tsx
Outdated
| const shaderToUse = useSharedValue(noShader); | ||
|
|
||
| const frameProcessor = useFrameProcessor( | ||
| (frame) => { |
There was a problem hiding this comment.
[tsc] <6133> reported by reviewdog 🐶
'frame' is declared but its value is never read.
* feat: Draw into offscren texture * Clear with black * Create all the weird Metal shit (still doesn't work) * Try to load `PassThrough.metallib` as bundle / library * Revert "Try to load `PassThrough.metallib` as bundle / library" This reverts commit 4c05f66. * Revert "Create all the weird Metal shit" This reverts commit a272ec9. * Revert "Clear with black" This reverts commit e35844e. * pod install * feat: Use Skia to draw off-screen Texture onto CAMetalLayer * Draw Debug FPS on screen * Fix MTLTextureUsageRenderTarget * Clean up/Refactor a bit * Set `_hasNewFrame` to false * Lock before checking _hasNewFrame * Remove `_hasNewFrame` * Create `SkContext` eagerly * flush -> flushAndSubmit * Put `SkSurface::MakeFromCAMetalLayer` under lock as well * Render `RCTFPSGraph` to show FPS * Update label on main queue * Render FPS Graph in CameraView * Update CameraView.swift * Update SkiaMetalCanvasProvider.h * Don't redraw if no new frame is available * Create separate Skia Contexts for the two Threads
41 tasks
This reverts commit 749612c.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
"Write-back Frame Processors" aka "Skia Frame Processors" aka "Draw onto Frame" (#1376)