TresJS渲染器架构优化：createRenderer与useRenderer的职责分离

在WebGL和3D渲染领域，TresJS作为基于Three.js的Vue组件库，近期对其渲染器管理机制进行了重要架构调整。本文将深入分析这次改进的技术细节及其对开发者体验的提升。

原有架构的问题

在之前的实现中，TresJS通过单一的useRenderer组合式函数同时处理了渲染器的创建和状态管理两个职责。这种设计虽然简单直接，但随着项目复杂度增加，逐渐暴露出几个问题：

1. 职责边界模糊，一个函数承担了过多任务
2. 难以支持自定义渲染器的灵活注入
3. 测试和维护成本较高
4. 与Vue生态的最佳实践存在偏差

新架构设计

新方案将渲染器管理拆分为两个清晰的层次：

1. createRenderer：渲染器工厂

这个内部组合式函数专注于渲染器的创建和初始化，其核心职责包括：

• 处理渲染器选项的合并与验证
• 支持开发者通过函数或实例两种方式注入自定义渲染器
• 设置默认的色调映射(ACESFilmicToneMapping)
• 返回完全初始化的渲染器实例

async function createRenderer(canvas, options) {
  // 处理自定义渲染器注入
  if (options.renderer) {
    const fnOrRenderer = options.renderer
    if (typeof fnOrRenderer === 'function') {
      return await fnOrRenderer(ctx)
    }
    return fnOrRenderer
  }
  
  // 标准WebGL渲染器创建
  const renderer = new WebGLRenderer({
    ...(is.obj(ctx.props?.renderer) ? options.renderer : {}),
    canvas,
  })
  renderer.toneMapping = ACESFilmicToneMapping
  return renderer
}

2. useRenderer：状态访问器

这个面向用户的组合式函数则专注于提供对渲染器实例的安全访问：

• 从TresJS上下文中获取渲染器实例
• 提供类型安全的返回值
• 在渲染器未初始化时抛出明确错误

function useRenderer() {
  const ctx = useTresContext()
  if (!ctx.renderer) {
    throw new Error('渲染器未在TresJS上下文中找到')
  }
  return ctx.renderer
}

技术优势

这种分离设计带来了多方面的改进：

1. 关注点分离：创建逻辑与状态管理完全解耦，符合单一职责原则
2. 更好的可测试性：每个函数只做一件事，单元测试更简单
3. 更强的类型支持：TypeScript类型定义更加精确
4. 更灵活的扩展性：支持WebGPU等替代渲染器的无缝集成
5. 更符合Vue组合式API的最佳实践：与VueUse等主流库的模式保持一致

实际应用示例

新架构使得自定义渲染器的使用变得非常简单。以下是一个使用WebGPU渲染器的完整示例：

<script setup>
import { TresCanvas } from '@tresjs/core'
import { WebGPURenderer } from 'three/webgpu'

const createWebGPURenderer = async (ctx) => {
  const renderer = new WebGPURenderer({
    canvas: ctx.canvas.value,
  })
  renderer.setSize(200, 200)
  await renderer.init() // 异步初始化WebGPU上下文
  return renderer
}
</script>

<template>
  <TresCanvas :renderer="createWebGPURenderer">
    <!-- 场景内容 -->
  </TresCanvas>
</template>

总结

TresJS通过这次架构调整，不仅提升了代码的可维护性和扩展性，还为开发者提供了更灵活、更符合现代Vue开发习惯的API设计。这种清晰的职责分离模式值得在其他复杂状态管理的场景中借鉴，特别是需要处理异步初始化和多种实现选择的场景。

对于正在构建复杂前端应用的开发者来说，理解这种模式的价值并合理应用，可以显著提高项目的可维护性和团队协作效率。