好的，我们开始。

CSS Shader：OpenGL着色器操作DOM像素（已废弃但具理论价值）

各位同学，大家好。今天我们来探讨一个比较古老，但依然具有理论价值的技术：CSS Shader。CSS Shader 允许我们使用 OpenGL 着色器语言（GLSL）来操作 DOM 元素的像素，实现自定义的图像滤镜和视觉效果。虽然这项技术已经被废弃，但了解它的原理和实现方式，有助于我们更深入地理解图形渲染管线，以及现代 Web 图形技术的基础。

一、什么是CSS Shader？

CSS Shader 是一种利用 OpenGL 着色器语言（GLSL）来定义 CSS 滤镜的技术。它允许开发者编写自定义的着色器程序，并在浏览器中运行，从而对 DOM 元素进行像素级别的操作。简单来说，你可以把它理解为一种 "可编程的 CSS 滤镜"。

核心概念：

顶点着色器（Vertex Shader）： 负责处理几何形状的顶点数据，进行坐标变换、光照计算等操作。
片元着色器（Fragment Shader）： 负责处理每个像素的颜色值，进行颜色混合、纹理采样等操作。

在 CSS Shader 的上下文中，浏览器会将 DOM 元素的图像数据作为纹理传递给片元着色器，片元着色器根据自定义的算法对每个像素进行处理，最终输出处理后的图像。

优点（理论上）：

高度可定制化： 可以实现各种各样复杂的图像效果，远超 CSS 内置滤镜的能力。
性能优势： 利用 GPU 的并行处理能力，可以比 JavaScript 实现的滤镜更高效。

缺点（实际情况）：

兼容性问题： CSS Shader 的支持非常有限，只有部分浏览器（主要是 Chrome）支持，并且需要开启实验性功能。
学习曲线陡峭： 需要掌握 OpenGL 着色器语言（GLSL），以及图形渲染管线的相关知识。
维护成本高： 由于兼容性问题和技术的复杂性，维护 CSS Shader 代码的成本很高。
已废弃： Web 标准已经转向了更现代的 WebGL 和 WebGPU 技术，CSS Shader 已经不再是推荐的方案。

二、 CSS Shader 的工作原理

CSS Shader 的工作流程大致如下：

定义着色器程序： 使用 GLSL 编写顶点着色器和片元着色器。
加载着色器程序： 将着色器程序加载到浏览器中，并编译成 GPU 可执行的代码。
创建 Shader 对象： 通过 CSS 属性 shader 创建 Shader 对象，并将着色器程序关联到 Shader 对象。
应用 Shader 对象： 将 Shader 对象应用到 DOM 元素，通过 CSS 属性 filter 或 -webkit-filter。
渲染： 浏览器在渲染 DOM 元素时，会将图像数据传递给片元着色器，片元着色器对每个像素进行处理，最终输出处理后的图像。

一个简单的例子：

假设我们要实现一个简单的反色滤镜，可以使用以下 GLSL 代码：

// 片元着色器
precision mediump float;

uniform sampler2D u_texture; // 输入纹理
varying vec2 v_texCoord;    // 纹理坐标

void main() {
  vec4 color = texture2D(u_texture, v_texCoord);
  gl_FragColor = vec4(1.0 - color.r, 1.0 - color.g, 1.0 - color.b, color.a);
}

这段代码的作用是：

u_texture：声明一个 uniform 变量，表示输入的纹理（DOM 元素的图像数据）。
v_texCoord：声明一个 varying 变量，表示纹理坐标，由顶点着色器传递给片元着色器。
texture2D(u_texture, v_texCoord)：根据纹理坐标从纹理中采样颜色值。
gl_FragColor：设置当前像素的颜色值，这里将 RGB 值取反，实现反色效果。

三、实现 CSS Shader 的步骤（理论上）

下面我们来详细讲解如何实现 CSS Shader，请注意，以下代码可能无法在所有浏览器中运行，需要在支持 CSS Shader 的浏览器中开启实验性功能。

