Web Workers para lógica de jogos

Os Web Workers permitem executar JavaScript em uma thread em segundo plano. Para jogos, isso significa que física, IA e geração procedural podem ser executadas sem causar quedas na taxa de quadros.

1) Quando usar Workers

Boas opções:

• Simulação de física
• Busca de caminhos (A*, navmesh)
• Tomada de decisões de IA
• Geração procedural
• Processamento de assets (manipulação de imagens, compactação)
• Matemática complexa (FFT, detecção de colisões)

Não são ideais para:

• Renderização (Workers não podem acessar diretamente o DOM/Canvas)
• Tarefas muito pequenas (o custo adicional da thread não compensa)

2) Criando um Worker básico

worker.js:

self.onmessage = (e) => {
  const { type, data } = e.data
  
  if (type === 'calculate') {
    const result = heavyCalculation(data)
    self.postMessage({ type: 'result', data: result })
  }
}

function heavyCalculation(input) {
  // Expensive work here
  return input * 2
}

main.js:

const worker = new Worker('worker.js')

worker.onmessage = (e) => {
  const { type, data } = e.data
  if (type === 'result') {
    console.log('Got result:', data)
  }
}

worker.postMessage({ type: 'calculate', data: 42 })

3) Workers inline (sem arquivo separado)

function createInlineWorker(fn) {
  const blob = new Blob([`(${fn.toString()})()`], { type: 'text/javascript' })
  return new Worker(URL.createObjectURL(blob))
}

const worker = createInlineWorker(() => {
  self.onmessage = (e) => {
    const result = e.data * 2
    self.postMessage(result)
  }
})

4) Workers como módulos ES

Você pode escrever o código do Worker como um módulo ES e usar import dentro dele, em vez de importScripts. Passe { type: 'module' } ao construtor:

const worker = new Worker('physics-worker.js', { type: 'module' })

Dentro do Worker, você pode usar import para carregar funções auxiliares compartilhadas de matemática, colisão ou IA da mesma forma que na thread principal, evitando duplicar a lógica do jogo. Workers de módulo têm suporte no Chrome e Edge 80+, Safari 15+ e Firefox 114+.

5) Exemplo de Worker de física

physics-worker.js:

const bodies = []
const FIXED_DT = 1 / 60

self.onmessage = (e) => {
  const { type, data } = e.data
  
  switch (type) {
    case 'init':
      initWorld(data)
      break
    case 'step':
      step()
      break
    case 'addBody':
      bodies.push(data)
      break
  }
}

function initWorld(config) {
  // Initialize physics world
}

function step() {
  // Update physics
  for (const body of bodies) {
    body.vy += 9.8 * FIXED_DT // Gravity
    body.x += body.vx * FIXED_DT
    body.y += body.vy * FIXED_DT
  }
  
  // Send positions back
  self.postMessage({
    type: 'positions',
    data: bodies.map(b => ({ id: b.id, x: b.x, y: b.y, rotation: b.rotation }))
  })
}

6) Objetos transferíveis para melhorar o desempenho

Grandes volumes de dados podem ser transferidos sem cópia:

// Main thread
const positions = new Float32Array(1000)
worker.postMessage(positions, [positions.buffer])
// positions is now unusable here (transferred)

// Worker
self.onmessage = (e) => {
  const positions = e.data
  // Work with positions
  self.postMessage(positions, [positions.buffer])
}

7) Worker para busca de caminhos

pathfinding-worker.js:

let grid = null

self.onmessage = (e) => {
  const { type, data } = e.data
  
  if (type === 'setGrid') {
    grid = data
  }
  
  if (type === 'findPath') {
    const path = aStar(data.start, data.end, grid)
    self.postMessage({ type: 'path', id: data.id, path })
  }
}

function aStar(start, end, grid) {
  // A* implementation
  const openSet = [start]
  const cameFrom = new Map()
  const gScore = new Map()
  gScore.set(key(start), 0)
  
  while (openSet.length > 0) {
    // ... A* logic
  }
  
  return reconstructPath(cameFrom, end)
}

function key(pos) {
  return `${pos.x},${pos.y}`
}

8) Pool de Workers para tarefas paralelas

class WorkerPool {
  constructor(workerUrl, size = navigator.hardwareConcurrency || 4) {
    this.workers = []
    this.queue = []
    this.available = []
    
    for (let i = 0; i < size; i++) {
      const worker = new Worker(workerUrl)
      worker.onmessage = (e) => this.handleResult(worker, e)
      this.workers.push(worker)
      this.available.push(worker)
    }
  }
  
  run(data) {
    return new Promise((resolve) => {
      const task = { data, resolve }
      
      if (this.available.length > 0) {
        this.dispatch(this.available.pop(), task)
      } else {
        this.queue.push(task)
      }
    })
  }
  
  dispatch(worker, task) {
    worker._currentTask = task
    worker.postMessage(task.data)
  }
  
  handleResult(worker, e) {
    const task = worker._currentTask
    task.resolve(e.data)
    
    if (this.queue.length > 0) {
      this.dispatch(worker, this.queue.shift())
    } else {
      this.available.push(worker)
    }
  }
  
  terminate() {
    this.workers.forEach(w => w.terminate())
  }
}

9) SharedArrayBuffer para sincronização em tempo real

Com o isolamento entre origens ativado, você pode compartilhar memória:

// Main thread
const shared = new SharedArrayBuffer(1024)
const positions = new Float32Array(shared)

worker.postMessage({ type: 'init', buffer: shared })

// Worker reads/writes directly to shared memory
// No postMessage overhead for position updates

10) OffscreenCanvas para Workers

Renderize em um Worker. O OffscreenCanvas agora está amplamente disponível como recurso Baseline no Chrome, Edge, Firefox e Safari (o Safari adicionou suporte na versão 17.0 para macOS e iOS):

// Main thread
const canvas = document.getElementById('game')
const offscreen = canvas.transferControlToOffscreen()
worker.postMessage({ canvas: offscreen }, [offscreen])

// Worker
self.onmessage = (e) => {
  const canvas = e.data.canvas
  const ctx = canvas.getContext('2d')
  
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    // Draw...
    requestAnimationFrame(render)
  }
  render()
}

11) Tratamento de erros

worker.onerror = (e) => {
  console.error('Worker error:', e.message, e.filename, e.lineno)
}

// In worker
self.onerror = (e) => {
  self.postMessage({ type: 'error', message: e.message })
}

Conteúdo relacionado

• Publique um jogo web que carregue rapidamente
• Ative threads do Wasm (SharedArrayBuffer)
• Loop de jogo com Canvas 2D
• Bibliotecas de física para jogos — executando Rapier ou Cannon-es em um Worker
• Carregamento de assets por streaming — decodificando assets fora da thread principal
• Stack de tecnologia para jogos web em 2026 — como os Workers se encaixam na stack WebGL/WebGPU/Wasm

Recursos externos

• MDN: API Web Workers — referência completa da API
• MDN: Como usar Web Workers — guia passo a passo
• MDN: Objetos transferíveis — transferência de dados sem cópia
• MDN: SharedArrayBuffer — memória compartilhada entre threads