互联网大厂200道高频大前端图形图像3D技术面试题

图形图像3D技术篇

1. WebGL 的渲染管线是如何工作的？

答案解析
WebGL 基于 OpenGL ES，渲染管线包括以下阶段：

• 顶点着色器：处理顶点数据（如位置、颜色）。
• 图元组装：将顶点连接成图元（点、线、三角形）。
• 光栅化：将图元转为像素片段。
• 片段着色器：计算每个像素的颜色。
• 测试与混合：深度测试、模板测试、颜色混合。

代码示例：

const vertexShaderSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;
const fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

应用场景：3D 渲染基础、游戏开发。

---

2. Canvas 2D 和 WebGL 的主要区别是什么？

答案解析

• Canvas 2D：基于 CPU 的光栅化 API，适合绘制简单 2D 图形。
• WebGL：基于 GPU 的 3D 渲染 API，支持复杂图形和实时渲染。
• 性能：WebGL 利用硬件加速，性能远超 Canvas 2D。

代码示例：

// Canvas 2D
const ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 100, 100);

// WebGL
const gl = canvas.getContext('webgl');
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

应用场景：Canvas 2D 用于简单图表，WebGL 用于 3D 场景。

---

3. Three.js 中如何创建一个基本 3D 场景？

答案解析
Three.js 是 WebGL 的封装库，创建场景需以下组件：

• 场景（Scene）：容器。
• 相机（Camera）：视角。
• 渲染器（Renderer）：绘制工具。

代码示例：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
   
    color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
   
   
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  renderer.render(scene, camera);
}
animate();

应用场景：3D 可视化、游戏原型。

---

4. WebGL 中的 MVP 矩阵分别代表什么？

答案解析
MVP 矩阵是 3D 渲染的核心：

• 模型矩阵（Model Matrix）：将物体从局部坐标转为世界坐标。
• 视图矩阵（View Matrix）：将世界坐标转为相机坐标。
• 投影矩阵（Projection Matrix）：将 3D 坐标投影到 2D 屏幕。

代码示例：

const modelMatrix = mat4.create(); // 使用 gl-matrix 库
const viewMatrix = mat4.lookAt(mat4.create(), [0, 0, 5], [0, 0, 0], [0, 1, 0]);
const projectionMatrix = mat4.perspective(mat4.create(), 45, canvas.width / canvas.height, 0.1, 100);

应用场景：3D 变换、视角控制。

---

5. 如何在 Three.js 中实现光照效果？

答案解析
Three.js 提供多种光源（如环境光、点光源、方向光）。

• 步骤：创建光源并添加到场景。
• 材质：需使用支持光照的材质（如 MeshPhongMaterial）。

代码示例：

const ambientLight = new THREE.AmbientLight(0x404040); // 环境光
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xffffff, 1, 100); // 点光源
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

const material = new THREE.MeshPhongMaterial({
   
    color: 0x00ff00 });
const cube = new THREE.Mesh(new THREE.BoxGeometry(), material);
scene.add(cube);

应用场景：真实感渲染、游戏场景。

---

6. Canvas 如何实现动画效果？

答案解析
Canvas 动画通过不断清除画布并重绘实现。

• 核心：requestAnimationFrame 提供平滑循环。

代码示例：

const ctx = canvas.getContext('2d');
let x = 0;

function draw() {
   
   
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 50, 50);
  x += 1;
  requestAnimationFrame(draw);
}
draw();

应用场景：2D 游戏、动态图表。

---

7. WebGL 中的纹理映射是如何实现的？

答案解析
纹理映射将图像贴到 3D 物体表面。

• 步骤：
  1. 创建纹理对象（gl.createTexture）。
  2. 加载图像并绑定。
  3. 设置纹理坐标。

代码示例：

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
const image = new Image();
image.onload = () => {
   
   
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  gl.generateMipmap(gl.TEXTURE_2D);
};
image.src = 'texture.jpg';

应用场景：3D 模型材质、游戏贴图。

---

8. Three.js 中如何加载外部 3D 模型（如 GLTF）？

答案解析
使用 GLTFLoader 加载 .gltf 或 .glb 文件。

• 步骤：引入加载器，异步加载模型。

代码示例：

