Skip to content
BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
LICENSE
LICENSE
 
 
README.md
README.md
 
 
avif-hdr-pq.avif
avif-hdr-pq.avif
 
 
index.html
index.html
 
 

Repository files navigation

Web HDR Effects Demo

Live Demo: https://cgy22.github.io/HDR-html/

A comprehensive demonstration of High Dynamic Range (HDR) rendering techniques in modern web browsers using CSS, HTML, and WebGPU.

Overview

This repository showcases how to implement and apply HDR visual effects in web pages. It demonstrates various practical techniques for creating HDR content that can display brighter, more vibrant colors than standard SDR (Standard Dynamic Range) content, particularly on HDR-capable displays.

Live Demo

🌐 This page has been deployed on GitHub Pages:
👉 https://cgy22.github.io/HDR-html/

Visit the live demo to see HDR effects in action on your HDR-capable device.

Features

  • HDR Detection - Automatically detects if the user's display supports HDR and wide color gamut (P3)
  • HDR Colors with CSS - Using color(display-p3 ...) with luminance values exceeding 1.0 (up to 2.5x SDR brightness)
  • HDR Text Effects - Glowing, ultra-bright text using background-clip: text
  • HDR Borders & Glows - Elements with HDR-colored borders and box-shadows
  • HDR Backlight Effects - Radial gradients with HDR colors for realistic glow effects
  • HDR vs SDR Comparison - Side-by-side visual comparison of HDR and SDR color blocks
  • HDR Images - Support for HDR image formats (AVIF with Rec.2100 PQ)
  • HDR Canvas with WebGPU - Rendering HDR content using WebGPU with 16-bit floating-point format

How HDR Works in CSS

HDR colors in CSS are specified using the color(display-p3 ...) function with luminance values that can exceed 1.0:

:root {
  /* SDR green (#16DA49) converted to Display-P3 with extra brightness */
  --hdr-green: color(display-p3 0.086 0.855 0.286);
  --hdr-green-bright: color(display-p3 0.15 1.4 0.50);
  --hdr-green-extreme: color(display-p3 0.3 2.5 0.6);
  --hdr-white: color(display-p3 2 2 2);
}

The key difference from SDR colors is that the RGB channel values can go beyond 1.0, representing luminance levels up to 2.5× brighter than standard white.

Applying HDR Effects

1. HDR Text

Create ultra-bright HDR text using background-clip: text:

