在glsl和三个js中将粒子推离鼠标位置

基础概念

GLSL（OpenGL Shading Language）是一种用于编写着色器程序的高级着色语言，主要用于图形渲染。着色器是运行在GPU上的小程序，用于处理图形渲染过程中的各个阶段，如顶点着色器和片段着色器。

Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建和显示3D图形。它简化了WebGL的复杂性，使得开发者可以更容易地创建复杂的3D场景和动画。

类型

顶点着色器：处理顶点数据，如位置、法线等。
片段着色器：处理像素级别的渲染，如颜色、纹理等。

应用场景

游戏开发：用于实现粒子效果、光影效果等。
数据可视化：用于创建动态的3D图表和数据展示。
虚拟现实和增强现实：用于创建沉浸式的3D环境。

实现粒子推离鼠标位置

以下是一个简单的示例，展示如何在Three.js中使用GLSL着色器将粒子推离鼠标位置。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Particle Push Away from Mouse</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="app.js"></script>
</body>
</html>

JavaScript部分（app.js）

// 创建场景、相机和渲染器
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 particleCount = 1000;
const particles = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount * 3; i++) {
    positions[i] = (Math.random() - 0.5) * 10;
}
particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));

const particleMaterial = new THREE.ShaderMaterial({
    uniforms: {
        mousePos: { value: new THREE.Vector2(0, 0) }
    },
    vertexShader: `
        uniform vec2 mousePos;
        void main() {
            vec3 pos = position;
            float distance = length(mousePos - (pos.xy * 2.0 - 1.0));
            pos.z += distance * 0.1;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
        }
    `,
    fragmentShader: `
        void main() {
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
    `
});

const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);

camera.position.z = 5;

// 监听鼠标移动事件
const mouse = new THREE.Vector2();
window.addEventListener('mousemove', (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    particleMaterial.uniforms.mousePos.value.copy(mouse);
});

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

解释

HTML部分：创建一个基本的HTML页面，引入Three.js库和自定义的JavaScript文件。
JavaScript部分：
- 创建场景、相机和渲染器。
- 生成粒子系统，随机初始化粒子的位置。
- 使用自定义的着色器材料（ShaderMaterial），其中包含顶点着色器和片段着色器。
- 在顶点着色器中，计算每个粒子与鼠标位置的距离，并根据距离调整粒子的Z坐标，使其推离鼠标位置。
- 监听鼠标移动事件，更新着色器中的鼠标位置。
- 启动渲染循环，不断渲染场景。