glass
Prompt
ne írj semmi mást csak a teljes fájlokat es kommentek nem lehetnek benne! soha semmi egyszerusitett mock placeholder dummy szimulalt fake szart nem engedelyezek es teljes fájl roviditetlen production ready kód nem lehet trancutted nem lehet olyan hogy …és hasonlóan 50 xy nem lehet dummy to do sorry hiányosság minden fájl teljes kódját egyesével fájkba írod semmi mást nem írsz ezen kívűl 综合提示 创建一个完整的、可用于生产环境的、基于浏览器的图形渲染应用程序，使用原生 WebGL2 实现一个可配置的折射玻璃界面系统。完整交付所有必需的源代码文件，不得包含任何占位符、存根、模拟行为、模拟功能、遗漏部分、伪代码或不完整的着色器逻辑。不得依赖专有渲染引擎、外部视觉特效库、仅使用 CSS 的折射近似方案或任何现有已命名实现。从零开始构建该系统，作为原创实现。 生成一个完整项目，至少包含： / ├── index.html ├── styles.css ├── src/ │ ├── main.js │ ├── renderer.js │ ├── framebuffer.js │ ├── shader-program.js │ ├── configuration.js │ ├── controls.js │ ├── math.js │ └── fallback.js ├── shaders/ │ ├── fullscreen.vert.glsl │ ├── background.frag.glsl │ ├── blur-vertical.frag.glsl │ ├── blur-horizontal.frag.glsl │ └── composite.frag.glsl └── README.md 将应用程序实现为一个响应式全屏 WebGL2 Canvas 应用，并提供一个具有无障碍支持的 HTML 控制面板。Canvas 必须完全通过 WebGL 渲染一个具有动画效果、视觉丰富的背景场景，使玻璃效果能够折射具有丰富颜色渐变、形状、光照和运动的内容。视觉效果的主要光学行为不得依赖 backdrop-filter。CSS 只能用于应用布局、控件、非渲染文本以及回退界面的展示。 初始化一个启用了抗锯齿（在可用时）的 WebGL2 上下文，并显式请求 EXT_color_buffer_float 扩展。在中间渲染管线中使用内部纹理格式为 RGBA16F 的浮点渲染目标。可靠地检测不受支持的硬件或浏览器。如果 WebGL2 或浮点颜色缓冲不可用，则显示一个可正常工作的回退界面，在保留应用内容和控件的同时，使用标准 CSS 和 Canvas 2D 技术渲染一个视觉一致、质量降低的玻璃效果。回退实现必须完整、可用，不得出现失效控件或空白输出。 创建一个可复用的 Renderer 类，用于管理所有 GPU 资源、着色器程序、纹理、帧缓冲、渲染通道、尺寸、设备像素比状态、uniform 位置、配置值以及生命周期方法。Renderer 必须在初始化期间创建所有长期存在的 GPU 资源，在 Canvas 尺寸变化时安全调整它们，在释放时正确销毁它们，并避免每帧分配 Framebuffer、纹理、程序对象或 TypedArray。 实现一个四阶段渲染管线，每一帧严格按照以下顺序执行： 1. 背景通道： 将一个程序化动画背景场景渲染到一个浮点 Framebuffer 纹理中。背景必须包含多个视觉层，例如渐变、柔和移动的色彩场、几何图形、粒子、类似 Metaball 的区域或波浪图案。背景着色器必须接受时间、分辨率、指针位置和动画参数。背景必须能够独立产生有意义的视觉内容，而不能依赖静态纯色。 2. 垂直模糊通道： 读取背景通道纹理，并沿垂直方向应用可配置的可分离高斯模糊。将结果写入一个专用浮点 Framebuffer 纹理。 3. 水平模糊通道： 读取垂直模糊纹理，并沿水平方向应用对应的可分离高斯模糊。将结果写入第二个浮点 Framebuffer 纹理。 4. 最终合成通道： 同时读取未模糊的背景纹理和完全模糊后的纹理，构建玻璃形状（一个或多个）的有符号距离场（SDF），计算法线，实现局部折射、通道分离色散、菲涅耳边缘反射、高光、着色、柔和阴影、抗锯齿，并最终输出合成后的图像到默认 Framebuffer。 所有后处理通道均使用一个全屏三角形。提供一个共享顶点着色器，在无需顶点缓冲的情况下生成纹理坐标；或者定义并复用一个最小化的全屏几何缓冲。确保纹理坐标、分辨率计算、模糊方向、SDF 数学以及采样偏移在任意视口宽高比和设备像素比下均正确。 将垂直和水平高斯模糊实现为真正的可分离着色器通道。支持 1 至 200 个逻辑像素的可配置模糊半径。按照以下公式计算高斯权重： \sigma = \frac{\text{blurRadius}}{3} 归一化所有采样权重，使权重总和等于 1.0。使用当前设备像素比将逻辑模糊半径转换为物理像素。将所有纹理采样坐标限制在有效纹理边界内，或使用适当的纹理包裹规则以防止边缘伪影。采用与 WebGL2 uniform 限制兼容的实际最大卷积核宽度；当模糊半径超过直接卷积核阈值时，实现正确加权的多重采样或降采样模糊策略，而不是悄悄降低视觉质量或忽略请求值。 创建一个数据驱动的配置模型，支持多个可独立配置的玻璃对象。每个玻璃对象必须包含稳定标识符、位置、尺寸、可见性、Z 顺序、形状参数、光学参数、阴影参数、交互状态和调试设置。Renderer 必须能够接受玻璃面板列表，并按照顺序正确合成，使前景面板能够在启用时折射场景以及之前渲染的面板。 每个玻璃面板至少支持以下配置字段： { id: "panel-id" enabled: true x: 0 y: 0 width: 420 height: 260 shapeWidth: 420 shapeHeight: 260 shapeRadius: 34 shapeRoundness: 1.0 refThickness: 20 refFactor: 1.4 refDispersion: 7.0 refFresnelRange: 30 refFresnelHardness: 20 refFresnelFactor: 20 glareRange: 30 glareHardness: 20 glareFactor: 90 glareConvergence: 50 glareOppositeFactor: 80 glareAngle: -45 blurRadius: 1 blurEdge: 1 tint: [0.92 0.97 1.0 0.12] shadowExpand: 18 shadowFactor: 0.28 shadowPosition: [0 12] mergeRate: 0 showShape1: true springSizeFactor: 1 step: 9 } 将上述数值视为默认可用配置值，但必须将每个值暴露给运行时控制，并允许安全的范围验证。保留每个字段的语义含义。不要包含与渲染行为无关联的控件。 使用圆角矩形有符号距离场（SDF）定义每个玻璃面板。该形状必须支持宽度、高度、圆角半径和圆润度参数。使用 SDF 区分内部区域、边缘带区域和外部区域。使用 fwidth、smoothstep 或其他支持导数的方法实现抗锯齿边缘。计算归一化 SDF 梯度作为局部表面法线。如果无法使用解析导数，则使用有限差分，并根据分辨率和设备像素比正确缩放采样 epsilon。 实现局部边缘折射，而不是统一的屏幕畸变。面板外部像素应显示正常合成场景。面板中心内部应保持几乎无畸变视图。将强折射限制在由 refThickness 控制的边缘带内。根据有符号距离、边缘带宽度以及可控制的响应曲线推导边缘因子。使用 SDF 推导的法线偏移背景采样坐标。根据 refFactor、边缘因子和面板几何缩放偏移量，使折射在不同面板尺寸和显示密度下保持视觉一致。 通过分别采样红、绿、蓝三个颜色通道实现色散，每个通道使用略有不同的折射偏移。使用大致等价于以下折射率： 红色: 0.98 绿色: 1.00 蓝色: 1.02 根据 refDispersion 和局部折射强度缩放通道分离。远离边缘时应使色散不可察觉或极其微弱。限制所有颜色采样 UV 坐标。正确组合采样通道，不得导致 Alpha 损坏、色彩空间不匹配或明显接缝。 实现一种菲涅耳风格的边缘照明项。根据玻璃法线、假定朝向观察者的视线方向、局部边缘位置以及可配置的 Range、Hardness 和 Factor 参数计算其强度。使用 refFresnelRange 控制响应区域宽度，使用 refFresnelHardness 控制过渡曲线，使用 refFresnelFactor 控制亮度。在线性色彩空间中混合该效果。菲涅耳贡献应增强玻璃边界亮度，而不会冲淡面板内部。 实现由 glareAngle 推导出的可配置眩光方向向量驱动的方向性眩光项。使用玻璃法线、眩光方向、边缘遮罩以及可配置的 glareRange、glareHardness、glareFactor、glareConvergence 和 glareOppositeFactor 参数。眩光响应必须产生一个可控制的方向性高光，可沿主要边缘出现，并在配置时于相对边缘产生一个较弱的次级高光。防止眩光泄漏到 SDF 形状之外。 在折射和光学高光之后应用着色层。着色必须由线性 RGBA 颜色定义，并以保持背景可读性的方式进行 Alpha 混合。在适当情况下使用对预乘 Alpha 安全的混合方式。可加入细微的内部提亮、边缘光贡献以及可选颗粒效果，但前提是每一种效果都必须在物理和视觉上与最终合成结果融为一体，而不是作为装饰性噪声。 在每个玻璃形状后方渲染柔和阴影。利用形状 SDF 和面板阴影参数创建一个可配置的位移、扩展、模糊的暗部贡献。使用 shadowExpand、shadowFactor 和 shadowPosition 控制阴影尺寸、不透明度和偏移。阴影必须正确裁剪并进行抗锯齿，不得遮挡面板自身的光学内容，并应渲染在玻璃对象下方。 在最终合成通道中支持多个面板。按确定性的 Z 顺序渲染面板。当发生重叠时，保持正确的 Alpha 合成，并提供一个配置选项，用于决定面板是在应用较低 Z 面板之前还是之后折射场景。不得产生未定义的重叠伪影、陈旧 Framebuffer 读取或循环纹理依赖。如果面板之间的折射需要独立累积目标，则必须通过显式 Framebuffer Ping-Pong 实现，并记录渲染顺序。 创建一个交互式控制面板，可实时修改渲染配置。包括具有无障碍支持的标签、可通过键盘操作的表单控件、范围输入对应的输出值、合理的限制以及恢复默认值控件。提供用于控制面板位置、尺寸、圆角半径、圆润度、折射厚度、折射因子、色散强度、菲涅耳范围、硬度和因子、所有眩光控制项、模糊半径、模糊边缘行为、着色颜色和 Alpha、阴影参数、设备像素比上限、动画状态、降低动画状态、渲染质量模式以及调试模式的控件。立即或在下一动画帧同步控件、配置状态和 GPU Uniform。 添加指针交互。将指针坐标从 DOM 坐标转换为 Canvas 像素坐标，同时考虑 Canvas 边界和设备像素比。使用指针移动来驱动程序化背景动画，并可选择影响眩光方向、面板悬停状态或局部透镜响应。支持通过拖拽重新定位启用且可拖动的玻璃面板。使用 Pointer Events、Pointer Capture、触摸兼容性、正确的取消处理以及边界限制。不得让拖拽行为干扰表单控件。 实现一个名为 step 的调试可视化 Uniform，支持 0 至 9 的整数值。每个值都必须产生一个完整且可用的着色器输出模式： 0：最终合成输出 1：原始程序化背景通道 2：垂直模糊输出 3：水平模糊输出 4：灰度显示面板 SDF 场 5：RGB 编码的面板法线场 6：边缘带和折射强度可视化 7：仅折射与色散输出（不包含菲涅耳和眩光） 8：仅菲涅耳贡献 9：仅眩光贡献 另外提供一个显式控件，将 step 恢复为最终合成模式。调试模式仍必须遵循安全纹理采样，并避免无效颜色或未初始化的 Framebuffer 数据。 全面支持设备像素比（DPR）。测量 window.devicePixelRatio，将其限制到一个可配置最大值，将 Canvas 后备缓冲区调整为 CSS 尺寸乘以当前 DPR，更新所有中间 Framebuffer 纹理，更新 Viewport，并在需要时向着色器传递物理渲染分辨率和逻辑 CSS 分辨率。确保 SDF 边缘柔和度、折射厚度、模糊半径、指针坐标、面板尺寸和阴影在 DPR 变化时保持视觉稳定。监听窗口尺寸变化以及 DPR 变化，包括浏览器缩放行为（若可检测）。 添加响应式布局样式。Canvas 必须无失真填充应用视口。控制面板必须在窄视口下仍可使用、支持滚动，并避免覆盖关键 Canvas 交互区域。遵循 prefers-reduced-motion；当启用减少动态效果时，停止或显著减慢非必要动画，同时保留静态渲染和交互。适当遵循颜色主题偏好（color-scheme），并确保文本和控件具有足够的对比度。 以防御式方式编写着色器和 JavaScript 代码。包括完整的着色器编译和链接错误报告，并输出完整 Shader 日志。创建和调整大小后验证 Framebuffer 的完整性。验证所有配置数值，强制执行范围限制，防止除零，防止非法尺寸，避免 NaN 传播，并确保所有纹理在采样前均已完全初始化。使用 webglcontextlost 和 webglcontextrestored 事件处理上下文丢失；在需要时阻止默认行为，并在恢复后重建所有 GPU 资源。 仅在动画、指针交互或场景变化需要时使用持续的 requestAnimationFrame 循环。当场景静止时，应支持按需渲染，以避免页面无谓消耗 GPU 资源。使用真实时间戳统计渲染性能，例如帧时间和帧率。添加一个轻量级诊断面板，显示 WebGL2 是否可用、当前 DPR、Framebuffer 分辨率、当前帧时间、当前 FPS，以及是否启用了回退渲染器。 提供至少三种不同的视觉预设：透明中性面板、强折射彩色面板以及磨砂低动态面板。应用预设时必须修改真实配置状态，并立即更新控件和渲染。提供重置功能，在无需刷新页面的情况下恢复原始默认配置。 提供完整的 README.md，说明项目结构、本地运行要求、浏览器要求、渲染架构、配置结构、着色器通道数据流、调试模式、回退行为、性能注意事项、无障碍行为以及扩展面板数量的方法。README 只能描述所提供的实现，不得提及或引用任何已有的软件库、项目、产品、教程或实现作为其来源或目标。 完整交付所有文件。每一个 JavaScript import 都必须能够解析到提供的文件。每一个着色器引用都必须能够解析到提供的着色器文件或明确嵌入的源代码字符串。每一个 UI 控件都必须更新真实的渲染参数。每一个渲染参数都必须影响真实的着色器或渲染器行为。正常运行、回退运行、窗口缩放、输入处理、调试可视化以及上下文恢复所需的每一条代码路径都必须得到完整实现。
A system prompt was added to support web rendering
