{"id":11910,"date":"2026-02-17T13:37:00","date_gmt":"2026-02-17T12:37:00","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=11910"},"modified":"2026-02-17T13:40:34","modified_gmt":"2026-02-17T12:40:34","slug":"tourbiere-prototype-2","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=11910","title":{"rendered":"Tourbi\u00e8re  prototype 2"},"content":{"rendered":"    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n\/*        body {\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            overflow: hidden;\r\n            background: #000;\r\n        }*\/\r\n\r\n        #canvas-container {\r\n            width: 100vw;\r\n            height: 100vh;\r\n            position: relative;\r\n        }\r\n\r\n        .info-panel {\r\n            position: absolute;\r\n            top: 20px;\r\n            left: 20px;\r\n            background: rgba(0, 0, 0, 0.85);\r\n            backdrop-filter: blur(10px);\r\n            padding: 25px;\r\n            border-radius: 15px;\r\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\r\n            max-width: 380px;\r\n            z-index: 100;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .info-panel h1 {\r\n            color: #7dd3a6;\r\n            font-size: 1.8em;\r\n            margin-bottom: 12px;\r\n            text-shadow: 0 2px 10px rgba(125, 211, 166, 0.5);\r\n        }\r\n\r\n        .info-panel h2 {\r\n            color: #6bc99b;\r\n            font-size: 1.2em;\r\n            margin-top: 18px;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .info-panel p {\r\n            color: #ccc;\r\n            line-height: 1.7;\r\n            margin-bottom: 10px;\r\n            font-size: 0.95em;\r\n        }\r\n\r\n        .legend {\r\n            margin-top: 18px;\r\n            padding-top: 18px;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .legend-item {\r\n            display: flex;\r\n            align-items: center;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .legend-color {\r\n            width: 28px;\r\n            height: 28px;\r\n            border-radius: 6px;\r\n            margin-right: 12px;\r\n            border: 2px solid rgba(255, 255, 255, 0.3);\r\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        .legend-label {\r\n            color: #ddd;\r\n            font-size: 0.9em;\r\n        }\r\n\r\n        .controls {\r\n            position: absolute;\r\n            bottom: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            background: rgba(0, 0, 0, 0.85);\r\n            backdrop-filter: blur(10px);\r\n            padding: 18px 30px;\r\n            border-radius: 30px;\r\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\r\n            display: flex;\r\n            gap: 15px;\r\n            align-items: center;\r\n            z-index: 100;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .control-button {\r\n            background: linear-gradient(135deg, #2c5f2d, #4a7c59);\r\n            color: white;\r\n            border: none;\r\n            padding: 12px 24px;\r\n            border-radius: 25px;\r\n            cursor: pointer;\r\n            font-size: 0.9em;\r\n            transition: all 0.3s;\r\n            box-shadow: 0 4px 15px rgba(44, 95, 45, 0.4);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .control-button:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 20px rgba(44, 95, 45, 0.6);\r\n            background: linear-gradient(135deg, #3a7d3b, #5a9c69);\r\n        }\r\n\r\n        .control-button:active {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .settings-panel {\r\n            position: absolute;\r\n            top: 20px;\r\n            right: 20px;\r\n            background: rgba(0, 0, 0, 0.85);\r\n            backdrop-filter: blur(10px);\r\n            padding: 20px;\r\n            border-radius: 15px;\r\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\r\n            z-index: 100;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            min-width: 280px;\r\n        }\r\n\r\n        .settings-panel h3 {\r\n            color: #7dd3a6;\r\n            margin-bottom: 15px;\r\n            font-size: 1.1em;\r\n        }\r\n\r\n        .setting-item {\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .setting-item label {\r\n            display: block;\r\n            color: #ccc;\r\n            font-size: 0.9em;\r\n            margin-bottom: 6px;\r\n        }\r\n\r\n        .setting-item input[type=\"range\"] {\r\n            width: 100%;\r\n            accent-color: #4a7c59;\r\n        }\r\n\r\n        .setting-item input[type=\"checkbox\"] {\r\n            margin-right: 8px;\r\n            accent-color: #4a7c59;\r\n        }\r\n\r\n        .toggle-label {\r\n            color: #ccc;\r\n            font-size: 0.9em;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        .stats {\r\n            position: absolute;\r\n            bottom: 30px;\r\n            right: 30px;\r\n            background: rgba(0, 0, 0, 0.85);\r\n            backdrop-filter: blur(10px);\r\n            padding: 15px 20px;\r\n            border-radius: 12px;\r\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\r\n            font-size: 0.85em;\r\n            color: #ccc;\r\n            z-index: 100;\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .stats div {\r\n            margin: 3px 0;\r\n        }\r\n\r\n        .loading {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            color: white;\r\n            font-size: 1.5em;\r\n            text-align: center;\r\n            z-index: 200;\r\n        }\r\n\r\n        .loading-spinner {\r\n            width: 60px;\r\n            height: 60px;\r\n            border: 4px solid rgba(125, 211, 166, 0.3);\r\n            border-top-color: #7dd3a6;\r\n            border-radius: 50%;\r\n            animation: spin 1s linear infinite;\r\n            margin: 20px auto;\r\n        }\r\n\r\n        @keyframes spin {\r\n            to { transform: rotate(360deg); }\r\n        }\r\n\r\n        .value-display {\r\n            color: #7dd3a6;\r\n            font-weight: 600;\r\n            float: right;\r\n        }\r\n\r\n        \/* Tooltip *\/\r\n        .tooltip {\r\n            position: absolute;\r\n            background: rgba(0, 0, 0, 0.9);\r\n            color: white;\r\n            padding: 10px 15px;\r\n            border-radius: 8px;\r\n            font-size: 0.85em;\r\n            pointer-events: none;\r\n            display: none;\r\n            z-index: 1000;\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n        }\r\n    <\/style>\r\n\r\n    <div id=\"canvas-container\"><\/div>\r\n\r\n    <div class=\"loading\" id=\"loading\">\r\n        <div class=\"loading-spinner\"><\/div>\r\n        Chargement de la tourbi\u00e8re avanc\u00e9e&#8230;\r\n    <\/div>\r\n\r\n    <div class=\"info-panel\">\r\n        <h1>\ud83c\udf3f Tourbi\u00e8re de la Guette<\/h1>\r\n        <p><strong>Localisation :<\/strong> Neuvy-sur-Barangeon, Cher (18)<\/p>\r\n        <p><strong>Superficie :<\/strong> ~25 hectares<\/p>\r\n        <p><strong>Type :<\/strong> Tourbi\u00e8re acide de transition<\/p>\r\n        \r\n        <h2>Technologies 3D<\/h2>\r\n        <p style=\"font-size: 0.85em;\">\r\n            \u2713 Heightmap proc\u00e9durale r\u00e9aliste<br>\r\n            \u2713 Mat\u00e9riaux PBR (roughness, metalness)<br>\r\n            \u2713 Post-processing (SSAO, Bloom)<br>\r\n            \u2713 Instanced Meshes (10,000+ plantes)<br>\r\n            \u2713 Shaders eau personnalis\u00e9s<br>\r\n            \u2713 \u00c9clairage HDR dynamique\r\n        <\/p>\r\n        \r\n        <div class=\"legend\">\r\n            <h2>L\u00e9gende<\/h2>\r\n            <div class=\"legend-item\">\r\n                <div class=\"legend-color\" style=\"background: linear-gradient(135deg, #8B4513, #654321);\"><\/div>\r\n                <div class=\"legend-label\">Tourbe (PBR)<\/div>\r\n            <\/div>\r\n            <div class=\"legend-item\">\r\n                <div class=\"legend-color\" style=\"background: linear-gradient(135deg, #2d5016, #4a7c59);\"><\/div>\r\n                <div class=\"legend-label\">Sphaignes<\/div>\r\n            <\/div>\r\n            <div class=\"legend-item\">\r\n                <div class=\"legend-color\" style=\"background: linear-gradient(135deg, #1e4d2b, #2a6f3d);\"><\/div>\r\n                <div class=\"legend-label\">Arbustes (instance)<\/div>\r\n            <\/div>\r\n            <div class=\"legend-item\">\r\n                <div class=\"legend-color\" style=\"background: linear-gradient(135deg, #2a5f8f, #4a8fc9);\"><\/div>\r\n                <div class=\"legend-label\">Eau (shader)<\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"settings-panel\">\r\n        <h3>\u2699\ufe0f Param\u00e8tres Visuels<\/h3>\r\n        \r\n        <div class=\"setting-item\">\r\n            <label>\r\n                Qualit\u00e9 de l&#8217;eau <span class=\"value-display\" id=\"waterQuality\">100%<\/span>\r\n            <\/label>\r\n            <input type=\"range\" id=\"waterOpacity\" min=\"0\" max=\"100\" value=\"70\">\r\n        <\/div>\r\n        \r\n        <div class=\"setting-item\">\r\n            <label>\r\n                Densit\u00e9 v\u00e9g\u00e9tation <span class=\"value-display\" id=\"vegDensity\">100%<\/span>\r\n            <\/label>\r\n            <input type=\"range\" id=\"vegetationDensity\" min=\"0\" max=\"100\" value=\"100\">\r\n        <\/div>\r\n        \r\n        <div class=\"setting-item\">\r\n            <label>\r\n                Intensit\u00e9 lumi\u00e8re <span class=\"value-display\" id=\"lightInt\">100%<\/span>\r\n            <\/label>\r\n            <input type=\"range\" id=\"lightIntensity\" min=\"0\" max=\"200\" value=\"100\">\r\n        <\/div>\r\n        \r\n        <div class=\"setting-item\">\r\n            <label>\r\n                Brouillard <span class=\"value-display\" id=\"fogDens\">50%<\/span>\r\n            <\/label>\r\n            <input type=\"range\" id=\"fogDensity\" min=\"0\" max=\"100\" value=\"50\">\r\n        <\/div>\r\n        \r\n        <div class=\"setting-item\">\r\n            <label class=\"toggle-label\">\r\n                <input type=\"checkbox\" id=\"enableBloom\" checked>\r\n                Bloom (lueur)\r\n            <\/label>\r\n        <\/div>\r\n        \r\n        <div class=\"setting-item\">\r\n            <label class=\"toggle-label\">\r\n                <input type=\"checkbox\" id=\"enableSSAO\" checked>\r\n                SSAO (ombres ambiantes)\r\n            <\/label>\r\n        <\/div>\r\n        \r\n        <div class=\"setting-item\">\r\n            <label class=\"toggle-label\">\r\n                <input type=\"checkbox\" id=\"animateWater\" checked>\r\n                Animer l&#8217;eau\r\n            <\/label>\r\n        <\/div>\r\n        \r\n        <div class=\"setting-item\">\r\n            <label class=\"toggle-label\">\r\n                <input type=\"checkbox\" id=\"showWireframe\">\r\n                Mode fil de fer\r\n            <\/label>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"controls\">\r\n        <button class=\"control-button\" onclick=\"resetCamera()\">\ud83c\udfa5 Vue initiale<\/button>\r\n        <button class=\"control-button\" onclick=\"toggleAnimation()\">\u23ef Animation<\/button>\r\n        <button class=\"control-button\" onclick=\"cycleTimeOfDay()\">\ud83c\udf05 Heure du jour<\/button>\r\n        <button class=\"control-button\" onclick=\"captureScreenshot()\">\ud83d\udcf8 Screenshot<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"stats\">\r\n        <div><strong>Commandes :<\/strong><\/div>\r\n        <div>\ud83d\uddb1\ufe0f Clic gauche : Rotation<\/div>\r\n        <div>\ud83d\uddb1\ufe0f Clic droit : Translation<\/div>\r\n        <div>\ud83d\udd04 Molette : Zoom<\/div>\r\n        <div id=\"fpsCounter\" style=\"margin-top: 8px; color: #7dd3a6;\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"tooltip\" id=\"tooltip\"><\/div>\r\n\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n  \r\n\n\n<script type='text\/javascript'>\nvar id = \"11913\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/11913.js?ver=1771331996'><\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11910","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11910"}],"version-history":[{"count":2,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11910\/revisions"}],"predecessor-version":[{"id":11915,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11910\/revisions\/11915"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}