#2811·drei

[v11] webgpu/BlurPass is still the WebGL implementation and imports from legacy

Author: DennisSmolekCreated Sep 1, 2026Updated Sep 7, 2026
Labelsbugreleased on @alphawebgpuv11effort:Magent-ok

Problem

src/webgpu/Materials/BlurPass/BlurPass.tsx is not a WebGPU implementation. Its own first line says so:

typescript
//* TODO: Convert GLSL shaders to TSL for WebGPU ==============================

import { Mesh, BufferGeometry, ..., WebGLRenderTarget, WebGLRenderer, ... } from '#three'
import { ConvolutionMaterial } from '@legacy/Materials/ConvolutionMaterial'

Two problems:

  1. It imports the legacy GLSL ConvolutionMaterial — a ShaderMaterial — from the legacy tree. This is the only webgpu → legacy import in the codebase.

  2. It imports WebGLRenderer, which three/webgpu does not export. Verified:

    WebGLRenderer       ** NOT EXPORTED **
    WebGLRenderTarget   exported
    RenderTarget        exported

That is the same shape as #2764. It is not currently breaking anything only because it is deliberately excluded from the barrelsrc/webgpu/Materials/index.ts has //export * from './BlurPass', and the built webgpu/index.mjs contains zero references to it. That call was correct.

Why this matters beyond BlurPass

It explains #2661. The legacy MeshReflectorMaterial blurs its reflection with this pass:

typescript
'defines-USE_BLUR': hasBlur ? '' : undefined,   // legacy :181
if (hasBlur) blurpass.render(gl, fbo1, fbo2)    // legacy :223

The WebGPU MeshReflectorMaterial computes hasBlur at line 83 and never uses it — because there is no usable WebGPU BlurPass to call. So blur is inert on WebGPU, which is consistent with the "wrong reflections" report.

Why this is agent-ok

A TSL ConvolutionMaterial already exists right next to it, at src/webgpu/Materials/ConvolutionMaterial/, and is exported. The conversion is largely:

  • swap @legacy/Materials/ConvolutionMaterial./ConvolutionMaterial
  • WebGLRenderTargetRenderTarget (exported by three/webgpu)
  • WebGLRenderer → the R3FRenderer union, or drop the annotation — see getMaxAnisotropy() in src/utils/generic.ts for the narrowing pattern
  • re-enable the barrel export

Visual verification needs a GPU, so the result wants human review even though the change does not.

Acceptance

  • src/webgpu/Materials/BlurPass uses the TSL ConvolutionMaterial and no legacy import.
  • It is exported from /webgpu and yarn test:bundles still passes.
  • MeshReflectorMaterial's hasBlur is wired to it, and blur visibly changes the reflection (#2661).