步骤 1：编写着色器程序

首先，我们需要编写顶点着色器和片元着色器。顶点着色器的作用是将顶点坐标传递给片元着色器，这里我们使用一个简单的顶点着色器：

// 顶点着色器
attribute vec4 a_position; // 顶点坐标
attribute vec2 a_texCoord; // 纹理坐标

varying vec2 v_texCoord;  // 传递给片元着色器的纹理坐标

void main() {
  gl_Position = a_position;
  v_texCoord = a_texCoord;
}

这段代码的作用是：

a_position：声明一个 attribute 变量，表示顶点坐标。
a_texCoord：声明一个 attribute 变量，表示纹理坐标。
gl_Position：设置顶点的最终位置。
v_texCoord：将纹理坐标传递给片元着色器。

然后，我们编写片元着色器，实现反色滤镜：

// 片元着色器
precision mediump float;

uniform sampler2D u_texture; // 输入纹理
varying vec2 v_texCoord;    // 纹理坐标

void main() {
  vec4 color = texture2D(u_texture, v_texCoord);
  gl_FragColor = vec4(1.0 - color.r, 1.0 - color.g, 1.0 - color.b, color.a);
}

步骤 2：创建 HTML 文件

创建一个 HTML 文件，包含一个 DOM 元素，例如一个 <img> 标签：

