Webgpu treeshaking

[waverider404]

Hello

is there tree shaking available for webgpu?

[jeremy-coleman]

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.

[sebavan]

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

[waverider404]

Awesome!

[waverider404]

Nice ! Sent you a dm on slack

[Hanesu]

@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?

[sebavan]

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

[Evgeni_Popov]

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…

[Hanesu]

It’s related to buffer creation.

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

[Evgeni_Popov]

This PR should help:

WebGPU: references the minimal set of required extensions

[Hanesu]

@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

[Evgeni_Popov]

You should add:

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

Also, you may need this one:

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

[Hanesu]

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

[Evgeni_Popov]

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.

[Hanesu]

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.

[Hanesu]

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

[Hanesu]

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

[Evgeni_Popov]

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

[Hanesu]

If all extensions are imported it works!
Thanks!