游戏渲染基础

概述

渲染决定了游戏画面的最终呈现。对 Web 游戏开发者而言，渲染方案主要有三条路线：Canvas 2D（上手快、API 直观）、WebGL（GPU 加速、性能强）、WebGPU（下一代、潜力大）。本文将从 Canvas 2D 的实战优化讲起，逐步深入到精灵批处理与瓦片地图这两个游戏渲染高频场景，最后对比三条渲染管线的适用场景。

Canvas 2D 渲染基础

绘制性能原则

Canvas 2D 是状态机模型——绘图上下文（ctx）持有当前状态（颜色、变换、裁剪等）。性能优化围绕两个核心原则：

减少状态切换：每次修改 fillStyle/globalAlpha 等状态都可能触发内部刷新
减少绘制指令：每条 draw 指令都有开销，指令数量是性能第一指标

绘制一张精灵图

const img = new Image()
img.src = 'sprite.png'

// 在指定位置绘制图片
function drawSprite(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) {
  // 9 个参数：源图裁剪区域 + 目标绘制区域
  ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
}

// 常用简写：整张图直接画
function drawSpriteSimple(ctx, img, x, y) {
  ctx.drawImage(img, x, y)
}

背景与摄像机（Camera）

游戏通常有摄像机概念，让世界滚动而角色保持在视野中：

const camera = { x: 0, y: 0 }  // 世界坐标偏移

function render(ctx) {
  ctx.clearRect(0, 0, viewW, viewH)
  ctx.save()
  ctx.translate(-camera.x, -camera.y)  // 平移实现"跟随"

  // 绘制世界对象（使用世界坐标）
  for (const obj of worldObjects) {
    ctx.drawImage(img, obj.x, obj.y)
  }

  ctx.restore()
}

Sprite Batch 精灵批处理

为什么需要批处理

问题：Canvas 2D 中每条 drawImage 指令都有固定开销。画 1000 个相同精灵就需要 1000 次指令，CPU 成为瓶颈（即使 GPU 完全空闲）。

解决思路：把大量精灵合并为少量绘制指令——这就是 Sprite Batch（精灵批处理）。

Canvas 2D 的批处理近似

Canvas 2D 没有真正的批处理 API，但可以通过优化减少状态切换：

// ❌ 差：每画一个就改一次状态
for (const s of sprites) {
  ctx.globalAlpha = s.alpha
  ctx.drawImage(img, s.x, s.y)
}

// ✅ 好：按状态分组绘制，减少状态切换
const groups = groupByAlpha(sprites)  // 按 alpha 分组
for (const [alpha, list] of groups) {
  ctx.globalAlpha = alpha
  for (const s of list) {
    ctx.drawImage(img, s.x, s.y)
  }
}

WebGL 中的真正批处理

WebGL 中，一次绘制调用（draw call）可以一次性提交大量顶点。把所有精灵的顶点打包进单个缓冲区，一次 draw call 绘制所有精灵：

// 伪代码：精灵批处理核心思路
// 1. 每帧把所有精灵的位置/纹理坐标写入一个大 Float32Array
function buildBatchVertices(sprites, buffer) {
  let offset = 0
  for (const s of sprites) {
    // 每个精灵 4 个顶点 × 6 个属性（x,y,u,v,r,g,b,a）
    writeQuad(buffer, offset, s)
    offset += 4 * 6
  }
  return offset
}

// 2. 一次 draw call 绘制整个批次
function flushBatch(buffer, vertexCount) {
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
  gl.drawArrays(gl.TRIANGLES, 0, vertexCount)  // 单次调用绘制全部
}

为什么快：把 N 次 draw call 变成 1 次，这是渲染性能最大的一次质变。

Tilemap 瓦片地图

瓦片地图原理

Tilemap 用小图片（瓦片）拼接大场景：一张图（Tileset，瓦片集）里放很多 16×16 的小瓦片，地图用一个二维数组描述"哪个格子用哪个瓦片"。优点：内存占用小、绘制快、易于编辑。

瓦片集与地图数据

// 瓦片集：64×64 的图片，每个瓦片 16×16 → 4×4 = 16 个瓦片
const TILE_SIZE = 16
const tilesPerRow = 4  // 瓦片集每行几个瓦片

// 地图：每个数字是瓦片在瓦片集中的索引
const map = [
  [1, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 2, 0, 0, 3, 0, 1],  // 2=金币, 3=敌人
  [1, 1, 1, 1, 1, 1, 1, 1]
]

从瓦片索引计算裁剪坐标

// 索引 → 在瓦片集中的像素坐标
function getTileSourceRect(tileIndex, tileset, tileSize, tilesPerRow) {
  return {
    sx: (tileIndex % tilesPerRow) * tileSize,
    sy: Math.floor(tileIndex / tilesPerRow) * tileSize,
    sw: tileSize,
    sh: tileSize
  }
}

只绘制可见区域（视锥裁剪）

大地图不能全画，只画摄像机范围内的瓦片：

