Webgpu treeshaking

Hello :slight_smile:

is there tree shaking available for webgpu?

1 Like

Its not tree shakable because the engine is a factory function, so you always get webgl and webgpu. That being said, i got the ocean demo down to 1.1mb out of the 3.5mb in core , which is mostly fine. To shake out the webgl engine, we’d have to move the browser capability check to a global and replace it at build time.

1 Like

@waverider404 not for now but @RaananW has great plan about a new esm modules

1 Like

Awesome! :raised_hands:

Nice ! Sent you a dm on slack :slightly_smiling_face:

2 Likes

@jeremy-coleman
I wonder what is the optimal way to do WebGPU engine import?

For WebGL this works fine

import { Engine } from '@babylonjs/core/Engines/engine';

For WebGPU, if I do this

import { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine';

hell breaks loose at runtime.

So I do this

import { WebGPUEngine } from '@babylonjs/core/Engines';

Is this optimal?

Adding @Evgeni_Popov but I do not think we have put as much doc about the webgpuengine extensions.

What exactly breaks when you do import { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine';?

I can see that Engine does:

import "./Extensions/engine.alpha";
import "./Extensions/engine.readTexture";
import "./Extensions/engine.dynamicBuffer";

Perhaps we should do the same for the WebGPUEngine, even if technically we don’t need it, but it would save the user the trouble of doing these imports…

It’s related to buffer creation.

You can check it here
https://github.com/h-a-n-n-e-s/thin_instance_pbr

This PR should help:

2 Likes

@Evgeni_Popov
This is not about WebGPU but probably a similar treeshaking problem.

If I do

import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';

const hdrTexture = CubeTexture.CreateFromPrefilteredData('./envTexture.env', scene);

I get this

You should add:

import '@babylonjs/core/Materials/Textures/cubeTexture';

Also, you may need this one:

import '@babylonjs/core/Misc/environmentTextureTools';

Mmmh, still exactly the same error message with these imports.

In fact, your error message means the url passed to _CleanUrl is null / undefined, which is probably not because of a missing import… Are you sure you pass the right url? If yes, try to put a breakpoint and see if you can find why this url is null at this point.

Yes, the url exists.
All I do is changing this

import { CubeTexture } from '@babylonjs/core';

to this

import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';

I ran the debugger, but this is way to convoluted for me.
I attach the screenshots of the last 5 entries in the call stack, maybe you can see something.

Ok, now I get the feeling this is a Vite dev server issue!
If I do a build and preview it everything works!

Update: In 6.39.0 it doesn’t run in Vite, no matter if in dev mode or as a build if I use

import { WebGPUEngine } from '@babylonjs/core/Engines/webgpuEngine';

This is the error

Try import '@babylonjs/core/Engines/WebGPU/Extensions/engine.renderTarget';. Or import '@babylonjs/core/Engines/WebGPU/Extensions'; to import all extensions.

1 Like

If all extensions are imported it works!
Thanks! :pray: