GLSL片段着色器正弦波改变方向和颜色

Question

我有 glsl 片段着色器代码需要更改线条颜色，背景颜色和正弦波的方向

eprecision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
     vec2 uv = (gl_FragCoord.xy - u_resolution * 0.7) / max(u_resolution.x, u_resolution.y) * 3.0;
uv *= 1.0;

     float e = 0.0;
     for (float i=3.0;i<=15.0;i+=1.0) {
          e += 0.007/abs( (i/15.) +sin((u_time/2.0) + 0.15*i*(uv.x) *( cos(i/4.0 + 
           (u_time / 2.0) + uv.x*2.2) ) ) + 2.5*uv.y);
     gl_FragColor = vec4( vec3(e/1.6, e/11.6, e/1.6), 1.0); 
     }
}

线条现在为蓝色，背景为黑色，方向为 x 轴，我需要帮助将线条颜色更改为黑色，背景白色和方向（垂直）。

我正在寻找这样的东西，如果你们能帮助我，我将不胜感激。

Answer 1

我正在玩一点，你的任务......

我需要帮助将线条颜色更改为黑色，背景白色 和方向...我正在寻找这样的东西...

在我看来，你的图像示例的总体思路已被保留。我没有足够的时间来完美地重新创建形状，因为我的数学知识归结为添加两个和两个...但是，使用我的着色器的基础，您将毫无困难地创建您想要的东西，无论是通过添加第三组曲线或修改现有曲线。我最初的想法是为示例中曲线中的每个间隙创建一组单独的曲线。但我没有时间详细说明。

<script type="importmap">
  {
"imports": {
  "three": "https://unpkg.com/[email protected]/build/three.module.js",
  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
  }
</script>

<script type="module">

// -----------FULL SCREEN O.O---------------


import * as THREE from "three";

const SHADER_WIDTH = 800;
const SHADER_HEIGHT = 750;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(4, 4);

let uniforms = {
    u_resolution: { value: new THREE.Vector2(SHADER_WIDTH, SHADER_HEIGHT) },
    u_time: { value: 0.0 }
};

const material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: `
        void main() {
            gl_Position = vec4(position, 1.0);
        }
    `,
    fragmentShader: `
    precision mediump float;
    uniform vec2 u_resolution;
    uniform float u_time;

    //----------Random calculation - logic-----------

    float random(float seed) {
        return fract(sin(seed * 82.9898) * 43758.5453);
    }

    //----------Noise calculation - logic-----------

    float noise(vec2 p) {
        float total = 0.0;
        float frequency = 1.0;
        float amplitude = 1.0;
        float maxValue = 0.0;

        for (int i = 0; i < 8; i++) {
            total += random(dot(p * frequency, vec2(12.9898, 78.233))) * amplitude;
            maxValue += amplitude;
            frequency *= 2.0;
            amplitude *= 2.5;
        }
        return total / maxValue;
    }

    //----------Mask function - logic-----------

    float curveMask(float y, float curveIndex, float lowerBoundOffset, float upperBoundOffset) {
        float lowerBound = lowerBoundOffset + 0.51 * curveIndex;
        float upperBound = upperBoundOffset + 0.48 * curveIndex;
        return smoothstep(lowerBound, upperBound, y);
    }

    void main() {
        vec2 uv = (gl_FragCoord.xy - u_resolution * 0.6) / max(u_resolution.x, u_resolution.y) * 2.5;

        float extraCurveValue = 0.0;
        float secondCurveValue = 0.0;

        //----------Main set of curves - logic-----------

        for (float i = 7.31; i <= 12.0; i += 0.76) {
            float noiseFactor = noise(vec2(u_time, i) * 0.5) * 0.1;
            float perturbedY = uv.y + noiseFactor * 7.5;
            float lineWidth = 0.0015 + (i - 5.5) * 0.0011;
            float offsetX = 0.07;
            float curveEffect = lineWidth / abs(
                (i / 10.0) + sin((u_time / 2.0) + 0.15 * i * perturbedY * (cos(i / 4.0 + (u_time / 2.0) + uv.y * 8.2))) + 4.0 * (uv.x - offsetX)
            );

            float mask = curveMask(uv.y, i - 7.4, -0.5, -0.9);
            extraCurveValue += curveEffect * mask;
        }

        //----------Second set of curves - logic-----------

        for (float i = 1.4; i <= 5.7; i += 1.25) {
            float noiseFactor = noise(vec2(u_time, i) * 0.5) * 0.01;
            float perturbedY = uv.y + noiseFactor * 7.5;
            float lineWidth = 0.015 + (i - 4.0) * 0.004;
            float offsetX = 0.15;
            float curveEffect = lineWidth / abs(
                (i / 8.0) + sin((u_time / 2.0) + 0.15 * i * perturbedY * (sin(i / 1.0 + (u_time / 2.0) + uv.y * 10.2))) 
                + 4.0 * (uv.x - offsetX)
            );

            float secondMask = curveMask(uv.y, i - 2.95, -0.65, -0.8);
            secondCurveValue += curveEffect * secondMask;
        }

        //----------Fillings "gaps" - gradient-----------

        float combinedValue = max(extraCurveValue, secondCurveValue);
        float gradient = clamp(2.0 - abs(combinedValue) * 5.5, 0.0, 1.0);

        gl_FragColor = vec4(vec3(gradient), 1.0);
    }
    `
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize);

</script>