🎮 3D图形开发 - WEBGL

What is WebGL? How does it differ from traditional 2D Canvas?

考察点：WebGL基础概念。

答案：

WebGL（Web Graphics Library）是一个基于OpenGL ES的JavaScript API，允许在浏览器中进行硬件加速的3D图形渲染。它通过GPU并行计算来实现高性能的2D和3D图形绘制，是现代Web 3D图形技术的核心。

主要区别：

1. 渲染能力：

   • 2D Canvas： 仅支持2D图形绘制，使用CPU进行软件渲染
   • WebGL： 支持2D/3D图形，使用GPU硬件加速渲染

2. 编程模式：

   // 2D Canvas 示例
   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   ctx.fillRect(10, 10, 100, 100);
   
   // WebGL 示例
   const gl = canvas.getContext('webgl');
   const program = createShaderProgram(gl, vertexShader, fragmentShader);
   gl.useProgram(program);
   

3. 性能差异：

   • 2D Canvas： 适合简单图形，复杂动画性能有限
   • WebGL： 可处理大量几何数据，支持复杂特效和实时渲染

适用场景：

• 2D Canvas： 数据可视化、简单游戏、图表绘制
• WebGL： 3D游戏、虚拟现实、复杂可视化、CAD应用

What are the main stages of the WebGL rendering pipeline?

考察点：渲染管线理解。

答案：

WebGL渲染管线是图形数据从输入到最终像素输出的处理流程。它遵循现代GPU的可编程渲染管线架构，主要包括以下阶段：

主要阶段：

1. 顶点处理阶段：

   • 顶点着色器（Vertex Shader）处理每个顶点
   • 执行坐标变换、光照计算等操作
   • 输出顶点在裁剪空间中的位置

2. 图元装配阶段：

   • 将顶点组装成图元（点、线、三角形）
   • 执行裁剪操作，移除视窗外的几何体

3. 光栅化阶段：

   • 将几何图元转换为像素片段
   • 确定哪些像素被图元覆盖
   • 插值顶点属性到各个片段

4. 片段处理阶段：

   • 片段着色器（Fragment Shader）处理每个像素片段
   • 计算最终的像素颜色和透明度

5. 测试与混合阶段：

   • 深度测试、模板测试
   • 颜色混合操作
   • 最终写入帧缓冲区

数据流示例：

顶点数据 → 顶点着色器 → 图元装配 → 光栅化 → 片段着色器 → 帧缓冲区

理解渲染管线有助于优化性能和实现复杂的视觉效果。

What are shaders? What are the roles of vertex shaders and fragment shaders?

考察点：着色器基础概念。

答案：

着色器（Shader）是运行在GPU上的小程序，用GLSL（OpenGL Shading Language）编写。它们是WebGL渲染管线中的可编程阶段，允许开发者自定义图形处理逻辑。

顶点着色器（Vertex Shader）：

处理每个顶点的属性数据，主要职责包括：

• 坐标变换（模型→世界→视图→裁剪空间）
• 顶点光照计算
• 纹理坐标传递
• 自定义顶点属性处理

// 顶点着色器示例
attribute vec3 position;
attribute vec2 texCoord;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec2 vTexCoord;

void main() {
    vTexCoord = texCoord;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片段着色器（Fragment Shader）：

处理每个像素片段，决定最终的像素颜色：

• 纹理采样和颜色计算
• 光照和材质效果
• 特效处理（如雾效、阴影）
• 透明度计算

// 片段着色器示例
precision mediump float;
uniform sampler2D texture;
varying vec2 vTexCoord;

void main() {
    vec4 color = texture2D(texture, vTexCoord);
    gl_FragColor = color;
}

工作流程：

• 顶点着色器按顶点并行执行
• 片段着色器按像素并行执行
• 通过varying变量在两个着色器间传递数据

What is the coordinate system in WebGL? How to perform coordinate transformations?

考察点：坐标系统理解。

答案：

WebGL使用右手坐标系，坐标变换是3D图形渲染的核心。理解坐标系统和变换矩阵对实现正确的3D渲染至关重要。

坐标系统层次：

1. 模型坐标系（Model Space）：

   • 物体自身的本地坐标系
   • 原点通常在物体中心

2. 世界坐标系（World Space）：

   • 场景的全局坐标系
   • 通过模型变换矩阵转换

3. 视图坐标系（View Space）：

   • 以摄像机为中心的坐标系
   • 通过视图变换矩阵转换

4. 裁剪坐标系（Clip Space）：

   • WebGL的标准化设备坐标，范围[-1, 1]
   • 通过投影变换矩阵转换

坐标变换流程：

// 变换矩阵计算
const modelMatrix = mat4.create();
const viewMatrix = mat4.create();
const projectionMatrix = mat4.create();

// 模型变换
mat4.translate(modelMatrix, modelMatrix, [x, y, z]);
mat4.rotate(modelMatrix, modelMatrix, angle, [0, 1, 0]);
mat4.scale(modelMatrix, modelMatrix, [sx, sy, sz]);

// 视图变换
mat4.lookAt(viewMatrix, eyePosition, targetPosition, upVector);

// 投影变换
mat4.perspective(projectionMatrix, fov, aspect, near, far);

// 组合变换矩阵
const mvpMatrix = mat4.create();
mat4.multiply(mvpMatrix, projectionMatrix, viewMatrix);
mat4.multiply(mvpMatrix, mvpMatrix, modelMatrix);

常用变换类型：

• 平移（Translation）： 改变物体位置
• 旋转（Rotation）： 绕轴旋转物体
• 缩放（Scaling）： 改变物体大小
• 透视投影： 3D到2D的投影变换
• 正交投影： 平行投影，常用于UI

实际应用：

• 3D场景导航和摄像机控制
• 物体动画和变形
• 多层级变换（父子关系）

How to draw a simple triangle in WebGL?

考察点：基础绘制能力。

答案：

在WebGL中绘制三角形是最基础的渲染操作，涉及着色器编译、缓冲区创建、属性绑定等核心步骤。

主要步骤：

1. 创建着色器程序：

   // 顶点着色器源码
   const vertexShaderSource = `
     attribute vec2 position;
     void main() {
       gl_Position = vec4(position, 0.0, 1.0);
     }
   `;
   
   // 片段着色器源码
   const fragmentShaderSource = `
     precision mediump float;
     void main() {
       gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
     }
   `;
   

2. 编译和链接着色器：

   function createShader(gl, type, source) {
     const shader = gl.createShader(type);
     gl.shaderSource(shader, source);
     gl.compileShader(shader);
     return shader;
   }
   
   function createProgram(gl, vertexShader, fragmentShader) {
     const program = gl.createProgram();
     gl.attachShader(program, vertexShader);
     gl.attachShader(program, fragmentShader);
     gl.linkProgram(program);
     return program;
   }
   

3. 准备顶点数据：

   // 三角形顶点坐标
   const vertices = new Float32Array([
      0.0,  0.5,  // 顶部
     -0.5, -0.5,  // 左下
      0.5, -0.5   // 右下
   ]);
   
   // 创建缓冲区
   const buffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
   

4. 设置属性和绘制：

   // 使用着色器程序
   gl.useProgram(program);
   
   // 获取属性位置
   const positionLocation = gl.getAttribLocation(program, 'position');
   gl.enableVertexAttribArray(positionLocation);
   gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
   
   // 绘制三角形
   gl.drawArrays(gl.TRIANGLES, 0, 3);
   

完整示例：

// 初始化WebGL上下文并绘制三角形
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
// ... 着色器和缓冲区设置 ...
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

这个过程展示了WebGL渲染的基本流程：着色器→缓冲区→属性→绘制。

What are buffers in WebGL? What types are there?

考察点：缓冲区系统。

答案：

缓冲区（Buffer）是WebGL中存储顶点数据和索引数据的GPU内存对象。它们是CPU和GPU之间数据传输的桥梁，用于高效地向着色器传递大量数据。

缓冲区类型：

1. 顶点缓冲区（Vertex Buffer - ARRAY_BUFFER）：

   // 创建顶点缓冲区
   const vertexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   
   const vertices = new Float32Array([
     // 位置坐标    纹理坐标
     -1.0, -1.0,   0.0, 0.0,
      1.0, -1.0,   1.0, 0.0,
      0.0,  1.0,   0.5, 1.0
   ]);
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
   

2. 索引缓冲区（Index Buffer - ELEMENT_ARRAY_BUFFER）：

   // 创建索引缓冲区
   const indexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
   
   const indices = new Uint16Array([
     0, 1, 2,  // 第一个三角形
     0, 2, 3   // 第二个三角形
   ]);
   gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
   

数据使用模式：

1. gl.STATIC_DRAW： 数据很少改变，适合静态几何体
2. gl.DYNAMIC_DRAW： 数据经常改变，适合动态物体
3. gl.STREAM_DRAW： 数据每帧都改变，适合粒子系统

常见数据类型：

• 位置数据： 顶点的3D坐标
• 法向量： 用于光照计算
• 纹理坐标： UV映射坐标
• 颜色数据： 顶点颜色信息

缓冲区操作流程：

// 1. 创建缓冲区
const buffer = gl.createBuffer();

// 2. 绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// 3. 传输数据
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

// 4. 设置顶点属性指针
gl.vertexAttribPointer(location, size, type, normalized, stride, offset);

// 5. 启用顶点属性
gl.enableVertexAttribArray(location);

性能优化：

• 合理选择数据使用模式
• 减少缓冲区绑定次数
• 使用索引缓冲区减少顶点重复

What are textures? How to use textures in WebGL?

考察点：纹理系统基础。

答案：

纹理（Texture）是WebGL中用于在3D物体表面贴图的2D图像数据。它可以为几何体添加细节、颜色和材质效果，是实现逼真渲染的关键技术。

纹理使用步骤：

1. 创建和配置纹理：

   // 创建纹理对象
   const texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
   
   // 设置纹理参数
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
   

2. 加载纹理图像：

   function loadTexture(gl, url) {
     const texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, texture);
     
     // 创建临时像素
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, 
                   gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 255, 255]));
     
     const image = new Image();
     image.onload = function() {
       gl.bindTexture(gl.TEXTURE_2D, texture);
       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, 
                     gl.UNSIGNED_BYTE, image);
       gl.generateMipmap(gl.TEXTURE_2D);
     };
     image.src = url;
     return texture;
   }
   

3. 在着色器中使用纹理：

   // 顶点着色器
   attribute vec2 position;
   attribute vec2 texCoord;
   varying vec2 vTexCoord;
   
   void main() {
     vTexCoord = texCoord;
     gl_Position = vec4(position, 0.0, 1.0);
   }
   
   // 片段着色器
   precision mediump float;
   uniform sampler2D uTexture;
   varying vec2 vTexCoord;
   
   void main() {
     gl_FragColor = texture2D(uTexture, vTexCoord);
   }
   

纹理参数设置：

1. 包装模式（Wrapping）：

   • gl.REPEAT： 重复纹理
   • gl.CLAMP_TO_EDGE： 边缘拉伸
   • gl.MIRRORED_REPEAT： 镜像重复

2. 过滤模式（Filtering）：

   • gl.NEAREST： 最近邻过滤，像素化效果
   • gl.LINEAR： 线性过滤，平滑效果

常见纹理类型：

• 漫反射纹理： 物体的基本颜色
• 法线贴图： 模拟表面细节
• 高度图： 位移映射
• 环境贴图： 反射和折射效果

性能优化：

• 使用适当的纹理尺寸（2的幂次）
• 启用Mipmap提高远距离渲染质量
• 合理设置过滤模式平衡质量和性能

What are the matrix transformations in WebGL? What are their functions?

考察点：矩阵变换理解。

答案：

矩阵变换是WebGL中实现3D图形变换的数学基础。通过4×4矩阵的线性变换，可以实现物体的移动、旋转、缩放和投影等操作。

主要矩阵变换类型：

1. 模型变换矩阵（Model Matrix）：

   // 平移矩阵
   const translationMatrix = mat4.fromTranslation(mat4.create(), [x, y, z]);
   
   // 旋转矩阵
   const rotationMatrix = mat4.fromRotation(mat4.create(), angle, [0, 1, 0]);
   
   // 缩放矩阵  
   const scaleMatrix = mat4.fromScaling(mat4.create(), [sx, sy, sz]);
   
   // 组合变换矩阵
   const modelMatrix = mat4.create();
   mat4.multiply(modelMatrix, translationMatrix, rotationMatrix);
   mat4.multiply(modelMatrix, modelMatrix, scaleMatrix);
   

2. 视图变换矩阵（View Matrix）：

   // 摄像机视图矩阵
   const viewMatrix = mat4.lookAt(
     mat4.create(),
     [eyeX, eyeY, eyeZ],     // 摄像机位置
     [targetX, targetY, targetZ], // 目标位置
     [upX, upY, upZ]         // 向上方向
   );
   

3. 投影变换矩阵（Projection Matrix）：

   // 透视投影矩阵
   const perspectiveMatrix = mat4.perspective(
     mat4.create(),
     fieldOfView,  // 视野角度
     aspect,       // 宽高比
     nearPlane,    // 近裁剪面
     farPlane      // 远裁剪面
   );
   
   // 正交投影矩阵
   const orthographicMatrix = mat4.ortho(
     mat4.create(),
     left, right, bottom, top, near, far
   );
   

矩阵变换的作用：

1. 平移变换： 改变物体在3D空间中的位置
2. 旋转变换： 绕指定轴旋转物体
3. 缩放变换： 改变物体的大小
4. 复合变换： 多个变换的组合效果

变换应用顺序：

// 标准变换链：模型 → 视图 → 投影
const mvpMatrix = mat4.create();
mat4.multiply(mvpMatrix, projectionMatrix, viewMatrix);
mat4.multiply(mvpMatrix, mvpMatrix, modelMatrix);

// 在顶点着色器中应用
// gl_Position = uMVPMatrix * vec4(position, 1.0);

实际应用场景：

• 游戏开发： 角色移动、摄像机控制
• 数据可视化： 3D图表的交互操作
• 建筑可视化： 场景漫游和视角切换
• 动画系统： 关键帧动画和骨骼动画

性能优化：

• 预计算不变的矩阵
• 使用矩阵栈管理层级变换
• 避免在渲染循环中重复计算

How to handle user interaction events in WebGL?

考察点：交互事件处理。

答案：

WebGL本身不直接提供交互事件处理，需要结合HTML5事件系统和射线检测等技术来实现3D场景中的用户交互。

主要交互事件类型：

1. 鼠标交互事件：

   canvas.addEventListener('mousedown', (event) => {
     const rect = canvas.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = event.clientY - rect.top;
     
     // 将屏幕坐标转换为WebGL坐标
     const normalizedX = (x / canvas.width) * 2 - 1;
     const normalizedY = -((y / canvas.height) * 2 - 1);
     
     handleMouseClick(normalizedX, normalizedY);
   });
   
   canvas.addEventListener('mousemove', handleMouseMove);
   canvas.addEventListener('wheel', handleMouseWheel);
   

2. 触摸交互事件：

   canvas.addEventListener('touchstart', (event) => {
     event.preventDefault();
     const touch = event.touches[0];
     const rect = canvas.getBoundingClientRect();
     const x = touch.clientX - rect.left;
     const y = touch.clientY - rect.top;
     handleTouchStart(x, y);
   });
   
   canvas.addEventListener('touchmove', handleTouchMove);
   canvas.addEventListener('touchend', handleTouchEnd);
   

3D物体选择实现：

