高斯模糊

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>着色器-高斯模糊</title>
    
    <script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>
    
    <script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            background-color: #111;
            color: #e6e6e6;
            min-height: 100vh;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

#three-container {
            display: block;
            width: 100%;
            height: 100vh;
        }

.controls {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 8px;
            z-index: 100;
            width: 250px;
        }

.control-group {
            margin-bottom: 15px;
        }

label {
            display: block;
            margin-bottom: 5px;
            color: #e6e6e6;
        }

input[type="range"] {
            width: 100%;
        }

.value-display {
            display: inline-block;
            margin-left: 10px;
            color: #4dabf7;
            font-weight: bold;
        }

h3 {
            margin-top: 0;
            color: #4dabf7;
            border-bottom: 1px solid #444;
            padding-bottom: 5px;
        }

.info {
            font-size: 12px;
            color: #aaa;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="controls">
        <h3>高斯模糊控制</h3>
        <div class="control-group">
            <label for="blurRadius">模糊半径: <span id="radiusValue" class="value-display">10.0</span></label>
            <input type="range" id="blurRadius" min="0.1" max="15" step="0.1" value="10">
            <div class="info">调整数值控制模糊强度</div>
        </div>
    </div>

<canvas id="three-container"></canvas>
    <script>
        // 获取canvas元素
        const canvas = document.getElementById('three-container');

// 初始化Three.js场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x0a0a1a);

// 初始化相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 10);
        scene.add(camera);

// 初始化渲染器
        const renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            antialias: true,
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);

// 纹理加载器
        const textureLoader = new THREE.TextureLoader();

// 加载悟空图片
        const Texture = textureLoader.load('https://image2url.com/r2/bucket2/images/1766739838393-77095075-8886-4b52-bf46-8e897046da9b.png', (texture) => {
            // 纹理加载完成后，设置适当的纹理参数
            texture.minFilter = THREE.LinearFilter;
            texture.magFilter = THREE.LinearFilter;
            texture.wrapS = THREE.ClampToEdgeWrapping;
            texture.wrapT = THREE.ClampToEdgeWrapping;
        });

// 顶点着色器
        const vertexShader = `
            varying vec2 vUv;
            
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `;

// 片段着色器-高斯模糊
        const fragmentShader = `
            precision mediump float;
            
            varying vec2 vUv;
            uniform sampler2D uTexture;
            uniform float uBlurRadius;
            
            void main() {
                // 获取纹理尺寸
                vec2 texSize = vec2(textureSize(uTexture, 0));
                vec2 texelSize = 1.0 / texSize;
                
                // 计算模糊范围（基于半径）
                int kernelSize = int(uBlurRadius * 2.0) + 1;
                
                // 初始颜色和权重
                vec4 color = vec4(0.0);
                float totalWeight = 0.0;
                
                // 高斯模糊核心算法
                // 水平方向模糊
                for (int i = 0; i < 20; i++) {
                    if (i >= kernelSize) break;
                    
                    float offset = float(i - kernelSize / 2);
                    float weight = exp(-(offset * offset) / (2.0 * uBlurRadius * uBlurRadius));
                    
                    vec2 offsetCoord = vUv + vec2(offset * texelSize.x, 0.0);
                    color += texture2D(uTexture, offsetCoord) * weight;
                    totalWeight += weight;
                }
                
                // 垂直方向模糊（基于水平模糊的结果）
                vec4 finalColor = vec4(0.0);
                float finalWeight = 0.0;
                
                for (int i = 0; i < 20; i++) {
                    if (i >= kernelSize) break;
                    
                    float offset = float(i - kernelSize / 2);
                    float weight = exp(-(offset * offset) / (2.0 * uBlurRadius * uBlurRadius));
                    
                    vec2 offsetCoord = vUv + vec2(0.0, offset * texelSize.y);
                    finalColor += texture2D(uTexture, offsetCoord) * weight;
                    finalWeight += weight;
                }
                
                // 合并水平和垂直模糊结果
                color = color / totalWeight * 0.5 + finalColor / finalWeight * 0.5;
                
                // 输出最终颜色
                gl_FragColor = color;
                
                // 保持原始透明度
                gl_FragColor.a = texture2D(uTexture, vUv).a;
            }
        `;

// 创建着色器材质
        const shaderMaterial = new THREE.ShaderMaterial({
            vertexShader: vertexShader,
            fragmentShader: fragmentShader,
            uniforms: {
                uTexture: { value: Texture },
                uBlurRadius: { value: 10.0 }
            },
            wireframe: false,
            transparent: true,
            side: THREE.DoubleSide,
        });

// 创建平面几何体
        const geometry = new THREE.PlaneGeometry(8, 8);
        geometry.translate(0, 2, 0);
        const plane = new THREE.Mesh(geometry, shaderMaterial);
        scene.add(plane);

// 添加轨道控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

// 添加网格辅助
        const gridHelper = new THREE.GridHelper(30, 30, 0x004466, 0x002244);
        gridHelper.position.y = -1.5;
        scene.add(gridHelper);

// 获取UI元素
        const blurRadiusInput = document.getElementById('blurRadius');
        const radiusValue = document.getElementById('radiusValue');

// 模糊半径变化处理
        blurRadiusInput.addEventListener('input', function () {
            const value = parseFloat(this.value);
            shaderMaterial.uniforms.uBlurRadius.value = value;
            radiusValue.textContent = value.toFixed(1);
        });

// 动画循环
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }

// 处理窗口大小变化
        function handleResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

window.addEventListener('resize', handleResize);

// 启动动画
        animate();
    </script>
</body>

</html>