Passing a DataTexture to a WebGPU nodeMaterial

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:

[]( 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]). [Invalid BindGroup] is invalid.
- While encoding [RenderPassEncoder].SetBindGroup(0, [BindGroup], 0, ...).

Seems like WebGPU doesn’t understand the FloatType format of the 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(
	dataTexture.needsUpdate = true;
	return dataTexture;

At the moment there is a small bug that will be solved with r156 thanks to Sunag and Mugen87. Therefore I close this topic

1 Like