1. 射线检测（Ray Casting）：

   function screenToWorldRay(mouseX, mouseY, viewMatrix, projectionMatrix) {
     // 计算射线起点和方向
     const rayStart = vec3.create();
     const rayDirection = vec3.create();
     
     // 屏幕坐标转世界坐标
     const inverseViewProjection = mat4.create();
     mat4.multiply(inverseViewProjection, projectionMatrix, viewMatrix);
     mat4.invert(inverseViewProjection, inverseViewProjection);
     
     // 计算射线
     const nearPoint = vec4.fromValues(mouseX, mouseY, -1, 1);
     const farPoint = vec4.fromValues(mouseX, mouseY, 1, 1);
     
     vec4.transformMat4(nearPoint, nearPoint, inverseViewProjection);
     vec4.transformMat4(farPoint, farPoint, inverseViewProjection);
     
     // 归一化
     vec3.scale(nearPoint, nearPoint, 1/nearPoint[3]);
     vec3.scale(farPoint, farPoint, 1/farPoint[3]);
     
     return { start: nearPoint, direction: rayDirection };
   }
   

2. 包围盒检测：

   function rayIntersectAABB(rayStart, rayDirection, aabbMin, aabbMax) {
     const t1 = vec3.create();
     const t2 = vec3.create();
     
     vec3.subtract(t1, aabbMin, rayStart);
     vec3.divide(t1, t1, rayDirection);
     
     vec3.subtract(t2, aabbMax, rayStart);
     vec3.divide(t2, t2, rayDirection);
     
     const tMin = Math.max(Math.min(t1[0], t2[0]), 
                          Math.min(t1[1], t2[1]), 
                          Math.min(t1[2], t2[2]));
     const tMax = Math.min(Math.max(t1[0], t2[0]), 
                          Math.max(t1[1], t2[1]), 
                          Math.max(t1[2], t2[2]));
     
     return tMax >= 0 && tMin <= tMax;
   }
   

常见交互模式：

1. 摄像机控制：

   • 轨道控制（Orbit Control）
   • 第一人称控制（FPS Control）
   • 飞行控制（Fly Control）

2. 物体操作：

   • 选择和高亮
   • 拖拽移动
   • 旋转和缩放

性能优化：

• 使用空间分割结构（八叉树、BSP树）
• 实现多级细节检测（LOD）
• 批量处理交互事件
• 使用Web Workers处理复杂计算

What is the basic structure of a WebGL program?

考察点：程序结构理解。

答案：

WebGL程序遵循现代图形渲染的标准架构，包含初始化、资源管理、渲染循环等核心模块。理解这个结构有助于构建可维护的3D应用。

基本程序结构：

1. 初始化阶段：

   class WebGLApplication {
     constructor(canvasId) {
       this.canvas = document.getElementById(canvasId);
       this.gl = this.canvas.getContext('webgl');
       
       if (!this.gl) {
         throw new Error('WebGL not supported');
       }
       
       this.initWebGL();
       this.loadResources();
       this.setupScene();
       this.startRenderLoop();
     }
   }
   

2. 着色器管理：

   initWebGL() {
     // 编译着色器
     this.vertexShader = this.compileShader(this.gl.VERTEX_SHADER, vertexSource);
     this.fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentSource);
     
     // 创建程序
     this.program = this.createProgram(this.vertexShader, this.fragmentShader);
     
     // 获取属性和uniform位置
     this.programInfo = {
       attribs: {
         position: this.gl.getAttribLocation(this.program, 'position'),
         normal: this.gl.getAttribLocation(this.program, 'normal'),
         texCoord: this.gl.getAttribLocation(this.program, 'texCoord')
       },
       uniforms: {
         modelViewMatrix: this.gl.getUniformLocation(this.program, 'uModelViewMatrix'),
         projectionMatrix: this.gl.getUniformLocation(this.program, 'uProjectionMatrix'),
         normalMatrix: this.gl.getUniformLocation(this.program, 'uNormalMatrix')
       }
     };
   }
   

3. 资源加载：

   async loadResources() {
     // 加载几何体数据
     this.meshes = await this.loadMeshes();
     
     // 加载纹理资源
     this.textures = await this.loadTextures();
     
     // 创建缓冲区
     this.buffers = this.createBuffers();
   }
   

4. 场景设置：

   setupScene() {
     // 设置视口
     this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
     
     // 启用深度测试
     this.gl.enable(this.gl.DEPTH_TEST);
     
     // 设置清除颜色
     this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
     
     // 初始化摄像机
     this.camera = new Camera();
     
     // 创建场景对象
     this.scene = new Scene();
   }
   

5. 渲染循环：

   startRenderLoop() {
     const render = (currentTime) => {
       this.update(currentTime);
       this.draw();
       requestAnimationFrame(render);
     };
     requestAnimationFrame(render);
   }
   
   update(deltaTime) {
     // 更新动画
     this.updateAnimations(deltaTime);
     
     // 更新物理
     this.updatePhysics(deltaTime);
     
     // 更新摄像机
     this.camera.update();
   }
   
   draw() {
     // 清除画布
     this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
     
     // 使用着色器程序
     this.gl.useProgram(this.program);
     
     // 设置矩阵
     this.setMatrices();
     
     // 绘制场景对象
     this.scene.render(this.gl, this.programInfo);
   }
   

模块化架构：

• 渲染器（Renderer）： 核心渲染逻辑
• 场景管理器（Scene）： 管理3D对象层次
• 摄像机（Camera）： 视图变换控制
• 材质系统（Material）： 着色器和纹理管理
• 几何体（Geometry）： 顶点数据管理
• 资源加载器（Loader）： 异步资源加载

错误处理和调试：

compileShader(type, source) {
  const shader = this.gl.createShader(type);
  this.gl.shaderSource(shader, source);
  this.gl.compileShader(shader);
  
  if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
    const error = this.gl.getShaderInfoLog(shader);
    this.gl.deleteShader(shader);
    throw new Error(`Shader compilation error: ${error}`);
  }
  return shader;
}

这种结构化设计确保了代码的可维护性、扩展性和性能优化。

What is the context creation and initialization process in WebGL?

考察点：上下文管理。

答案：

WebGL上下文创建和初始化是WebGL应用的基础，涉及硬件检测、扩展加载、状态设置等关键步骤。正确的初始化流程确保应用的兼容性和稳定性。

上下文创建流程：

1. 获取WebGL上下文：

   function createWebGLContext(canvas, options = {}) {
     const contextNames = ['webgl2', 'webgl', 'experimental-webgl'];
     let gl = null;
     
     for (const name of contextNames) {
       try {
         gl = canvas.getContext(name, {
           alpha: options.alpha !== false,
           depth: options.depth !== false,
           stencil: options.stencil === true,
           antialias: options.antialias !== false,
           premultipliedAlpha: options.premultipliedAlpha !== false,
           preserveDrawingBuffer: options.preserveDrawingBuffer === true,
           powerPreference: options.powerPreference || 'default'
         });
         if (gl) break;
       } catch (e) {
         console.warn(`Failed to create ${name} context:`, e);
       }
     }
     
     if (!gl) {
       throw new Error('WebGL is not supported');
     }
     return gl;
   }
   

2. 检查WebGL支持和扩展：

   function checkWebGLSupport(gl) {
     // 检查基本WebGL支持
     const supported = {
       webgl2: gl instanceof WebGL2RenderingContext,
       extensions: {},
       limits: {}
     };
     
     // 检查重要扩展
     const extensions = [
       'OES_texture_float',
       'OES_standard_derivatives', 
       'WEBGL_depth_texture',
       'EXT_texture_filter_anisotropic'
     ];
     
     extensions.forEach(name => {
       supported.extensions[name] = gl.getExtension(name);
     });
     
     // 获取WebGL限制参数
     supported.limits = {
       maxTextureSize: gl.getParameter(gl.MAX_TEXTURE_SIZE),
       maxTextureUnits: gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS),
       maxVertexAttribs: gl.getParameter(gl.MAX_VERTEX_ATTRIBS),
       maxVaryingVectors: gl.getParameter(gl.MAX_VARYING_VECTORS),
       maxFragmentUniforms: gl.getParameter(gl.MAX_FRAGMENT_UNIFORM_VECTORS)
     };
     
     return supported;
   }
   

3. 初始化WebGL状态：

   function initializeWebGLState(gl) {
     // 设置视口
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
     
     // 启用深度测试
     gl.enable(gl.DEPTH_TEST);
     gl.depthFunc(gl.LEQUAL);
     
     // 启用背面剔除
     gl.enable(gl.CULL_FACE);
     gl.cullFace(gl.BACK);
     
     // 设置混合模式
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
     
     // 设置清除颜色
     gl.clearColor(0.0, 0.0, 0.0, 1.0);
     gl.clearDepth(1.0);
     
     // 设置像素存储参数
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
   }
   

上下文丢失处理：

function setupContextLossHandling(canvas, gl) {
  canvas.addEventListener('webglcontextlost', (event) => {
    event.preventDefault();
    console.warn('WebGL context lost');
    // 停止渲染循环
    cancelAnimationFrame(renderLoop);
  });
  
  canvas.addEventListener('webglcontextrestored', () => {
    console.log('WebGL context restored');
    // 重新初始化资源
    reinitializeWebGL();
    // 重启渲染循环
    startRenderLoop();
  });
}

性能优化配置：

const optimizedContextOptions = {
  alpha: false,                    // 禁用alpha通道提高性能
  depth: true,                     // 启用深度缓冲
  stencil: false,                  // 根据需要启用模板缓冲
  antialias: false,                // 禁用抗锯齿提高性能
  premultipliedAlpha: false,       // 避免预乘alpha
  preserveDrawingBuffer: false,    // 不保留绘制缓冲
  powerPreference: 'high-performance' // 优先使用高性能GPU
};

错误处理和调试：

• 检查WebGL错误状态
• 验证着色器编译状态
• 监控上下文丢失事件
• 记录硬件和驱动信息

正确的初始化流程是WebGL应用稳定运行的基础，需要考虑各种边界情况和性能优化。

How to implement lighting effects for 3D objects in WebGL?

考察点：光照系统实现。

答案：

WebGL中的光照效果是通过着色器计算实现的，基于物理光照模型来模拟真实世界中光与物体表面的交互。主要包括环境光、漫反射和镜面反射等组件。

基础光照模型（Phong光照）：

1. 顶点着色器 - 计算光照向量：

   attribute vec3 aPosition;
   attribute vec3 aNormal;
   attribute vec2 aTexCoord;
   
   uniform mat4 uModelMatrix;
   uniform mat4 uViewMatrix;
   uniform mat4 uProjectionMatrix;
   uniform mat3 uNormalMatrix;
   uniform vec3 uLightPosition;
   
   varying vec3 vNormal;
   varying vec3 vLightDirection;
   varying vec3 vViewDirection;
   varying vec2 vTexCoord;
   
   void main() {
     vec4 worldPosition = uModelMatrix * vec4(aPosition, 1.0);
     vec4 viewPosition = uViewMatrix * worldPosition;
     
     vNormal = normalize(uNormalMatrix * aNormal);
     vLightDirection = normalize(uLightPosition - worldPosition.xyz);
     vViewDirection = normalize(-viewPosition.xyz);
     vTexCoord = aTexCoord;
     
     gl_Position = uProjectionMatrix * viewPosition;
   }
   

2. 片段着色器 - 光照计算：

   precision mediump float;
   
   uniform vec3 uLightColor;
   uniform vec3 uAmbientColor;
   uniform vec3 uMaterialColor;
   uniform float uShininess;
   uniform sampler2D uTexture;
   
   varying vec3 vNormal;
   varying vec3 vLightDirection;
   varying vec3 vViewDirection;
   varying vec2 vTexCoord;
   
   void main() {
     vec3 normal = normalize(vNormal);
     vec3 lightDir = normalize(vLightDirection);
     vec3 viewDir = normalize(vViewDirection);
     
     // 环境光分量
     vec3 ambient = uAmbientColor;
     
     // 漫反射分量
     float diffuseStrength = max(dot(normal, lightDir), 0.0);
     vec3 diffuse = diffuseStrength * uLightColor;
     
     // 镜面反射分量
     vec3 reflectDir = reflect(-lightDir, normal);
     float specularStrength = pow(max(dot(viewDir, reflectDir), 0.0), uShininess);
     vec3 specular = specularStrength * uLightColor;
     
     // 纹理颜色
     vec3 textureColor = texture2D(uTexture, vTexCoord).rgb;
     
     // 最终颜色
     vec3 finalColor = (ambient + diffuse + specular) * textureColor * uMaterialColor;
     gl_FragColor = vec4(finalColor, 1.0);
   }
   

多光源支持：

// JavaScript中管理多个光源
class LightingSystem {
  constructor() {
    this.lights = [];
    this.maxLights = 8;
  }
  
  addLight(type, position, color, intensity) {
    if (this.lights.length >= this.maxLights) return;
    
    this.lights.push({
      type: type,        // 'directional', 'point', 'spot'
      position: position,
      color: color,
      intensity: intensity,
      direction: [0, -1, 0],  // for directional/spot lights
      cutoff: 30.0            // for spot lights
    });
  }
  
  updateUniforms(gl, program) {
    const lightCount = Math.min(this.lights.length, this.maxLights);
    gl.uniform1i(gl.getUniformLocation(program, 'uLightCount'), lightCount);
    
    for (let i = 0; i < lightCount; i++) {
      const light = this.lights[i];
      const prefix = `uLights[${i}]`;
      
      gl.uniform3fv(gl.getUniformLocation(program, `${prefix}.position`), light.position);
      gl.uniform3fv(gl.getUniformLocation(program, `${prefix}.color`), light.color);
      gl.uniform1f(gl.getUniformLocation(program, `${prefix}.intensity`), light.intensity);
    }
  }
}

高级光照技术：

1. 法线贴图（Normal Mapping）：

   // 在片段着色器中使用法线贴图
   vec3 normalMap = texture2D(uNormalTexture, vTexCoord).rgb * 2.0 - 1.0;
   vec3 tangent = normalize(vTangent);
   vec3 bitangent = cross(normal, tangent);
   mat3 TBN = mat3(tangent, bitangent, normal);
   vec3 perturbedNormal = normalize(TBN * normalMap);
   

2. 衰减光照（Light Attenuation）：

   float distance = length(uLightPosition - vWorldPosition);
   float attenuation = 1.0 / (1.0 + 0.09 * distance + 0.032 * distance * distance);
   vec3 lightColor = uLightColor * attenuation;
   

常见光照类型：

• 方向光（Directional Light）： 模拟太阳光等平行光源
• 点光源（Point Light）： 模拟灯泡等点状光源
• 聚光灯（Spot Light）： 模拟手电筒等锥形光源
• 环境光（Ambient Light）： 模拟环境的基础光照

性能优化：

• 在顶点着色器中计算光照（Gouraud着色）
• 使用光照贴图预计算静态光照
• 实现延迟渲染处理大量光源
• 使用球谐光照近似环境光

How do depth testing and blending work in WebGL?

考察点：渲染状态管理。

答案：

深度测试和混合是WebGL渲染管线中的重要阶段，用于处理像素深度关系和透明度效果。正确理解和配置这些机制对实现正确的3D渲染效果至关重要。

深度测试（Depth Testing）：

深度测试确保正确的前后遮挡关系，通过比较像素的深度值来决定是否绘制该像素。

1. 启用和配置深度测试：

   // 启用深度测试
   gl.enable(gl.DEPTH_TEST);
   
   // 设置深度函数
   gl.depthFunc(gl.LEQUAL);  // 小于等于通过测试
   
   // 设置深度缓冲区写入
   gl.depthMask(true);  // 允许写入深度缓冲区
   
   // 清除深度缓冲区
   gl.clearDepth(1.0);
   gl.clear(gl.DEPTH_BUFFER_BIT);
   

2. 深度函数类型：

   // 常用深度函数
   gl.depthFunc(gl.NEVER);     // 从不通过
   gl.depthFunc(gl.LESS);      // 小于通过
   gl.depthFunc(gl.EQUAL);     // 等于通过
   gl.depthFunc(gl.LEQUAL);    // 小于等于通过（默认）
   gl.depthFunc(gl.GREATER);   // 大于通过
   gl.depthFunc(gl.NOTEQUAL);  // 不等于通过
   gl.depthFunc(gl.GEQUAL);    // 大于等于通过
   gl.depthFunc(gl.ALWAYS);    // 总是通过
   

