HDR 高動態範圍影片

什麼是 HDR

高動態範圍（HDR，High Dynamic Range）是一種允許更寬廣的色彩範圍和亮度範圍的技術，相比標準動態範圍（SDR，Standard Dynamic Range）能呈現更豐富的視覺效果。

HDR 影片的特點：

更高的最大亮度（nits）
更深的暗部細節
更寬廣的色彩空間（通常使用 BT.2020 或 P3）
常見格式：HDR10、HDR10+、Dolby Vision、HLG

Remotion 的 HDR 限制

Remotion 使用無頭 Chrome 瀏覽器進行渲染，不支援 HDR。

幀始終以 sRGB 色彩空間渲染，這是標準動態範圍（SDR）。

這意味著：

你無法真正輸出 HDR 內容
嵌入的 HDR 影片必須轉換為 SDR
色彩轉換過程是有損的，輕微的色彩損失是不可避免的

嵌入 HDR 影片

如果你的合成中包含 HDR 影片，必須將其轉換為 SDR。這個轉換過程本質上是有損的。

在 `<Video />` 和 `<Html5Video />` 中

在 <Video /> 和 <Html5Video /> 中，色彩轉換由瀏覽器處理。--gl 旗標對顏色有影響：

提示：設定 --gl=angle 在嵌入 HDR 影片時可以獲得更好的色彩（已在 macOS 上測試）。

# 使用 angle GL 後端以改善 HDR 影片的色彩
npx remotion render MyComp --gl=angle

import { Video, staticFile } from "remotion";
 
export const MyComp = () => {
  return (
    <Video
      src={staticFile("hdr-video.mp4")}
      style={{ width: "100%", height: "100%" }}
    />
  );
};

Remotion 團隊尚未對哪個 --gl 旗標最適合 HDR 影片做出完整測試，歡迎分享你的使用經驗。

在 `<OffthreadVideo />` 中

預設情況下，<OffthreadVideo /> 會自動對 HDR 影片進行色彩轉換。Remotion 嘗試使用 FFmpeg 和 zscale 函式庫，在將影片轉換為 SDR 時盡量保留色彩資訊。

import { OffthreadVideo, staticFile } from "remotion";
 
// 預設行為：自動進行 HDR 到 SDR 的色調映射
export const MyComp = () => {
  return (
    <OffthreadVideo
      src={staticFile("hdr-video.mp4")}
    />
  );
};

停用自動色彩轉換

你可以透過設定 toneMapped={false} 來停用自動色彩轉換：

import { OffthreadVideo } from "remotion";
 
export const MyComp = () => {
  return (
    <OffthreadVideo
      src="https://example.com/hdr.mp4"
      toneMapped={false}
    />
  );
};

注意：停用色調映射後，HDR 影片的色彩可能顯得過亮或飽和度不正確。

輸出 HDR 影片

Remotion 不建議輸出 HDR 影片。

由於所有幀都以 SDR 渲染，輸出 HDR 影片沒有意義。接受色彩損失並輸出 SDR 影片，比嘗試將幀重新轉換為 HDR 更好，後者只會造成更多損失。

為什麼不應使用 `--color-space` 輸出 HDR

雖然存在一個 --color-space 選項，可以設定為 bt2020-ncl 或 bt2020-cl 來輸出帶有 HDR 標記的影片，但這是一個設計錯誤，不建議使用。

問題在於：

影片內容仍然是 SDR 渲染的
只是添加了 HDR 的標記，內容並非真正的 HDR
播放時圖像會顯得過亮且過曝

# 不建議這樣做！
npx remotion render MyComp --color-space=bt2020-ncl

正確的做法

輸出標準的 SDR 影片，並使用 BT.709 色彩空間以獲得最準確的色彩：

# 推薦：輸出高品質 SDR 影片
npx remotion render MyComp --color-space=bt709

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  outputLocation: "out/video.mp4",
  colorSpace: "bt709", // 推薦的色彩空間設定
});

HDR 影片嵌入的最佳實踐

使用 `<OffthreadVideo />` 的建議設定

import {
  OffthreadVideo,
  AbsoluteFill,
  useCurrentFrame,
  interpolate,
} from "remotion";
 
export const HdrShowcase = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
 
  return (
    <AbsoluteFill>
      {/* OffthreadVideo 預設會進行 HDR 到 SDR 的色調映射 */}
      <OffthreadVideo
        src="https://example.com/hdr-footage.mp4"
        style={{ opacity }}
      />
    </AbsoluteFill>
  );
};

測試 HDR 影片嵌入

要測試 HDR 影片的色彩轉換效果，可以比較不同 --gl 設定的結果：

# 測試預設設定
npx remotion render HdrShowcase --output out/default.mp4
 
# 測試 angle 設定（建議用於 macOS 的 HDR 影片）
npx remotion render HdrShowcase --gl=angle --output out/angle.mp4
 
# 測試 swangle 設定
npx remotion render HdrShowcase --gl=swangle --output out/swangle.mp4

常見問題

Q: 為什麼嵌入的 HDR 影片看起來色彩不準確？

A: 這是由於 HDR 到 SDR 的色彩轉換過程是有損的。嘗試使用 --gl=angle（在 macOS 上），可能改善色彩呈現。

Q: 我能否製作真正的 HDR 影片？

A: 目前無法用 Remotion 製作真正的 HDR 影片，因為無頭 Chrome 瀏覽器不支援 HDR 渲染，所有幀都以 sRGB（SDR）渲染。

Q: `toneMapped={false}` 什麼時候有用？

A: 如果你對自動色調映射的結果不滿意，可以停用它並自行處理色彩轉換，但這需要更深入的色彩管理知識。

Q: BT.2020 和 BT.709 有什麼差別？

A: BT.709 是標準高清電視（SDR）使用的色彩空間；BT.2020 是 HDR 內容使用的更寬廣色彩空間。Remotion 渲染出的內容是 BT.709（sRGB），不論你設定什麼色彩空間標記。