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