颜色混合（Blending）：

混合用于处理透明和半透明效果，通过组合源颜色和目标颜色来产生最终像素颜色。

1. 启用和配置混合：

   // 启用混合
   gl.enable(gl.BLEND);
   
   // 设置混合函数
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   
   // 设置混合方程
   gl.blendEquation(gl.FUNC_ADD);
   
   // 分别设置RGB和Alpha混合
   gl.blendFuncSeparate(
     gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA,  // RGB混合
     gl.ONE, gl.ONE_MINUS_SRC_ALPHA          // Alpha混合
   );
   

2. 常见混合模式：

   // 标准透明混合
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   
   // 加法混合（发光效果）
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
   
   // 乘法混合（阴影效果）
   gl.blendFunc(gl.DST_COLOR, gl.ZERO);
   
   // 屏幕混合（亮化效果）
   gl.blendFunc(gl.ONE_MINUS_DST_COLOR, gl.ONE);
   

透明渲染的正确顺序：

function renderTransparentObjects(objects) {
  // 1. 先渲染所有不透明物体
  gl.enable(gl.DEPTH_TEST);
  gl.depthMask(true);
  gl.disable(gl.BLEND);
  
  objects.opaque.forEach(obj => obj.render());
  
  // 2. 按距离排序透明物体（从远到近）
  objects.transparent.sort((a, b) => {
    return b.distanceToCamera - a.distanceToCamera;
  });
  
  // 3. 渲染透明物体
  gl.enable(gl.BLEND);
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  gl.depthMask(false);  // 禁止写入深度缓冲区
  
  objects.transparent.forEach(obj => obj.render());
  
  // 4. 恢复深度写入
  gl.depthMask(true);
}

模板测试（Stencil Testing）：

模板测试提供额外的逐像素控制，常用于实现复杂的渲染效果。

// 启用模板测试
gl.enable(gl.STENCIL_TEST);

// 设置模板函数
gl.stencilFunc(gl.EQUAL, 1, 0xFF);

// 设置模板操作
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);

// 清除模板缓冲区
gl.clearStencil(0);
gl.clear(gl.STENCIL_BUFFER_BIT);

高级渲染技术：

1. 深度剥离（Depth Peeling）：
   用于正确渲染多层透明物体

2. Order-Independent Transparency：
   解决透明物体排序问题的高级技术

3. Early Z-Testing：
   在片段着色器执行前进行深度测试优化

性能优化技巧：

• 合理组织渲染顺序（先不透明后透明）
• 避免不必要的状态切换
• 使用深度预通道减少过度绘制
• 合理设置深度范围提高精度

正确配置深度测试和混合是实现高质量3D渲染的基础。

How to optimize the performance of WebGL applications? What are the common optimization techniques?

考察点：性能优化策略。

答案：

WebGL性能优化是确保3D应用流畅运行的关键。优化需要从CPU和GPU两个维度考虑，涉及渲染管线的各个环节。

CPU端优化策略：

1. 减少Draw Calls：

   // 批处理渲染 - 合并多个物体到一个缓冲区
   class BatchRenderer {
     constructor(gl) {
       this.gl = gl;
       this.vertices = [];
       this.indices = [];
       this.maxVertices = 65536;
     }
     
     addMesh(mesh, transform) {
       if (this.vertices.length + mesh.vertices.length > this.maxVertices) {
         this.flush();
       }
       
       // 应用变换并添加到批处理缓冲区
       const transformedVertices = this.transformVertices(mesh.vertices, transform);
       this.vertices.push(...transformedVertices);
       this.indices.push(...mesh.indices.map(i => i + this.currentVertexCount));
       this.currentVertexCount += mesh.vertices.length / 3;
     }
     
     flush() {
       if (this.vertices.length === 0) return;
       
       // 一次性绘制所有批处理的几何体
       this.updateBuffers();
       this.gl.drawElements(this.gl.TRIANGLES, this.indices.length, 
                           this.gl.UNSIGNED_SHORT, 0);
       this.clear();
     }
   }
   

2. 实例化渲染：

   // 使用WebGL扩展进行实例化渲染
   const instanceExt = gl.getExtension('ANGLE_instanced_arrays');
   
   // 设置实例属性
   gl.bindBuffer(gl.ARRAY_BUFFER, instanceMatrixBuffer);
   for (let i = 0; i < 4; i++) {
     gl.enableVertexAttribArray(matrixLocation + i);
     gl.vertexAttribPointer(matrixLocation + i, 4, gl.FLOAT, false, 64, i * 16);
     instanceExt.vertexAttribDivisorANGLE(matrixLocation + i, 1);
   }
   
   // 实例化绘制
   instanceExt.drawArraysInstancedANGLE(gl.TRIANGLES, 0, vertexCount, instanceCount);
   

3. 视锥体裁剪（Frustum Culling）：

   class FrustumCuller {
     constructor(camera) {
       this.camera = camera;
       this.frustumPlanes = new Array(6);
     }
     
     updateFrustum() {
       const viewProjectionMatrix = mat4.create();
       mat4.multiply(viewProjectionMatrix, this.camera.projectionMatrix, this.camera.viewMatrix);
       
       // 提取6个裁剪平面
       this.extractPlanes(viewProjectionMatrix);
     }
     
     isVisible(boundingBox) {
       for (const plane of this.frustumPlanes) {
         if (this.distanceToPlane(boundingBox, plane) < 0) {
           return false;
         }
       }
       return true;
     }
   }
   

GPU端优化策略：

1. 纹理优化：

   // 纹理图集减少纹理切换
   class TextureAtlas {
     constructor(gl, size = 1024) {
       this.gl = gl;
       this.size = size;
       this.texture = this.createAtlasTexture();
       this.regions = new Map();
       this.packer = new RectanglePacker(size, size);
     }
     
     addTexture(name, image) {
       const region = this.packer.pack(image.width, image.height);
       if (region) {
         this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
         this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 
                              region.x, region.y, 
                              this.gl.RGBA, this.gl.UNSIGNED_BYTE, image);
         
         this.regions.set(name, {
           x: region.x / this.size,
           y: region.y / this.size,
           width: region.width / this.size,
           height: region.height / this.size
         });
       }
     }
   }
   

2. LOD（Level of Detail）系统：

   class LODManager {
     constructor() {
       this.lodLevels = [
         { distance: 50, meshIndex: 0 },   // 高精度模型
         { distance: 200, meshIndex: 1 },  // 中精度模型
         { distance: 500, meshIndex: 2 },  // 低精度模型
         { distance: Infinity, meshIndex: 3 } // 极简模型
       ];
     }
     
     selectLOD(object, cameraPosition) {
       const distance = vec3.distance(object.position, cameraPosition);
       
       for (const level of this.lodLevels) {
         if (distance < level.distance) {
           return object.meshes[level.meshIndex];
         }
       }
       return object.meshes[this.lodLevels.length - 1].meshIndex;
     }
   }
   

着色器优化：

1. 精度优化：

   // 使用适当的精度修饰符
   precision mediump float;  // 对大多数计算足够
   precision lowp float;     // 用于颜色等不需要高精度的数据
   precision highp float;    // 仅在必要时使用
   
   // 避免复杂的数学运算
   float fastLength = dot(v, v);  // 使用平方长度代替长度
   float invSqrt = inversesqrt(dot(v, v));  // 快速归一化
   

2. 分支优化：

   // 避免动态分支，使用混合代替
   // 不好的做法
   if (useTexture) {
     color = texture2D(sampler, uv);
   } else {
     color = materialColor;
   }
   
   // 优化的做法
   vec4 texColor = texture2D(sampler, uv);
   color = mix(materialColor, texColor, useTexture);
   

内存管理优化：

class ResourceManager {
  constructor(gl) {
    this.gl = gl;
    this.textures = new Map();
    this.buffers = new Map();
    this.memoryUsage = 0;
    this.maxMemory = 256 * 1024 * 1024; // 256MB
  }
  
  createTexture(name, width, height, format) {
    // 检查内存使用
    const size = width * height * this.getBytesPerPixel(format);
    if (this.memoryUsage + size > this.maxMemory) {
      this.freeOldestTexture();
    }
    
    const texture = this.gl.createTexture();
    this.textures.set(name, { texture, size, lastUsed: Date.now() });
    this.memoryUsage += size;
    return texture;
  }
  
  freeOldestTexture() {
    // 释放最久未使用的纹理
    let oldest = null;
    let oldestTime = Date.now();
    
    for (const [name, data] of this.textures) {
      if (data.lastUsed < oldestTime) {
        oldest = name;
        oldestTime = data.lastUsed;
      }
    }
    
    if (oldest) {
      this.deleteTexture(oldest);
    }
  }
}

性能监控工具：

class PerformanceMonitor {
  constructor() {
    this.frameCount = 0;
    this.lastTime = performance.now();
    this.fps = 0;
    this.frameTime = 0;
  }
  
  update() {
    this.frameCount++;
    const currentTime = performance.now();
    this.frameTime = currentTime - this.lastTime;
    
    if (this.frameCount % 60 === 0) {
      this.fps = 1000 / (this.frameTime / 60);
      console.log(`FPS: ${this.fps.toFixed(2)}, Frame Time: ${this.frameTime.toFixed(2)}ms`);
    }
    
    this.lastTime = currentTime;
  }
}

常见优化检查清单：

• 减少Draw Calls和状态切换
• 使用适当的数据类型和精度
• 实现几何体和纹理的LOD系统
• 启用背面剔除和深度测试优化
• 合理使用纹理压缩格式
• 实现对象池避免频繁内存分配

How to implement multi-texturing and texture mapping in WebGL?

考察点：高级纹理技术。

答案：

多纹理和纹理映射是WebGL中实现复杂材质效果的重要技术。通过组合多个纹理，可以创建丰富的视觉效果，如法线贴图、环境映射和多层材质。

多纹理绑定和使用：

1. 设置多个纹理单元：

   // 激活并绑定多个纹理单元
   function bindMultipleTextures(gl, textures, program) {
     // 漫反射纹理
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, textures.diffuse);
     gl.uniform1i(gl.getUniformLocation(program, 'uDiffuseMap'), 0);
     
     // 法线贴图
     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, textures.normal);
     gl.uniform1i(gl.getUniformLocation(program, 'uNormalMap'), 1);
     
     // 镜面反射贴图
     gl.activeTexture(gl.TEXTURE2);
     gl.bindTexture(gl.TEXTURE_2D, textures.specular);
     gl.uniform1i(gl.getUniformLocation(program, 'uSpecularMap'), 2);
     
     // 环境贴图
     gl.activeTexture(gl.TEXTURE3);
     gl.bindTexture(gl.TEXTURE_CUBE_MAP, textures.environment);
     gl.uniform1i(gl.getUniformLocation(program, 'uEnvironmentMap'), 3);
   }
   

2. 着色器中的多纹理采样：

   // 片段着色器 - 多纹理材质
   precision mediump float;
   
   uniform sampler2D uDiffuseMap;
   uniform sampler2D uNormalMap;
   uniform sampler2D uSpecularMap;
   uniform samplerCube uEnvironmentMap;
   
   varying vec2 vTexCoord;
   varying vec3 vNormal;
   varying vec3 vTangent;
   varying vec3 vBitangent;
   varying vec3 vViewDirection;
   varying vec3 vReflectDirection;
   
   void main() {
     // 漫反射颜色
     vec3 diffuseColor = texture2D(uDiffuseMap, vTexCoord).rgb;
     
     // 法线贴图处理
     vec3 normalMap = texture2D(uNormalMap, vTexCoord).rgb * 2.0 - 1.0;
     mat3 TBN = mat3(normalize(vTangent), normalize(vBitangent), normalize(vNormal));
     vec3 normal = normalize(TBN * normalMap);
     
     // 镜面反射强度
     float specularStrength = texture2D(uSpecularMap, vTexCoord).r;
     
     // 环境反射
     vec3 environmentColor = textureCube(uEnvironmentMap, vReflectDirection).rgb;
     
     // 组合最终颜色
     vec3 finalColor = diffuseColor + specularStrength * environmentColor;
     gl_FragColor = vec4(finalColor, 1.0);
   }
   

常见纹理映射技术：

1. 平面映射（Planar Mapping）：

   // 根据世界坐标计算纹理坐标
   vec2 planarMapping(vec3 worldPos, vec3 planeNormal) {
     vec3 tangent = normalize(cross(planeNormal, vec3(0.0, 1.0, 0.0)));
     vec3 bitangent = cross(planeNormal, tangent);
     
     float u = dot(worldPos, tangent);
     float v = dot(worldPos, bitangent);
     return vec2(u, v);
   }
   

2. 球面映射（Spherical Mapping）：

   // 球面环境映射
   vec2 sphericalMapping(vec3 normal) {
     float u = atan(normal.z, normal.x) / (2.0 * 3.14159) + 0.5;
     float v = asin(normal.y) / 3.14159 + 0.5;
     return vec2(u, v);
   }
   

3. 立方体映射（Cube Mapping）：

   // 创建立方体贴图
   function createCubeMap(gl, images) {
     const texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
     
     const faces = [
       gl.TEXTURE_CUBE_MAP_POSITIVE_X, // 右
       gl.TEXTURE_CUBE_MAP_NEGATIVE_X, // 左
       gl.TEXTURE_CUBE_MAP_POSITIVE_Y, // 上
       gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, // 下
       gl.TEXTURE_CUBE_MAP_POSITIVE_Z, // 前
       gl.TEXTURE_CUBE_MAP_NEGATIVE_Z  // 后
     ];
     
     faces.forEach((face, index) => {
       gl.texImage2D(face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, images[index]);
     });
     
     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     
     return texture;
   }
   

高级纹理技术：

1. 程序纹理生成：

   // 在着色器中生成程序纹理
   float checkerboard(vec2 uv, float frequency) {
     vec2 grid = floor(uv * frequency);
     float checker = mod(grid.x + grid.y, 2.0);
     return checker;
   }
   
   float noise(vec2 uv) {
     return fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453);
   }
   

2. 纹理动画：

   // 纹理滚动动画
   class TextureAnimator {
     constructor() {
       this.scrollSpeed = 0.01;
       this.offset = [0, 0];
     }
     
     update(deltaTime) {
       this.offset[0] += this.scrollSpeed * deltaTime;
       this.offset[1] += this.scrollSpeed * deltaTime;
       
       // 防止精度问题
       if (this.offset[0] > 1.0) this.offset[0] -= 1.0;
       if (this.offset[1] > 1.0) this.offset[1] -= 1.0;
     }
     
     updateUniforms(gl, program) {
       gl.uniform2fv(gl.getUniformLocation(program, 'uTextureOffset'), this.offset);
     }
   }
   

纹理压缩和优化：

// 使用压缩纹理格式
function loadCompressedTexture(gl, url, format) {
  const texture = gl.createTexture();
  
  fetch(url)
    .then(response => response.arrayBuffer())
    .then(data => {
      gl.bindTexture(gl.TEXTURE_2D, texture);
      
      // 检查压缩格式支持
      const extension = gl.getExtension('WEBGL_compressed_texture_s3tc');
      if (extension && format === 'DXT1') {
        gl.compressedTexImage2D(gl.TEXTURE_2D, 0, 
                               extension.COMPRESSED_RGBA_S3TC_DXT1_EXT, 
                               width, height, 0, new Uint8Array(data));
      }
      
      gl.generateMipmap(gl.TEXTURE_2D);
    });
    
  return texture;
}

性能优化建议：

• 合理设置纹理过滤模式
• 使用纹理图集减少纹理切换
• 启用Mipmap提高渲染质量和性能
• 选择合适的纹理格式和压缩
• 实现纹理流送系统处理大量纹理

多纹理技术为WebGL应用提供了丰富的视觉表现力，是现代3D渲染的基础。

What are framebuffers? How to use them?