<!DOCTYPE html>
<html>
<head>
  <title>CSS Shader Example</title>
  <style>
    img {
      width: 200px;
      height: 200px;
      /* 应用 Shader 对象 */
      filter: custom-shader; /* 或者 -webkit-filter: custom-shader; */
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="Image">

  <script>
    // JavaScript 代码将在后面添加
  </script>
</body>
</html>

步骤 3：创建 Shader 对象

在 JavaScript 代码中，我们需要创建 Shader 对象，并将着色器程序关联到 Shader 对象。

// 获取 <style> 标签
const style = document.createElement('style');
document.head.appendChild(style);

// 顶点着色器代码
const vertexShaderCode = `
  attribute vec4 a_position;
  attribute vec2 a_texCoord;

  varying vec2 v_texCoord;

  void main() {
    gl_Position = a_position;
    v_texCoord = a_texCoord;
  }
`;

// 片元着色器代码
const fragmentShaderCode = `
  precision mediump float;

  uniform sampler2D u_texture;
  varying vec2 v_texCoord;

  void main() {
    vec4 color = texture2D(u_texture, v_texCoord);
    gl_FragColor = vec4(1.0 - color.r, 1.0 - color.g, 1.0 - color.b, color.a);
  }
`;

// 创建 Shader 对象
const shaderCode = `
  shader: {
    vertexShader: {
      src: '${vertexShaderCode}'
    },
    fragmentShader: {
      src: '${fragmentShaderCode}'
    },
    uniforms: {
      u_texture: {
        type: 'sampler2D',
        value: null // 图像数据将由浏览器自动传递
      }
    },
    attributes: {
      a_position: {
        type: 'vec4',
        value: [-1, -1, 0, 1, 1, -1, 0, 1, -1, 1, 0, 1, 1, 1, 0, 1] // 定义顶点坐标
      },
      a_texCoord: {
        type: 'vec2',
        value: [0, 0, 1, 0, 0, 1, 1, 1]  // 定义纹理坐标
      }
    }
  }
`;

// 将 Shader 对象添加到 <style> 标签中
style.textContent = `
  @custom-media --supports-css-shaders (shader);

  @supports (--supports-css-shaders) {
    img {
      filter: custom-shader; /* 或者 -webkit-filter: custom-shader; */
    }
  }

  @property --custom-shader {
    syntax: '*';
    inherits: false;
    initial-value: ${shaderCode};
  }

  @keyframes shader-animation {
    0% { --custom-shader: ${shaderCode}; }
    100% { --custom-shader: ${shaderCode}; }
  }

  img {
    animation: shader-animation 1s forwards;
  }
`;

这段代码的作用是：

将顶点着色器和片元着色器代码存储在字符串中。
使用 @property 定义一个自定义 CSS 属性 --custom-shader，用于存储 Shader 对象。
使用 @keyframes 定义一个动画，将 Shader 对象应用到 <img> 标签。
使用 @supports 检测浏览器是否支持 CSS Shader。

解释说明

创建style标签并将shader字符串注入到css中，使用@property定义自定义的css变量–custom-shader，指定shader相关信息
定义shader-animation动画，将–custom-shader应用到css selector中
使用@supports 检测浏览器是否支持css shader，如果支持就将filter应用到元素中。

步骤 4：运行代码

将 HTML 文件保存到本地，并在支持 CSS Shader 的浏览器中打开。如果一切正常，你应该看到图像的反色效果。

四、 CSS Shader 的局限性

虽然 CSS Shader 具有一定的优势，但它也存在一些局限性：

兼容性问题： CSS Shader 的支持非常有限，只有部分浏览器（主要是 Chrome）支持，并且需要开启实验性功能。
学习曲线陡峭： 需要掌握 OpenGL 着色器语言（GLSL），以及图形渲染管线的相关知识。
调试困难： 调试 CSS Shader 代码比较困难，需要使用专门的工具。
性能问题： 对于复杂的着色器程序，可能会导致性能问题。
已废弃： Web 标准已经转向了更现代的 WebGL 和 WebGPU 技术，CSS Shader 已经不再是推荐的方案。

五、替代方案：WebGL 和 WebGPU

由于 CSS Shader 的局限性，Web 标准已经转向了更现代的 WebGL 和 WebGPU 技术。

WebGL： 是一种基于 OpenGL ES 2.0 的 Web API，允许开发者在浏览器中进行 3D 图形渲染。
WebGPU： 是一种更现代的 Web API，提供了更高效的 GPU 访问能力，可以实现更复杂的图形效果。

WebGL 和 WebGPU 提供了更强大的图形渲染能力，但也需要更多的开发工作。

六、其他使用案例

虽然 CSS Shader 已经不再是主流技术，但我们可以通过一些案例来了解它的应用场景。

案例	描述
图像模糊	使用高斯模糊算法对图像进行模糊处理。
颜色调整	调整图像的亮度、对比度、饱和度等。
扭曲效果	对图像进行扭曲、变形等处理。
水波纹效果	模拟水波纹的动画效果。
像素化效果	将图像像素化，形成马赛克效果。
自定义滤镜	实现各种各样自定义的图像滤镜，例如卡通渲染、油画效果等。

这些案例可以帮助我们更好地理解 CSS Shader 的应用场景和原理。

七、总结

CSS Shader 是一种利用 OpenGL 着色器语言来操作 DOM 元素像素的技术，虽然已经被废弃，但了解它的原理和实现方式，有助于我们更深入地理解图形渲染管线，以及现代 Web 图形技术的基础。由于兼容性问题和技术的复杂性，CSS Shader 已经不再是推荐的方案，Web 标准已经转向了更现代的 WebGL 和 WebGPU 技术。

八、关键点回顾

CSS Shader 的核心在于使用 GLSL 编写着色器程序，并将图像数据作为纹理传递给着色器。虽然已经废弃，但理解其原理对理解现代 Web 图形技术有所帮助。WebGL 和 WebGPU 是更现代和推荐的替代方案。

希望这次的分享对大家有所帮助。谢谢！

更多IT精英技术系列讲座，到智猿学院

CSS Shader（自定义滤镜）：利用OpenGL着色器语言（GLSL）操作DOM像素（已废弃但具理论价值）

CSS Shader：OpenGL着色器操作DOM像素（已废弃但具理论价值）

发表回复取消回复

CSS Shader：OpenGL着色器操作DOM像素（已废弃但具理论价值）

发表回复 取消回复

发表回复取消回复