import {
   
    GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('model.gltf', (gltf) => {
   
   
  scene.add(gltf.scene);
}, undefined, (error) => console.error(error));

应用场景：建筑可视化、游戏资产。

---

9. 如何优化 WebGL 的渲染性能？

答案解析

• 减少绘制调用：合并几何体，减少 drawElements 调用。
• 纹理优化：使用压缩纹理（如 ETC1）。
• 批量处理：使用顶点缓冲对象（VBO）。

代码示例：

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 静态 VBO

应用场景：高性能 3D 应用、实时渲染。

---

10. Canvas 中的离屏渲染是什么？如何实现？

答案解析
离屏渲染在内存中创建独立 Canvas，避免直接操作 DOM。

• 优点：提升性能，减少重绘。

代码示例：

const offscreen = document.createElement('canvas');
offscreen.width = 100;
offscreen.height = 100;
const offCtx = offscreen.getContext('2d');
offCtx.fillRect(0, 0, 50, 50);
ctx.drawImage(offscreen, 0, 0);

应用场景：复杂图形预渲染。

---

11. Three.js 中如何实现相机动画？

答案解析
通过调整相机位置并使用插值（如 TWEEN.js）实现动画。

代码示例：

import TWEEN from '@tweenjs/tween.js';

const coords = {
   
    z: 5 };
new TWEEN.Tween(coords)
  .to({
   
    z: 10 }, 1000)
  .onUpdate(() => camera.position.z = coords.z)
  .start();

function animate() {
   
   
  requestAnimationFrame(animate);
  TWEEN.update();
  renderer.render(scene, camera);
}
animate();

应用场景：场景漫游、交互体验。

---

12. WebGL 中如何实现深度测试？

答案解析
深度测试避免被遮挡的像素绘制。

• 步骤：启用 DEPTH_TEST，设置深度缓冲区。

代码示例：

gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

应用场景：3D 场景遮挡处理。

---

13. 如何在 Canvas 中实现粒子效果？

答案解析
通过绘制多个移动的小图形实现粒子效果。

• 核心：更新粒子位置并重绘。

代码示例：

const particles = [];
for (let i = 0; i < 100; i++) {
   
   
  particles.push({
   
    x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: Math.random() - 0.5 });
}

function animate() {
   
   
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => {
   
   
    p.x += p.vx;
    ctx.fillRect(p.x, p.y, 2, 2);
  });
  requestAnimationFrame(animate);
}
animate();

应用场景：视觉特效、背景动画。

---

14. Three.js 中如何实现阴影效果？

答案解析
阴影需启用渲染器阴影支持，并为光源和物体配置。

代码示例：

renderer.shadowMap.enabled = true;

const light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
scene.add(light);

const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);

应用场景：真实感增强、游戏渲染。

---

15. WebGL 中的帧缓冲区（Framebuffer）有什么作用？

答案解析
帧缓冲区用于离屏渲染，存储渲染结果。

• 用途：后期处理（如模糊）、多通道渲染。

代码示例：

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
const texture = gl.createTexture();
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

应用场景：特效处理、渲染到纹理。

---

16. 如何在 Three.js 中实现天空盒？

答案解析
天空盒使用立方体贴图模拟环境背景。

代码示例：

const loader = new THREE.CubeTextureLoader();
const texture = loader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
scene.background = texture;

应用场景：虚拟现实、游戏环境。

---

17. Canvas 如何实现图像像素操作？

答案解析
通过 getImageData 获取像素数据并修改。

代码示例：

const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data;
for (let i = 0; i < data.length; i += 4) {
   
   
  data[i] = 255 - data[i]; // 反转红色通道
}
ctx.putImageData(imgData, 0, 0);

应用场景：图像滤镜、特效。

---

18. WebGL 中如何实现多重纹理？

答案解析
多重纹理为一个图元应用多个纹理。

• 步骤：激活多个纹理单元，绑定纹理。

code示例：

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture1);
gl.uniform1i(gl.getUniformLocation(program, 'u_texture1'), 0);

gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture2);
gl.uniform1i(gl.getUniformLocation(program, 'u_texture2'), 1);

应用场景：复杂材质、游戏贴图。

---

19. Three.js 中如何实现物理模拟？

答案解析
通过集成 Cannon.js 或 Ammo.js 实现物理引擎。

code示例：