考察点：帧缓冲区应用。

答案：

帧缓冲区（Framebuffer）是WebGL中用于离屏渲染的重要概念。它允许将渲染结果输出到纹理而不是屏幕，从而实现后期处理、阴影映射、反射等高级渲染技术。

帧缓冲区基本概念：

帧缓冲区是一个容器，可以包含多个附件（attachments）：

• 颜色附件（Color Attachments）：存储颜色数据
• 深度附件（Depth Attachment）：存储深度信息
• 模板附件（Stencil Attachment）：存储模板数据

创建和配置帧缓冲区：

function createFramebuffer(gl, width, height) {
  // 创建帧缓冲区对象
  const framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  
  // 创建颜色纹理附件
  const colorTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, colorTexture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, 
                gl.RGBA, gl.UNSIGNED_BYTE, null);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  
  // 附加颜色纹理到帧缓冲区
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, 
                         gl.TEXTURE_2D, colorTexture, 0);
  
  // 创建深度渲染缓冲区
  const depthBuffer = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, 
                            gl.RENDERBUFFER, depthBuffer);
  
  // 检查帧缓冲区完整性
  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  if (status !== gl.FRAMEBUFFER_COMPLETE) {
    throw new Error(`Framebuffer not complete: ${status}`);
  }
  
  // 恢复默认帧缓冲区
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  
  return {
    framebuffer: framebuffer,
    colorTexture: colorTexture,
    depthBuffer: depthBuffer,
    width: width,
    height: height
  };
}

使用帧缓冲区进行离屏渲染：

function renderToFramebuffer(gl, framebufferData, renderFunction) {
  // 绑定帧缓冲区
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebufferData.framebuffer);
  
  // 设置视口
  gl.viewport(0, 0, framebufferData.width, framebufferData.height);
  
  // 清除帧缓冲区
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
  // 执行渲染
  renderFunction();
  
  // 恢复默认帧缓冲区
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
}

多重渲染目标（MRT）：

// WebGL2中支持多个颜色附件
function createMRTFramebuffer(gl, width, height) {
  const framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  
  const colorTextures = [];
  const drawBuffers = [];
  
  // 创建多个颜色附件
  for (let i = 0; i < 4; i++) {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, 
                  gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, 
                           gl.TEXTURE_2D, texture, 0);
    
    colorTextures.push(texture);
    drawBuffers.push(gl.COLOR_ATTACHMENT0 + i);
  }
  
  // 设置绘制缓冲区
  gl.drawBuffers(drawBuffers);
  
  return { framebuffer, colorTextures };
}

常见应用场景：

1. 后期处理效果：

   class PostProcessing {
     constructor(gl, width, height) {
       this.gl = gl;
       this.framebuffer = createFramebuffer(gl, width, height);
       this.blurShader = createBlurShader(gl);
     }
     
     applyBlur(sceneTexture) {
       // 第一遍：水平模糊
       this.renderToFramebuffer(() => {
         this.gl.useProgram(this.blurShader);
         this.gl.uniform2f(this.gl.getUniformLocation(this.blurShader, 'uDirection'), 1.0, 0.0);
         this.drawFullscreenQuad(sceneTexture);
       });
       
       // 第二遍：垂直模糊
       this.renderToFramebuffer(() => {
         this.gl.uniform2f(this.gl.getUniformLocation(this.blurShader, 'uDirection'), 0.0, 1.0);
         this.drawFullscreenQuad(this.framebuffer.colorTexture);
       });
     }
   }
   

2. 阴影映射：

   function createShadowMap(gl, size) {
     const framebuffer = gl.createFramebuffer();
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
     
     // 创建深度纹理
     const depthTexture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, depthTexture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, size, size, 0, 
                   gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
     
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, 
                            gl.TEXTURE_2D, depthTexture, 0);
     
     // 禁用颜色输出
     gl.drawBuffers([gl.NONE]);
     gl.readBuffer(gl.NONE);
     
     return { framebuffer, depthTexture };
   }
   

3. 环境映射：

   function renderToCubemap(gl, size, position, renderScene) {
     const cubemapFaces = [
       { target: gl.TEXTURE_CUBE_MAP_POSITIVE_X, up: [0, -1, 0], dir: [1, 0, 0] },
       { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, up: [0, -1, 0], dir: [-1, 0, 0] },
       { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, up: [0, 0, 1], dir: [0, 1, 0] },
       { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, up: [0, 0, -1], dir: [0, -1, 0] },
       { target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, up: [0, -1, 0], dir: [0, 0, 1] },
       { target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, up: [0, -1, 0], dir: [0, 0, -1] }
     ];
     
     const framebuffer = createFramebuffer(gl, size, size);
     
     for (const face of cubemapFaces) {
       // 设置摄像机朝向当前面
       const viewMatrix = mat4.lookAt(mat4.create(), position, 
                                     vec3.add(vec3.create(), position, face.dir), 
                                     face.up);
       
       // 渲染到帧缓冲区
       renderToFramebuffer(gl, framebuffer, () => {
         renderScene(viewMatrix);
       });
       
       // 复制到立方体贴图的对应面
       gl.copyTexSubImage2D(face.target, 0, 0, 0, 0, 0, size, size);
     }
   }
   

性能优化建议：

• 合理选择帧缓冲区尺寸
• 重用帧缓冲区对象避免频繁创建
• 使用合适的纹理格式和精度
• 避免不必要的帧缓冲区切换

帧缓冲区是实现高级渲染效果的基础工具，掌握其使用方法对开发复杂3D应用至关重要。

How to implement shadow effects in WebGL?

考察点：阴影渲染技术。

答案：

阴影效果是增强3D场景真实感的重要技术。WebGL中主要通过阴影贴图（Shadow Mapping）技术来实现实时阴影效果。

阴影贴图基本原理：

阴影贴图是一种两遍渲染技术：

1. 第一遍：从光源视角渲染场景，生成深度贴图
2. 第二遍：从摄像机视角渲染，比较像素深度判断是否在阴影中

实现步骤：

1. 创建阴影贴图帧缓冲区：

   function createShadowMapFramebuffer(gl, size = 1024) {
     const framebuffer = gl.createFramebuffer();
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
     
     // 创建深度纹理
     const shadowTexture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, shadowTexture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, size, size, 0, 
                   gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
     
     // 设置纹理参数
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     
     // 附加深度纹理
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, 
                            gl.TEXTURE_2D, shadowTexture, 0);
     
     // 检查完整性
     if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
       throw new Error('Shadow map framebuffer not complete');
     }
     
     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     return { framebuffer, shadowTexture, size };
   }
   

2. 阴影贴图生成着色器：

   // 顶点着色器 - 生成阴影贴图
   attribute vec3 aPosition;
   uniform mat4 uLightViewProjectionMatrix;
   uniform mat4 uModelMatrix;
   
   void main() {
     gl_Position = uLightViewProjectionMatrix * uModelMatrix * vec4(aPosition, 1.0);
   }
   
   // 片段着色器 - 生成阴影贴图
   precision mediump float;
   
   void main() {
     // WebGL会自动写入深度值到深度缓冲区
     gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
   }
   

3. 阴影接收着色器：

   // 顶点着色器 - 阴影接收
   attribute vec3 aPosition;
   attribute vec3 aNormal;
   attribute vec2 aTexCoord;
   
   uniform mat4 uModelMatrix;
   uniform mat4 uViewMatrix;
   uniform mat4 uProjectionMatrix;
   uniform mat4 uLightViewProjectionMatrix;
   uniform mat3 uNormalMatrix;
   
   varying vec3 vWorldPosition;
   varying vec3 vNormal;
   varying vec2 vTexCoord;
   varying vec4 vLightSpacePosition;
   
   void main() {
     vec4 worldPosition = uModelMatrix * vec4(aPosition, 1.0);
     vWorldPosition = worldPosition.xyz;
     vNormal = normalize(uNormalMatrix * aNormal);
     vTexCoord = aTexCoord;
     vLightSpacePosition = uLightViewProjectionMatrix * worldPosition;
     
     gl_Position = uProjectionMatrix * uViewMatrix * worldPosition;
   }
   
   // 片段着色器 - 阴影接收
   precision mediump float;
   
   uniform sampler2D uDiffuseTexture;
   uniform sampler2D uShadowMap;
   uniform vec3 uLightDirection;
   uniform vec3 uLightColor;
   uniform vec3 uAmbientColor;
   
   varying vec3 vWorldPosition;
   varying vec3 vNormal;
   varying vec2 vTexCoord;
   varying vec4 vLightSpacePosition;
   
   float calculateShadow(vec4 lightSpacePos) {
     // 透视除法
     vec3 projCoords = lightSpacePos.xyz / lightSpacePos.w;
     
     // 转换到[0,1]范围
     projCoords = projCoords * 0.5 + 0.5;
     
     // 超出范围不产生阴影
     if (projCoords.z > 1.0 || projCoords.x < 0.0 || projCoords.x > 1.0 || 
         projCoords.y < 0.0 || projCoords.y > 1.0) {
       return 0.0;
     }
     
     // 获取最近深度值
     float closestDepth = texture2D(uShadowMap, projCoords.xy).r;
     
     // 当前片段深度
     float currentDepth = projCoords.z;
     
     // 偏移解决阴影失真
     float bias = 0.005;
     
     // 阴影计算
     float shadow = currentDepth - bias > closestDepth ? 1.0 : 0.0;
     
     return shadow;
   }
   
   void main() {
     vec3 normal = normalize(vNormal);
     vec3 lightDir = normalize(-uLightDirection);
     
     // 漫反射光照
     float diff = max(dot(normal, lightDir), 0.0);
     vec3 diffuse = diff * uLightColor;
     
     // 计算阴影
     float shadow = calculateShadow(vLightSpacePosition);
     vec3 lighting = uAmbientColor + (1.0 - shadow) * diffuse;
     
     vec3 color = texture2D(uDiffuseTexture, vTexCoord).rgb;
     gl_FragColor = vec4(color * lighting, 1.0);
   }
   

阴影渲染管理器：

class ShadowRenderer {
  constructor(gl, shadowMapSize = 1024) {
    this.gl = gl;
    this.shadowMapData = createShadowMapFramebuffer(gl, shadowMapSize);
    this.lightViewMatrix = mat4.create();
    this.lightProjectionMatrix = mat4.create();
    this.lightViewProjectionMatrix = mat4.create();
  }
  
  updateLightMatrices(lightPosition, lightTarget, lightUp, 
                     left, right, bottom, top, near, far) {
    // 计算光源视图矩阵
    mat4.lookAt(this.lightViewMatrix, lightPosition, lightTarget, lightUp);
    
    // 计算光源投影矩阵（正交投影）
    mat4.ortho(this.lightProjectionMatrix, left, right, bottom, top, near, far);
    
    // 组合矩阵
    mat4.multiply(this.lightViewProjectionMatrix, 
                  this.lightProjectionMatrix, this.lightViewMatrix);
  }
  
  renderShadowMap(objects, shadowMapShader) {
    // 绑定阴影贴图帧缓冲区
    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.shadowMapData.framebuffer);
    this.gl.viewport(0, 0, this.shadowMapData.size, this.shadowMapData.size);
    
    // 清除深度缓冲区
    this.gl.clear(this.gl.DEPTH_BUFFER_BIT);
    
    // 启用正面剔除减少阴影失真
    this.gl.cullFace(this.gl.FRONT);
    
    // 使用阴影贴图着色器
    this.gl.useProgram(shadowMapShader);
    this.gl.uniformMatrix4fv(
      this.gl.getUniformLocation(shadowMapShader, 'uLightViewProjectionMatrix'),
      false, this.lightViewProjectionMatrix
    );
    
    // 渲染所有阴影投射物体
    objects.forEach(obj => obj.render(shadowMapShader));
    
    // 恢复背面剔除
    this.gl.cullFace(this.gl.BACK);
    
    // 恢复默认帧缓冲区
    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
  }
}

高级阴影技术：

1. PCF软阴影（Percentage Closer Filtering）：

   float calculatePCFShadow(vec4 lightSpacePos, sampler2D shadowMap) {
     vec3 projCoords = lightSpacePos.xyz / lightSpacePos.w * 0.5 + 0.5;
     
     float currentDepth = projCoords.z;
     float bias = 0.005;
     float shadow = 0.0;
     vec2 texelSize = 1.0 / textureSize(shadowMap, 0);
     
     // 3x3 PCF采样
     for(int x = -1; x <= 1; ++x) {
       for(int y = -1; y <= 1; ++y) {
         float pcfDepth = texture2D(shadowMap, projCoords.xy + vec2(x, y) * texelSize).r;
         shadow += currentDepth - bias > pcfDepth ? 1.0 : 0.0;
       }
     }
     shadow /= 9.0;
     
     return shadow;
   }
   

2. 级联阴影贴图（Cascaded Shadow Maps）：
   处理大场景的阴影渲染，使用多个不同分辨率的阴影贴图

性能优化：

• 合理设置阴影贴图分辨率
• 使用适当的光源投影范围
• 实现阴影LOD系统
• 使用阴影体积优化点光源阴影

阴影效果极大提升了3D场景的视觉真实感，是现代实时渲染的重要组成部分。

How to handle rendering of large amounts of geometric data in WebGL?

考察点：批量渲染技术。

答案：

处理大量几何数据是WebGL性能优化的核心挑战。通过批处理、实例化、LOD等技术，可以显著提升大规模场景的渲染性能。

批处理渲染（Batch Rendering）：

1. 静态批处理：

   class StaticBatchRenderer {
     constructor(gl) {
       this.gl = gl;
       this.vertexData = [];
       this.indexData = [];
       this.batches = [];
       this.maxVertices = 65536;
     }
     
     addMesh(mesh, transform) {
       const startVertex = this.vertexData.length / 8; // 假设每个顶点8个数据
       
       // 检查是否需要新批次
       if (startVertex + mesh.vertices.length / 8 > this.maxVertices) {
         this.finalizeBatch();
       }
       
       // 应用变换并添加顶点数据
       for (let i = 0; i < mesh.vertices.length; i += 8) {
         const vertex = [
           mesh.vertices[i], mesh.vertices[i+1], mesh.vertices[i+2], 1.0
         ];
         const transformedVertex = vec4.transformMat4(vec4.create(), vertex, transform);
         
         this.vertexData.push(
           transformedVertex[0], transformedVertex[1], transformedVertex[2],
           mesh.vertices[i+3], mesh.vertices[i+4], mesh.vertices[i+5], // 法线
           mesh.vertices[i+6], mesh.vertices[i+7] // UV
         );
       }
       
       // 添加索引数据
       mesh.indices.forEach(index => {
         this.indexData.push(index + startVertex);
       });
     }
     
     finalizeBatch() {
       if (this.vertexData.length === 0) return;
       
       // 创建VBO和IBO
       const vbo = this.gl.createBuffer();
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vbo);
       this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.vertexData), 
                         this.gl.STATIC_DRAW);
       
       const ibo = this.gl.createBuffer();
       this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, ibo);
       this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.indexData), 
                         this.gl.STATIC_DRAW);
       
       this.batches.push({
         vbo: vbo,
         ibo: ibo,
         indexCount: this.indexData.length
       });
       
       // 清空缓存
       this.vertexData = [];
       this.indexData = [];
     }
     
     render(program) {
       this.batches.forEach(batch => {
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, batch.vbo);
         this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, batch.ibo);
         
         // 设置顶点属性
         this.setupVertexAttributes(program);
         
         // 绘制
         this.gl.drawElements(this.gl.TRIANGLES, batch.indexCount, 
                             this.gl.UNSIGNED_SHORT, 0);
       });
     }
   }
   

