I’m in the process of recreating my WebGL examples in WebGPU. It’s working quite well now, but sometimes there’s a hurdle that can hold me up for a long time, like this one.
I created a bufferGeometry and I want to store the vertex positions in a DataTexture and then pass it to the positionNode. For this I created a wgslFn and passed it to the positionNode. The reason why I want to store all vertex positions in a texture to pass them to the shader is because in my big main app for the correct positioning of the edge vertices I need to know the positions of the neighboring vertices in order to be able to calculate the connection conditions. I implemented all this in WebGL2 and everything works as I wish.
What doesn’t work in my WebGPU version is passing my DataTexture to my nodeMaterial. Strangely I can pass a normal loaded texture. The exact same DataTexture works fine in my WebGL2 version. Do I have to initialize further texture properties in WebGPU in DataTextures?
Error messages in the console:
[127.0.0.1/:1](http://127.0.0.1/:1) None of the supported sample types (UnfilterableFloat) of [Texture] match the expected sample types (Float).
- While validating entries[0] as a Texture.
Expected entry layout: { binding: 0, visibility: ShaderStage::Vertex, texture: { sampleType: TextureSampleType::Float, viewDimension: TextureViewDimension::e2D, multisampled: 0 } }
- While validating [BindGroupDescriptor] against [BindGroupLayout]
- While calling [Device].CreateBindGroup([BindGroupDescriptor]).
127.0.0.1/:1 [Invalid BindGroup] is invalid.
- While encoding [RenderPassEncoder].SetBindGroup(0, [BindGroup], 0, ...).
Seems like WebGPU doesn’t understand the FloatType format of the DataTexture
//DataTexture:
function GeneratePositions(g){
let vertAmount = g.attributes.position.count;
let texWidth = Math.ceil(Math.sqrt(vertAmount));
let texHeight = Math.ceil(vertAmount / texWidth);
let data = new Float32Array(texWidth * texHeight * 4);
for(let i = 0; i < vertAmount; i++){
data[i * 4 + 0] = g.attributes.position.getX(i);
data[i * 4 + 1] = g.attributes.position.getY(i);
data[i * 4 + 2] = g.attributes.position.getZ(i);
data[i * 4 + 3] = 0;
}
let dataTexture = new THREE.DataTexture(
data,
texWidth,
texHeight,
THREE.RGBAFormat,
THREE.FloatType
);
dataTexture.needsUpdate = true;
return dataTexture;
}