How to draw a dynamic rectangle in filament?

[inveders]

Hello,
I saw the example of drawing the triangle, but what about a simple rectangle? There seems to be 6 vertices and not 3?
Also, could I make this rectangle dynamic: increase it's width depending on the position of a .glb model that would go on the right?

[romainguy]

You need 4 vertices but 6 indices. You can make the rectangle dynamic either by modifying the vertices every frame or more simply by setting a transform on the Renderable object.

[romainguy]

The native order is the endianness of the bytes in memory, you should always use native order. The clockwise direction is relative to the camera, so it will depend on where the object is relative to the camera. You can disable face culling in your material or enabled doubleSided to make sure you are not running into backface culling issues.

One thing I don't understand in your code is why you add + 1 to the y coordinates of two vertices? I imagine A and B will be the opposite corners of the rectangle?

[inveders]

Ok so I have made a mistake in my vertexData, I changed with

val tfNZ = FloatArray(4)
MathUtils.packTangentFrame( 1.0f, -1.0f, 1.0f, 1.0f, 0.0f,  1.0f,  0.0f,  1.0f, 0.0f, tfNZ)

            val vertexData = ByteBuffer.allocate(vertexCount * vertexSize)
               // It is important to respect the native byte order
               .order(ByteOrder.nativeOrder())
               .put(Vertex(aPoint.x, aPoint.y, aPoint.z, tfNZ))
               .put(Vertex(aPoint.x, aPoint.y+3, aPoint.z, tfNZ))
               .put(Vertex(dPoint.x, aPoint.y+3, aPoint.z, tfNZ))
               .put(Vertex(dPoint.x, aPoint.y, aPoint.z, tfNZ))

               // Make sure the cursor is pointing in the right place in the byte buffer
               .flip()


