{"id":48793,"date":"2026-09-01T15:05:29","date_gmt":"2026-09-01T07:05:29","guid":{"rendered":"https:\/\/www.qiusir.com\/?p=48793"},"modified":"2026-09-01T17:43:35","modified_gmt":"2026-09-01T09:43:35","slug":"%e4%b8%80%e9%81%93%e6%ae%8b%e9%98%b3%e9%93%ba%e6%b0%b4%e4%b8%ad","status":"publish","type":"post","link":"https:\/\/www.qiusir.com\/?p=48793","title":{"rendered":"qiutopIA:\u4e00\u9053\u6b8b\u9633\u94fa\u6c34\u4e2d"},"content":{"rendered":"\r\n<style>\r\n    .q9-range-input {\r\n        -webkit-appearance: none;\r\n        width: 100%;\r\n        height: 4px;\r\n        background: #30363d;\r\n        border-radius: 2px;\r\n        outline: none;\r\n    }\r\n    .q9-range-input::-webkit-slider-thumb {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        width: 16px;\r\n        height: 16px;\r\n        border-radius: 50%;\r\n        background: #58a6ff;\r\n        cursor: pointer;\r\n        border: 2px solid #010409;\r\n    }\r\n    .q9-range-input::-moz-range-thumb {\r\n        width: 16px;\r\n        height: 16px;\r\n        border-radius: 50%;\r\n        background: #58a6ff;\r\n        cursor: pointer;\r\n        border: 2px solid #010409;\r\n    }\r\n    @keyframes q9-rot { to { transform: rotate(360deg); } }\r\n<\/style>\r\n\r\n<div id=\"qiusir-sunset-glint-lab-v2\" style=\"width: 100%; height: 780px; background: #010409; color: #e6edf3; font-family: system-ui, -apple-system, sans-serif; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #30363d; border-radius: 12px; position: relative; user-select: none;\">\r\n    \r\n    <div id=\"q9-load\" style=\"position: absolute; inset: 0; background: #0d1117; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10000; font-size: 14px; color: #58a6ff; gap: 15px;\">\r\n        <div style=\"width: 28px; height: 28px; border: 3px solid #30363d; border-top-color: #58a6ff; border-radius: 50%; animation: q9-rot 1s linear infinite;\"><\/div>\r\n        <div id=\"q9-status\">\u6b63\u5728\u63a5\u5165 3D \u5149\u5b66\u7269\u7406\u5b9e\u9a8c\u5ba4&#8230;<\/div>\r\n    <\/div>\r\n\r\n    <div style=\"padding: 12px 25px; background: #0d1117; border-bottom: 1px solid #30363d; display: flex; justify-content: space-between; align-items: center;\">\r\n        <b style=\"color:#58a6ff; font-size:15px; letter-spacing:1px;\">qiutopIA \u843d\u65e5\u6c34\u9762\u5149\u67f1\u6f14\u5316<\/b>\r\n        <div style=\"display: flex; gap: 12px; font-size: 10px; color: #8b949e;\">\r\n            <div style=\"display: flex; align-items: center; gap: 5px;\"><div style=\"width: 10px; height: 10px; border-radius: 50%; background: #fbbf24;\"><\/div> \u95ea\u5149\u8def\u5f84 (Sun Glint)<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div style=\"flex: 1; display: flex; min-height: 0; border-bottom: 1px solid #30363d; position: relative;\">\r\n        <div id=\"q9-canvas-3d\" style=\"flex: 1; position: relative; background: #000; width: 100%; height: 100%;\"><\/div>\r\n    <\/div>\r\n\r\n    <div style=\"background: #0d1117; padding: 18px 25px; display: flex; align-items: center; gap: 15px;\">\r\n        <span style=\"font-size: 13px; color: #8b949e; white-space: nowrap;\">\u6c34\u9762\u6ce2\u7eb9\u7c97\u7cd9\u5ea6<\/span>\r\n        <input type=\"range\" id=\"q9r-roughness\" class=\"q9-range-input\" min=\"0\" max=\"0.3\" step=\"0.01\" value=\"0.15\" style=\"flex: 1; cursor: pointer;\">\r\n        <span id=\"q9v-roughness\" style=\"font-size: 14px; color: #58a6ff; font-family: monospace; width: 35px; text-align: right;\">0.15<\/span>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n\r\n<script>\r\n(function() {\r\n    const _S = { \r\n        roughness: 0.15, \r\n        sunHeight: 12.0, \r\n        brightness: 2.5, \r\n        obsX: 0.0 \r\n    };\r\n    \r\n    let ren, sce, cam, wav, sunMesh, sunLight, mat, clk;\r\n    const $ = function(id) { return document.getElementById(id); };\r\n\r\n    function boot() {\r\n        if (typeof THREE !== 'undefined') {\r\n            if (typeof THREE.Scene === 'function') {\r\n                if ($('q9-canvas-3d').clientWidth > 0) {\r\n                    $('q9-load').style.display = 'none';\r\n                    init();\r\n                    return;\r\n                }\r\n            }\r\n        }\r\n        setTimeout(boot, 150);\r\n    }\r\n\r\n    function init() {\r\n        try {\r\n            const target = $('q9-canvas-3d');\r\n            clk = new THREE.Clock();\r\n            sce = new THREE.Scene();\r\n            sce.fog = new THREE.FogExp2(0x040612, 0.012);\r\n\r\n            cam = new THREE.PerspectiveCamera(55, target.clientWidth \/ target.clientHeight, 0.1, 1000);\r\n            cam.position.set(_S.obsX, 11, 35);\r\n            cam.lookAt(0, 1.0, -25);\r\n\r\n            ren = new THREE.WebGLRenderer({ antialias: true, powerPreference: \"high-performance\" });\r\n            ren.setSize(target.clientWidth, target.clientHeight);\r\n            \r\n            let dpr = window.devicePixelRatio;\r\n            if (!dpr) {\r\n                dpr = 1.0;\r\n            }\r\n            if (dpr > 2.0) {\r\n                dpr = 2.0;\r\n            }\r\n            ren.setPixelRatio(dpr);\r\n            ren.toneMapping = THREE.ACESFilmicToneMapping;\r\n            ren.toneMappingExposure = 1.3;\r\n            target.appendChild(ren.domElement);\r\n\r\n            const ambientLight = new THREE.AmbientLight(0x151828, 1.2);\r\n            sce.add(ambientLight);\r\n\r\n            sunLight = new THREE.DirectionalLight(0xff6622, 6.0);\r\n            sce.add(sunLight);\r\n\r\n            const sunGeo = new THREE.SphereGeometry(6.5, 32, 32);\r\n            const sunMat = new THREE.MeshBasicMaterial({ color: 0xff5511 });\r\n            sunMesh = new THREE.Mesh(sunGeo, sunMat);\r\n            sce.add(sunMesh);\r\n\r\n            const waterGeo = new THREE.PlaneGeometry(160, 160, 350, 350);\r\n            waterGeo.rotateX(-Math.PI \/ 2);\r\n\r\n            mat = new THREE.ShaderMaterial({\r\n                uniforms: {\r\n                    uTime: { value: 0 },\r\n                    uRoughness: { value: _S.roughness },\r\n                    uBrightness: { value: _S.brightness },\r\n                    uSunPosition: { value: new THREE.Vector3() },\r\n                    uCameraPosition: { value: cam.position }\r\n                },\r\n                vertexShader: `\r\n                    uniform float uTime;\r\n                    uniform float uRoughness;\r\n                    varying vec3 vWorldPosition;\r\n                    varying vec3 vNormal;\r\n\r\n                    void main() {\r\n                        vec3 pos = position;\r\n                        float wave1 = sin(pos.x * 1.2 + uTime * 1.8) * cos(pos.z * 1.2 + uTime * 1.5);\r\n                        float wave2 = sin(pos.x * 2.5 - uTime * 2.5) * sin(pos.z * 2.0 + uTime * 2.0);\r\n                        float wave3 = sin(pos.x * 4.5 + uTime * 3.5) * cos(pos.z * 3.8 - uTime * 2.5);\r\n                        \r\n                        float elevation = (wave1 * 0.45 + wave2 * 0.25 + wave3 * 0.15) * uRoughness * 0.6;\r\n                        pos.y += elevation;\r\n\r\n                        float dx = (cos(pos.x * 1.2 + uTime * 1.8) * cos(pos.z * 1.2 + uTime * 1.5) * 1.2 * 0.45 + \r\n                                    cos(pos.x * 2.5 - uTime * 2.5) * sin(pos.z * 2.0 + uTime * 2.0) * 2.5 * 0.25 + \r\n                                    cos(pos.x * 4.5 + uTime * 3.5) * cos(pos.z * 3.8 - uTime * 2.5) * 4.5 * 0.15) * uRoughness * 0.6;\r\n                        float dz = (-sin(pos.x * 1.2 + uTime * 1.8) * sin(pos.z * 1.2 + uTime * 1.5) * 1.2 * 0.45 + \r\n                                    sin(pos.x * 2.5 - uTime * 2.5) * cos(pos.z * 2.0 + uTime * 2.0) * 2.0 * 0.25 + \r\n                                    -sin(pos.x * 4.5 + uTime * 3.5) * sin(pos.z * 3.8 - uTime * 2.5) * 3.8 * 0.15) * uRoughness * 0.6;\r\n                        \r\n                        vNormal = normalize(vec3(-dx, 1.0, -dz));\r\n\r\n                        vec4 worldPosition = modelMatrix * vec4(pos, 1.0);\r\n                        vWorldPosition = worldPosition.xyz;\r\n                        gl_Position = projectionMatrix * viewMatrix * worldPosition;\r\n                    }\r\n                `,\r\n                fragmentShader: `\r\n                    uniform vec3 uSunPosition;\r\n                    uniform vec3 uCameraPosition;\r\n                    uniform float uRoughness;\r\n                    uniform float uBrightness;\r\n                    varying vec3 vWorldPosition;\r\n                    varying vec3 vNormal;\r\n\r\n                    void main() {\r\n                        vec3 viewDir = normalize(uCameraPosition - vWorldPosition);\r\n                        vec3 sunDir = normalize(uSunPosition - vWorldPosition);\r\n                        vec3 reflectDir = reflect(-viewDir, vNormal);\r\n                        \r\n                        float sunAngle = acos(max(dot(reflectDir, sunDir), 0.0));\r\n                        float sunDisc = smoothstep(0.08, 0.075, sunAngle);\r\n                        float sunCore = smoothstep(0.04, 0.035, sunAngle);\r\n                        vec3 discColor = mix(vec3(1.0, 0.5, 0.1), vec3(1.0, 0.9, 0.6), sunCore);\r\n                        vec3 perfectReflection = discColor * sunDisc * 2.5;\r\n\r\n                        float specular = max(dot(reflectDir, sunDir), 0.0);\r\n                        float shininess = mix(5000.0, 40.0, uRoughness);\r\n                        float glint = pow(specular, shininess);\r\n                        \r\n                        float distanceCenter = abs(vWorldPosition.x);\r\n                        float distanceForward = vWorldPosition.z;\r\n                        float longitudinalFactor = smoothstep(10.0, -80.0, distanceForward);\r\n                        float lateralFactor = exp(-distanceCenter * distanceCenter \/ (2.0 * (0.2 + uRoughness * 12.0)));\r\n                        \r\n                        float roughMask = smoothstep(0.0, 0.05, uRoughness);\r\n                        float spreadIntensity = glint * lateralFactor * (0.8 + 0.5 * longitudinalFactor) * roughMask;\r\n                        vec3 spreadColor = vec3(1.2, 0.7, 0.3) * spreadIntensity * 6.0;\r\n\r\n                        float fresnel = pow(1.0 - max(dot(viewDir, vNormal), 0.05), 3.5);\r\n                        vec3 deepWaterColor = vec3(0.01, 0.03, 0.08);\r\n                        vec3 sunsetColor = vec3(0.9, 0.4, 0.12);\r\n                        \r\n                        vec3 finalColor = mix(deepWaterColor, sunsetColor, fresnel * 0.6);\r\n                        finalColor += (perfectReflection + spreadColor) * uBrightness;\r\n                        \r\n                        float fogFactor = smoothstep(30.0, 120.0, length(vWorldPosition.xz));\r\n                        finalColor = mix(finalColor, vec3(0.03, 0.04, 0.09), fogFactor);\r\n\r\n                        gl_FragColor = vec4(finalColor, 1.0);\r\n                    }\r\n                `,\r\n                side: THREE.DoubleSide\r\n            });\r\n\r\n            wav = new THREE.Mesh(waterGeo, mat);\r\n            wav.position.y = -1.0;\r\n            sce.add(wav);\r\n\r\n            bindEvents();\r\n            updateSun();\r\n\r\n            window.addEventListener('resize', onResize);\r\n            onResize();\r\n            animate();\r\n        } catch(e) { \r\n            console.error(e); \r\n        }\r\n    }\r\n\r\n    function onResize() {\r\n        const t = $('q9-canvas-3d');\r\n        if (t) {\r\n            let w = t.clientWidth;\r\n            let h = t.clientHeight;\r\n            if (w > 0) {\r\n                if (h > 0) {\r\n                    cam.aspect = w \/ h;\r\n                    cam.updateProjectionMatrix();\r\n                    ren.setSize(w, h);\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    function bindEvents() {\r\n        $('q9r-roughness').oninput = function(e) { \r\n            _S.roughness = parseFloat(e.target.value); \r\n            mat.uniforms.uRoughness.value = _S.roughness;\r\n            $('q9v-roughness').innerText = _S.roughness.toFixed(2); \r\n        };\r\n    }\r\n\r\n    function updateSun() {\r\n        const rad = THREE.MathUtils.degToRad(_S.sunHeight);\r\n        const distance = 85;\r\n        const x = 0;\r\n        const y = Math.sin(rad) * distance;\r\n        const z = -Math.cos(rad) * distance;\r\n\r\n        sunMesh.position.set(x, y, z);\r\n        sunLight.position.set(x, y, z);\r\n        mat.uniforms.uSunPosition.value.copy(sunMesh.position);\r\n    }\r\n\r\n    function animate() {\r\n        requestAnimationFrame(animate);\r\n        if (mat) {\r\n            mat.uniforms.uTime.value = clk.getElapsedTime();\r\n        }\r\n        if (ren) {\r\n            if (sce) {\r\n                if (cam) {\r\n                    ren.render(sce, cam);\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    boot();\r\n})();\r\n<\/script>\r\n\u4e00\u9053\u6b8b\u9633\u94fa\u6c34\u4e2d\r\n\u534a\u6c5f\u745f\u745f\u534a\u6c5f\u7ea2\r\n<img decoding=\"async\" alt=\"\" src=\"http:\/\/www.qiusir.com\/wp-content\/gallery\/sunset\/2025101309.jpg\" width=\"580\" class=\"framed\" \/>","protected":false},"excerpt":{"rendered":"<p>\u6b63\u5728\u63a5\u5165 3D \u5149\u5b66\u7269\u7406\u5b9e\u9a8c\u5ba4&#8230; qiutopIA \u843d\u65e5\u6c34\u9762\u5149\u67f1\u6f14\u5316 \u95ea\u5149\u8def\u5f84 (Sun Glin &#8230; <a title=\"qiutopIA:\u4e00\u9053\u6b8b\u9633\u94fa\u6c34\u4e2d\" class=\"read-more\" href=\"https:\/\/www.qiusir.com\/?p=48793\" aria-label=\"\u9605\u8bfb qiutopIA:\u4e00\u9053\u6b8b\u9633\u94fa\u6c34\u4e2d\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[6],"tags":[443,247],"class_list":["post-48793","post","type-post","status-publish","format-image","hentry","category-mpo","tag-ai","tag-physics","post_format-post-format-image"],"_links":{"self":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/48793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=48793"}],"version-history":[{"count":14,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/48793\/revisions"}],"predecessor-version":[{"id":48809,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/48793\/revisions\/48809"}],"wp:attachment":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=48793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=48793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}