A little advertising for the three.js node system and WebGPU

I only work with WebGPU and therefore with the three.js node system. In the meanwhile WebGPU is very well integrated in three.js.

These are screenshots of my WebGPU original sized planet generator. I am not ready yet. I now have to add rock and sand textures to the surface. I would ideally have over 200k of data for the elevation profile, but the best thing NASA has so far as a coherent map is the Mars MOLA map with 46k. With that my virtual texture system doesn’t have to do much work.
Maybe also a random object loader for rocks that loads small stones and distributes them randomly.

The post-processing with the scattering atmosphere also works very well, as you can see and, as mentioned, everything is on the original scale, i.e. with a planetary radius of 3390000m.
In order to simulate the computing effort for a significantly higher resolution, I set the vertex density of the CDLOD system significantly higher than would be necessary for the existing map material. Therefore, the CDLOD system interpolates these bicubic, which leads to the rounded appearance.

As soon as I have implemented the surface textures it will look like my old WebGL2 variant:

However, the WebGPU version is significantly more powerful.

Even if you don’t hear much about WebGPU in three.js, it is meanwhile very deeply and extensively integrated. Here I use my VT system for a model.

I have actively followed the development and the node system architecture is now very mature. My virtual texture system, my planet generator and also my ocean which I uploaded to Github, use the node system very extensively. The ocean is also a nice example that would not be possible with WebGL2 because compute shaders are only available in WebGPU.

Here with much more details.



With color

For this I use a 131k texture. I upscaled the 106k NASA Mars map to 131k
The app runs without any problems. I still have to process the color texture and the normal texture. My PC is having a hard time processing the huge texture datas to generate virtual textures from it. But the planet generator has it easy afterwards so that I can experience the entire planet in that resolution.

With r168 the texture arrays will also work properly. I have already integrated the fix into r167.1 in advance in order to be able to design the surface at close range with different surface textures from an array. This looks much better than a monotone color.

So three.webgpu.js works very well.
Welcome to the WebGPU world with three.js :blush:

15 Likes