import * as CANNON from 'cannon-es';
import {
   
    CannonHelper } from 'three-cannon';

const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);

const body = new CANNON.Body({
   
    mass: 1 });
body.addShape(new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)));
world.addBody(body);

function animate() {
   
   
  world.step(1 / 60);
  cube.position.copy(body.position);
  renderer.render(scene, camera);
}

应用场景：游戏物理、物体交互。

---

20. 如何在 Canvas 中实现拖拽效果？

答案解析
通过监听鼠标事件并更新绘制位置实现拖拽。

code示例：

let dragging = false;
let x = 50, y = 50;

canvas.onmousedown = () => dragging = true;
canvas.onmouseup = () => dragging = false;
canvas.onmousemove = (e) => {
   
   
  if (dragging) {
   
   
    x = e.clientX;
    y = e.clientY;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, y, 50, 50);
  }
};

应用场景：交互式绘图、UI 设计。

---

21. WebGL 中的着色器语言 GLSL 有哪些特点？

答案解析
GLSL 是 WebGL 的着色器语言，基于 C。

• 特点：
  • 强类型，支持向量和矩阵运算。
  • 并行执行，运行在 GPU 上。
  • 无指针和动态内存分配。

code示例：

uniform vec3 u_color;
void main() {
  gl_FragColor = vec4(u_color, 1.0);
}

应用场景：自定义渲染效果。

---

22. Three.js 中如何实现后处理效果（如模糊）？

答案解析
使用 EffectComposer 和后处理通道（如 BlurPass）。

code示例：

import {
   
    EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import {
   
    RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import {
   
    UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85));

function animate() {
   
   
  composer.render();
  requestAnimationFrame(animate);
}
animate();

应用场景：视觉特效、游戏渲染。

---

23. 如何在 WebGL 中实现抗锯齿？

答案解析
抗锯齿通过多重采样（MSAA）或后期处理实现。

• 方法：启用 antialias 或使用帧缓冲区。

code示例：

const gl = canvas.getContext('webgl', {
   
    antialias: true });

应用场景：提升图形质量。

---

24. Canvas 如何实现圆形进度条？

答案解析
通过 arc 方法绘制动态圆环。

code示例：

let progress = 0;
function draw() {
   
   
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(100, 100, 50, -Math.PI / 2, -Math.PI / 2 + progress * Math.PI * 2);
  ctx.stroke();
  progress += 0.01;
  if (progress < 1) requestAnimationFrame(draw);
}
draw();

应用场景：加载动画、仪表盘。

---

25. Three.js 中如何实现模型动画？

答案解析
加载带动画的模型（如 GLTF），使用 AnimationMixer 播放。

code示例：

const mixer = new THREE.AnimationMixer(scene);
loader.load('animated.gltf', (gltf) => {
   
   
  const clip = gltf.animations[0];
  mixer.clipAction(clip).play();
});

function animate() {
   
   
  mixer.update(1 / 60);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
animate();

应用场景：角色动画、交互展示。

---

26. WebGL 中的 Uniform 和 Attribute 的区别是什么？

答案解析

• Uniform：全局变量，每个顶点或片段相同（如光照参数）。
• Attribute：顶点特有变量（如位置、颜色）。

code示例：

uniform vec3 u_lightPos;
attribute vec3 a_position;
void main() {
  gl_Position = vec4(a_position, 1.0);
}

应用场景：着色器数据传递。

---

27. 如何在 Canvas 中实现贝塞尔曲线？

答案解析
使用 bezierCurveTo 绘制平滑曲线。

code示例：

ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(100, 50, 150, 150, 200, 100);
ctx.stroke();

应用场景：平滑路径、图形设计。

---

28. Three.js 中如何实现物体拾取（Raycasting）？

答案解析
使用 Raycaster 检测鼠标与物体的交点。

code示例：

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

canvas.onmousemove = (e) => {
   
   
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length) intersects[0].object.material.color.set(0xff0000);
};

应用场景：交互式 3D 应用。

---

29. WebGL 如何实现环境映射？

答案解析
环境映射使用立方体纹理模拟反射。

• 步骤：加载立方体贴图，片段着色器计算反射。

code示例：

uniform samplerCube u_envMap;
varying vec3 v_normal;
void main() {
  vec3 reflection = reflect(normalize(v_normal), normalize(vec3(0.0, 0.0, -1.0)));
  gl_FragColor = textureCube(u_envMap, reflection);
}

应用场景：金属材质、反射效果。

---

30. 如何在 Canvas 中实现文字动画？

答案解析
通过更新文字位置或样式并重绘实现。

code示例：

let x = 0;
function animate() {
   
   
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText('Hello', x, 100);
  x += 1;
  requestAnimationFrame(animate);
}
animate();

应用场景：动态标题、广告。

---

31. Three.js 中如何实现水面效果？

答案解析
使用 Water 类（需引入扩展）模拟水面波动。

code示例：

import {
   
    Water } from 'three/examples/jsm/objects/Water.js';

const water = new Water(new THREE.PlaneGeometry(100, 100), {
   
   
  textureWidth: 512,
  textureHeight: 512,
  waterNormals: new THREE.TextureLoader().load('normals.jpg')
});
scene.add(water);

应用场景：自然场景、游戏环境。

---

32. WebGL 中的顶点缓冲对象（VBO）如何优化渲染？

答案解析
VBO 将顶点数据存储在 GPU，减少 CPU-GPU 传输。

code示例：

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 1, 1, 0]), gl.STATIC_DRAW);

