Difference between revisions of "Video textures and alpha transparency"

From Verge3D Wiki
Jump to navigationJump to search
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[Category:Rendering]]
== Supported formats ==
== Supported formats ==


WebM and HEVC/MOV formats are the only video formats that can be used on the web to display textures with alpha transparency.
WebM and HEVC/MOV formats are the only video formats that can be used on the web to display textures with alpha transparency.


WebM is supported in Chrome/Firefox/Edge/Samsung Internet/Opera/Brave while HEVC/MOV is used on Safari (both desktop and mobile).
WebM is supported in Chrome/Firefox/Edge/Samsung/Opera/Brave while HEVC/MOV should be used on Safari (both desktop and mobile).


== Converting WebM to HEVC ==
== Selecting appropriate format ==
 
Use can use the following Puzzles snippet to select the video:
 
[[File:Select webm hevc.jpg|795px]]
 
== Converting WebM to HEVC (macOS) ==


At the time of the writing, transparent videos are [https://trac.ffmpeg.org/ticket/7965 not supported] in the stock libx265 encoder. Still you can use ffmpeg on Mac devices with hardware encoder called VideoToolbox to convert your videos:
At the time of the writing, transparent videos are [https://trac.ffmpeg.org/ticket/7965 not supported] in the stock libx265 encoder. Still you can use ffmpeg on Mac devices with hardware encoder called VideoToolbox to convert your videos:
Line 14: Line 21:


  brew install ffmpeg
  brew install ffmpeg
== Converting video with chromakey (green screen) to WebM with alpha ==
To convert any video with chromakey (e.g MP4 which does not support alpha) to semi-transparent WebM:
ffmpeg -i movie-mp4.mp4 -vf "chromakey=0x2a9a2e:0.01:0.2" movie-webm.webm
Where '''0x2a9a2e''' is the HEX-color of the green (use color picker to find it), '''0.01''' — similarity factor, '''0.2''' — blend factor. See [https://ffmpeg.org/ffmpeg-filters.html#chromakey here] for more info.
== Known Issues ==
=== Performance regression in Safari 15 ===
The latest Safari 15 browser introduces performance regression with slow video texture rendering. Among devices affected by this issue: Intel and M1-based Macs, as well as iPhones/iPads. Track updates on this issue on WebKit Bugzilla: [https://bugs.webkit.org/show_bug.cgi?id=223740 223740], [https://bugs.webkit.org/show_bug.cgi?id=232235 232235].
UPDATE: The issue was fixed in some minor update of Safari 15

Latest revision as of 11:40, 1 June 2022

Supported formats

WebM and HEVC/MOV formats are the only video formats that can be used on the web to display textures with alpha transparency.

WebM is supported in Chrome/Firefox/Edge/Samsung/Opera/Brave while HEVC/MOV should be used on Safari (both desktop and mobile).

Selecting appropriate format

Use can use the following Puzzles snippet to select the video:

Select webm hevc.jpg

Converting WebM to HEVC (macOS)

At the time of the writing, transparent videos are not supported in the stock libx265 encoder. Still you can use ffmpeg on Mac devices with hardware encoder called VideoToolbox to convert your videos:

ffmpeg -c:v libvpx-vp9 -i movie-webm.webm -c:v hevc_videotoolbox -alpha_quality 0.75 -vtag hvc1 movie-hevc.mov

You can install FFmpeg with Homebrew:

brew install ffmpeg

Converting video with chromakey (green screen) to WebM with alpha

To convert any video with chromakey (e.g MP4 which does not support alpha) to semi-transparent WebM:

ffmpeg -i movie-mp4.mp4 -vf "chromakey=0x2a9a2e:0.01:0.2" movie-webm.webm

Where 0x2a9a2e is the HEX-color of the green (use color picker to find it), 0.01 — similarity factor, 0.2 — blend factor. See here for more info.

Known Issues

Performance regression in Safari 15

The latest Safari 15 browser introduces performance regression with slow video texture rendering. Among devices affected by this issue: Intel and M1-based Macs, as well as iPhones/iPads. Track updates on this issue on WebKit Bugzilla: 223740, 232235.

UPDATE: The issue was fixed in some minor update of Safari 15