DOCSEARCHbyAlgolia
Submit Docs

VAP (Video Animation Player)

repository·master·Indexed 26 days ago

https://github.com/tencent/vap

A high-performance animation playback solution for complex effects like particle systems, featuring high compression and hardware decoding support. VAP supports Android, iOS, and Web platforms, providing tools like VapTool for asset creation and the video-animation-player npm package for WebGL animation effects. It supports fusion animations for overlaying dynamic images or text via the IFetchResource interface. Note: This repository is no longer maintained.

Tokens
8.3K
Snippets
19
Records
51
Agent score
87%

What's inside VAP

  1. Overview of VAP (Video Animation Player)

    master

    VAP (Video Animation Player) is a high-performance animation solution developed by Penguin Esports. It is designed to play complex animations with high compression rates and hardware decoding capabilities.

    Key Advantages:

    • High Compression: Achieves significantly smaller file sizes compared to WebP or Apng (e.g., ~1.5MB for VAP vs ~9.2MB-10.6MB for WebP/Apng).
    • Hardware Decoding: Uses hardware acceleration for faster, more efficient playback compared to software-decoded formats.
    • Complex Effects: Supports complex particle effects that Lottie cannot easily achieve.
    • Dynamic Fusion: Supports 'VAP Fusion Animation', allowing you to overlay custom attributes like user names or avatars directly into the animation.

  4. Configure Fusion Animation (Advanced)

    master

    Fusion animations allow you to overlay dynamic images or text onto the video. This is an advanced feature and requires specific mask settings.

    Fusion Animation Settings

    When adding a fusion animation via the add button, configure:

    • source tag: A string placeholder used to identify the resource. The player returns different bitmaps based on this tag.
    • source type: Type of content to display. Supported: image or text.
    • fit type: How images are scaled. Supported: fitXY (default, tiles the image) or centerCrop (scales proportionally).
    • mask path: Path to the mask image sequence.
    • text color: For text type, use hex format (e.g., #000000).
    • text Bold: For text type, toggle bold formatting.

    Note: When using fusion animations, alpha scale is automatically forced to 0.5 to reserve space for the mask.

    Mask Image Requirements

    To create effective masks, follow these rules:

    1. Naming: Mask files must follow the same naming convention as video frames (000.png, 001.png, etc.).
    2. Dimensions: Mask frame dimensions must match the video frame dimensions exactly.
    3. Content:
      • Black areas: Indicate where the image or text should be displayed.
      • Transparent areas: All other areas must have 0 opacity (completely transparent).
      • (Red areas within the black region in editor tools indicate occlusion/blocking areas).

  5. VAP Fusion Animation Concept

    master

    VAP supports 'Fusion Animation', which allows embedding dynamic user-specific content (like avatars or usernames) into the video animation.

    Implementation Mechanism:

    • Masking: The animation contains 'mask' assets stored within the video frames (often utilizing space saved by shrinking the Alpha region).
    • Porter-Duff Operations: The player uses these masks and the provided attribute images (e.g., a user's profile picture) to perform Porter-Duff compositing.
    • Overlay: The resulting shaped image is then positioned at specific coordinates defined in the animation to create the illusion of being part of the video content.

  6. Create mask images for VAPX animations

    master

    Mask images are used to define where images or text appear in fusion animations. Follow these rules:

    1. Naming: Mask files must follow the same naming convention as video frames: 000.png, 001.png, etc.
    2. Dimensions: The mask frame size must be identical to the video frame size.
    3. Content:
      • The black area indicates the position where the image or text will be displayed.
      • All other areas must have 0 transparency.
      • (Note: In some editors, the red area within the black area indicates the occlusion area).

  9. Install and run VapTool on Windows

    master

    To use VapTool on Windows, download the Windows zip file which includes the JRE (Java Runtime Environment) for immediate execution.

    1. Download vaptool_win_v2.0.6.zip from the releases page.
    2. Extract the archive.
    3. Run the tool by double-clicking win_start.bat.
    win_start.bat

  11. Build vap-demo for production with bundle analyzer report

    master

    To build the project for production and generate a bundle analyzer report (useful for inspecting bundle size and composition), use the build command with the --report flag.

    npm run build --report