在GLSL着色器中改变颜色

Question

我正在尝试修改一个3d模型(three.js)的颜色，它使用GLSL着色器(frag和files文件)。老实说，我对着色语言一点也没有经验。

.frag文件

precision highp float;

uniform sampler2D uTexture;

varying vec2 vPUv;
varying vec2 vUv;

void main() {
    vec4 color = vec4(0.0);
    vec2 uv = vUv;
    vec2 puv = vPUv;

    // pixel color
    vec4 colA = texture2D(uTexture, puv);

    // greyscale
    float grey = colA.r * 0.31 + colA.g * 0.71 + colA.b * 0.07;
    vec4 colB = vec4(grey, grey, grey, 1.0);

    // circle
    float border = 0.3;
    float radius = 0.5;
    float dist = radius - distance(uv, vec2(0.5));
    float t = smoothstep(0.0, border, dist);

    // final color
    color = colB;
    color.a = t;

    gl_FragColor = color;
}

.vert文件

precision highp float;

attribute float pindex;
attribute vec3 position;
attribute vec3 offset;
attribute vec2 uv;
attribute float angle;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

uniform float uTime;
uniform float uRandom;
uniform float uDepth;
uniform float uSize;
uniform vec2 uTextureSize;
uniform sampler2D uTexture;
uniform sampler2D uTouch;

varying vec2 vPUv;
varying vec2 vUv;

#pragma glslify: snoise2 = require(glsl-noise/simplex/2d)

float random(float n) {
    return fract(sin(n) * 43758.5453123);
}

void main() {
    vUv = uv;

    // particle uv
    vec2 puv = offset.xy / uTextureSize;
    vPUv = puv;

    // pixel color
    vec4 colA = texture2D(uTexture, puv);
    float grey = colA.r * 0.21 + colA.g * 0.71 + colA.b * 0.07;

    // displacement
    vec3 displaced = offset;
    // randomise
    displaced.xy += vec2(random(pindex) - 0.5, random(offset.x + pindex) - 0.5) * uRandom;
    float rndz = (random(pindex) + snoise_1_2(vec2(pindex * 0.1, uTime * 0.1)));
    displaced.z += rndz * (random(pindex) * 2.0 * uDepth);
    // center
    displaced.xy -= uTextureSize * 0.5;

    // touch
    float t = texture2D(uTouch, puv).r;
    displaced.z += t * 20.0 * rndz;
    displaced.x += cos(angle) * t * 20.0 * rndz;
    displaced.y += sin(angle) * t * 20.0 * rndz;

    // particle size
    float psize = (snoise_1_2(vec2(uTime, pindex) * 0.5) + 2.0);
    psize *= max(grey, 0.2);
    psize *= uSize;

    // final position
    vec4 mvPosition = modelViewMatrix * vec4(displaced, 1.0);
    mvPosition.xyz += position * psize;
    vec4 finalPosition = projectionMatrix * mvPosition;

    gl_Position = finalPosition;
}

这创造了粒子从一个非常深灰色的色调到白色，就像你在这个例子中看到的那样。我只想改变非常暗色调的颜色来匹配背景颜色。我玩了一些颜色值，我在这里发现，但不幸的是，结果不是我所期望的。

​

也许有人能给我个提示？

Answer 1

我只想改变非常暗色调的颜色来匹配背景颜色。

实际上你创造了一种灰色的颜色。但是你真正想要的是“与背景相匹配的暗色调”和光色调是白色的。因此，您需要从背景到白色的渐变。

要么将白色与背地混合起来，取决于灰度：

void main()
{
    vec4 color = vec4(0.0);

    // [...]

    // final color
    color.rgb = vec3(1.0);
    color.a = t * grey;
    
    gl_FragColor = color;
}

你必须mix的背景颜色和白色取决于灰度。为此，您必须知道片段着色器中的背景色：

void main()
{
    vec4 color = vec4(0.0);
    vec3 backgroundColor = vec3(42.0, 67.0, 101.0) / 255.0;

    // [...]

    // final color
    color.rgb = mix(backgroundColor.rgb, vec3(1.0), gray);
    color.a = t;

    gl_FragColor = color;
}