在GLSL着色器中更改颜色

Question

我正在尝试修改使用GLSL着色器（frag和vert文件）的3d模型（three.js）的颜色。老实说，我完全不了解着色器语言。

.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;
}