应用场景：大规模几何体渲染。

---

33. 如何在 Canvas 中实现渐变效果？

答案解析
使用 createLinearGradient 或 createRadialGradient。

code示例：

const gradient = ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 100, 100);

应用场景：背景填充、UI 设计。

---

34. Three.js 中如何实现 VR 模式？

答案解析
使用 WebXRManager 支持 VR 渲染。

code示例：

renderer.xr.enabled = true;
document.body.appendChild(VRButton.createButton(renderer));

function animate() {
   
   
  renderer.setAnimationLoop(() => renderer.render(scene, camera));
}
animate();

应用场景：虚拟现实、沉浸式体验。

---

35. WebGL 如何实现法线贴图？

答案解析
法线贴图通过纹理模拟光照细节。

• 步骤：加载法线贴图，着色器计算光照。

code示例：

uniform sampler2D u_normalMap;
varying vec2 v_uv;
void main() {
  vec3 normal = texture2D(u_normalMap, v_uv).rgb * 2.0 - 1.0;
  gl_FragColor = vec4(normal, 1.0);
}

应用场景：物体表面细节增强。

---

36. 如何在 Canvas 中实现碰撞检测？

答案解析
通过计算物体边界或像素重叠实现碰撞检测。

code示例：

const rect1 = {
   
    x: 50, y: 50, w: 50, h: 50 };
const rect2 = {
   
    x: 80, y: 80, w: 50, h: 50 };

if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x &&
    rect1.y < rect2.y + rect2.h && rect1.y + rect1.h > rect2.y) {
   
   
  console.log('Collision detected');
}

应用场景：2D 游戏开发。

---

37. Three.js 中如何实现粒子系统？

答案解析
使用 Points 和 PointsMaterial 创建粒子效果。

code示例：

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array(1000).map(() => Math.random() * 10 - 5);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.PointsMaterial({
   
    size: 0.1, color: 0xffffff });
const points = new THREE.Points(geometry, material);
scene.add(points);

应用场景：烟雾、星空效果。

---

38. WebGL 中的模板测试（Stencil Test）有什么用途？

答案解析
模板测试控制像素绘制区域，常用于阴影或轮廓。

code示例：

gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(gl.ALWAYS, 1, 0xFF);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);

应用场景：复杂遮罩、多层渲染。

---

39. 如何在 Canvas 中实现放大镜效果？

答案解析
通过绘制放大区域的像素数据实现。

code示例：

canvas.onmousemove = (e) => {
   
   
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0);
  const data = ctx.getImageData(e.x - 25, e.y - 25, 50, 50);
  ctx.putImageData(data, e.x, e.y, 0, 0, 100, 100); // 放大 2 倍
};

应用场景：图像查看、细节展示。

---

40. Three.js 中如何实现 LOD（细节层次）？

答案解析
LOD 根据距离切换模型细节，使用 LOD 对象。

code示例：

const lod = new THREE.LOD();
lod.addLevel(new THREE.Mesh(highDetailGeo, material), 5);
lod.addLevel(new THREE.Mesh(lowDetailGeo, material), 10);
scene.add(lod);