2. 动态批处理：

   class DynamicBatchRenderer {
     constructor(gl, maxVertices = 10000) {
       this.gl = gl;
       this.maxVertices = maxVertices;
       
       // 创建动态缓冲区
       this.vertexBuffer = gl.createBuffer();
       this.indexBuffer = gl.createBuffer();
       
       gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
       gl.bufferData(gl.ARRAY_BUFFER, maxVertices * 32, gl.DYNAMIC_DRAW); // 32字节/顶点
       
       this.vertices = new Float32Array(maxVertices * 8);
       this.indices = new Uint16Array(maxVertices * 3);
       this.vertexCount = 0;
       this.indexCount = 0;
     }
     
     beginBatch() {
       this.vertexCount = 0;
       this.indexCount = 0;
     }
     
     addQuad(position, size, color, texture) {
       if (this.vertexCount + 4 > this.maxVertices) {
         this.flush();
         this.beginBatch();
       }
       
       const startIndex = this.vertexCount;
       
       // 添加四个顶点
       this.addVertex(position[0] - size, position[1] - size, 0.0, 1.0, color, texture);
       this.addVertex(position[0] + size, position[1] - size, 1.0, 1.0, color, texture);
       this.addVertex(position[0] + size, position[1] + size, 1.0, 0.0, color, texture);
       this.addVertex(position[0] - size, position[1] + size, 0.0, 0.0, color, texture);
       
       // 添加两个三角形
       this.indices[this.indexCount++] = startIndex;
       this.indices[this.indexCount++] = startIndex + 1;
       this.indices[this.indexCount++] = startIndex + 2;
       this.indices[this.indexCount++] = startIndex;
       this.indices[this.indexCount++] = startIndex + 2;
       this.indices[this.indexCount++] = startIndex + 3;
     }
     
     flush() {
       if (this.vertexCount === 0) return;
       
       // 更新缓冲区数据
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
       this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, 
                            this.vertices.subarray(0, this.vertexCount * 8));
       
       this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
       this.gl.bufferSubData(this.gl.ELEMENT_ARRAY_BUFFER, 0, 
                            this.indices.subarray(0, this.indexCount));
       
       // 绘制
       this.gl.drawElements(this.gl.TRIANGLES, this.indexCount, 
                           this.gl.UNSIGNED_SHORT, 0);
     }
   }
   

空间数据结构优化：

// 八叉树用于空间分割和裁剪
class Octree {
  constructor(center, size, maxDepth = 5, maxObjects = 10) {
    this.center = center;
    this.size = size;
    this.maxDepth = maxDepth;
    this.maxObjects = maxObjects;
    this.objects = [];
    this.children = null;
  }
  
  insert(object) {
    if (!this.contains(object.boundingBox)) return false;
    
    if (this.objects.length < this.maxObjects || this.maxDepth === 0) {
      this.objects.push(object);
      return true;
    }
    
    if (!this.children) {
      this.subdivide();
    }
    
    for (const child of this.children) {
      if (child.insert(object)) return true;
    }
    
    this.objects.push(object);
    return true;
  }
  
  query(frustum, result = []) {
    if (!this.intersects(frustum)) return result;
    
    // 添加当前节点的对象
    for (const obj of this.objects) {
      if (frustum.contains(obj.boundingBox)) {
        result.push(obj);
      }
    }
    
    // 查询子节点
    if (this.children) {
      for (const child of this.children) {
        child.query(frustum, result);
      }
    }
    
    return result;
  }
}

GPU驱动渲染：

class GPUDrivenRenderer {
  constructor(gl) {
    this.gl = gl;
    this.indirectBuffer = gl.createBuffer();
    this.commandBuffer = gl.createBuffer();
  }
  
  setupIndirectDrawing(drawCommands) {
    // 创建间接绘制命令
    const commands = new Uint32Array(drawCommands.length * 5);
    
    for (let i = 0; i < drawCommands.length; i++) {
      const cmd = drawCommands[i];
      const offset = i * 5;
      commands[offset] = cmd.count;        // 顶点数量
      commands[offset + 1] = cmd.instanceCount; // 实例数量
      commands[offset + 2] = cmd.first;    // 起始顶点
      commands[offset + 3] = cmd.baseVertex; // 基础顶点
      commands[offset + 4] = cmd.baseInstance; // 基础实例
    }
    
    this.gl.bindBuffer(this.gl.DRAW_INDIRECT_BUFFER, this.indirectBuffer);
    this.gl.bufferData(this.gl.DRAW_INDIRECT_BUFFER, commands, this.gl.DYNAMIC_DRAW);
  }
  
  renderIndirect(drawCount) {
    // WebGL扩展支持间接绘制
    const ext = this.gl.getExtension('WEBGL_multi_draw_instanced_base_vertex_base_instance');
    if (ext) {
      ext.multiDrawArraysIndirectWEBGL(this.gl.TRIANGLES, 0, drawCount, 0);
    }
  }
}

LOD系统：

class LODSystem {
  constructor() {
    this.lodLevels = new Map();
  }
  
  addLODLevels(objectId, levels) {
    // levels: [{distance: 100, mesh: highDetailMesh}, ...]
    this.lodLevels.set(objectId, levels.sort((a, b) => a.distance - b.distance));
  }
  
  selectLOD(objectId, distanceToCamera) {
    const levels = this.lodLevels.get(objectId);
    if (!levels) return null;
    
    for (const level of levels) {
      if (distanceToCamera < level.distance) {
        return level.mesh;
      }
    }
    
    return levels[levels.length - 1].mesh; // 最低细节
  }
  
  renderWithLOD(objects, cameraPosition) {
    const lodGroups = new Map();
    
    // 按LOD分组
    for (const obj of objects) {
      const distance = vec3.distance(obj.position, cameraPosition);
      const mesh = this.selectLOD(obj.id, distance);
      
      if (!lodGroups.has(mesh)) {
        lodGroups.set(mesh, []);
      }
      lodGroups.get(mesh).push(obj);
    }
    
    // 批量渲染每个LOD组
    for (const [mesh, group] of lodGroups) {
      this.batchRender(mesh, group);
    }
  }
}

性能优化策略：

• 使用空间数据结构进行视锥体裁剪
• 实现遮挡剔除减少不可见物体渲染
• 采用GPU实例化渲染相同几何体
• 合理设计LOD系统平衡质量与性能
• 使用计算着色器进行GPU端剔除

大量几何数据的高效渲染需要综合运用多种优化技术，在保证视觉质量的同时实现流畅的帧率。

What is instanced rendering in WebGL? How to implement it?

考察点：实例化渲染。

答案：

实例化渲染（Instanced Rendering）是一种高效渲染大量相同几何体的技术。它通过一次绘制调用渲染多个实例，每个实例可以有不同的变换矩阵、颜色等属性，大幅减少CPU开销和绘制调用次数。

实例化渲染基本概念：

实例化渲染允许使用相同的几何数据渲染多个对象实例，每个实例通过实例属性（Instance Attributes）来区分，这些属性在每个实例中保持不变，但在不同实例间可以不同。

WebGL实例化渲染实现：

1. 获取扩展和设置实例属性：

   class InstancedRenderer {
     constructor(gl) {
       this.gl = gl;
       
       // 获取实例化扩展
       this.instanceExt = gl.getExtension('ANGLE_instanced_arrays');
       if (!this.instanceExt) {
         throw new Error('Instanced rendering not supported');
       }
       
       this.setupGeometry();
       this.setupInstanceData();
     }
     
     setupGeometry() {
       // 基础几何体（例如立方体）
       const vertices = new Float32Array([
         // 位置      法线        UV
         -1, -1, -1,  0,  0, -1,  0, 0,
          1, -1, -1,  0,  0, -1,  1, 0,
          1,  1, -1,  0,  0, -1,  1, 1,
         -1,  1, -1,  0,  0, -1,  0, 1,
         // ... 其他面的顶点
       ]);
       
       this.vertexBuffer = this.gl.createBuffer();
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
       this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
     }
     
     setupInstanceData(instanceCount = 1000) {
       this.instanceCount = instanceCount;
       
       // 创建实例变换矩阵数据
       const instanceMatrices = new Float32Array(instanceCount * 16);
       const instanceColors = new Float32Array(instanceCount * 3);
       
       for (let i = 0; i < instanceCount; i++) {
         // 随机位置和旋转
         const position = [
           (Math.random() - 0.5) * 100,
           (Math.random() - 0.5) * 100,
           (Math.random() - 0.5) * 100
         ];
         const rotation = Math.random() * Math.PI * 2;
         const scale = 0.5 + Math.random() * 1.5;
         
         // 计算变换矩阵
         const matrix = mat4.create();
         mat4.translate(matrix, matrix, position);
         mat4.rotateY(matrix, matrix, rotation);
         mat4.scale(matrix, matrix, [scale, scale, scale]);
         
         // 存储矩阵（16个元素）
         for (let j = 0; j < 16; j++) {
           instanceMatrices[i * 16 + j] = matrix[j];
         }
         
         // 随机颜色
         instanceColors[i * 3] = Math.random();
         instanceColors[i * 3 + 1] = Math.random();
         instanceColors[i * 3 + 2] = Math.random();
       }
       
       // 创建实例缓冲区
       this.matrixBuffer = this.gl.createBuffer();
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.matrixBuffer);
       this.gl.bufferData(this.gl.ARRAY_BUFFER, instanceMatrices, this.gl.STATIC_DRAW);
       
       this.colorBuffer = this.gl.createBuffer();
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.colorBuffer);
       this.gl.bufferData(this.gl.ARRAY_BUFFER, instanceColors, this.gl.STATIC_DRAW);
     }
   }
   

2. 实例化着色器：

   // 顶点着色器
   attribute vec3 aPosition;
   attribute vec3 aNormal;
   attribute vec2 aTexCoord;
   
   // 实例属性（4x4矩阵分成4个vec4）
   attribute vec4 aInstanceMatrix0;
   attribute vec4 aInstanceMatrix1;
   attribute vec4 aInstanceMatrix2;
   attribute vec4 aInstanceMatrix3;
   attribute vec3 aInstanceColor;
   
   uniform mat4 uViewMatrix;
   uniform mat4 uProjectionMatrix;
   
   varying vec3 vNormal;
   varying vec3 vColor;
   varying vec2 vTexCoord;
   
   void main() {
     // 重构实例变换矩阵
     mat4 instanceMatrix = mat4(
       aInstanceMatrix0,
       aInstanceMatrix1,
       aInstanceMatrix2,
       aInstanceMatrix3
     );
     
     // 应用实例变换
     vec4 worldPosition = instanceMatrix * vec4(aPosition, 1.0);
     gl_Position = uProjectionMatrix * uViewMatrix * worldPosition;
     
     // 变换法线
     mat3 normalMatrix = mat3(instanceMatrix);
     vNormal = normalize(normalMatrix * aNormal);
     
     vColor = aInstanceColor;
     vTexCoord = aTexCoord;
   }
   
   // 片段着色器
   precision mediump float;
   
   uniform vec3 uLightDirection;
   uniform sampler2D uTexture;
   
   varying vec3 vNormal;
   varying vec3 vColor;
   varying vec2 vTexCoord;
   
   void main() {
     vec3 normal = normalize(vNormal);
     float lighting = max(dot(normal, normalize(-uLightDirection)), 0.2);
     
     vec3 textureColor = texture2D(uTexture, vTexCoord).rgb;
     vec3 finalColor = vColor * textureColor * lighting;
     
     gl_FragColor = vec4(finalColor, 1.0);
   }
   

3. 设置顶点属性和渲染：

   render(program) {
     this.gl.useProgram(program);
     
     // 绑定几何体顶点属性
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexBuffer);
     
     const positionLocation = this.gl.getAttribLocation(program, 'aPosition');
     this.gl.enableVertexAttribArray(positionLocation);
     this.gl.vertexAttribPointer(positionLocation, 3, this.gl.FLOAT, false, 32, 0);
     
     const normalLocation = this.gl.getAttribLocation(program, 'aNormal');
     this.gl.enableVertexAttribArray(normalLocation);
     this.gl.vertexAttribPointer(normalLocation, 3, this.gl.FLOAT, false, 32, 12);
     
     const texCoordLocation = this.gl.getAttribLocation(program, 'aTexCoord');
     this.gl.enableVertexAttribArray(texCoordLocation);
     this.gl.vertexAttribPointer(texCoordLocation, 2, this.gl.FLOAT, false, 32, 24);
     
     // 设置实例矩阵属性
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.matrixBuffer);
     for (let i = 0; i < 4; i++) {
       const location = this.gl.getAttribLocation(program, `aInstanceMatrix${i}`);
       this.gl.enableVertexAttribArray(location);
       this.gl.vertexAttribPointer(location, 4, this.gl.FLOAT, false, 64, i * 16);
       // 设置实例除数（每个实例更新一次）
       this.instanceExt.vertexAttribDivisorANGLE(location, 1);
     }
     
     // 设置实例颜色属性
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.colorBuffer);
     const colorLocation = this.gl.getAttribLocation(program, 'aInstanceColor');
     this.gl.enableVertexAttribArray(colorLocation);
     this.gl.vertexAttribPointer(colorLocation, 3, this.gl.FLOAT, false, 12, 0);
     this.instanceExt.vertexAttribDivisorANGLE(colorLocation, 1);
     
     // 实例化绘制
     this.instanceExt.drawArraysInstancedANGLE(
       this.gl.TRIANGLES, 0, 36, this.instanceCount
     );
     
     // 重置实例除数
     for (let i = 0; i < 4; i++) {
       const location = this.gl.getAttribLocation(program, `aInstanceMatrix${i}`);
       this.instanceExt.vertexAttribDivisorANGLE(location, 0);
     }
     this.instanceExt.vertexAttribDivisorANGLE(colorLocation, 0);
   }
   

动态实例化：

class DynamicInstanceRenderer {
  updateInstanceData(newInstanceData) {
    // 更新部分或全部实例数据
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.matrixBuffer);
    this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, newInstanceData.matrices);
    
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.colorBuffer);
    this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, newInstanceData.colors);
  }
  
  renderAnimatedInstances(time) {
    // 计算动画
    const matrices = new Float32Array(this.instanceCount * 16);
    for (let i = 0; i < this.instanceCount; i++) {
      const offset = time * 0.001 + i * 0.1;
      const position = [
        Math.sin(offset) * 10,
        Math.cos(offset * 0.7) * 5,
        Math.sin(offset * 1.3) * 8
      ];
      
      const matrix = mat4.create();
      mat4.translate(matrix, matrix, position);
      mat4.rotateY(matrix, matrix, offset);
      
      for (let j = 0; j < 16; j++) {
        matrices[i * 16 + j] = matrix[j];
      }
    }
    
    this.updateInstanceData({ matrices });
    this.render();
  }
}

高级实例化技术：

1. GPU剔除实例化：

   // 计算着色器中进行实例剔除
   #version 300 es
   layout(local_size_x = 64) in;
   
   layout(std430, binding = 0) buffer InputBuffer {
     mat4 inputMatrices[];
   };
   
   layout(std430, binding = 1) buffer OutputBuffer {
     mat4 outputMatrices[];
   };
   
   uniform mat4 uViewProjectionMatrix;
   uniform vec3 uCameraPosition;
   uniform float uMaxDistance;
   
   void main() {
     uint index = gl_GlobalInvocationID.x;
     if (index >= inputMatrices.length()) return;
     
     mat4 instanceMatrix = inputMatrices[index];
     vec3 instancePosition = instanceMatrix[3].xyz;
     
     // 距离剔除
     float distance = length(instancePosition - uCameraPosition);
     if (distance > uMaxDistance) return;
     
     // 视锥体剔除
     vec4 clipPosition = uViewProjectionMatrix * vec4(instancePosition, 1.0);
     if (clipPosition.w <= 0.0) return;
     
     vec3 ndc = clipPosition.xyz / clipPosition.w;
     if (any(lessThan(ndc, vec3(-1.0))) || any(greaterThan(ndc, vec3(1.0)))) {
       return;
     }
     
     // 通过剔除测试，复制到输出缓冲区
     uint outputIndex = atomicAdd(visibleInstanceCount, 1u);
     outputMatrices[outputIndex] = instanceMatrix;
   }
   

