如何修改WGSL计算着色器适配Three.js节点系统及纹理复用

通过WGSL计算着色器创建并保存纹理，再将该纹理加载到另一个着色器中；同时希望在Three.js WebGPU节点系统中实现该流程，并用6个计算着色器替代WebGL2中多RenderTarget的高资源消耗方案。

现有WGSL代码 #

计算着色器 #

//compute shader
@group(0) @binding(0) var outputTexture: texture_storage_2d<rgba8unorm, write>;

@compute 
@workgroup_size(16, 16, 1) 
fn computeTexture(@builtin(global_invocation_id) id: vec3<u32>) {

    var texelCoord: vec2<u32> = id.xy; 
    var uv: vec2<f32> = vec2<f32>(f32(texelCoord.x) / 511.0, f32(texelCoord.y) / 511.0); 
    var color: vec4<f32> = vec4<f32>(uv.x, uv.y, 0.5, 1.0);
     
    textureStore(outputTexture, texelCoord, color); 
}

片段着色器 #

//fragment shader
@group(0) @binding(0) var inputTexture: texture_2d<f32>;
@group(0) @binding(1) var textureSampler: sampler;

@fragment
fn main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
    return textureSample(inputTexture, textureSampler, uv);
}

Three.js节点系统的尝试代码 #

//at the beginning of the script
import {ShaderNode, uniform, storage, attribute, uv, texture} from 'three/nodes';
//-------------------------------

const textureLoader = new THREE.TextureLoader();
const uvTexture = textureLoader.load( './textures/uv_grid_opengl.jpg' );
const textureNode = texture( uvTexture );


//fragment-like shader
const textureSampleParams = { 
    inputTexture: textureNode, 
    textureSampler: textureNode,
    uv: uv()
}
const getWGSLTextureSample = wgslFn(`
    fn getWGSLTextureSample( 
        inputTexture: texture_2d<f32>, 
        textureSampler: sampler, 
        uv: vec2<f32> 
    ) -> vec4<f32> {

        return textureSample( inputTexture, textureSampler, uv );
    }
`);



const material = new MeshBasicNodeMaterial();
material.colorNode = getWGSLTextureSample(textureSampleParams);

具体问题 #

• 如何在Three.js WebGPU节点系统中，用计算着色器替代加载的纹理与textureNode，已知可能需要ShaderNode与storage节点，但不知具体实现方式。
• 在Three.js节点系统中，如何设置计算着色器的workgroup_size。
• WebGL2中需要用多个RenderTarget实现多着色器依赖场景，资源消耗大，希望在WebGPU中用6个计算着色器替代该方案，请教具体实现方法。

内容的提问来源于stack exchange，提问作者Spiri