应用场景：性能优化、大场景渲染。

---

41. WebGL 如何实现动态阴影？

答案解析
动态阴影通过阴影贴图（Shadow Mapping）实现。

• 步骤：从光源视角渲染深度图，比较像素深度。

code示例：

uniform sampler2D u_shadowMap;
varying vec4 v_shadowCoord;
void main() {
  float depth = texture2D(u_shadowMap, v_shadowCoord.xy).r;
  float shadow = v_shadowCoord.z > depth ? 0.5 : 1.0;
  gl_FragColor = vec4(shadow, shadow, shadow, 1.0);
}

应用场景：实时阴影、游戏渲染。

---

42. 如何在 Canvas 中实现路径裁剪？

答案解析
使用 clip 方法限制绘制区域。

code示例：

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.clip();
ctx.fillRect(0, 0, canvas.width, canvas.height);

应用场景：遮罩效果、图形裁剪。

---

43. Three.js 中如何实现多相机渲染？

答案解析
使用多个相机分别渲染不同区域。

code示例：

const camera1 = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
const camera2 = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
renderer.setScissorTest(true);
renderer.setScissor(0, 0, window.innerWidth / 2, window.innerHeight);
renderer.render(scene, camera1);
renderer.setScissor(window.innerWidth / 2, 0, window.innerWidth / 2, window.innerHeight);
renderer.render(scene, camera2);

应用场景：分屏显示、监控视角。

---

44. WebGL 中的渲染到纹理（Render to Texture）如何实现？

答案解析
使用帧缓冲区将渲染结果存储到纹理。

code示例：

const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3);

应用场景：后期处理、动态纹理。

---

45. 如何在 Canvas 中实现多层绘制？

答案解析
通过多个 Canvas 或离屏 Canvas 分层绘制。

code示例：

const bgCanvas = document.createElement('canvas');
const bgCtx = bgCanvas.getContext('2d');
bgCtx.fillRect(0, 0, 100, 100);
ctx.drawImage(bgCanvas, 0, 0);

应用场景：复杂场景分层、性能优化。

---

46. Three.js 中如何实现雾效？

答案解析
通过 Fog 或 FogExp2 添加雾化效果。

code示例：

scene.fog = new THREE.Fog(0xcccccc, 10, 50);
// 或 scene.fog = new THREE.FogExp2(0xcccccc, 0.02);

应用场景：远景模糊、大气效果。

---

47. WebGL 如何实现 Instancing（实例化渲染）？

答案解析
Instancing 一次性绘制多个相同对象。

• 步骤：使用 ANGLE_instanced_arrays 扩展。

code示例：

const ext = gl.getExtension('ANGLE_instanced_arrays');
gl.vertexAttribDivisor(1, 1); // 每个实例更新一次
ext.drawArraysInstanced(gl.TRIANGLES, 0, 3, 10); // 绘制 10 个实例

应用场景：大量重复物体渲染。

---

48. 如何在 Canvas 中实现动态波形图？

答案解析
通过绘制折线并更新数据实现波形。

code示例：

let data = new Array(100).fill(0).map(() => Math.random() * 100);
function draw() {
   
   
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  data.forEach((y, x) => ctx.lineTo(x * 5, y));
  ctx.stroke();
  data.shift();
  data.push(Math.random() * 100);
  requestAnimationFrame(draw);
}
draw();

应用场景：音频可视化、监控图表。

---

49. Three.js 中如何实现骨骼动画？

答案解析
加载带骨骼的模型，使用 SkinnedMesh 和 AnimationMixer。

code示例：

loader.load('character.gltf', (gltf) => {
   
   
  const model = gltf.scene;
  const mixer = new THREE.AnimationMixer(model);
  mixer.clipAction(gltf.animations[0]).play();
  scene.add(model);
});

应用场景：角色动画、游戏开发。

---

50. WebGL 中的多重采样抗锯齿（MSAA）如何实现？

答案解析
MSAA 在硬件层面平滑边缘，需上下文支持。

• 步骤：创建支持多采样的帧缓冲区。

code示例：

const gl = canvas.getContext('webgl', {
   
    antialias: true }); // 默认启用 MSAA

应用场景：高质量渲染、游戏图形。

---