search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
103.09k stars 35.41k forks source link

Change postprocessing shaders from GLSL to WGSL #30028

Closed astruegenius closed 13 hours ago

astruegenius commented 13 hours ago

Description

I have started to use WebGPU Three.js from https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.webgpu.js , it seems that pre-made shaders from https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/postprocessing/, this is because shaders are written in GLSL.

Solution

I would like (if possible) for this shaders to maybe be converted to WGSL, since I think that WebGPU will be used more often than WebGL in the future.

Alternatives

Either someone in community can rewrite these, or I can. Maybe someone can link WGSL guide?

Additional context

No response

Mugen87 commented 13 hours ago

We have ported the post processing modules to TSL here: https://github.com/mrdoob/three.js/tree/dev/examples/jsm/tsl/display

To be clear, we don't write raw WGSL. We use TSL so the shaders work with both WebGPU and WebGL. Depending on what backend is available, WebGPURenderer generates WGSL or GLSL.

You can checkout the WebGPU post processing demos here:

https://threejs.org/examples/?q=webgpu%20postprocessing