实例化渲染的优势：

• 大幅减少draw calls
• 降低CPU开销
• 提高GPU利用率
• 适合渲染大量相同几何体（如草地、树林、粒子等）

适用场景：

• 粒子系统渲染
• 植被和环境物体
• 建筑群和城市场景
• UI元素批量渲染

实例化渲染是现代3D引擎处理大规模场景的核心技术之一。

How to implement post-processing effects in WebGL?

考察点：后期处理技术。

答案：

后期处理（Post-Processing）是在场景渲染完成后对最终图像进行处理的技术。通过帧缓冲区和屏幕空间着色器，可以实现bloom、模糊、色调映射、抗锯齿等丰富的视觉效果。

后期处理基本框架：

1. 渲染目标管理：

   class PostProcessingManager {
     constructor(gl, width, height) {
       this.gl = gl;
       this.width = width;
       this.height = height;
       
       // 创建渲染目标
       this.renderTargets = {
         scene: this.createRenderTarget(width, height),
         temp1: this.createRenderTarget(width, height),
         temp2: this.createRenderTarget(width, height),
         half: this.createRenderTarget(width / 2, height / 2),
         quarter: this.createRenderTarget(width / 4, height / 4)
       };
       
       // 全屏四边形
       this.fullscreenQuad = this.createFullscreenQuad();
       
       // 后期处理着色器
       this.shaders = {
         blur: this.createBlurShader(),
         bloom: this.createBloomShader(),
         tonemap: this.createTonemapShader(),
         fxaa: this.createFXAAShader()
       };
     }
     
     createRenderTarget(width, height) {
       const framebuffer = this.gl.createFramebuffer();
       this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
       
       // 颜色纹理
       const colorTexture = this.gl.createTexture();
       this.gl.bindTexture(this.gl.TEXTURE_2D, colorTexture);
       this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, width, height, 0, 
                         this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
       this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
       this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
       this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
       this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
       
       this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, 
                                   this.gl.TEXTURE_2D, colorTexture, 0);
       
       // 深度缓冲区
       const depthBuffer = this.gl.createRenderbuffer();
       this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, depthBuffer);
       this.gl.renderbufferStorage(this.gl.RENDERBUFFER, this.gl.DEPTH_COMPONENT16, width, height);
       this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, 
                                      this.gl.RENDERBUFFER, depthBuffer);
       
       this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
       
       return { framebuffer, colorTexture, depthBuffer, width, height };
     }
   }
   

2. 全屏四边形创建：

   createFullscreenQuad() {
     const vertices = new Float32Array([
       -1, -1, 0, 0,  // 左下
        1, -1, 1, 0,  // 右下
       -1,  1, 0, 1,  // 左上
        1,  1, 1, 1   // 右上
     ]);
     
     const buffer = this.gl.createBuffer();
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
     this.gl.bufferData(this.gl.ARRAY_BUFFER, vertices, this.gl.STATIC_DRAW);
     
     return { buffer, vertexCount: 4 };
   }
   
   renderFullscreenQuad(shader, uniforms = {}) {
     this.gl.useProgram(shader);
     
     // 设置uniform
     for (const [name, value] of Object.entries(uniforms)) {
       const location = this.gl.getUniformLocation(shader, name);
       if (location !== null) {
         if (typeof value === 'number') {
           this.gl.uniform1f(location, value);
         } else if (value.length === 2) {
           this.gl.uniform2fv(location, value);
         } else if (value.length === 3) {
           this.gl.uniform3fv(location, value);
         }
       }
     }
     
     // 绑定顶点数据
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.fullscreenQuad.buffer);
     const posLocation = this.gl.getAttribLocation(shader, 'aPosition');
     const uvLocation = this.gl.getAttribLocation(shader, 'aTexCoord');
     
     this.gl.enableVertexAttribArray(posLocation);
     this.gl.vertexAttribPointer(posLocation, 2, this.gl.FLOAT, false, 16, 0);
     this.gl.enableVertexAttribArray(uvLocation);
     this.gl.vertexAttribPointer(uvLocation, 2, this.gl.FLOAT, false, 16, 8);
     
     // 绘制
     this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
   }
   

常见后期处理效果实现：

1. 高斯模糊（Gaussian Blur）：

   // 模糊顶点着色器
   attribute vec2 aPosition;
   attribute vec2 aTexCoord;
   varying vec2 vTexCoord;
   
   void main() {
     vTexCoord = aTexCoord;
     gl_Position = vec4(aPosition, 0.0, 1.0);
   }
   
   // 模糊片段着色器
   precision mediump float;
   
   uniform sampler2D uTexture;
   uniform vec2 uDirection;
   uniform vec2 uResolution;
   
   varying vec2 vTexCoord;
   
   void main() {
     vec2 texelSize = 1.0 / uResolution;
     vec4 color = vec4(0.0);
     
     // 高斯权重
     float weights[5] = float[](0.227027, 0.1945946, 0.1216216, 0.054054, 0.016216);
     
     // 中心像素
     color += texture2D(uTexture, vTexCoord) * weights[0];
     
     // 双向采样
     for (int i = 1; i < 5; i++) {
       vec2 offset = uDirection * texelSize * float(i);
       color += texture2D(uTexture, vTexCoord + offset) * weights[i];
       color += texture2D(uTexture, vTexCoord - offset) * weights[i];
     }
     
     gl_FragColor = color;
   }
   

2. Bloom效果：

   applyBloom(sceneTexture) {
     // 1. 提取高亮区域
     this.renderToTarget(this.renderTargets.temp1, () => {
       this.gl.activeTexture(this.gl.TEXTURE0);
       this.gl.bindTexture(this.gl.TEXTURE_2D, sceneTexture);
       this.renderFullscreenQuad(this.shaders.bloom.extract, {
         uTexture: 0,
         uThreshold: 1.0
       });
     });
     
     // 2. 降采样并模糊
     this.renderToTarget(this.renderTargets.half, () => {
       this.gl.activeTexture(this.gl.TEXTURE0);
       this.gl.bindTexture(this.gl.TEXTURE_2D, this.renderTargets.temp1.colorTexture);
       this.renderFullscreenQuad(this.shaders.blur, {
         uTexture: 0,
         uDirection: [1.0, 0.0],
         uResolution: [this.renderTargets.half.width, this.renderTargets.half.height]
       });
     });
     
     // 3. 垂直模糊
     this.renderToTarget(this.renderTargets.quarter, () => {
       this.gl.activeTexture(this.gl.TEXTURE0);
       this.gl.bindTexture(this.gl.TEXTURE_2D, this.renderTargets.half.colorTexture);
       this.renderFullscreenQuad(this.shaders.blur, {
         uTexture: 0,
         uDirection: [0.0, 1.0],
         uResolution: [this.renderTargets.quarter.width, this.renderTargets.quarter.height]
       });
     });
     
     // 4. 混合原图和Bloom效果
     this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
     this.gl.activeTexture(this.gl.TEXTURE0);
     this.gl.bindTexture(this.gl.TEXTURE_2D, sceneTexture);
     this.gl.activeTexture(this.gl.TEXTURE1);
     this.gl.bindTexture(this.gl.TEXTURE_2D, this.renderTargets.quarter.colorTexture);
     
     this.renderFullscreenQuad(this.shaders.bloom.combine, {
       uSceneTexture: 0,
       uBloomTexture: 1,
       uBloomStrength: 0.8
     });
   }
   

3. FXAA抗锯齿：

   // FXAA片段着色器
   precision mediump float;
   
   uniform sampler2D uTexture;
   uniform vec2 uResolution;
   
   varying vec2 vTexCoord;
   
   #define FXAA_SPAN_MAX 8.0
   #define FXAA_REDUCE_MUL (1.0/FXAA_SPAN_MAX)
   #define FXAA_REDUCE_MIN (1.0/128.0)
   
   vec3 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution) {
     vec2 inverseVP = 1.0 / resolution;
     vec3 rgbNW = texture2D(tex, fragCoord + vec2(-1.0, -1.0) * inverseVP).rgb;
     vec3 rgbNE = texture2D(tex, fragCoord + vec2(1.0, -1.0) * inverseVP).rgb;
     vec3 rgbSW = texture2D(tex, fragCoord + vec2(-1.0, 1.0) * inverseVP).rgb;
     vec3 rgbSE = texture2D(tex, fragCoord + vec2(1.0, 1.0) * inverseVP).rgb;
     vec3 rgbM = texture2D(tex, fragCoord).rgb;
     
     vec3 luma = vec3(0.299, 0.587, 0.114);
     float lumaNW = dot(rgbNW, luma);
     float lumaNE = dot(rgbNE, luma);
     float lumaSW = dot(rgbSW, luma);
     float lumaSE = dot(rgbSE, luma);
     float lumaM = dot(rgbM, luma);
     
     float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
     float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
     
     vec2 dir = vec2(-((lumaNW + lumaNE) - (lumaSW + lumaSE)),
                     ((lumaNW + lumaSW) - (lumaNE + lumaSE)));
     
     float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL),
                           FXAA_REDUCE_MIN);
     
     float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
     dir = min(vec2(FXAA_SPAN_MAX), max(vec2(-FXAA_SPAN_MAX), dir * rcpDirMin)) * inverseVP;
     
     vec3 rgbA = 0.5 * (texture2D(tex, fragCoord + dir * (1.0/3.0 - 0.5)).rgb +
                        texture2D(tex, fragCoord + dir * (2.0/3.0 - 0.5)).rgb);
     vec3 rgbB = rgbA * 0.5 + 0.25 * (texture2D(tex, fragCoord + dir * -0.5).rgb +
                                      texture2D(tex, fragCoord + dir * 0.5).rgb);
     
     float lumaB = dot(rgbB, luma);
     
     if ((lumaB < lumaMin) || (lumaB > lumaMax)) {
       return rgbA;
     } else {
       return rgbB;
     }
   }
   
   void main() {
     gl_FragColor = vec4(fxaa(uTexture, vTexCoord, uResolution), 1.0);
   }
   

后期处理链管理：

class PostProcessChain {
  constructor(postProcessor) {
    this.postProcessor = postProcessor;
    this.passes = [];
  }
  
  addPass(passConfig) {
    this.passes.push(passConfig);
  }
  
  execute(inputTexture) {
    let currentTexture = inputTexture;
    let currentTarget = 0;
    
    for (const pass of this.passes) {
      const outputTarget = this.getNextTarget(currentTarget);
      
      this.postProcessor.renderToTarget(outputTarget, () => {
        this.postProcessor.gl.activeTexture(this.postProcessor.gl.TEXTURE0);
        this.postProcessor.gl.bindTexture(this.postProcessor.gl.TEXTURE_2D, currentTexture);
        
        this.postProcessor.renderFullscreenQuad(pass.shader, {
          ...pass.uniforms,
          uTexture: 0
        });
      });
      
      currentTexture = outputTarget.colorTexture;
      currentTarget = 1 - currentTarget;
    }
    
    return currentTexture;
  }
}

性能优化建议：

• 合理选择后期处理分辨率
• 使用半分辨率处理昂贵效果
• 合并多个效果到单个着色器
• 避免不必要的纹理复制
• 使用计算着色器优化复杂效果

后期处理是现代3D渲染管线的重要组成部分，能够显著提升视觉效果的质量和艺术表现力。

How to design a high-performance WebGL rendering engine architecture?

考察点：引擎架构设计。

答案：

设计高性能WebGL渲染引擎需要考虑模块化架构、性能优化、资源管理、可扩展性等多个方面。一个良好的架构应该平衡性能、可维护性和功能完整性。

核心架构设计：

1. 分层架构模式：

   // 引擎核心架构
   class WebGLEngine {
     constructor(canvas, options = {}) {
       // 核心层
       this.core = new EngineCore(canvas, options);
       
       // 渲染层
       this.renderer = new Renderer(this.core.gl, options.renderer);
       
       // 场景管理层
       this.sceneManager = new SceneManager();
       
       // 资源管理层
       this.resourceManager = new ResourceManager(this.core.gl);
       
       // 系统层
       this.systems = {
         animation: new AnimationSystem(),
         physics: new PhysicsSystem(),
         input: new InputSystem(canvas),
         audio: new AudioSystem()
       };
       
       // 工具层
       this.utils = {
         math: new MathUtils(),
         loader: new AssetLoader(),
         profiler: new Profiler()
       };
     }
     
     initialize() {
       return Promise.all([
         this.core.initialize(),
         this.renderer.initialize(),
         this.resourceManager.initialize(),
         this.initializeSystems()
       ]);
     }
     
     update(deltaTime) {
       // 更新各个系统
       this.systems.input.update();
       this.systems.physics.update(deltaTime);
       this.systems.animation.update(deltaTime);
       
       // 更新场景
       this.sceneManager.update(deltaTime);
       
       // 渲染
       this.renderer.render(this.sceneManager.currentScene);
       
       // 性能统计
       this.utils.profiler.endFrame();
     }
   }
   

2. 渲染器架构：

   class Renderer {
     constructor(gl, options) {
       this.gl = gl;
       this.renderQueue = new RenderQueue();
       this.renderPasses = new Map();
       
       // 渲染通道
       this.setupRenderPasses();
       
       // 状态管理
       this.stateManager = new StateManager(gl);
       
       // 命令缓冲
       this.commandBuffer = new CommandBuffer();
       
       // 渲染统计
       this.stats = new RenderStats();
     }
     
     setupRenderPasses() {
       // 深度预通道
       this.renderPasses.set('depth-prepass', new DepthPrePass(this.gl));
       
       // 阴影贴图通道
       this.renderPasses.set('shadow-map', new ShadowMapPass(this.gl));
       
       // 不透明物体通道
       this.renderPasses.set('opaque', new OpaquePass(this.gl));
       
       // 透明物体通道
       this.renderPasses.set('transparent', new TransparentPass(this.gl));
       
       // 后期处理通道
       this.renderPasses.set('post-process', new PostProcessPass(this.gl));
       
       // UI通道
       this.renderPasses.set('ui', new UIPass(this.gl));
     }
     
     render(scene) {
       this.stats.beginFrame();
       
       // 准备渲染队列
       this.renderQueue.clear();
       this.buildRenderQueue(scene);
       
       // 执行渲染通道
       this.executeRenderPasses();
       
       this.stats.endFrame();
     }
     
     buildRenderQueue(scene) {
       const camera = scene.activeCamera;
       const frustum = camera.getFrustum();
       
       // 视锥体裁剪
       const visibleObjects = scene.culling(frustum);
       
       // 分类渲染对象
       for (const object of visibleObjects) {
         const distance = vec3.distance(object.position, camera.position);
         
         if (object.material.transparent) {
           this.renderQueue.addTransparent(object, distance);
         } else {
           this.renderQueue.addOpaque(object, distance);
         }
       }
       
       // 排序渲染队列
       this.renderQueue.sort();
     }
   }
   

3. 高性能场景管理：

   class SceneManager {
     constructor() {
       this.scenes = new Map();
       this.currentScene = null;
       
       // 空间数据结构
       this.spatialIndex = new Octree();
       
       // 对象池
       this.objectPools = new Map();
       
       // 批处理管理
       this.batchManager = new BatchManager();
     }
     
     addObject(object) {
       // 添加到空间索引
       this.spatialIndex.insert(object);
       
       // 批处理优化
       if (this.canBatch(object)) {
         this.batchManager.addToBatch(object);
       }
       
       this.currentScene.addChild(object);
     }
     
     culling(frustum) {
       const startTime = performance.now();
       
       // 空间查询
       const candidates = this.spatialIndex.query(frustum);
       
       // 精确视锥体测试
       const visibleObjects = [];
       for (const obj of candidates) {
         if (this.isVisible(obj, frustum)) {
           visibleObjects.push(obj);
         }
       }
       
       this.cullTime = performance.now() - startTime;
       return visibleObjects;
     }
     
     isVisible(object, frustum) {
       // 包围盒测试
       if (!frustum.intersectsBoundingBox(object.boundingBox)) {
         return false;
       }
       
       // 遮挡剔除
       if (this.occlusionCulling && this.isOccluded(object)) {
         return false;
       }
       
       // 距离剔除
       if (object.maxDistance && object.distanceToCamera > object.maxDistance) {
         return false;
       }
       
       return true;
     }
   }
   

