手机屏幕可视角度仿真
根据实测的屏幕离轴光谱数据，在浏览器里用 WebGL 仿真手机屏幕从不同角度看过去的亮度衰减与色偏，并可对比防窥模式 / 防窥膜的效果。
在线访问：https://smartlanny.github.io/phone-view-angle-sim/
两种模式
打开网页默认是屏幕仿真（直观的对比画面），默认机型 iPhone Duo（展开看内屏）。三维的场景演示是做演示动画用的。电脑和 iPad 横屏时，左栏顶部的“屏幕仿真 | 场景演示”切换可以进入；其他布局在设置的“画面”页里，“演示”下面有“三维场景演示”按钮。也可以在网址后加 #mode=3d 直接打开。场景演示顶部的切换可以回到屏幕仿真。三维场景的脚本只在第一次进入时才加载。
- 场景演示（做动画用）：三维场景里一个人拿着手机——正视、正常手持、放在桌上、地铁旁座（旁边乘客斜看，可开关防窥对比）、侧卧（屏幕不在两眼正中，两眼色差很大）；小米 / iPhone / 华为切换，可调出数据面板。可在“讲解视角”和“人眼视角”之间平滑切换；屏幕永远按人物眼睛的位置、用实测数据着色，讲解视角里标出眼睛到屏幕顶 / 中 / 底的视线、离轴角、亮度和色偏；工具栏“视线 上下 / 左右”可以改成标屏幕左 / 中 / 右，镜头同时转到看得清左右夹角的方向。源码在
scene3d/，说明见 scene3d/README.md。
- 双眼视差：从人眼视角的整体画面中间分开成左眼 / 右眼（两眼相距约 63 mm，各自按自己的离轴角查实测数据），先并排、再叠在一起，展示视差重影和两眼之间的亮度 / 色差。叠在一起时模拟大脑融合：屏幕中心对齐、边缘保留轻微的不重合，色偏按双眼累加，比只用一只眼看更明显。
- 按住手机拖动可以转动手机（人眼视角里在画面任何地方拖动）；换场景时视角沿用，换机型不重播动作。
- “编排”时间线：把工具栏上的场景、视角、机型按钮和防窥开关拖上去组成每一段的展示方式，“▶ 播放”按时间线连续展示（播放中点任意一步就从那里接着播，点“停止”才停），“● 导出”录成视频下载。
- 标注和界面在大屏幕上自动放大，也可以在“调整”里或按
+ / - 手动调整。
- iPhone Duo、iPhone 17 Pro Max、iPhone 18 Pro Max 的外观用苹果官网的 AR 模型（© Apple Inc.，本项目配合 Apple 宣传，经确认可随公开仓库发布，来源与说明见
scene3d/CREDITS.md）。
- 屏幕仿真（默认）：下面列出的原有工具。
功能（屏幕仿真）
- 仿真效果：拖动旋转手机，按每个像素相对眼睛的实际离轴角逐像素计算亮度与色偏（近距离观看时屏幕上下两端角度不同，也会体现出来）
- 观看方向盘：极坐标热力图显示各方向的亮度 / 色偏，可直接在盘上拖动设置观看方向；多种热力图配色；无实测的方位用斜线标出（上下镜像补全）
- 随离轴角变化曲线：相对亮度、色偏 JNCD 随离轴角的变化，视角直接拖动手机或方向盘调整，可自动扫描（方向盘标题旁的“扫描”或空格）
- 读数：离轴角、亮度、色偏 JNCD、ΔE2000（含亮度）
- 双机对比：左右并排对比两台机器 / 防窥开关前后。在设置的“机型”页分别点左右两边选择机型，也可以互换。每台手机下面有一张等宽的数据卡（名称、亮度、色偏、ΔE2000）；方向盘可以切换左右两台设备
- iPhone Duo：快捷条里的“展开”开关一键平滑展开至 180°（看内屏）或合上至 0°（看外屏），点“展开角度”的数值打开滑条，可拖到任意角度，拉到 0° 即合上；双机对比时外屏固定按合上、内屏按展开显示。设置画面参考 Duo 的分栏与侧边状态栏；内屏显示分栏详情，外屏保留顶部头像与账号的设置首页。屏幕边缘沿原始模型轮廓生成。闭合时折痕处的屏幕呈泪滴形弯折（最宽 3.85 mm，按 CT 截面），转轴盖按苹果官网 AR 模型里的实物截面（U 形缎面金属壳，宽 8.2 mm、深 2.9 mm、两角约 R2.1）生成：展开时藏在两半机身之间，合上后从侧面凸出约 2.3 mm，形成圆润的转轴；单台时亮度 / 色偏 / ΔE 读数在画面顶部一行；改变展开角度时，观看距离量到屏幕中央、取景缩放保持不变。内屏、外屏已接入可视角数据；反射数据仍待测。
- 双眼立体：按瞳距分别渲染左右眼所见画面，可平行视或交叉视观看双眼看到的差异
- 屏幕内容：浅色 / 深色设置页、阅读、纯白、三原色、色卡、灰阶，也可上传或直接拖入、粘贴自己的图片
- 机身渲染：摄影棚式环境光（大柔光箱、侧灯条、轮廓光、顶灯与正面补光）+ 胶片色调映射。原始模型自带的底色、金属度 / 粗糙度、法线、环境光遮蔽（AO）贴图逐像素采样（每种用途一个 512² 纹理数组，带各向异性过滤；Duo 的 AO 按开合角在原模型展开 / 合上两张之间过渡），磨砂背板的颗粒与相机周围的阴影、抛光中框、镜头镀膜各按原贴图呈现；模型里的透明盖玻璃单独叠加，完全透明的贴花不绘制。屏幕显示走独立着色器，不受环境光影响；只有 Duo 内屏在显示之上叠加防眩光磨砂膜的柔和雾光反射，右半屏靠上的屏下摄像头是一块没有磨砂的镜面圆片（直径 4.7 mm）；磨砂与镜面的清漆强度、粗糙度和圆片位置都取自苹果官网 AR 模型的内屏材质。Duo 外屏前摄开孔里直接露出模型自带的镜头；机身颜色有原模型的星白色、夜空色两种。iPhone 18 Pro Max 用官网 iPhone 18 Pro 的模型按官方长宽放大（厚度不变），酒红 / 冰川 / 银 / 黑四种颜色对应原模型的四个颜色变体；灵动岛按原模型尺寸（15.67 × 6.07 mm）
- 显示方式：仿真效果 / 原图 / 离轴角分布，竖屏 / 横屏，多种机身配色
- 快捷条（电脑和 iPad 放在手机下方，手机上放在设置面板里）：一行，依次是机型名、iOS 风格开关（Duo 展开 / 防窥 / 贴膜）、数值（距离，Duo 另有展开角度）。点数值打开滑条，距离是眼睛到屏幕中央的距离。点机型名弹出机型选择，各机型的防窥 / 贴膜、内外屏状态直接在那里切，也可以打开并排对比
- 手机上使用：拖动手机改变观看角度、双击回正；竖屏时读数在顶部一行，手机占满中间；视角 / 机型 / 画面设置在底部抽屉里，有收起、半屏、全屏三档，点页签切换，也可以拖动把手调高度。手机横屏时设置收在右侧一栏，手机占左边
- 当前视角会写进网址，复制链接即可分享同一个视角
机型和测量状态
| 机型 | 状态 |
|---|
| 华为 Mate 90 Pro Max 典藏版 | 普通 |
| 小米 18 Pro Max | 普通 / 开启防窥模式 |
| iPhone 18 Pro Max（GH3 屏） | 普通 / 贴防窥膜 |
| iPhone 17 Pro Max（GV3 屏） | 普通 |
| iPhone Duo | 内屏 / 外屏可视角数据；反射待测 |
华为 Mate 90 Pro Max 典藏版的可视角度数据来自本机实测；机身外观按用户提供的正反面参考图绘制，比例为参考图估算，不代表官方尺寸。
基础机型的每种状态测量 6 个方向：面内顺时针转 0°、30°、60°、90°、120°、150°，每个方向离轴角 −70° ~ 70°、步长 2°，记录白 / 红 / 绿 / 蓝 / 黑五个画面的 CIE XYZ（cd/m²）。正负扫描组成 12 条实测半径线，其间方向由插值得到。
数据已经打包进 web/data.js，网页打开即用，无需后端。原始测量文件（.ang2）也一并放在仓库里。
iPhone 17 Pro Max 的原始测量保存在 iPhone 17 Pro Max GV3/iPhone 17 ProMax.json（vam-result/1），包含 12 个方位、0°～70° 的五色 XYZ 数据。转换时按测试方向修正将方位角旋转 180°；原始文件与 XYZ 数值不变。
本地运行
纯静态网页，任意静态服务器即可：
python3 -m http.server 8765 --directory web
然后打开 http://localhost:8765。
更新数据
把新的 .ang2 测量文件放进仓库目录（可以放在以机型名开头的子文件夹里，多出的部分会作为屏幕供应商后缀，如 iphone18 Pro Max GH3/），然后重新生成 web/data.js：
python3 tools/convert_ang2.py
cp web/data.js scene3d/public/data/ang_data.js
cp web/duo-data.js scene3d/public/data/duo_data.js
vam-result/1 JSON 数据及其方向修正在转换脚本的 VAM_SOURCES 中登记，沿用同一个生成命令。
Duo 的数据入口为 web/duo-data.js（三维开发页使用相同的 scene3d/public/data/duo_data.js 副本），随上述转换命令生成。内屏使用 iPhone Duo 内屏/iPhone Duo 内屏低精度.json，覆盖 12 个方位、0–70°（步长 2°），沿用文件原方位，不套用 iPhone 17 的 180° 修正。原始 JSON 同时保留五档灰阶；当前仿真使用 W/R/G/B 实测通道，文件未测黑场，不合成 K 数据。
外屏目前使用 iPhone 18 Pro Max GH3 的未贴膜 p0 数据，后续以 Duo 外屏实测更新（界面不显示数据来源说明）。内外屏反射光谱 SCI / SCE 与角度散射继续独立留空。
Duo 折叠几何
开合定义为 0° 闭合、180° 展开。固定弯曲截面取自闭合模型的内屏网格，中间开合姿态为几何插值；没有折痕宽度调节项。来源与几何边界见 Duo 几何说明。
调整 Duo 设置画面前，请阅读 UI 设计审阅 Prompt 与对照截图，其中包含真实系统参考、原有 UI、当前候选和用户的账号展示要求。
展开后的残余折痕采用用户指定的代表工况：峰谷高度差 100 µm（0.1 mm）、中央跨轴坡角 1.1°。具体截面用平滑曲线近似，坡角按中央截面切线相对展开基准平面的角度定义；这两项数值并不唯一确定真实截面。屏幕位置与局部法线由同一截面计算，用于各处的离轴角和后续色偏计算。
方向优先按文件名识别；内部旧标签原样保留。当前 120° 文件内部仍有旧的 60° 标签，不能按内部标签覆盖文件名。防窥膜 与普通状态共用机型，原有 iPhone 18 Pro Max 数据标记 GH3。原始文件字节校验记录见 docs/measurement-sources.json。
机型外观参数（尺寸、圆角、开孔、配色）在 web/devices.js 中配置。
目录结构
web/ 网页本体（GitHub Pages 发布这个目录）
scene3d.js 场景演示模式（由 scene3d/ 构建，npm run build:web）
scene3d-person.js 内嵌的人物模型（CC0）
index.html
app.js 界面与交互
model.js 可视角光学模型（插值、色偏、JNCD、ΔE2000）
phone3d.js 手机机身几何与渲染
devices.js 机型外观参数
patterns.js 程序化测试画面
viz.js 观看方向盘与随离轴角变化曲线
data.js 内置测量数据（由 tools/convert_ang2.py 生成）
tools/
convert_ang2.py .ang2 → web/data.js
embed_avatar.py 头像内嵌为 web/avatar.js
scene3d/ 场景演示的源码（Vite + TypeScript + three.js）
docs/ 文献调研笔记
*.ang2 原始测量数据
许可
MIT
