https://kotlinlang.org logo
Join Slack
Powered by
How would you choose to create 3D shapes in a Comp...
# compose-desktop
k
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! 🤓 ➰📦
k
For experimenting or for something a bit more complex with lots of shapes, textures, lighting etc?
r
For anything more complicated than a cube I would just use an actual 3D renderer
You could probably fake a sphere with a circle + gradients but it will never look quite right
k
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
The idea of the gradient circles and triangles would work for trees prob.
I should be able to place Image components to represent sides of buildings/trees?
So which 3D renderer would you use? Like Filament, or something from Skia?
k
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.
k
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?
d
Hey @Kebbin since you're in 🇦🇺 I can direct you to this. Just a little App I made for a community art project, but it uses Filament to show 3D models.
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.
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.
Once you get past that though, it's a scene-graph with good performance and amazing quality.
k
Cool! Thanks mate. I think it was you who told me about Filament. Yes, it does look intimidating, but the results are spectacular!
➕ 1
Ok, I'll pop by in here and read your responses properly in a minute.
👍 1
@Igor Demin @darkmoon_uk I really should have gone to bed, but had to try this!! 😵
😁 1
👍 3
m
I’d point you to https://libgdx.com/ but I don’t know how to best integrate it into compose.
k
Thanks! I'll have a look at that.
KorGE was another one prob similar to that.
OK, goodnight all! And thanks again.
r
@Kebbin if you have questions about Filament, don't hesitate to ask. I'm one of the authors.
@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.
k
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!
r
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
👀 1
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
k
OK! Thanks very much! I will have a look.
Ah yes. I did see that one! OK, I will look into it.
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!
Looks like a photographer's dream with all the capabilities!
So I guess I'd need to try the Android sample code as the closest thing to Compose Desktop?
r
Yes indeed. With Compose you'll have to use a SurfaceView inside an AndroidView, otherwise the samples will be the same
k
OK, so to start off, I'll need to add Filament implementations to my Gradle file?
Sorry, got roped in to playing a quick few games of cards with the kids after putting washing out!
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!
m
In a previous answer I mentioned libgdx which uses lwjgl as its default rendering engine and it seems there is already some kind of experimental/official JetBrains Compose support for it here: lwjgl-integration. Until now I didn’t know that. I’ll have to have a look at that myself too.
🙏 1
c
@Kebbin did you create that cube in filament? @romainguy would you take a PR to update your compose/filament sample to latest stable? 😄
k
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! 🤓📖
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!
6 Views
Open in Slack
PreviousNext
Powered by