WebGL中的颜色混合

问题描述 投票:0回答:1

我正在使用以下库:https://github.com/tengbao/vanta/blob/master/src/vanta.halo.js

一个演示可以在这里找到:https://www.vantajs.com/?effect=halo

如果我使用的是明亮(或什至白色)的背景色,则该效果不再可见。以我有限的WebGL知识,我的猜测是这是由于背景色(mixedColor = texture2D(...) - backgroundColor)的减去(但我可能是错的)。

void main() {
  vec2 res2 = iResolution.xy * iDpr;
  vec2 uv = gl_FragCoord.xy / res2; // 0 to 1

  vec4 oldImage = texture2D(iBuffer, uv);
  vec3 mixedColor = oldImage.rgb - backgroundColor;

  float cropDist = 0.01;
  float cropXOffset = 0.2;
  float cropYOffset = 0.2;

  vec2 offset = uv + vec2((mixedColor.g - cropXOffset) * cropDist, (mixedColor.r - cropYOffset) * cropDist);

  float spinDist = 0.001;
  float spinSpeed = 0.2 + 0.15 * cos(iTime * 0.5);
  float timeFrac = mod(iTime, 6.5);
  vec2 offset2 = uvBig + vec2(cos(timeFrac * spinSpeed) * spinDist, sin(timeFrac * spinSpeed) * spinDist);

  mixedColor = texture2D(iBuffer, offset).rgb * 0.4
    + texture2D(iBuffer, offset2).rgb * 0.6
    - backgroundColor;

  float fadeAmt = 0.0015; // fade this amount each frame // 0.002
  mixedColor = (mixedColor - fadeAmt) * .995;

  vec4 spectrum = abs( abs( .95*atan(uv.x, uv.y) -vec4(0,2,4,0) ) -3. )-1.;
  float angle = atan(pixel.x, pixel.y);
  float dist = length(pixel - mouse2*0.15) * 8. + sin(iTime) * .01;

  float flowerPeaks = .05 * amplitudeFactor * size;
  float flowerPetals = 7.;
  float edge = abs((dist + sin(angle * flowerPetals + iTime * 0.5) * sin(iTime * 1.5) * flowerPeaks) * 0.65 / size);

  float colorChangeSpeed = 0.75 + 0.05 * sin(iTime) * 1.5;
  float rainbowInput = timeFrac * colorChangeSpeed;

  float brightness = 0.7;
  vec4 rainbow = sqrt(j2hue(cos(rainbowInput))) + vec4(baseColor,0) - 1.0 + brightness;
  float factor = smoothstep(1., .9, edge) * pow(edge, 2.);
  vec3 color = rainbow.rgb * smoothstep(1., .9, edge) * pow(edge, 20.);
  vec4 ring = vec4(
    backgroundColor + clamp( mixedColor + color, 0., 1.)
    , 1.0);

  gl_FragColor = ring;
}

但是我无法弄清楚如何适应行为,因此我可以使用明亮的背景。如果我删除了减法(并在末尾也删除了相加(vec4 ring = vec4(clamp(...))),则我得到了正确的效果,但背景为黑色。

有人知道如何修改着色器吗?

fragment shader webgl
1个回答
0
投票

[该问题很可能是将backgroundColor添加到颜色中以计算ring值。如果backgroundColor太亮,这将使您的最终色彩消失。

© www.soinside.com 2019 - 2024. All rights reserved.