WebGL 跨浏览器追踪技术详解（第二部分）：测试模型与参数选择

前言

本教学文档详细解析了基于 WebGL 的跨浏览器追踪技术中使用的各种测试模型和参数选择策略。这些测试通过渲染不同的 3D 场景和图形，利用不同显卡在渲染时的细微差异来生成设备指纹。

测试任务详解

Task(a) - 纹理测试

目的：测试片段着色器中的常规纹理特征。

实现细节：

• 使用经典的 Suzanne 模型（猴头模型）
• 创建 256×256 像素的随机生成纹理
• 每个像素的 RGB 值随机生成（0-255）
• 选择随机纹理的原因：
  • 比常规纹理具有更多指纹特征
  • 相邻像素间颜色变化大，放大不同显卡在纹理插值算法上的差异

代码模块：

this.testList.push(new TextureTest(
    this.susanVertices, 
    this.susanIndices, 
    this.susanTexCoords, 
    this.texture
));

Task(b) - 渐变测试

目的：测试片段着色器在画布上的渐变特征。

实现细节：

• 在正方体模型的六个面上应用不同的渐变颜色
• 每个面的4个顶点作为颜色出发点
• 刻意选择差异大的渐变颜色：
  • 例如一个顶点蓝色比例0.9，另一个顶点蓝色比例0.1
  • 其他颜色分量相应调整以保持差异

代码模块：

this.testList.push(new CubeTest('normal'));