性能优化策略：

1. 渲染状态管理：

   class StateManager {
     constructor(gl) {
       this.gl = gl;
       this.currentState = {};
       this.stateChanges = 0;
     }
     
     setShader(program) {
       if (this.currentState.program !== program) {
         this.gl.useProgram(program);
         this.currentState.program = program;
         this.stateChanges++;
       }
     }
     
     setTexture(unit, texture) {
       const key = `texture${unit}`;
       if (this.currentState[key] !== texture) {
         this.gl.activeTexture(this.gl.TEXTURE0 + unit);
         this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
         this.currentState[key] = texture;
         this.stateChanges++;
       }
     }
     
     setBlendMode(srcFactor, dstFactor) {
       const blendKey = `${srcFactor}-${dstFactor}`;
       if (this.currentState.blendMode !== blendKey) {
         this.gl.blendFunc(srcFactor, dstFactor);
         this.currentState.blendMode = blendKey;
         this.stateChanges++;
       }
     }
   }
   

2. 命令缓冲系统：

   class CommandBuffer {
     constructor() {
       this.commands = [];
       this.currentIndex = 0;
     }
     
     clear() {
       this.commands.length = 0;
       this.currentIndex = 0;
     }
     
     setViewport(x, y, width, height) {
       this.commands.push({
         type: 'viewport',
         x, y, width, height
       });
     }
     
     drawElements(mode, count, type, offset) {
       this.commands.push({
         type: 'drawElements',
         mode, count, type, offset
       });
     }
     
     execute(gl, stateManager) {
       for (const cmd of this.commands) {
         switch (cmd.type) {
           case 'viewport':
             gl.viewport(cmd.x, cmd.y, cmd.width, cmd.height);
             break;
           case 'drawElements':
             gl.drawElements(cmd.mode, cmd.count, cmd.type, cmd.offset);
             break;
         }
       }
     }
   }
   

资源管理架构：

class ResourceManager {
  constructor(gl) {
    this.gl = gl;
    this.resources = new Map();
    this.loadingPromises = new Map();
    this.memoryUsage = 0;
    this.maxMemory = 512 * 1024 * 1024; // 512MB
  }
  
  async loadTexture(url, options = {}) {
    if (this.resources.has(url)) {
      return this.resources.get(url);
    }
    
    if (this.loadingPromises.has(url)) {
      return this.loadingPromises.get(url);
    }
    
    const promise = this.doLoadTexture(url, options);
    this.loadingPromises.set(url, promise);
    
    try {
      const texture = await promise;
      this.resources.set(url, texture);
      this.loadingPromises.delete(url);
      return texture;
    } catch (error) {
      this.loadingPromises.delete(url);
      throw error;
    }
  }
  
  checkMemoryUsage() {
    if (this.memoryUsage > this.maxMemory) {
      this.garbageCollect();
    }
  }
  
  garbageCollect() {
    // 释放最近最少使用的资源
    const sortedResources = Array.from(this.resources.entries())
      .sort((a, b) => a[1].lastUsed - b[1].lastUsed);
    
    let freedMemory = 0;
    const targetFree = this.maxMemory * 0.2; // 释放20%内存
    
    for (const [url, resource] of sortedResources) {
      if (freedMemory >= targetFree) break;
      
      this.gl.deleteTexture(resource.texture);
      this.resources.delete(url);
      freedMemory += resource.size;
      this.memoryUsage -= resource.size;
    }
  }
}

多线程架构：

class WorkerPool {
  constructor(workerCount = navigator.hardwareConcurrency || 4) {
    this.workers = [];
    this.taskQueue = [];
    this.availableWorkers = [];
    
    for (let i = 0; i < workerCount; i++) {
      const worker = new Worker('engine-worker.js');
      this.workers.push(worker);
      this.availableWorkers.push(worker);
      
      worker.onmessage = this.handleWorkerMessage.bind(this, worker);
    }
  }
  
  submitTask(task) {
    return new Promise((resolve, reject) => {
      const taskData = { ...task, resolve, reject, id: this.generateId() };
      
      if (this.availableWorkers.length > 0) {
        this.executeTask(taskData);
      } else {
        this.taskQueue.push(taskData);
      }
    });
  }
  
  executeTask(task) {
    const worker = this.availableWorkers.pop();
    task.worker = worker;
    worker.postMessage({
      id: task.id,
      type: task.type,
      data: task.data
    });
  }
}

关键设计原则：

• 模块化和低耦合设计
• 数据驱动的渲染管线
• 缓存友好的内存布局
• 预测式资源加载
• 可配置的性能等级
• 完善的错误处理和降级方案

高性能渲染引擎的架构设计是一个复杂的系统工程，需要在功能、性能、可维护性之间找到平衡点。

How to implement complex shader effects in WebGL? What are the advanced GLSL programming techniques?

考察点：高级着色器编程。

答案：

复杂着色器效果的实现需要掌握高级GLSL编程技巧，包括数学优化、算法实现、性能调优等方面。通过这些技术可以创造出丰富的视觉效果。

高级着色器编程技巧：

1. 程序纹理生成：

   // 噪声函数实现
   vec2 hash(vec2 p) {
     p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));
     return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
   }
   
   float noise(vec2 p) {
     const float K1 = 0.366025404; // (sqrt(3)-1)/2
     const float K2 = 0.211324865; // (3-sqrt(3))/6
     
     vec2 i = floor(p + (p.x + p.y) * K1);
     vec2 a = p - i + (i.x + i.y) * K2;
     vec2 o = (a.x > a.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
     vec2 b = a - o + K2;
     vec2 c = a - 1.0 + 2.0 * K2;
     
     vec3 h = max(0.5 - vec3(dot(a, a), dot(b, b), dot(c, c)), 0.0);
     vec3 n = h * h * h * h * vec3(dot(a, hash(i + 0.0)), 
                                   dot(b, hash(i + o)), 
                                   dot(c, hash(i + 1.0)));
     
     return dot(n, vec3(70.0));
   }
   
   // 分形布朗运动
   float fbm(vec2 p) {
     float value = 0.0;
     float amplitude = 0.5;
     float frequency = 1.0;
     
     for (int i = 0; i < 6; i++) {
       value += amplitude * noise(p * frequency);
       amplitude *= 0.5;
       frequency *= 2.0;
     }
     
     return value;
   }
   

2. 体积渲染技术：

   // 体积云渲染
   precision highp float;
   
   uniform vec3 uCameraPosition;
   uniform vec3 uLightDirection;
   uniform float uTime;
   uniform sampler2D uNoiseTexture;
   
   varying vec3 vRayDirection;
   
   float sampleDensity(vec3 pos) {
     // 3D噪声采样
     vec3 uvw = pos * 0.01 + vec3(uTime * 0.1, 0.0, 0.0);
     
     float noise1 = texture2D(uNoiseTexture, uvw.xy).r;
     float noise2 = texture2D(uNoiseTexture, uvw.yz * 2.0).g;
     float noise3 = texture2D(uNoiseTexture, uvw.xz * 4.0).b;
     
     float density = noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2;
     
     // 云层形状控制
     float height = (pos.y + 1000.0) / 2000.0;
     float heightFactor = smoothstep(0.0, 0.1, height) * (1.0 - smoothstep(0.9, 1.0, height));
     
     return density * heightFactor;
   }
   
   float lightMarch(vec3 pos) {
     float totalDensity = 0.0;
     vec3 lightStep = uLightDirection * 50.0;
     
     for (int i = 0; i < 8; i++) {
       pos += lightStep;
       totalDensity += sampleDensity(pos);
     }
     
     return exp(-totalDensity * 0.1);
   }
   
   void main() {
     vec3 rayPos = uCameraPosition;
     vec3 rayDir = normalize(vRayDirection);
     float stepSize = 25.0;
     
     vec4 color = vec4(0.0);
     float transmittance = 1.0;
     
     // 体积光线投射
     for (int i = 0; i < 64; i++) {
       rayPos += rayDir * stepSize;
       
       float density = sampleDensity(rayPos);
       if (density > 0.01) {
         float lightTransmittance = lightMarch(rayPos);
         vec3 luminance = vec3(1.0, 0.9, 0.7) * lightTransmittance;
         
         float alpha = 1.0 - exp(-density * stepSize * 0.1);
         color.rgb += luminance * alpha * transmittance;
         transmittance *= (1.0 - alpha);
         
         if (transmittance < 0.01) break;
       }
     }
     
     gl_FragColor = vec4(color.rgb, 1.0 - transmittance);
   }
   

3. 屏幕空间反射：

   // 屏幕空间反射 (SSR)
   precision highp float;
   
   uniform sampler2D uColorTexture;
   uniform sampler2D uDepthTexture;
   uniform sampler2D uNormalTexture;
   uniform mat4 uViewMatrix;
   uniform mat4 uProjectionMatrix;
   uniform mat4 uInverseViewMatrix;
   uniform mat4 uInverseProjectionMatrix;
   uniform vec2 uScreenSize;
   
   varying vec2 vTexCoord;
   
   vec3 reconstructWorldPos(vec2 screenPos, float depth) {
     vec4 clipPos = vec4(screenPos * 2.0 - 1.0, depth * 2.0 - 1.0, 1.0);
     vec4 viewPos = uInverseProjectionMatrix * clipPos;
     viewPos /= viewPos.w;
     vec4 worldPos = uInverseViewMatrix * viewPos;
     return worldPos.xyz;
   }
   
   vec4 screenSpaceRaycast(vec3 startPos, vec3 rayDir) {
     vec3 currentPos = startPos;
     float stepSize = 0.5;
     
     for (int i = 0; i < 32; i++) {
       currentPos += rayDir * stepSize;
       
       // 转换到屏幕空间
       vec4 clipPos = uProjectionMatrix * uViewMatrix * vec4(currentPos, 1.0);
       vec3 screenPos = clipPos.xyz / clipPos.w;
       screenPos = screenPos * 0.5 + 0.5;
       
       // 检查边界
       if (screenPos.x < 0.0 || screenPos.x > 1.0 || 
           screenPos.y < 0.0 || screenPos.y > 1.0) break;
       
       // 采样深度
       float sceneDepth = texture2D(uDepthTexture, screenPos.xy).r;
       
       // 深度比较
       if (screenPos.z > sceneDepth + 0.001) {
         // 找到交点，进行二分搜索
         return vec4(screenPos.xy, 1.0, 1.0);
       }
       
       stepSize *= 1.1; // 自适应步长
     }
     
     return vec4(0.0);
   }
   
   void main() {
     vec3 normal = normalize(texture2D(uNormalTexture, vTexCoord).xyz * 2.0 - 1.0);
     float depth = texture2D(uDepthTexture, vTexCoord).r;
     
     vec3 worldPos = reconstructWorldPos(vTexCoord, depth);
     vec3 viewDir = normalize(worldPos - uCameraPosition);
     vec3 reflectDir = reflect(viewDir, normal);
     
     // 屏幕空间光线投射
     vec4 reflection = screenSpaceRaycast(worldPos, reflectDir);
     
     if (reflection.a > 0.0) {
       vec3 reflectionColor = texture2D(uColorTexture, reflection.xy).rgb;
       gl_FragColor = vec4(reflectionColor, reflection.a);
     } else {
       gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
     }
   }
   

性能优化技巧：

1. 精度优化和分支消除：

   // 使用混合代替分支
   float conditionalValue = mix(valueA, valueB, condition);
   
   // 使用step函数代替if判断
   float mask = step(0.5, input);
   
   // 快速数学函数
   float fastSqrt = inversesqrt(x) * x;  // 比sqrt(x)快
   float fastLength = dot(v, v);         // 避免开方运算
   
   // 预计算常量
   const float PI = 3.14159265359;
   const float TWO_PI = 6.28318530718;
   const float INV_PI = 0.31830988618;
   

2. 纹理采样优化：

   // 使用textureGrad避免隐式导数计算
   vec4 color = textureGrad(uTexture, uv, dFdx(uv), dFdy(uv));
   
   // 手动LOD计算
   float lod = log2(max(length(dFdx(uv)), length(dFdy(uv))) * textureSize);
   vec4 color = textureLod(uTexture, uv, lod);
   
   // 使用纹理数组减少绑定
   uniform sampler2DArray uTextureArray;
   vec4 color = texture(uTextureArray, vec3(uv, layerIndex));
   

高级渲染算法实现：

1. 时域抗锯齿 (TAA)：

   // 时域抗锯齿着色器
   uniform sampler2D uCurrentFrame;
   uniform sampler2D uPreviousFrame;
   uniform sampler2D uMotionVectors;
   uniform float uBlendFactor;
   
   vec3 tonemap(vec3 color) {
     return color / (1.0 + color);
   }
   
   vec3 untonemap(vec3 color) {
     return color / (1.0 - color);
   }
   
   void main() {
     vec2 motion = texture2D(uMotionVectors, vTexCoord).xy;
     vec2 previousUV = vTexCoord - motion;
     
     vec3 currentColor = texture2D(uCurrentFrame, vTexCoord).rgb;
     vec3 previousColor = texture2D(uPreviousFrame, previousUV).rgb;
     
     // 色彩空间转换提高混合质量
     currentColor = tonemap(currentColor);
     previousColor = tonemap(previousColor);
     
     // 邻域裁剪
     vec3 nearColor0 = tonemap(textureOffset(uCurrentFrame, vTexCoord, ivec2(-1, -1)).rgb);
     vec3 nearColor1 = tonemap(textureOffset(uCurrentFrame, vTexCoord, ivec2( 1, -1)).rgb);
     vec3 nearColor2 = tonemap(textureOffset(uCurrentFrame, vTexCoord, ivec2(-1,  1)).rgb);
     vec3 nearColor3 = tonemap(textureOffset(uCurrentFrame, vTexCoord, ivec2( 1,  1)).rgb);
     
     vec3 minColor = min(currentColor, min(min(nearColor0, nearColor1), min(nearColor2, nearColor3)));
     vec3 maxColor = max(currentColor, max(max(nearColor0, nearColor1), max(nearColor2, nearColor3)));
     
     previousColor = clamp(previousColor, minColor, maxColor);
     
     // 自适应混合
     float adaptiveBlend = mix(0.05, 0.2, length(motion) * 50.0);
     vec3 finalColor = mix(previousColor, currentColor, adaptiveBlend);
     
     gl_FragColor = vec4(untonemap(finalColor), 1.0);
   }
   

着色器调试技巧：

// 调试可视化宏
#define DEBUG_MODE 1

#if DEBUG_MODE
  // 颜色编码调试
  vec3 debugHeatmap(float value) {
    vec3 colors[5] = vec3[](
      vec3(0.0, 0.0, 1.0),  // 蓝色 (低)
      vec3(0.0, 1.0, 1.0),  // 青色
      vec3(0.0, 1.0, 0.0),  // 绿色 (中)
      vec3(1.0, 1.0, 0.0),  // 黄色
      vec3(1.0, 0.0, 0.0)   // 红色 (高)
    );
    
    value = clamp(value, 0.0, 1.0) * 4.0;
    int index = int(value);
    float t = fract(value);
    
    return mix(colors[index], colors[min(index + 1, 4)], t);
  }
  
  // 法线可视化
  vec3 debugNormal(vec3 normal) {
    return normal * 0.5 + 0.5;
  }
#endif

关键优化原则：

• 减少纹理采样和复杂数学运算
• 使用查找表替代复杂计算
• 合理使用精度修饰符
• 避免动态分支和循环
• 预计算常量和中间结果
• 利用GPU并行特性设计算法

高级着色器编程需要深入理解GPU架构和GLSL语言特性，通过优化算法和数据结构来实现复杂的视觉效果。

What are the memory management and resource optimization strategies for WebGL applications?

考察点：资源管理能力。

答案：

WebGL应用的内存管理和资源优化是确保应用稳定运行和良好性能的关键。需要从GPU内存、CPU内存、资源生命周期等多个维度进行优化。

GPU内存管理：

1. 缓冲区管理策略：

   class GPUBufferManager {
     constructor(gl) {
       this.gl = gl;
       this.bufferPools = new Map();
       this.activeBuffers = new Set();
       this.totalGPUMemory = 0;
       this.maxGPUMemory = 256 * 1024 * 1024; // 256MB限制
     }
     
     allocateBuffer(size, usage) {
       const poolKey = `${size}-${usage}`;
       const pool = this.bufferPools.get(poolKey) || [];
       
       if (pool.length > 0) {
         const buffer = pool.pop();
         this.activeBuffers.add(buffer);
         return buffer;
       }
       
       // 检查内存限制
       if (this.totalGPUMemory + size > this.maxGPUMemory) {
         this.garbageCollect();
       }
       
       const buffer = {
         glBuffer: this.gl.createBuffer(),
         size: size,
         usage: usage,
         lastUsed: Date.now(),
         refCount: 1
       };
       
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer.glBuffer);
       this.gl.bufferData(this.gl.ARRAY_BUFFER, size, usage);
       
       this.totalGPUMemory += size;
       this.activeBuffers.add(buffer);
       return buffer;
     }
     
     releaseBuffer(buffer) {
       if (--buffer.refCount <= 0) {
         this.activeBuffers.delete(buffer);
         const poolKey = `${buffer.size}-${buffer.usage}`;
         const pool = this.bufferPools.get(poolKey) || [];
         pool.push(buffer);
         this.bufferPools.set(poolKey, pool);
       }
     }
     
     garbageCollect() {
       const threshold = Date.now() - 30000; // 30秒未使用
       let freedMemory = 0;
       
       for (const [poolKey, pool] of this.bufferPools) {
         for (let i = pool.length - 1; i >= 0; i--) {
           const buffer = pool[i];
           if (buffer.lastUsed < threshold) {
             this.gl.deleteBuffer(buffer.glBuffer);
             pool.splice(i, 1);
             freedMemory += buffer.size;
             this.totalGPUMemory -= buffer.size;
           }
         }
       }
       
       console.log(`GC freed ${freedMemory} bytes of GPU memory`);
     }
   }
   