You can check my rectangles points with [this image](https://user-images.githubusercontent.com/40520645/119491879-bff4d080-bd5e-11eb-85f6-525a3eff0207.png) :

I added this on my materialInstance:

materialInstance = material.createInstance()
materialInstance.setDoubleSided(true)

The +3 on the Yaxis is for construct my rectangle from my two points A and D. But I don't know the metrics, is meters? kilometers? pixels?

For the moment, with all this changes a right-angled triangle is drawing (but not a rectangle), I pursue my research to see why it's not a rectangle but a triangle despite of the vertexData.
This is the right-angled triangle : https://drive.google.com/file/d/14E81nALhdBjaumlhQWgvBezXiXHsEoMC/view?usp=sharing

[romainguy]

The units are whatever you want them to be but in Filament we typically use meters. You should check your indices now. With the points you've defined, your indices should be: 0, 1, 2, 0, 2, 3 (other configurations are possible though).

[inveders]

Unfortunately, no change even with the modification of the indices, I always have a right-angled triangle. Is there any documentation to help build shapes with filament (to be sure of the characteristics I enter, especially for the tangents)?

[cx20]

@inveders If you don't mind using WebGL samples, there are a few samples below.
https://github.com/cx20/webgl-test

[inveders]

Hi, Thanks you @cx20 for your sample, and @romainguy thanks you for support. I tried to change my code to be the most similar to @cx20 and for others people this is my final code. I have this :

private fun createMesh() {
        val intSize = 4
        val floatSize = 4
        val shortSize = 2
        // A vertex is a position + a color:
        // 4 floats for XYZ position, 1 integer for color
        val vertexPositionSize = 3 * floatSize
        val vertexColorSize = 1 * intSize

        // Define a vertex and a function to put a vertex in a ByteBuffer
        data class Vertex(val x: Float, val y: Float, val z: Float)
        data class Color(val color: Int)

        fun ByteBuffer.put(v: Vertex): ByteBuffer {
            putFloat(v.x)
            putFloat(v.y)
            putFloat(v.z)
            return this
        }

        fun ByteBuffer.putColor(v: Color): ByteBuffer {
            putInt(v.color)
            return this
        }

        val vertexCount = 4

        val vertexData = ByteBuffer.allocate(vertexCount * vertexPositionSize)
            // It is important to respect the native byte order
            //Here you can put your dynamic coordinates too
            .order(ByteOrder.nativeOrder())
            .put(Vertex(-0.5f, 0.5f, 0.0f))
            .put(Vertex(0.5f, 0.5f, 0.0f))
            .put(Vertex(0.5f,-0.5f, 0.0f))
            .put(Vertex(-0.5f,-0.5f, 0.0f))
            
            // Make sure the cursor is pointing in the right place in the byte buffer
            .flip()

        val vertexColor = ByteBuffer.allocate(vertexCount * vertexColorSize)
            // It is important to respect the native byte order
            .order(ByteOrder.nativeOrder())
            .putColor(Color(0xff0000ff.toInt()))
            .putColor(Color(0xff00ff00.toInt()))
            .putColor(Color(0xffff0000.toInt()))
            .putColor(Color(0xff00ffff.toInt()))
            // Make sure the cursor is pointing in the right place in the byte buffer
            .flip()

        // Declare the layout of our mesh
        vertexBuffer = VertexBuffer.Builder()
            .bufferCount(2)
            .vertexCount(4)
            // Because we interleave position and color data we must specify offset and stride
            // We could use de-interleaved data by declaring two buffers and giving each
            // attribute a different buffer index
            .attribute(
                VertexBuffer.VertexAttribute.POSITION,
                0,
                VertexBuffer.AttributeType.FLOAT3,
                0,
                12
            )
            .attribute(
                VertexBuffer.VertexAttribute.COLOR,
                1,
                VertexBuffer.AttributeType.UBYTE4,
                0,
                4
            )
            // We store colors as unsigned bytes but since we want values between 0 and 1
            // in the material (shaders), we must mark the attribute as normalized
            .normalized(VertexBuffer.VertexAttribute.COLOR)
            .build(mEngine)

        // Feed the vertex data to the mesh
        // We only set 1 buffer because the data is interleaved
        vertexBuffer.setBufferAt(mEngine, 0, vertexData)
        vertexBuffer.setBufferAt(mEngine, 1, vertexColor)

        // Create the indices
        val indexData = ByteBuffer.allocate(vertexCount * shortSize)
            .order(ByteOrder.nativeOrder())
            .putShort(0)
            .putShort(1)
            .putShort(2)
            .putShort(0)
            .putShort(2)
            .putShort(3)
            .flip()

        indexBuffer = IndexBuffer.Builder()
            .indexCount(6)
            .bufferType(IndexBuffer.Builder.IndexType.USHORT)
            .build(mEngine)

        indexBuffer.setBuffer(mEngine, indexData)

    }

This is my square : https://drive.google.com/file/d/1z-B4Equ-S79gsbqxM2QZkxJdGAQOlmS0/view?usp=sharing

Wow a lot of time to draw it but I'm very happy now, so thanks you both of them

[cx20]

It looks like you were able to display the rectangle. Congratulations!
Maybe it's already been done, but I thought the size calculation of the above chord was questionable.
(I've never coded in Kotlin before, so I apologize if I'm wrong.)

//val vertexSize = 4 * floatSize + intSize 
//val vertexCount = 6
//val vertexData = ByteBuffer.allocate(vertexCount * vertexSize) 
//val vertexColor = ByteBuffer.allocate(vertexCount * vertexSize)

var vertexPositionSize = 3 * floatSize; // A vertex position size is 3 * sizeof(float) 
var vertexColorSize    = 1 * intSize;   // A vertex color    size is 1 * sizeof(int)
val vertexCount = 4
val vertexData  = ByteBuffer.allocate(vertexCount * vertexPositionSize) 
val vertexColor = ByteBuffer.allocate(vertexCount * vertexColorSize)

[inveders]

Yes you are right, I changed it in my code above !

[paulosensorydata]

@inveders can you share the whole code? I am trying to run yours but I keep having an issue. If I use exactly your ´createMesh´ I got an ´java.nio.BufferOverflowException´ on ´putShort´.

If I change ´val indexData = ByteBuffer.allocate(vertexCount * shortSize)´ to ´val indexData = ByteBuffer.allocate(6 * shortSize)´ it shows just a triangle, instead of the square

[romainguy]

@paulosensorydata BufferOverflowException is because your ByteBuffer is too small. If you are seeing only a triangle, it's because your index buffer doesn't index more than one triangle, or you give the wrong number of indices to RenderableManager.Builder.geometry().