将CSS过滤器应用到片段着色器中

Question

我正在尝试将CSS过滤器应用于curtains.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;
}

Answer 1

基于您在这里发布的片段着色器：如何在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;
}
`;

干杯，