Generate interleaved Mesh/VertexBuffer

movAX13h · March 25, 2022, 2:08pm

Hello!

Is there a way to create an interleaved VertexBuffer from a non-interleaved one by script? I’ve searched the forum and github but didn’t find anything related.

Generating a mesh, setting positions and normals then reading vertexBuffer produces a non-interleaved vertex buffer naturally.

This is relevant in the context of using VertexBuffer with TransformFeedback, which only accepts interleaved vertex buffers if more than 1 attribute is used (more than just positions).

It would be great if VertexBuffer had a method to interleave its data when called.

Thanks for your help

Leonidas · March 25, 2022, 2:08pm

Hi @movAX13h,

Calling @mvaligursky for this.

mvaligursky · March 25, 2022, 2:23pm

There is, but not using Mesh API directly, that one creates non-interleaved only.
You’d need to create a fill in vertex buffer manually, something like this:

github.com

playcanvas/engine/blob/0314528b346a0342d06765ff1943c2e9f37caa6c/src/graphics/post-effect.js#L84-L105

    
      
          function createFullscreenQuad(device) {

              // Create the vertex format

              const vertexFormat = new VertexFormat(device, [

                  { semantic: SEMANTIC_POSITION, components: 2, type: TYPE_FLOAT32 }

              ]);

          

              // Create a vertex buffer

              const vertexBuffer = new VertexBuffer(device, vertexFormat, 4);

          

              // Fill the vertex buffer

              const iterator = new VertexIterator(vertexBuffer);

              iterator.element[SEMANTIC_POSITION].set(-1.0, -1.0);

              iterator.next();

              iterator.element[SEMANTIC_POSITION].set(1.0, -1.0);

              iterator.next();

              iterator.element[SEMANTIC_POSITION].set(-1.0, 1.0);

              iterator.next();

              iterator.element[SEMANTIC_POSITION].set(1.0, 1.0);

              iterator.end();

This file has been truncated. show original

Here’s a more complex example, setting up a mesh as well:

github.com

playcanvas/playcanvas-spine/blob/main/src/spine.js

pc.extend(pc, function () {
    // Compare semantic versions
    function versionCompare(v1, v2, options) {
        var lexicographical = options && options.lexicographical,
            zeroExtend = options && options.zeroExtend,
            v1parts = v1.split('.'),
            v2parts = v2.split('.');

        function isValidPart(x) {
            return (lexicographical ? /^\d+[A-Za-z]*$/ : /^\d+$/).test(x);
        }

        if (!v1parts.every(isValidPart) || !v2parts.every(isValidPart)) {
            return NaN;
        }

        if (zeroExtend) {
            while (v1parts.length < v2parts.length) v1parts.push("0");
            while (v2parts.length < v1parts.length) v2parts.push("0");
        }

This file has been truncated. show original

(search for ‘_vertexFormat’ and ‘SEMANTIC_POSITION perhaps’)

But my recommendation, as a more flexible solution (and compatible with WebGPU in the future), you might want to consider rendering to texture to process data on GPU - we use it in a few places in the engine such as morph target updates, or particle system.

movAX13h · March 25, 2022, 2:35pm

Thank you! I’ll create the VertexBuffer manually then.

Regarding your recommendation: Do you mean rendering to a texture in a feedback loop instead of using transform feedback with attributes?

mvaligursky · March 25, 2022, 3:13pm

The transform feedback allows you to transform data stored on GPU into another buffer again on the GPU, that you can use as an input to vertex shader. For example this is often used to do skinning one time and then render the mesh as non-skinned.

You can do the same thing using textures (especially float textures). You store some data in the texture, and render them to another buffer, often of the same resolution. Fragment shader does the processing.

For example we do morphing this way here: https://github.com/playcanvas/engine/blob/main/src/scene/morph-instance.js

We store vertex offset for morph targets in individual textures, and when we need to morph the mesh:

use few of these morph target textures as input to shader
render them into target texture - fragment shader blends them based on weights
at a later stage, the final texture is sampled in the vertex shader and morph offset are added to vertex positions.