OpenCut-app / OpenCut-app/OpenCut

[FEATURE] Enhancement: WebGPU Cross-Origin Fix, Crisp SVG Scaling, and Expanded Stickers/Shapes

Open
#845 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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:

  1. Cross-Origin WebGPU Fix: Added image.crossOrigin = "anonymous" to sticker-node.ts, image-node.ts, and effect-preview.ts. External CDN images can now be safely uploaded to GPU queues without tainting the canvas.
  2. Crisp SVG Scaling: Implemented an OffscreenCanvas rasterization step in sticker-node.ts that 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.
  3. Cleaned up Emojis & Icons: Replaced the broken fxemoji and noto tags in the icons.ts list with working twemoji equivalents, and populated the Icons tab with proper UI icons (Lucide, skill-icons).
  4. Expanded Shapes: Rewrote getShapePresets() in shapes.ts to 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.