How would you choose to create 3D shapes in a Compose Canvas

Question

How would you choose to create 3D shapes in a Compose Canvas Is there a 3D objects or shapes library Would you draw 12 individual lines for a cube Would drawing a series of tilted rectangles work better What about a sphere I will try some ideas and see what happens Thanks nerd face curly loop package

Kirill Grouchnikov · Answer

For experimenting or for something a bit more complex with lots of shapes textures lighting etc

romainguy · Answer

For anything more complicated than a cube I would just use an actual 3D renderer

romainguy · Answer

You could probably fake a sphere with a circle + gradients but it will never look quite right

Kebbin · Answer

Thanks Prob plenty of basic shapes I m creating a virtual representation of a model train layout so thinking a good handful of basic building structure shapes No real need for fancy lighting and shadows yet Plenty of dreams of creating endless randomly lightly populated worlds for my kids to explore in both visual and conceptual form Might spark their interest to create a target programming exercise rather than be overwhelmed with the immensity of general possibilities kids

Kebbin · Answer

The idea of the gradient circles and triangles would work for trees prob

Kebbin · Answer

I should be able to place Image components to represent sides of buildings trees

Kebbin · Answer

So which 3D renderer would you use Like Filament or something from Skia

Kirill Grouchnikov · Answer

Really depends on what you envision You can draw simple shapes yourself with canvas APIs That would work for something like wireframes If you do want to get into occlusion not drawing the back side of a cube or having a sphere placed in front of the cube hiding some part of that cube you d probably do want to go to an existing library and have it render things onto the native Skia surface

Kebbin · Answer

Yes that sounds better I will try the Canvas APIs for the experience but I should look into a decent library What would you suggest

darkmoon_uk · Answer

Hey < Kebbin> since you re in flag au I can direct you to Just a little App I made for a community art project but it uses Filament to show 3D models

darkmoon_uk · Answer

Not sure what it proves beyond someone has used Filament in an Android App not even Desktop but I thought I d mention it TBH Filament looks great and powerful it was also a touch intimidating beyond the simple orbit a model use case I had here

darkmoon_uk · Answer

For more involved use cases you d have to touch some native library stuff and be prepared to wrangle your assets in its proprietary format

darkmoon_uk · Answer

Once you get past that though it s a scene graph with good performance and amazing quality

Kebbin · Answer

Cool Thanks mate I think it was you who told me about Filament Yes it does look intimidating but the results are spectacular

Kebbin · Answer

Ok I ll pop by in here and read your responses properly in a minute

Kebbin · Answer

< Igor Demin> < darkmoon uk> I really should have gone to bed but had to try this dizzy face

Michael Paus · Answer

I d point you to <https libgdx com > but I don t know how to best integrate it into compose

Kebbin · Answer

Thanks I ll have a look at that

Kebbin · Answer

KorGE was another one prob similar to that

Kebbin · Answer

OK goodnight all And thanks again

romainguy · Answer

< Kebbin> if you have questions about Filament don t hesitate to ask I m one of the authors

romainguy · Answer

< darkmoon uk> Filament doesn t have a dedicated format We provide one for convenience but that s all We actually recommend using glTF instead since it s compatible with so many tools nowadays

Kebbin · Answer

Ok well done Thanks Romain Top product So where do I start if I want to use it to create a basic 3D scene like for my railway layout Will the objects inside it still be clickable interactive as Compose objects Thanks

romainguy · Answer

There s an API to pick objects in Filament Given a x y coordinates it can tell you which entity you touched I have a simple example of compose integration on <https github com romainguy sample materials shop|https github com romainguy sample materials shop>

romainguy · Answer

It s based on compose alpha so you ll need to adjust a couple of things but it shows how to load glTF scenes un filament

Kebbin · Answer

OK Thanks very much I will have a look

Kebbin · Answer

Ah yes I did see that one OK I will look into it

Kebbin · Answer

Hmm Yes not a massive amount of boilerplate code at all but will take a while to get my head around it Relatively succinct but I guess I d be hoping for that to be bundled in a more concise library which obviously could be done within the app I would have just the one main scene with interactive objects I prob should be focussing on the MVVM side of my program first I just thought I d explore the 3D side first to get a feel for the possibilities I ll look more into the Filament product docs now and see if I can find a simple way to create a basic scene I guess I d need to create some 3D models too which shouldn t be an issue as that is part of a past life of mine

Kebbin · Answer

Looks like a photographer s dream with all the capabilities

Kebbin · Answer

So I guess I d need to try the Android sample code as the closest thing to Compose Desktop

romainguy · Answer

Yes indeed With Compose you ll have to use a SurfaceView inside an AndroidView otherwise the samples will be the same

Kebbin · Answer

OK so to start off I ll need to add Filament implementations to my Gradle file

Kebbin · Answer

Sorry got roped in to playing a quick few games of cards with the kids after putting washing out

Kebbin · Answer

I also found a post of yours on Reddit explaining SurfaceView and had links to your wake me up sample I like that one It seems straightforward so will have a look at them plus the <https github com google filament rendering with filament> section Until then I ll get the basics of my program going and explore Filament with you later Thanks so much for your time and info

Michael Paus · Answer

In a previous answer I mentioned which uses as its default rendering engine and it seems there is already some kind of experimental official JetBrains Compose support for it here Until now I didn t know that I ll have to have a look at that myself too

Colton Idle · Answer

< Kebbin> did you create that cube in filament < romainguy> would you take a PR to update your compose filament sample to latest stable smile

Kebbin · Answer

No I created that cube in Desktop Compose Kotlin The only issue is that the system thinks the parts are all still oblique in the display so individual pointer interaction is near impossible I had another crack last night at combining rotation with proportional X Y scaling of the actual underlying Composable to get a similar effect while maintaining clickability but as soon as perspective is introduced the screen coordinates will be out the window so a lot of maths to compensate I think for basic isometric style it will work well but really my time will be better spent learning a 3D renderer nerd face book

Kebbin · Answer

The suggestion given by members of the libgdx Discord was that it wouldn t be ideal for use in Kotlin Compose Desktop but I ll have a look at these links you ve just posted I m sure we can use it for something