StorageTexture writable from WebGPU Vertex Shader?

Questions
, , ,
1

Error in console:

How do I add a StorageTexture that I write from WebGPU Vertex Shader.

I get

Storage texture binding with StorageTextureAccess::WriteOnly is used with a visibility (ShaderStage::Vertex) that contains ShaderStage::Vertex.

declare in WGSL: var satpos : texture_storage_2d<rgba32float,write>;
use in WGSL: textureStore(satpos,vec2(writeX, writeY),pos);

in JavaScript:

const writeTexture = new BABYLON.RawTexture(satScreenPos,texVec4Width,Math.ceil(satcount/texVec4Width), // number of vec4
        BABYLON.Engine.TEXTUREFORMAT_RGBA,//TEXTUREFORMAT_DEPTH32_FLOAT,
        scene,false,false,
        BABYLON.Texture.NEAREST_SAMPLINGMODE,
        BABYLON.Engine.TEXTURETYPE_FLOAT,
        BABYLON.Constants.TEXTURE_CREATIONFLAG_STORAGE,
        false,true);
        
        sMat.setTexture("satpos",writeTexture);
2

Storage textures can’t be written from vertex shaders as per the specification:

image
image813×190 15.1 KB

3

I’m trying to get the output of the vertex shader to CPU as a single screen point per vertex so I can place an HTML label at that location. Trying to implement a somewhat compatible pipeline in both WebGL2 and WebGPU is causing my head to explode :face_with_crossed_out_eyes:

The vertex positions are (currently) fully calculated in a vertex shader using a single float value for all vertices each frame (using per-vertex transform matrix and attributes). This is super fast

I think my choices are:

WebGL - keep using POINT primative, use TransformFeedback buffer.
WebGPU - compute shader generates point, feed that to the CPU and to a vertex / fragment shader.

For WebGL, the point primative is sufficient since I can define a point size for the fragment shader.

For WebGL, I think I’ll need to draw a pair of triangles centered on the point to adjust the (visual) size. (see WebGPU PointSize feature request for our previous conversation).

Or, I can instead create a texture with labels and place them on screen with an additional shader. That would be dramatically less CPU involvement per frame, but I’d want to figure out how to make the text as crisp as the HTML labels.

I’ve got more experiments to do!

4

Yes, in WebGPU you would have to emulate point size by rendering two triangles of the size you want. Note that this can also be beneficial in WebGL, to work around its limitations: limited maximum value (63 on some GPUs, for example), unspecified behavior regarding clipping (some GPUs will discard the point if its center is not on the screen).

As for text rendering, perhaps this medium post by @Cedric can help you.

1 Like