How do you work with primitives?

[davidwarford]

Sadly things like the redball and triangle demos are not updated or currently broken, I was wondering how I handle working with primitives. Having things to use for debug draws would be really useful and I don't really understand how to do it.

[romainguy]

Could you elaborate a little bit please? If you want to display debug entities, you can create renderables like you would normally do and make them visible/invisible as needed. An easy way to achieve the latter is to use layer masks and to put all your debug renderables in a layer that you enable/disable as needed. It's what we do for instance in our sample apps for desktop.

[davidwarford]

Well. I guess maybe I should focus more on being able to construct and render lines and triangles, I'm looking through the knots demo to try and figure it out right now but I'm most interested in just single pixel thin lines that are a solid color.

[romainguy]

Rendering lines and triangles is achieved in the same manner, using renderables.

[davidwarford]

I know how to work with renderables that I load from an asset but I don't really understand how you make them on the fly

[romainguy]

The triangle demo shows how to do it: https://github.com/google/filament/blob/main/web/samples/triangle.html

The relevant code is here:

        const TRIANGLE_POSITIONS = new Float32Array([
            1, 0,
            Math.cos(Math.PI * 2 / 3), Math.sin(Math.PI * 2 / 3),
            Math.cos(Math.PI * 4 / 3), Math.sin(Math.PI * 4 / 3),
        ]);

        const TRIANGLE_COLORS = new Uint32Array([0xffff0000, 0xff00ff00, 0xff0000ff]);

        this.vb = Filament.VertexBuffer.Builder()
            .vertexCount(3)
            .bufferCount(2)
            .attribute(VertexAttribute.POSITION, 0, AttributeType.FLOAT2, 0, 8)
            .attribute(VertexAttribute.COLOR, 1, AttributeType.UBYTE4, 0, 4)
            .normalized(VertexAttribute.COLOR)
            .build(engine);

        this.vb.setBufferAt(engine, 0, TRIANGLE_POSITIONS);
        this.vb.setBufferAt(engine, 1, TRIANGLE_COLORS);

        this.ib = Filament.IndexBuffer.Builder()
            .indexCount(3)
            .bufferType(Filament.IndexBuffer$IndexType.USHORT)
            .build(engine);

        this.ib.setBuffer(engine, new Uint16Array([0, 1, 2]));

        const mat = engine.createMaterial('nonlit.filamat');
        const matinst = mat.getDefaultInstance();
        Filament.RenderableManager.Builder(1)
            .boundingBox({ center: [-1, -1, -1], halfExtent: [1, 1, 1] })
            .material(0, matinst)
            .geometry(0, Filament.RenderableManager$PrimitiveType.TRIANGLES, this.vb, this.ib)
            .build(engine, this.triangle);

You need a buffer of vertex data (positions, etc.) and an index buffer. You will also most likely specify a material.

[cx20]

I don't know if this will be helpful, but I have made some samples of primitive shapes below.

https://github.com/cx20/webgl-test