WebGLRenderTarget not found when using with WebGPU

[jclaessens97]

Describe the bug

Whenever we want to run our project with Vite using WebGPU build of threejs it errors because of 1 file in this project: TextureReadUtility.js. We have a dirty workaround by adding a post install script that deletes the content of the file, but doesn't look very sustainable to me 😅

error

frontend:dev: ✘ [ERROR] No matching export in "../node_modules/.pnpm/three@file+frontend+three-0.169.0-dev.tgz/node_modules/three/build/three.webgpu.js" for import "WebGLRenderer"
frontend:dev:
frontend:dev:     ../node_modules/.pnpm/3d-tiles-renderer@0.3.37_three@file+frontend+three-0.169.0-dev.tgz/node_modules/3d-tiles-renderer/src/three/loaders/gltf/metadata/utilities/TextureReadUtility.js:1:28:
frontend:dev:       1 │ import { WebGLRenderTarget, WebGLRenderer, Box2, Vector2, Vector4, ShaderMaterial, REVISION, CustomBlending...
frontend:dev:         ╵                             ~~~~~~~~~~~~~
frontend:dev:

workaround

import fs from 'node:fs';
import path from 'node:path';

const filePath = path.join(
  '..',
  'node_modules',
  '.pnpm',
  '3d-tiles-renderer@0.3.37_three@file+frontend+three-0.169.0-dev.tgz',
  'node_modules',
  '3d-tiles-renderer',
  'src',
  'three',
  'loaders',
  'gltf',
  'metadata',
  'utilities',
  'TextureReadUtility.js',
);

fs.readFile(filePath, 'utf8', (err) => {
  if (err) {
    console.error('Error reading file:', err);
    process.exit(1);
  }

  // remove file contents
  fs.writeFile(filePath, '', 'utf8', (err) => {
    if (err) {
      console.error('Error writing file:', err);
      process.exit(1);
    }
    console.log('Successfully patched TextureReadUtility.js');
  });
});

Would there be a proper check that can be added here to avoid the error?

To Reproduce

Steps to reproduce the behavior:

1. Install threejs & 3d-tiles-renderer
2. Set the following resolve.alias in threejs

      'three/examples/jsm': 'three/examples/jsm',
      'three/addons': 'three/examples/jsm',
      'three/tsl': 'three/webgpu',
      'three': 'three/webgpu',

3. Run the dev server or build command and see the error popping up

Platform:

  System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 9.79 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 129.0.6668.58
    Safari: 17.4.1

• Three.js version: [r169]
• Library version: [v0.3.37]

[jclaessens97]

Sorry for the bug label, perhaps it should've been a question label on hindsight!

[gkjohnson]

Hello!

Set the following resolve.alias in threejs

'three/tsl': 'three/webgpu',
'three': 'three/webgpu',

The fundamental issue here is that you're swapping out the three imports with a different file that doesn't include the imports the project expects. Is there a reason you're replacing "three" with "three/webgpu" rather than just importing "three/webgpu" in your project where you're using the WebGPURenderer, which is how it's defined in the three.js package.json?

The problematic file is only used by a plugin in the project and is otherwise unused so it should be removed by tree shaking / dead code removal on build, anyway.

[jclaessens97]

Whenever we use Line2 or Line2Segments, e.g.
import { LineSegments2 } from 'three/addons/lines/webgpu/LineSegments2.js';

Build throws an error that it can't find Line2NodeMaterial, unless we set those aliases:

I guess it would indeed makes that the file should've been treeshaked though.

[gkjohnson]

This sounds like more a three.js issue. If end user projects are required to override import settings for a build then something isn't set up right in the library. I recommend following mrdoob/three.js#29156 since it sounds like there's some work happening to help overcome these issues.

[jclaessens97]

Okay, that indeed sounds like an interesting thread! Thanks!