Task(b') - 抗锯齿与渐变

目的：测试抗锯齿特征，即浏览器如何使模型边缘更加光滑。

实现细节：

• 使用与Task(b)相同的渐变设置
• 加入抗锯齿功能
• 观察模型边缘的柔化效果

代码模块：

this.testList.push(new CubeTest('aa'));

Task(c) - Camera测试

目的：测试投影特性，即片段着色器中的投影矩阵。

实现细节：

• 配置与Task(b)相同
• 将相机位置移动到[-1,-4,-10]
• 观察因相机远离导致的立方体变小效果

代码模块：

this.testList.push(new CameraTest());

Task(d) - 直线与曲线

目的：测试直线和曲线的渲染特征。

实现细节：

• 绘制一条曲线和三条不同角度的直线
• 曲线公式：

  y = 256 - 100cos(2.0πx/100.0) + 30cos(4.0πx/100.0) + 6cos(6.0πx/100.0)
  

• 直线起点和终点：
  • [0,0]到[256,256]
  • [0,256]到[256,0]
  • [0,128]到[256,128]

代码模块：

this.testList.push(new LineTest('normal'));

Task(d') - 抗锯齿与直线曲线

目的：测试抗锯齿对直线和曲线的影响。

实现细节：

• 使用与Task(d)相同的设置
• 加入抗锯齿功能
• 观察边缘柔化效果

代码模块：

this.testList.push(new LineTest('aa'));

Task(e) - 多重模型

目的：测试多个不同模型在同一画布上的相互影响。

实现细节：

• 使用Suzanne模型和"sofa"模型（人倚靠在沙发上的模型）
• 两个模型平行放置
• 对sofa模型也应用Task(a)中的随机生成纹理

代码模块：

this.testList.push(new TextureTest(
    this.combinedVertices, 
    this.combinedIndices, 
    this.combinedTexCoords, 
    this.texture
));

Task(f) - 光线测试

目的：测试漫射点光和Suzanne模型的相互作用。

实现细节：

• 使用白色光源（RGB值相同）
• 每种原光的光功率为2
• 光源位置：[3.0,-4.0,-2.0]
• 选择白光源的原因：
  • 纹理是彩色的，单色光会减少纹理上的差异
• 光线强度选择：
  • 经过实验，功率为2时不同机器间的像素差异最大

代码模块：

this.testList.push(new SimpleLightTest(
    this.susanVertices, 
    this.susanIndices, 
    this.susanTexCoords, 
    this.susanNormals, 
    this.texture
));

Task(g) - 光线与模型

目的：测试漫射点光对多个模型的相互作用及阴影效果。

实现细节：

• 光线配置与Task(f)相同
• 模型配置与Task(e)相同（Suzanne+sofa）
• 观察一个模型在另一个模型上产生的阴影

代码模块：

this.testList.push(new SimpleLightTest(
    this.combinedVertices, 
    this.combinedIndices, 
    this.combinedTexCoords, 
    this.combinedNormals, 
    this.texture
));

Task(h) - 镜面光

目的：测试漫射点光与镜面点光对多个模型的作用。

实现细节：

• 两束光源都位于[0.8,-0.8,-0.8]
• 漫射点光RGB：[0.75,0.75,1.0]（偏蓝）
• 镜面点光RGB：[0.8,0.8,0.8]
• 特殊设置：
  • 相机位置靠近模型以增强效果
  • sofa模型后部被镜面光照射时效果明显

代码模块：

this.testList.push(new MoreLightTest(
    this.combinedVertices, 
    this.combinedIndices, 
    this.combinedTexCoords, 
    this.combinedNormals, 
    this.texture
));

Task(i) - 双纹理

目的：测试对同一对象应用不同纹理的效果。

实现细节：

• 生成另一种随机纹理
• 对Suzanne和sofa模型应用不同的纹理覆盖

代码模块：

this.testList.push(new TwoTexturesMoreLightTest(
    this.combinedVertices, 
    this.combinedIndices, 
    this.combinedTexCoords, 
    this.combinedNormals, 
    this.texture, 
    this.texture1
));

Task(j) - Alpha测试

目的：测试不同alpha值（透明度）的影响。

实现细节：

• 由8个子任务组成
• 使用Suzanne和sofa模型，平行放置（部分重叠）
• 精心选择的alpha值集合：
  • 以0.01为步长的小变化值
  • 观察模型重叠部分的可见性变化

代码模块：

this.testList.push(new TransparentTest(
    this.combinedVertices, 
    this.combinedIndices, 
    this.combinedTexCoords, 
    this.combinedNormals, 
    this.texture
));

Task(k) - 复合光

目的：测试复合光特性（反射光、移动光、追踪光）。

实现细节：

• 生成5000个金属环模型
• 随机角度放置并堆叠在地面上
• 使用固定随机种子保证可重复性
• 两束旋转光源（黄色和红色）从场景右上角照射
• 使用单色光源（模型非彩色）以增强细节

代码模块：

this.testList.push(new LightingTest());

其他渲染任务

Task(l) - 切面测试

this.testList.push(new ClippingTest());

Task(m) - 立方体纹理和菲涅尔效应

this.testList.push(new BubbleTest());

Task(n/o) - DDS与PVR纹理

this.testList.push(new CompressedTextureTest());

Task(p) - 浮点纹理测试

Task(r) - 字符集测试

目的：探测浏览器支持的字符集。

实现方法：

1. 尝试渲染各种字符集的文本
2. 如果字符集被支持，渲染成功
3. 如果不支持，渲染为方块
4. 通过结果判断支持的字符集

技术原理总结

这些测试任务深入研究了图片渲染引擎的特征，通过以下方式生成设备指纹：

1. 间接获取显卡信息：JavaScript无法直接获取显卡设置和驱动信息，但通过渲染相同图片时不同显卡产生的细微差异，可以间接反映硬件特征。

2. 图片哈希作为特征：不同显卡渲染的同一场景会产生微妙的像素级差异，将这些差异转化为哈希值作为特征。

3. 跨浏览器稳定性：同一台机器在不同浏览器中使用相同显卡，因此这些测试具有很高的跨浏览器稳定性。

4. 全面覆盖渲染特性：测试涵盖了纹理、光照、模型交互、透明度、抗锯齿等各类渲染场景，确保捕获全面的特征信息。

通过这套系统化的测试方法，可以有效地生成高熵值的设备指纹，用于跨浏览器追踪和识别。