Trilateral can now be used within Iron

This is a demo of parsing very simple svg ( full svg not supported ), only one material currently setup as I am not sure on how to adjust that yet.
https://nanjizal.github.io/Xperimental/trilateralIron/bin/index.html
The code that wires Trilateral to Iron

( based on the triangle example )

I guess you can do a lot within Blender but this opens up some other interesting possibilities.
For instance from Flash Animate it’s feasible to parse simple fill shapes from the illustrator output.

and rather than render them to pixels in this demo you could render them within Armory3D using Trilateral… I think!
Obviously converting fills and lines to triangles can be very heavy but used wisely it can be useful.

4 Likes

What are the user cases for this?

Currently I tend to use PolyPainter to create a range of on the fly 2D vectors within Kha from simple drawing commands and parsing paths. See the links in the readme. look at the draw commands in ‘demo’.


While you can easily draw them like zui does on a surface within Armory3D although I have not tried, you can also render them to a mesh.

var ironMesh    = new IronMesh( "Scene", 'mesh' );
ironMesh.create( wid, hi, triangles, colors );

So for instance you could rebulid Zui to render elements to meshes using trilateral and then texture all the elements with tiger or leopard texture ( currently only one color texture is supported in demo but looks like that can be changed ). You can add really sharp text to a 3D model on the fly by embedding the svg path data for each letter, so while perhaps overkill sometimes very useful.

So use case might be 2.5D maps, engineering drawings and fun 2.5 interactions such as perhaps on the fly generated jigsaw.

You can use Kha graphics2 type extended drawing api commands ( extended by trilateral to render as triangles ) to create 2D mesh data for use in 3D, so rather being drawn as a bitmap texture it’s actually a hitTestable mesh with sharp and hopefully clean edges.

So it has many possible future uses but perhaps none that are useful to many.

2 Likes

welcome help with taking it a bit further within armory3d, as I don’t know armory internals well.

This looks kind of cool. It seems like that could be useful for UI or HUD components that you could design in something like Inkscape? Is it slow to generate the meshes?

1 Like

I fixed the problem, it seems that color needs to be named ‘col’ within the shader and also in the code for it to work, there is a clue in the iron code I should have read!!


You can see it live here:
https://nanjizal.github.io/Xperimental/trilateralIron/bin/index.html
Trilateral, TrilateralXtra, Xperimental are all on my github if your curious to experiment.

I tried to apply transforms but unsure on details advise welcomed.

1 Like

simple use might be

        var triangles = new TriangleArray();       
        var colors = [ 0xFFFF0000, 0xFF00FF00, 0xFF0000FF ];
        var path = new Fine( null, null, both ); // most expensive with nice curves use others for less triangles
// FillDrawTess for fills.
        var scaleContext = new ScaleContext( path, 1.5, 1.5 );   // if you want to scale stuff ( translate exists ).
        // play with the width
        path.widthFunction = function( width: Float, x: Float, y: Float, x_: Float, y_: Float ): Float{
            return width;
        }
        path.width = 20;
        path.moveTo( 200, 450 );
        path.lineTo( 700, 450 );
        path.lineTo( 700, 700 );
        path.lineTo( 450, 750);
        path.lineTo( 450, 700 );
        path.lineTo( 200, 50);
        path.lineTo( 150, 450 );
        path.moveTo( 0.,0. ); // required to make it put endCap
        triangles.addArray( 10 , path.trilateralArray, colors.indexOf( 0xFF0000FF ) );
        var ironMesh    = new IronMesh( "Scene", 'mesh' );
        ironMesh.create( 800, 600, triangles, colors );

obviously IronMesh needs more thought and separation of scene and mesh code but it is quick setup for experimentation. See TrilateralBazaar from lots of examples, especially the demo folder as they are the basics.

2 Likes