OpenCut-app / OpenCut-app/OpenCut
[FEATURE] Enhancement: WebGPU Cross-Origin Fix, Crisp SVG Scaling, and Expanded Stickers/Shapes
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 89.8k
- Forks
- 8.9k
- PR merge metrics
- No merged PRs in 30d
Description
Problem
Currently, when importing stickers from external providers (like Iconify or Twemoji CDN), the WebGPU renderer crashes with a Failed to execute 'copyExternalImageToTexture' on 'GPUQueue': The external image is tainted by cross-origin data error. This happens because the images are loaded without the crossOrigin = "anonymous" attribute.
Additionally, SVG stickers (like emojis or icons) appear heavily pixelated when scaled up in the timeline due to their small intrinsic natural sizes. The default POPULAR_ICONS list also contains several broken emoji keys, and the Shapes category only exposes the base registry components instead of specialized shape presets.
Solution
Since Pull Requests are currently restricted to collaborators, I have fully implemented a fix for these issues and pushed it to a clean branch on my fork.
Link to the code: https://github.com/KryptexPvP/OpenCut/tree/feature/better-stickers-and-renderer-fix
The branch includes the following improvements:
- Cross-Origin WebGPU Fix: Added
image.crossOrigin = "anonymous"tosticker-node.ts,image-node.ts, andeffect-preview.ts. External CDN images can now be safely uploaded to GPU queues without tainting the canvas. - Crisp SVG Scaling: Implemented an
OffscreenCanvasrasterization step insticker-node.tsthat automatically scales up small SVG images to a minimum resolution of 512x512 before GPU texture upload. SVGs now stay razor-sharp in the video editor. - Cleaned up Emojis & Icons: Replaced the broken
fxemojiandnototags in theicons.tslist with workingtwemojiequivalents, and populated the Icons tab with proper UI icons (Lucide, skill-icons). - Expanded Shapes: Rewrote
getShapePresets()inshapes.tsto expose all useful shape variants (Triangle, Diamond, Pentagon, Hexagon, Octagon) to the user instead of just mapping the raw base definitions, while filtering out duplicates.
Feel free to check out the branch and cherry-pick or merge the code into main if you find these additions useful!
Alternative
https://github.com/KryptexPvP/OpenCut/tree/feature/better-stickers-and-renderer-fix
Anything else?
No response
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the feature/better-stickers-and-renderer-fix branch and the changes in sticker-node.ts, image-node.ts, effect-preview.ts, icons.ts, and shapes.ts. Verify the external-image, SVG-scaling, icon-list, and shape-preset behavior in the editor; done means the reported renderer and asset issues are resolved without regressions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- computer-graphics, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100