将 CSS 过滤器应用于片段着色器答案

【问题标题】：Apply CSS filter into fragment shader将 CSS 过滤器应用于片段着色器
【发布时间】：2020-11-18 07:30:55
【问题描述】：

我正在尝试将 CSS 过滤器应用于窗帘.js 中平面元素的片段着色器。我对此很陌生，我很难弄清楚如何实现这一点。我能够做到的唯一方法是将它应用到画布 css，我被告知我不想这样做。任何帮助将不胜感激。

.psych body {margin:0;padding:0;background:#000;}
@-webkit-keyframes psychedelic{
  0% {
-webkit-filter: hue-rotate(0deg) saturate(2) invert(0);
  } 
  50% {
-webkit-filter: hue-rotate(360deg) saturate(2) invert(0);
  }
  100% {
-webkit-filter: hue-rotate(0deg) saturate(2) invert(0);
  }
}

.psych img{
width:100%;height:100%;
-webkit-animation: psychedelic linear 10s infinite;
-moz-animation: psychedelic linear 10s infinite;
-o-animation: psychedelic linear 10s infinite;
animation: psychedelic linear 10s infinite;
}

【问题讨论】：

标签： javascript css filter fragment-shader

【解决方案1】：

基于您在此处发布的片段着色器：How to call multiple planes in javascript?

这是相同的片段着色器，它每 10 秒旋转一次色调并使最终颜色饱和：

var fs = `
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // the uniform we declared inside our javascript
    uniform float uTime;

    // our texture sampler (default name, to use a different name please refer to the documentation)
    uniform sampler2D planeTexture;


    vec3 hueRotate(vec3 col, float hue) {
        vec3 k = vec3(0.57735, 0.57735, 0.57735);
        float cosAngle = cos(hue);
        return col * cosAngle + cross(k, col) * sin(hue) + k * dot(k, col) * (1.0 - cosAngle);
    }

    vec3 saturate(vec3 rgb, float adjustment) {
        vec3 W = vec3(0.2125, 0.7154, 0.0721);
        vec3 intensity = vec3(dot(rgb, W));
        return mix(intensity, rgb, adjustment);
    }


    void main() {
        // get our texture coords
        vec2 textureCoord = vTextureCoord;

        // displace our pixels along both axis based on our time uniform and texture UVs
        // this will create a kind of water surface effect
        // try to comment a line or change the constants to see how it changes the effect
        // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
        const float PI = 3.141592;

        textureCoord.x += (
            sin(textureCoord.x * 10.0 + ((uTime * (PI / 10.0)) * 0.031))
            + sin(textureCoord.y * 10.0 + ((uTime * (PI / 10.489)) * 0.047))
        ) * 0.0075;

        textureCoord.y += (
            sin(textureCoord.y * 15.0 + ((uTime * (PI / 10.023)) * 0.023))
            + sin(textureCoord.x * 15.0 + ((uTime * (PI / 10.1254)) * 0.067))
        ) * 0.0125;

        vec4 color = texture2D(planeTexture, textureCoord);

        // hue rotation from 0 to PI in 10 seconds
        float hueRotation = cos(uTime / 600.0) * PI;
        color.rgb = hueRotate(color.rgb, hueRotation);

        // saturate
        color.rgb = saturate(color.rgb, 2.0);

        gl_FragColor = color;
    }
`;

干杯，

【讨论】：