「ps2mc-browser」着色器代码分析
内容提要
本文介绍ps2mc-browser使用OpenGL着色器渲染PS2存档3D图标：背景着色器渲染背景色与透明度并叠加天空层；图标着色器通过纹理、环境光和漫反射计算颜色，并用插值因子实现动作帧动画；按钮着色器绘制半透明白色按钮，支持鼠标点击切换动作。
延伸解读
背景透明度的实现技巧
文章指出，背景着色器直接渲染icon.sys中的颜色和透明度，但为了视觉上感知透明度，在背景层后添加了skybox层。skybox使用固定灰色(0.6,0.6,0.6,1)，当背景有透明度时，天空层颜色会透出，形成混合效果。这种分层渲染方法简单有效，但skybox颜色固定，可能限制背景表现力。
图标光照与纹理的融合
图标片元着色器将环境光、漫反射光与纹理颜色相乘得到最终颜色。漫反射光由多个光源贡献，每个光源的贡献取决于其方向与法向量的点积。这种计算方式使图标能响应光照，但文章未提及光源的具体数量或类型，实际效果可能受限于光源设置。
动作动画的插值机制
图标顶点着色器使用tweenFactor在相邻动作帧的顶点位置之间插值，实现平滑动画。tweenFactor表示当前时间在本帧与下一帧之间的比例，由程序动态计算。这种插值方法要求动作帧顶点数量一致，否则可能出错。文章未说明如何处理帧间顶点数不同的情况。
按钮交互的简单实现
按钮着色器绘制半透明白色图形，颜色固定为(1,1,1,0.6)，不接受输入。按钮的位置和数量由程序计算后传入。这种实现简单，但按钮形状和样式缺乏灵活性，且未提及点击检测的具体逻辑，可能依赖外部程序处理。
Q&A
ps2mc-browser 是什么？它有什么功能？
ps2mc-browser 是一个 PS2 存档查看器，能够解析 PS2 存档中 3D 图标的顶点和纹理等数据，并通过 OpenGL 将图标渲染出来。
ps2mc-browser 中背景着色器是如何实现背景透明效果的？
背景着色器渲染背景色和透明度，并在背景层后面添加一个 skybox 层（颜色为 (0.6, 0.6, 0.6, 1)）。当背景层有透明度时，天空层的颜色会透过背景层显示出来，从而在视觉上感知透明度。
图标着色器中的 tweenFactor 有什么作用？
tweenFactor 是插值因子，用于在相邻动作帧的顶点坐标之间进行插值。它是 3D 图标实现动画效果的关键，通过在当前顶点位置和下一顶点位置之间按时间因子插值，使动作帧循环播放形成动画。
图标着色器如何计算最终颜色？
图标着色器从纹理中获取颜色，计算漫反射光（每个灯光对漫反射的贡献取决于灯光方向与法向量的夹角，所有灯光贡献相加），然后将环境光和漫反射光与纹理颜色相乘，得到最终颜色。
按钮着色器的作用是什么？它渲染的按钮有什么特点？
按钮着色器负责渲染与鼠标交互的按钮，用于切换存档中角色的不同动作。它绘制的是不完全透明的白色几何图形（颜色为 vec4(1.0, 1.0, 1.0, 0.6)），按钮的数量和坐标由程序计算后传递给着色器。
ps2mc-browser 中一共使用了几个 OpenGL 着色器？分别是什么？
一共使用了六个 OpenGL 着色器，分别是：背景着色器（bg.frag 和 bg.vert）、图标着色器（icon.frag 和 icon.vert）、按钮着色器（circle.frag 和 circle.vert）。
