\n+ Ultra 4K Mode\n+ \n+ Auto No-Lag Mode\n+ \n Aperture: 0.05\n \n Enable DOF\n...existing code after controls...\n\nstyle.css\nhtml, body {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-family: sans-serif;\n- background-color: #111;\n+ background-color: #000;\n color: #eee;\n overflow: hidden;\n}\n\nmain.js\n...existing code before UI element bindings...\n // UI elements for performance/quality modes\n+ const ultra4kToggle = document.getElementById('ultra4k-toggle');\n+ const autoScaleToggle = document.getElementById('auto-scale-toggle');\n...existing UI bindings...\n+ // When toggling 4K mode, recalc buffer sizes\n+ ultra4kToggle.addEventListener('change', () => { resize(); });\n+ // Auto-scale toggle (no immediate action needed, handled in render)\n+ autoScaleToggle.addEventListener('change', () => { /* toggles auto scale on/off */ });\n\n...existing resize function signature...\n- function resize() {\n- // Dynamic resolution based on window size and scale slider\n- const dpr = window.devicePixelRatio || 1;\n- const scale = parseFloat(scaleSlider.value) || 1.0;\n- const width = Math.floor(window.innerWidth * dpr * scale);\n- const height= Math.floor(window.innerHeight * dpr * scale);\n- canvas.width = width;\n- canvas.height = height;\n- gl.viewport(0, 0, width, height);\n+ function resize() {\n+ // Select full dynamic or 4K override\n+ const dpr = window.devicePixelRatio || 1;\n+ let width, height;\n+ if (ultra4kToggle.checked) {\n+ // force 4K UHD\n+ width = 3840;\n+ height = 2160;\n+ } else {\n+ const scale = parseFloat(scaleSlider.value) || 1.0;\n+ width = Math.floor(window.innerWidth * dpr * scale);\n+ height = Math.floor(window.innerHeight * dpr * scale);\n+ }\n+ canvas.width = width;\n+ canvas.height = height;\n+ gl.viewport(0, 0, width, height);\n...existing code inside resize (texture/FBO setup)...\n }\n\n...existing render() signature...\n function render() {\n // Update stats each frame\n const now = performance.now();\n const delta = now - lastTime;\n const fps = delta ? (1000 / delta) : 0;\n lastTime = now;\n statsDiv.textContent = `Frame: ${frameCount} FPS: ${fps.toFixed(1)}`;\n+ // Auto resolution scaling for smooth performance\n+ if (autoScaleToggle.checked) {\n+ let scale = parseFloat(scaleSlider.value);\n+ const minScale = parseFloat(scaleSlider.min);\n+ const maxScale = parseFloat(scaleSlider.max);\n+ if (fps < 25 && scale > minScale) {\n+ scale = Math.max(minScale, scale - 0.1);\n+ scaleSlider.value = scale.toFixed(2);\n+ scaleValue.textContent = scale.toFixed(2);\n+ resize();\n+ } else if (fps > 55 && scale < maxScale) {\n+ scale = Math.min(maxScale, scale + 0.1);\n+ scaleSlider.value = scale.toFixed(2);\n+ scaleValue.textContent = scale.toFixed(2);\n+ resize();\n+ }\n+ }\n...existing code in render continues...\n }\n...existing code after render...","page_description","cursor","eyJpZCI6IjM4ZnNmNWtiMnhqNzhmbjZoMW9hIn0","token","included",[],"about",{"_193":-5},"parent","routes/browser/layout","actionData","errors"]

WebGL Ray Marching Demo