2. 纹理内存优化：

   class TextureManager {
     constructor(gl) {
       this.gl = gl;
       this.textureCache = new Map();
       this.compressionFormats = this.detectCompressionSupport();
       this.streamingQueue = new PriorityQueue();
       this.maxTextureMemory = 128 * 1024 * 1024; // 128MB
       this.currentMemoryUsage = 0;
     }
     
     detectCompressionSupport() {
       const formats = {};
       formats.s3tc = this.gl.getExtension('WEBGL_compressed_texture_s3tc');
       formats.etc1 = this.gl.getExtension('WEBGL_compressed_texture_etc1');
       formats.astc = this.gl.getExtension('WEBGL_compressed_texture_astc');
       return formats;
     }
     
     async loadTexture(url, options = {}) {
       const cacheKey = `${url}-${JSON.stringify(options)}`;
       
       if (this.textureCache.has(cacheKey)) {
         const textureData = this.textureCache.get(cacheKey);
         textureData.lastAccessed = Date.now();
         textureData.accessCount++;
         return textureData.texture;
       }
       
       // 选择最优压缩格式
       const format = this.selectOptimalFormat(options.format);
       const textureUrl = this.getCompressedTextureUrl(url, format);
       
       const textureData = await this.loadTextureData(textureUrl, options);
       
       // 内存检查
       if (this.currentMemoryUsage + textureData.size > this.maxTextureMemory) {
         await this.freeUnusedTextures(textureData.size);
       }
       
       const texture = this.createGLTexture(textureData);
       
       this.textureCache.set(cacheKey, {
         texture: texture,
         size: textureData.size,
         lastAccessed: Date.now(),
         accessCount: 1,
         priority: options.priority || 0
       });
       
       this.currentMemoryUsage += textureData.size;
       return texture;
     }
     
     async freeUnusedTextures(requiredMemory) {
       const textures = Array.from(this.textureCache.entries())
         .sort((a, b) => a[1].lastAccessed - b[1].lastAccessed);
       
       let freedMemory = 0;
       for (const [key, data] of textures) {
         if (freedMemory >= requiredMemory) break;
         
         this.gl.deleteTexture(data.texture);
         this.textureCache.delete(key);
         freedMemory += data.size;
         this.currentMemoryUsage -= data.size;
       }
     }
   }
   

资源流送系统：

class ResourceStreaming {
  constructor(engine) {
    this.engine = engine;
    this.loadQueue = new Map();
    this.visibilityTracker = new VisibilityTracker();
    this.lodSystem = new LODSystem();
    this.maxConcurrentLoads = 4;
    this.currentLoads = 0;
  }
  
  updateStreaming(camera) {
    // 基于摄像机位置和方向预测需要的资源
    const visibleObjects = this.visibilityTracker.getVisibleObjects(camera);
    const predictedObjects = this.visibilityTracker.getPredictedObjects(camera);
    
    // 优先加载可见和即将可见的资源
    for (const obj of [...visibleObjects, ...predictedObjects]) {
      const lodLevel = this.lodSystem.calculateLOD(obj, camera);
      this.queueResourceLoad(obj, lodLevel);
    }
    
    // 卸载远离摄像机的资源
    this.unloadDistantResources(camera);
  }
  
  queueResourceLoad(object, lodLevel) {
    const resourceKey = `${object.id}-${lodLevel}`;
    
    if (this.loadQueue.has(resourceKey)) return;
    
    const priority = this.calculateLoadPriority(object, lodLevel);
    this.loadQueue.set(resourceKey, {
      object: object,
      lodLevel: lodLevel,
      priority: priority,
      timestamp: Date.now()
    });
    
    this.processLoadQueue();
  }
  
  async processLoadQueue() {
    if (this.currentLoads >= this.maxConcurrentLoads) return;
    
    // 按优先级排序
    const sortedQueue = Array.from(this.loadQueue.entries())
      .sort((a, b) => b[1].priority - a[1].priority);
    
    for (const [key, loadRequest] of sortedQueue) {
      if (this.currentLoads >= this.maxConcurrentLoads) break;
      
      this.currentLoads++;
      this.loadQueue.delete(key);
      
      try {
        await this.loadResource(loadRequest);
      } catch (error) {
        console.warn('Resource loading failed:', error);
      } finally {
        this.currentLoads--;
        // 递归处理剩余队列
        setTimeout(() => this.processLoadQueue(), 0);
      }
    }
  }
}

内存监控和分析：

class MemoryProfiler {
  constructor(gl) {
    this.gl = gl;
    this.snapshots = [];
    this.isMonitoring = false;
  }
  
  startMonitoring(interval = 1000) {
    this.isMonitoring = true;
    
    const monitor = () => {
      if (!this.isMonitoring) return;
      
      const snapshot = this.takeSnapshot();
      this.snapshots.push(snapshot);
      
      // 保持最近100个快照
      if (this.snapshots.length > 100) {
        this.snapshots.shift();
      }
      
      // 检测内存泄漏
      this.detectMemoryLeaks();
      
      setTimeout(monitor, interval);
    };
    
    monitor();
  }
  
  takeSnapshot() {
    const info = this.gl.getExtension('WEBGL_debug_renderer_info');
    
    return {
      timestamp: Date.now(),
      jsHeapUsed: performance.memory?.usedJSHeapSize || 0,
      jsHeapTotal: performance.memory?.totalJSHeapSize || 0,
      renderer: info ? this.gl.getParameter(info.UNMASKED_RENDERER_WEBGL) : 'unknown',
      textureCount: this.getActiveTextureCount(),
      bufferCount: this.getActiveBufferCount(),
      programCount: this.getActiveProgramCount()
    };
  }
  
  detectMemoryLeaks() {
    if (this.snapshots.length < 10) return;
    
    const recent = this.snapshots.slice(-10);
    const trend = this.calculateMemoryTrend(recent);
    
    if (trend.jsHeap > 1024 * 1024) { // 1MB增长
      console.warn('Potential JS memory leak detected', trend);
    }
    
    if (trend.textures > 10) {
      console.warn('Potential texture leak detected', trend);
    }
  }
  
  generateReport() {
    const latest = this.snapshots[this.snapshots.length - 1];
    
    return {
      currentMemoryUsage: {
        jsHeap: latest.jsHeapUsed,
        textures: latest.textureCount,
        buffers: latest.bufferCount
      },
      memoryTrend: this.calculateMemoryTrend(this.snapshots.slice(-20)),
      recommendations: this.generateRecommendations()
    };
  }
}

性能优化策略：

• 实现资源预加载和延迟加载
• 使用对象池减少内存分配
• 合理设置纹理和缓冲区大小
• 实现智能垃圾回收策略
• 监控内存使用趋势和泄漏
• 使用压缩纹理格式减少内存占用

How to implement Physically Based Rendering (PBR) in WebGL?

考察点：PBR渲染技术。

答案：

基于物理的渲染（PBR）通过遵循物理定律来实现更真实的光照效果。PBR的核心是能量守恒和使用物理准确的材质参数。

PBR基础理论：

PBR基于双向反射分布函数（BRDF），主要包含漫反射和镜面反射两个部分：

• 漫反射（Diffuse）： Lambert模型或Oren-Nayar模型
• 镜面反射（Specular）： Cook-Torrance微表面模型

PBR着色器实现：

// PBR顶点着色器
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec3 aTangent;
attribute vec2 aTexCoord;

uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat3 uNormalMatrix;

varying vec3 vWorldPos;
varying vec3 vNormal;
varying vec3 vTangent;
varying vec3 vBitangent;
varying vec2 vTexCoord;

void main() {
  vWorldPos = (uModelMatrix * vec4(aPosition, 1.0)).xyz;
  vNormal = normalize(uNormalMatrix * aNormal);
  vTangent = normalize(uNormalMatrix * aTangent);
  vBitangent = cross(vNormal, vTangent);
  vTexCoord = aTexCoord;
  
  gl_Position = uProjectionMatrix * uViewMatrix * vec4(vWorldPos, 1.0);
}

// PBR片段着色器
precision highp float;

// 材质纹理
uniform sampler2D uAlbedoMap;
uniform sampler2D uNormalMap;
uniform sampler2D uMetallicMap;
uniform sampler2D uRoughnessMap;
uniform sampler2D uAOMap;

// 环境光照
uniform samplerCube uEnvironmentMap;
uniform samplerCube uIrradianceMap;
uniform sampler2D uBRDFLUT;

// 光源
uniform vec3 uLightPositions[4];
uniform vec3 uLightColors[4];
uniform float uLightIntensities[4];
uniform int uLightCount;

uniform vec3 uCameraPos;

varying vec3 vWorldPos;
varying vec3 vNormal;
varying vec3 vTangent;
varying vec3 vBitangent;
varying vec2 vTexCoord;

const float PI = 3.14159265359;

// 法线分布函数 (GGX/Trowbridge-Reitz)
float DistributionGGX(vec3 N, vec3 H, float roughness) {
  float a = roughness * roughness;
  float a2 = a * a;
  float NdotH = max(dot(N, H), 0.0);
  float NdotH2 = NdotH * NdotH;
  
  float num = a2;
  float denom = (NdotH2 * (a2 - 1.0) + 1.0);
  denom = PI * denom * denom;
  
  return num / denom;
}

// 几何函数
float GeometrySchlickGGX(float NdotV, float roughness) {
  float r = (roughness + 1.0);
  float k = (r * r) / 8.0;
  
  float num = NdotV;
  float denom = NdotV * (1.0 - k) + k;
  
  return num / denom;
}

float GeometrySmith(vec3 N, vec3 V, vec3 L, float roughness) {
  float NdotV = max(dot(N, V), 0.0);
  float NdotL = max(dot(N, L), 0.0);
  float ggx2 = GeometrySchlickGGX(NdotV, roughness);
  float ggx1 = GeometrySchlickGGX(NdotL, roughness);
  
  return ggx1 * ggx2;
}

// Fresnel方程
vec3 fresnelSchlick(float cosTheta, vec3 F0) {
  return F0 + (1.0 - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
}

vec3 fresnelSchlickRoughness(float cosTheta, vec3 F0, float roughness) {
  return F0 + (max(vec3(1.0 - roughness), F0) - F0) * pow(clamp(1.0 - cosTheta, 0.0, 1.0), 5.0);
}

void main() {
  // 材质属性
  vec3 albedo = pow(texture2D(uAlbedoMap, vTexCoord).rgb, 2.2);
  float metallic = texture2D(uMetallicMap, vTexCoord).r;
  float roughness = texture2D(uRoughnessMap, vTexCoord).r;
  float ao = texture2D(uAOMap, vTexCoord).r;
  
  // 法线贴图
  vec3 normalMap = texture2D(uNormalMap, vTexCoord).rgb * 2.0 - 1.0;
  mat3 TBN = mat3(normalize(vTangent), normalize(vBitangent), normalize(vNormal));
  vec3 N = normalize(TBN * normalMap);
  
  vec3 V = normalize(uCameraPos - vWorldPos);
  
  // 计算F0（表面反射率）
  vec3 F0 = vec3(0.04);
  F0 = mix(F0, albedo, metallic);
  
  // 反射方程
  vec3 Lo = vec3(0.0);
  
  // 直接光照
  for(int i = 0; i < uLightCount && i < 4; ++i) {
    vec3 L = normalize(uLightPositions[i] - vWorldPos);
    vec3 H = normalize(V + L);
    float distance = length(uLightPositions[i] - vWorldPos);
    float attenuation = 1.0 / (distance * distance);
    vec3 radiance = uLightColors[i] * uLightIntensities[i] * attenuation;
    
    // Cook-Torrance BRDF
    float NDF = DistributionGGX(N, H, roughness);
    float G = GeometrySmith(N, V, L, roughness);
    vec3 F = fresnelSchlick(max(dot(H, V), 0.0), F0);
    
    vec3 kS = F;
    vec3 kD = vec3(1.0) - kS;
    kD *= 1.0 - metallic;
    
    vec3 numerator = NDF * G * F;
    float denominator = 4.0 * max(dot(N, V), 0.0) * max(dot(N, L), 0.0) + 0.0001;
    vec3 specular = numerator / denominator;
    
    float NdotL = max(dot(N, L), 0.0);
    Lo += (kD * albedo / PI + specular) * radiance * NdotL;
  }
  
  // 环境光照 (IBL)
  vec3 F = fresnelSchlickRoughness(max(dot(N, V), 0.0), F0, roughness);
  vec3 kS = F;
  vec3 kD = 1.0 - kS;
  kD *= 1.0 - metallic;
  
  // 漫反射环境光
  vec3 irradiance = textureCube(uIrradianceMap, N).rgb;
  vec3 diffuse = irradiance * albedo;
  
  // 镜面反射环境光
  vec3 R = reflect(-V, N);
  const float MAX_REFLECTION_LOD = 4.0;
  vec3 prefilteredColor = textureCubeLod(uEnvironmentMap, R, roughness * MAX_REFLECTION_LOD).rgb;
  vec2 brdf = texture2D(uBRDFLUT, vec2(max(dot(N, V), 0.0), roughness)).rg;
  vec3 specular = prefilteredColor * (F * brdf.x + brdf.y);
  
  vec3 ambient = (kD * diffuse + specular) * ao;
  vec3 color = ambient + Lo;
  
  // HDR色调映射
  color = color / (color + vec3(1.0));
  
  // Gamma校正
  color = pow(color, vec3(1.0/2.2));
  
  gl_FragColor = vec4(color, 1.0);
}