WebGPU module js build of Three.js

[andreasrosdal]

Description

I would like a WebGPU build of Three.js in the /build directory. For example: three.webgpu.module.min.js
So that I can begin testing and implementing WebGPU support.

At the moment WebGL is hidden away in this directory:
https://github.com/mrdoob/three.js/blob/dev/examples/jsm/renderers/webgpu/WebGPURenderer.js

Solution

three.webgpu.module.min.js

Alternatives

Alternative: Include WebGPU in default module js build.

Additional context

No response

[Mugen87]

Um, what do you mean with "hidden away"? You can import the renderer like any other addon.

[andreasrosdal]

The WebGPURenderer isn't included in the Three.js module js build. Instead it is stored in the /examples/jsm/renderers/webgpu/ subdirectory, and imports many other js files with specific relative paths.

So I wish that the WebGPU support with the WebGPURenderer was either included fully in the default module build of Three.js, or that there was a specific build of Three.js with WebGPU support.

[donmccurdy]

I don't think we should do anything immediately here, this approach is how many other important parts of three.js are packaged. But it would be worth planning a longer-term roadmap for WebGPU support; it will not be an addon forever.

@andreasrosdal are you building using default vite or using own setup?
I'm asking because I'm experiencing issues building with vite (development version runs but production version is not).

Sorry for off-topic I'm relatively new to Threejs and WebGPU and want to verify that his is not an issue on my side.

[andreasrosdal]

@rv4Flyver Fciv.net imports Three.js as a module directly, with a workaround. See the source code here: https://github.com/fciv-net/fciv-net/blob/main/freeciv-web/src/main/webapp/webclient/index.jsp#L58

The rest of the source code is built with Maven and Closure compiler.

I would like to use a more modern build system.

[makc]

@andreasrosdal since you host the file yourself I dont see why cant you just build the version of 3js you want yourself? by editing this file and running standard 3js build, for example (this would not work because of circular dependency of three on itself).

[danrossi]

I've tried to look at this. Its referencing the module I create a custom build from sources as I found duplicates trying to reference the module when adding other imports.

The renderer tries to setup webgpu immediately with an async and not in the init method and patch Matrix4 in the init method. This breaks in an iife package. It needs to be setup in the init method.

[andreasrosdal]

I've tried to look at this. Its referencing the module I create a custom build from sources as I found duplicates trying to reference the module when adding other imports.

The renderer tries to setup webgpu immediately with an async and not in the init method and patch Matrix4 in the init method. This breaks in an iife package. It needs to be setup in the init method.

Cool, can you provide a WebGPU module build of Three.js?

[makc]

@andreasrosdal why are you so lazy 🤣 but okay, try this js file:

import * as THREE from './three.gpu.js';
console.log(THREE);

three.gpu.js.zip

[makc]

(all the Nodes.js stuff should be under THREE.Nodes)

[danrossi]

I'm working on figuring out how to make my custom three build as it references sources to stop duplicated imports that happens using the module. The code keeps making references to the module so might have to keep it that way. But there is refactoring required so it doesn't immediately setup webgpu. I may have to make a build of webgpu and reference my custom iife module build that includes custom components as global.

Here is refactoring snippets

patchApi() {

        Matrix4.prototype.makePerspective = makePerspective;
        Matrix4.prototype.makeOrthographic = makeOrthographic;
        Frustum.prototype.setFromProjectionMatrix = setFromProjectionMatrix;
        _frustum = new Frustum();
        _projScreenMatrix = new Matrix4();
        _vector3 = new Vector3();
    }

	async init() {

        if ( navigator.gpu !== undefined ) {

            staticAdapter = await navigator.gpu.requestAdapter();
        
        }

        this.patchApi();

Await when bundled causes an issue when trying to make a umd/iife bundle. Needs to be in init

 staticAdapter = await navigator.gpu.requestAdapter();

And then I can do

 if ( WebGPU.isAvailable()) {
                   renderer = new THREE.WebGPURenderer();
                   renderer.init();
                   console.log("using webgpu renderer");
               } else {
                   renderer = new THREE.WebGLRenderer();
               }

[danrossi]

Referencing the module to bundle the files, causes no files to be included and rollup just bundles the whole entire module. Its wierd. Only source includes works for me. But the webgpu files reference the module. I may have to fork that portion to use source includes also.

includePaths({
				paths: ["../three.js/src", "../three.js/examples/jsm"],
				include: {
				  'three': '../three.js/build/three.module.js'
				}
		  	}),

The WebGPU support tries to setup webgpu globally in the bundle. await breaks iife bundling. So support api check needs to be changed into a method.

if ( navigator.gpu !== undefined ) {

	const adapter = await navigator.gpu.requestAdapter();

	if ( adapter !== null ) {

		isAvailable = true;

	}

}

[makc]

@danrossi

So support api check needs to be changed into a method.

why not just make a separate PR for this (separate from this issue, that is)

[danrossi]

Understood. I've setup this build project for now with the mods. I've got to test it still.

https://github.com/danrossi/three-webgpu-renderer/tree/master/build

The modded files

https://github.com/danrossi/three-webgpu-renderer/blob/master/src/renderers/webgpu/WebGPURenderer.js
https://github.com/danrossi/three-webgpu-renderer/blob/master/src/capabilities/WebGPU.js