function renderMap(ctx, tileset, map, camera, viewW, viewH) {
  const startCol = Math.max(0, Math.floor(camera.x / TILE_SIZE))
  const startRow = Math.max(0, Math.floor(camera.y / TILE_SIZE))
  const endCol = Math.min(map[0].length, Math.ceil((camera.x + viewW) / TILE_SIZE))
  const endRow = Math.min(map.length, Math.ceil((camera.y + viewH) / TILE_SIZE))

  for (let row = startRow; row < endRow; row++) {
    for (let col = startCol; col < endCol; col++) {
      const tile = map[row][col]
      if (tile === 0) continue  // 0 表示空，跳过

      const { sx, sy, sw, sh } = getTileSourceRect(tile, tileset, TILE_SIZE, 4)
      const dx = col * TILE_SIZE - camera.x
      const dy = row * TILE_SIZE - camera.y
      ctx.drawImage(tileset, sx, sy, sw, sh, dx, dy, sw, sh)
    }
  }
}

优化效果：800×600 视口 + 16 像素瓦片，只需绘制约 50×38 = 1900 个瓦片，而非整个地图。

渲染管线对比

Canvas 2D / WebGL / WebGPU 对比

维度	Canvas 2D	WebGL	WebGPU
渲染方式	CPU 合成	GPU 顶点/片元着色器	GPU 现代管线
上手难度	低	高	高
性能	中（受 CPU 限制）	高（GPU 加速）	最高
绘制大量精灵	吃力	批处理游刃有余	同 WebGL 且更优
3D 支持	无	有（基于 GLSL）	有（WGSL，现代）
浏览器支持	全部	几乎全部	Chrome/Edge 等已支持
适用场景	简单 2D、原型、UI	中大型 2D/3D 游戏	下一代高性能 Web 游戏

管线原理对比

Canvas 2D 管线（CPU 为主）

text

JS 绘制指令 → Canvas 2D 上下文 → CPU 光栅化 → 合成器 → 屏幕

每条指令由 CPU 处理，指令过多时 CPU 成瓶颈。

WebGL 管线（GPU 为主）

text

顶点缓冲 → 顶点着色器 → 图元装配 → 光栅化 → 片元着色器 → 帧缓冲 → 屏幕

数据一次性上传 GPU，之后全部在 GPU 上并行处理，适合大批量绘制。一个最小的 WebGL 渲染管线如下（顶点着色器转换坐标、片元着色器输出颜色）：

如何选择渲染方案

场景	推荐方案	理由
原型 / 学习 / 简单 2D	Canvas 2D	快、简单、足够
大量精灵的 2D 游戏（弹幕、RPG）	WebGL 或 PixiJS	批处理性能优势明显
2D/3D 混合或 3D 游戏	Three.js / Babylon.js	底层就是 WebGL/WebGPU
追求极致性能、下一代	WebGPU	现代管线、更低开销

实际选择

对大多数 2D 游戏，不建议手写 WebGL。PixiJS 等渲染引擎封装了批处理、缓存、渲染器管理等复杂细节，直接获得接近原生 WebGL 的性能。理解本节的原理，是为了能正确评估引擎能力和排查性能问题。

渲染优化清单

减少绘制指令：批处理、合并同类绘制
减少状态切换：按状态分组绘制
视锥裁剪：只画可见区域（瓦片、对象均适用）
避免每帧重绘静态内容：离屏 Canvas 缓存静态背景，仅重绘动态层
像素对齐：整数坐标绘制避免模糊
控制缩放质量：非关键场景用 imageSmoothingEnabled = false（像素风）

离屏 Canvas 缓存静态层

// 静态背景只画一次，存到离屏 canvas
const bgCanvas = document.createElement('canvas')
bgCanvas.width = viewW
bgCanvas.height = viewH
const bgCtx = bgCanvas.getContext('2d')
renderStaticBackground(bgCtx)  // 只执行一次

// 每帧：先画背景（一次 drawImage），再画动态层
function render(ctx) {
  ctx.drawImage(bgCanvas, 0, 0)      // 1 条指令画完整个背景
  for (const obj of dynamicObjects) {
    ctx.drawImage(obj.img, obj.x, obj.y)
  }
}

本章小结

Canvas 2D：状态机模型，性能核心是"少指令、少切状态"
Sprite Batch：把 N 次 draw call 合并成 1 次，是 WebGL 渲染性能的关键
Tilemap：瓦片索引数组 + 瓦片集，配合视锥裁剪高效绘制大地图
管线对比：Canvas 2D（CPU）→ WebGL（GPU）→ WebGPU（新一代），按场景选型
优化清单：裁剪、缓存、批处理、像素对齐是四大基础手段

下一篇文章将讲解游戏动画与音频系统——帧动画、骨骼动画、音频池与 3D 空间音频。

游戏渲染基础 ​

概述 ​

Canvas 2D 渲染基础 ​

绘制性能原则 ​

绘制一张精灵图 ​

背景与摄像机（Camera） ​

Sprite Batch 精灵批处理 ​

为什么需要批处理 ​

Canvas 2D 的批处理近似 ​

WebGL 中的真正批处理 ​

Tilemap 瓦片地图 ​

瓦片地图原理 ​

瓦片集与地图数据 ​

从瓦片索引计算裁剪坐标 ​

只绘制可见区域（视锥裁剪） ​

渲染管线对比 ​

Canvas 2D / WebGL / WebGPU 对比 ​

管线原理对比 ​

Canvas 2D 管线（CPU 为主） ​

WebGL 管线（GPU 为主） ​

如何选择渲染方案 ​

渲染优化清单 ​

离屏 Canvas 缓存静态层 ​

本章小结 ​