.hdr-text {
  font-size: 3rem;
  font-weight: bold;
  background: color(display-p3 0.3 2.5 0.6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

2. HDR Borders and Glows

Apply HDR colors to borders and add HDR glow effects:

.hdr-border {
  border: 6px solid color(display-p3 0.3 2.5 0.6);
  padding: 1rem;
  border-radius: 12px;
  background: #000;
  color: #fff;
  box-shadow: 0 0 30px color(display-p3 0.3 2.5 0.6);
}

3. HDR Gradients

Create glowing HDR backlight effects using radial gradients:

.hdr-backlight {
  width: 260px;
  height: 160px;
  border-radius: 16px;
  background: radial-gradient(
    circle,
    color(display-p3 0.3 2.5 0.6),
    rgba(0, 0, 0, 0)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
}

4. HDR Images

Use the <picture> element with the (dynamic-range: high) media feature to serve HDR images:

<picture>
  <source 
    srcset="image-hdr.avif" 
    type="image/avif" 
    media="(dynamic-range: high)"
  >
  <img src="image-sdr.jpg" alt="Fallback SDR image">
</picture>

5. HDR Color Blocks

Create HDR color blocks for visual comparison:

.block-hdr-green {
  background: color(display-p3 0.3 2.5 0.6);
  color: #000;
  box-shadow: 0 0 40px color(display-p3 0.3 2.5 0.6);
}

.block-hdr-white {
  background: color(display-p3 2 2 2);
  color: #000;
}

.block-sdr {
  background: #ffffff;
  color: #000;
  border: 1px solid #555;
}

6. HDR Canvas with WebGPU

Initialize WebGPU with HDR-capable configuration:

async function initHDRCanvas() {
  const canvas = document.getElementById("hdrCanvas");
  
  if (!navigator.gpu) {
    console.error("WebGPU not supported");
    return;
  }

  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();
  const context = canvas.getContext("webgpu");

  // Configure for HDR rendering
  context.configure({
    device,
    format: "rgba16float",      // 16-bit floating point for HDR
    colorSpace: "display-p3",   // Wide color gamut
    alphaMode: "premultiplied"
  });

  const encoder = device.createCommandEncoder();
  const texture = context.getCurrentTexture();
  const view = texture.createView();

  // Clear with HDR green (brightness 2.5)
  const renderPass = encoder.beginRenderPass({
    colorAttachments: [{
      view,
      clearValue: { r: 0.3, g: 2.5, b: 0.6, a: 1.0 },
      loadOp: "clear",
      storeOp: "store"
    }]
  });

  renderPass.end();
  device.queue.submit([encoder.finish()]);
}

HDR Detection

CSS Media Queries

Detect HDR and wide color gamut support in CSS:

/* HDR display detected */
@media (dynamic-range: high) {
  .hdr-enabled {
    display: block;
  }
}

/* Wide color gamut (P3) detected */
@media (color-gamut: p3) {
  .p3-enabled {
    display: block;
  }
}

JavaScript Detection

Detect HDR support programmatically:

// Check for HDR support
const hasHDR = window.matchMedia('(dynamic-range: high)').matches;

// Check for P3 color gamut support
const hasP3 = window.matchMedia('(color-gamut: p3)').matches;

// Check color depth
const colorDepth = screen.colorDepth;

// Comprehensive status check
const isHDRSupported = hasHDR && hasP3 && colorDepth > 24;

console.log({
  hasHDR,
  hasP3,
  colorDepth,
  isHDRSupported
});

HTML Status Display

Display HDR status information:

<div id="hdr-status" class="status">
  <!-- JavaScript will populate this -->
</div>
const statusEl = document.getElementById('hdr-status');
statusEl.innerHTML = `
  dynamic-range: high → ${hasHDR ? '✅' : '❌'}
  color-gamut: p3 → ${hasP3 ? '✅' : '❌'}
  screen.colorDepth → ${colorDepth} bit ${colorDepth > 24 ? '✅' : '⚠️'}
  HDR enabled → ${isHDRSupported ? '✅ Yes' : '❌ No'}
`;

Browser Support

Browser Version Platform Notes
Safari 16+ macOS Full HDR support
Chrome 110+ Windows/macOS Requires HDR monitor
Edge 110+ Windows/macOS Requires HDR monitor
Firefox 120+ Windows/macOS Limited HDR support

Requirements

  • Display: HDR-capable monitor with HDR mode enabled
  • OS: Windows 10/11 with HDR enabled, or macOS with HDR display
  • GPU: Graphics card supporting HDR output
  • Browser: Modern browser with HDR/WebGPU support

Project Structure

web-hdr-demo/
├── index.html          # Main demo page
├── README.md           # This documentation
└── avif-hdr-pq.avif  # HDR test image

Technical Notes

HDR Color Values

Color SDR Value HDR Value (Display-P3)
Green #16DA49 color(display-p3 0.3 2.5 0.6)
White #FFFFFF color(display-p3 2 2 2)
Bright Green #16DA49 color(display-p3 0.15 1.4 0.50)

Luminance Levels

  • SDR standard white: 1.0 (100 nits)
  • HDR green: 2.5 (250 nits equivalent)
  • HDR white: 2.0 (200 nits equivalent)
  • HDR bright green: 1.4 (140 nits equivalent)

Use Cases

1. Branding & Marketing

  • Make brand logos and taglines stand out on HDR displays
  • Create visually impactful promotional banners and ads

2. Product Showcase

  • Display product images and videos with more realistic colors
  • Highlight reflections appear more realistic

3. Gaming & Entertainment

  • Enhance visual experience with HDR game interface elements
  • Create immersive HDR background effects

4. Data Visualization

  • Highlight key data points using HDR colors
  • Distinguish between regular and important data

5. Creative Portfolios

  • Showcase design portfolios with richer color depth
  • Display photography with wider dynamic range

FAQ

Q: Why can't I see HDR effects on my regular monitor?
A: HDR effects require an HDR display to be fully visible. On SDR displays, HDR colors are clamped or tone-mapped to SDR range, so the effect may not be noticeable.

Q: Will HDR content display incorrectly on SDR monitors?
A: No. Browsers automatically map HDR colors to SDR range, ensuring content displays normally on SDR monitors.

Q: Do all browsers support display-p3?
A: Modern browsers (Chrome, Edge, Safari, Firefox) all support it, but check specific version requirements.

Q: How do I ensure HDR content compatibility?
A: Always provide SDR fallbacks (like fallback images) and use progressive enhancement strategy.

Q: Is WebGPU required for HDR effects?
A: No. CSS HDR effects (text, borders, backgrounds, etc.) don't require WebGPU. WebGPU is only used for Canvas HDR rendering.

License

MIT License - Feel free to use this code in your own projects.

Links

Web HDR 效果演示

在线演示： https://cgy22.github.io/HDR-html/

一个使用 CSS、HTML 和 WebGPU 在现代网页浏览器中实现高动态范围（HDR）渲染技术的完整演示。

概述

本仓库展示了如何在网页中实现和应用 HDR 视觉效果。它演示了多种实用技术，用于创建比标准 SDR（标准动态范围）内容更亮、更鲜艳的 HDR 内容，尤其在支持 HDR 的显示器上效果更为明显。

在线演示

🌐 本页面已部署在 GitHub Pages 上：
👉 https://cgy22.github.io/HDR-html/

访问在线演示，在您的 HDR 设备上查看 HDR 效果的实际表现。

功能特性

  • HDR 检测 - 自动检测用户显示器是否支持 HDR 和广色域（P3）
  • CSS HDR 颜色 - 使用 color(display-p3 ...)，亮度值可超过 1.0（最高可达 SDR 亮度的 2.5 倍）
  • HDR 文字效果 - 使用 background-clip: text 创建发光、超亮文字
  • HDR 边框与发光 - 使用 HDR 颜色的边框和阴影效果
  • HDR 背光效果 - 使用 HDR 颜色的径向渐变实现逼真的发光效果
  • HDR vs SDR 对比 - HDR 和 SDR 色块并排对比展示
  • HDR 图片 - 支持 HDR 图片格式（带有 Rec.2100 PQ 的 AVIF）
  • WebGPU HDR Canvas - 使用 WebGPU 的 16 位浮点格式渲染 HDR 内容

CSS 中 HDR 的工作原理

CSS 中的 HDR 颜色使用 color(display-p3 ...) 函数指定，亮度值可以超过 1.0：

:root {
  /* SDR 绿色 (#16DA49) 转换为 Display-P3 并增加亮度 */
  --hdr-green: color(display-p3 0.086 0.855 0.286);
  --hdr-green-bright: color(display-p3 0.15 1.4 0.50);
  --hdr-green-extreme: color(display-p3 0.3 2.5 0.6);
  --hdr-white: color(display-p3 2 2 2);
}

与 SDR 颜色的关键区别在于，RGB 通道值可以超过 1.0，代表比标准白色亮 2.5 倍 的亮度级别。

应用 HDR 效果的方法

1. HDR 文字

使用 background-clip: text 创建超亮 HDR 文字：

.hdr-text {
  font-size: 3rem;
  font-weight: bold;
  background: color(display-p3 0.3 2.5 0.6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

2. HDR 边框与发光

为边框应用 HDR 颜色并添加发光效果：

.hdr-border {
  border: 6px solid color(display-p3 0.3 2.5 0.6);
  padding: 1rem;
  border-radius: 12px;
  background: #000;
  color: #fff;
  box-shadow: 0 0 30px color(display-p3 0.3 2.5 0.6);
}

3. HDR 渐变

使用径向渐变创建发光背光效果：

.hdr-backlight {
  width: 260px;
  height: 160px;
  border-radius: 16px;
  background: radial-gradient(
    circle,
    color(display-p3 0.3 2.5 0.6),
    rgba(0, 0, 0, 0)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
}

4. HDR 图片

使用 <picture> 元素配合 (dynamic-range: high) 媒体查询来提供 HDR 图片：

<picture>
  <source 
    srcset="image-hdr.avif" 
    type="image/avif" 
    media="(dynamic-range: high)"
  >
  <img src="image-sdr.jpg" alt="SDR 备用图片">
</picture>

5. HDR 色块

创建 HDR 色块用于视觉对比：

.block-hdr-green {
  background: color(display-p3 0.3 2.5 0.6);
  color: #000;
  box-shadow: 0 0 40px color(display-p3 0.3 2.5 0.6);
}

.block-hdr-white {
  background: color(display-p3 2 2 2);
  color: #000;
}

.block-sdr {
  background: #ffffff;
  color: #000;
  border: 1px solid #555;
}

6. WebGPU HDR Canvas

初始化支持 HDR 的 WebGPU 配置：

async function initHDRCanvas() {
  const canvas = document.getElementById("hdrCanvas");
  
  if (!navigator.gpu) {
    console.error("当前浏览器不支持 WebGPU");
    return;
  }

  const adapter = await navigator.gpu.requestAdapter();
  const device = await adapter.requestDevice();
  const context = canvas.getContext("webgpu");

  // 配置 HDR 渲染
  context.configure({
    device,
    format: "rgba16float",      // 16 位浮点格式用于 HDR
    colorSpace: "display-p3",   // 广色域
    alphaMode: "premultiplied"
  });

  const encoder = device.createCommandEncoder();
  const texture = context.getCurrentTexture();
  const view = texture.createView();

  // 使用 HDR 绿色清除画布（亮度 2.5）
  const renderPass = encoder.beginRenderPass({
    colorAttachments: [{
      view,
      clearValue: { r: 0.3, g: 2.5, b: 0.6, a: 1.0 },
      loadOp: "clear",
      storeOp: "store"
    }]
  });

  renderPass.end();
  device.queue.submit([encoder.finish()]);
}

HDR 检测

CSS 媒体查询

在 CSS 中检测 HDR 和广色域支持：

/* 检测到 HDR 显示器 */
@media (dynamic-range: high) {
  .hdr-enabled {
    display: block;
  }
}

/* 检测到广色域（P3） */
@media (color-gamut: p3) {
  .p3-enabled {
    display: block;
  }
}

JavaScript 检测

通过编程方式检测 HDR 支持：

// 检查 HDR 支持
const hasHDR = window.matchMedia('(dynamic-range: high)').matches;

// 检查 P3 广色域支持
const hasP3 = window.matchMedia('(color-gamut: p3)').matches;

// 检查色深
const colorDepth = screen.colorDepth;

// 综合状态检查
const isHDRSupported = hasHDR && hasP3 && colorDepth > 24;

console.log({
  hasHDR,          // 是否支持 HDR
  hasP3,           // 是否支持 P3 广色域
  colorDepth,      // 色深位数
  isHDRSupported   // 是否完整支持 HDR
});

HTML 状态显示

显示 HDR 状态信息：

<div id="hdr-status" class="status">
  <!-- JavaScript 将填充此内容 -->
</div>
const statusEl = document.getElementById('hdr-status');
statusEl.innerHTML = `
  dynamic-range: high → ${hasHDR ? '✅' : '❌'}
  color-gamut: p3 → ${hasP3 ? '✅' : '❌'}
  screen.colorDepth → ${colorDepth} 位 ${colorDepth > 24 ? '✅' : '⚠️'}
  HDR 已启用 → ${isHDRSupported ? '✅ 是' : '❌ 否'}
`;

浏览器支持

浏览器 版本 平台 说明
Safari 16+ macOS 完整 HDR 支持
Chrome 110+ Windows/macOS 需要 HDR 显示器
Edge 110+ Windows/macOS 需要 HDR 显示器
Firefox 120+ Windows/macOS HDR 支持有限

系统要求

  • 显示器：支持 HDR 的显示器，并已开启 HDR 模式
  • 操作系统：已启用 HDR 的 Windows 10/11，或配备 HDR 显示器的 macOS
  • 显卡：支持 HDR 输出的显卡
  • 浏览器：支持 HDR/WebGPU 的现代浏览器

项目结构

web-hdr-demo/
├── index.html          # Main demo page
├── README.md           # This documentation
└── avif-hdr-pq.avif  # HDR test image

技术说明

HDR 颜色值对照

颜色 SDR 值 HDR 值（Display-P3）
绿色 #16DA49 color(display-p3 0.3 2.5 0.6)
白色 #FFFFFF color(display-p3 2 2 2)
亮绿色 #16DA49 color(display-p3 0.15 1.4 0.50)

亮度级别说明

  • SDR 标准白色：1.0（100 尼特）
  • HDR 绿色：2.5（相当于 250 尼特）
  • HDR 白色：2.0（相当于 200 尼特）
  • HDR 亮绿色：1.4（相当于 140 尼特）

实际应用场景

1. 品牌展示与营销

  • 使用 HDR 颜色让品牌 Logo 和标语在 HDR 显示器上更加醒目
  • 创建具有视觉冲击力的促销横幅和广告

2. 产品展示

  • 展示产品图片和视频时呈现更真实的色彩
  • 高光反射效果更加逼真

3. 游戏与娱乐

  • 游戏界面元素使用 HDR 颜色增强视觉体验
  • 创建沉浸式的 HDR 背景效果

4. 数据可视化

  • 使用 HDR 高亮显示关键数据点
  • 区分普通数据和重点数据

5. 创意设计作品集

  • 设计师展示作品集，呈现更丰富的色彩层次
  • 摄影作品展示更宽的动态范围

常见问题

问：为什么我在普通显示器上看不到 HDR 效果？
答：HDR 效果需要 HDR 显示器才能完全展现。在 SDR 显示器上，HDR 颜色会被裁剪或映射到 SDR 范围，效果可能不明显。

问：HDR 内容在 SDR 显示器上会显示异常吗？
答：不会。浏览器会自动将 HDR 颜色映射到 SDR 范围，确保内容在 SDR 显示器上也能正常显示。

问：所有浏览器都支持 display-p3 吗？
答：现代浏览器（Chrome、Edge、Safari、Firefox）都已支持，但建议检查具体版本。

问：如何确保 HDR 内容的兼容性？
答：始终提供 SDR 备用方案（如图片的 fallback 图片），使用渐进增强策略。

问：WebGPU 是必须的吗？
答：不是。CSS HDR 效果（文字、边框、背景等）不需要 WebGPU。WebGPU 仅用于 Canvas 的 HDR 渲染。

许可证

MIT 许可证 - 欢迎在您自己的项目中使用这些代码。

参考链接

About

An html page that shows HDR effects.

cgy22.github.io/HDR-html/

Topics

avifcssdemoexamplehdrhtmlsample

Resources

Readme
MIT license
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages