Threejs + Shader 字体扭曲效果

shader

logo.png 

    constructor(container) {
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        this.renderer = renderer;

        this.clock = new THREE.Clock()

        const map = new THREE.TextureLoader().load('logo.png')
        map.wrapS = THREE.RepeatWrapping; // 允许纹理在x轴上阵列

        this.uniforms = {
            uTexture: {
                value: map
            },
            uTime: {
                value: 0
            },
            uMouse: {
                value: [0, 0]
            },
            uSpeed: {
                value: 0
            }
        }
        let current = {
            oldX: 0,
            x: 0,
        }
        this.current = current;
        this.isMoving = false
        container.addEventListener('mousemove', (e) => {
            const x = e.clientX / container.offsetWidth - 0.5

            current.x = this.step(current.x, x, .2);
            current.oldX = this.step(current.oldX, x, .05);
            this.isMoving = true
        })

        this.fsQuad = new FullScreenQuad(
            new THREE.RawShaderMaterial({
                name: "raw",
                uniforms: this.uniforms,
                vertexShader: `
                precision highp float;
                precision highp int;
               	uniform mat4 modelViewMatrix;
                uniform mat4 projectionMatrix;
                uniform mat4 mapTransform;
                attribute vec3 position;
                attribute vec2 uv;
                varying vec2 vUv;

                void main() {
                	vUv = uv;
                    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        
                }
		`,
                fragmentShader: `
                precision highp float;
                precision highp int;
                varying vec2 vUv;
                uniform float uTime;
                uniform float uSpeed;
                uniform vec2 uMouse;
                uniform sampler2D uTexture;

                void main() {
                    // 获取片段的纹理坐标
                    vec2 uv = vUv;
                    // 计算扭曲效果
                    float dist = smoothstep(-.1, uv.x, uv.x-.1) * mix(1., .9, smoothstep(.9, 1.1, uv.x));
                    // 计算鼠标移动效果
                    float m = smoothstep(0.4, 0.5, vUv.x-uMouse.x)-smoothstep(0.5, .6, vUv.x-uMouse.x);
                    // 对纹理坐标进行扭曲
                    uv.x *= dist;
                    uv.x += 0.02;
                    uv.x -= 1.5;
                    uv.x *= 1. + (m * .15 * uSpeed);
                    uv.x += 1.5;
                    // 计算色彩的色差效果
                    float aberration = 0.05 * uSpeed * m * sin(uv.y * 10. + uTime * 10.);
                    // 纹理采样并应用色差
                    float r = 1. - texture2D(uTexture, uv + vec2(uTime * 0.075 - aberration, -aberration)).r;
                    float g = 1. - texture2D(uTexture, uv + vec2(uTime * 0.075, 0.)).g;
                    float b = 1. - texture2D(uTexture, uv + vec2(uTime * 0.075 + aberration, aberration)).b;
                    // 将颜色限制在一定范围内
                    vec3 col = clamp(vec3(r, g, b), .0588, 1.);
                    // 设置片段的最终颜色
                    gl_FragColor = vec4(col, 1.);
                }
                `
            })
        );

        this.animate = this.animate.bind(this);
        this.animate();
    }

    step(currentValue, targetValue, rate) {
        return currentValue + (targetValue - currentValue) * rate;
    }

    animate() {
        if (this.isMoving) {
            this.isMoving = false
            this.uniforms.uSpeed.value = this.current.x - this.current.oldX
            this.uniforms.uMouse.value = [this.current.x, 0]
        } else {
            this.uniforms.uSpeed.value = this.step(this.uniforms.uSpeed.value, 0, 0.05)
        }
        this.uniforms.uTime.value += this.clock.getDelta();
        this.fsQuad.render(this.renderer)
        requestAnimationFrame(this.animate);
    }