filament is an open supply rendering engine developed by Google. You need to use it to show objects in actual time. It’s generally utilized by AR video games and functions.
On this tutorial, I’ll present you easy methods to use Filament to render a mannequin created in Blender. I’d additionally use Jetpack Compose.
To get began, we have to add the dependencies. I’m utilizing filament 1.36 however it’s best to use the most recent model.
dependencies {
implementation 'com.google.android.filament:filament-android:1.36.0'
implementation 'com.google.android.filament:filament-utils-android:1.36.0'
implementation 'com.google.android.filament:gltfio-android:1.36.0'
}
Now that we’ve got the Filament in place, we have to initialize it. You’ll be able to mainly do that wherever earlier than you utilize Filament. You are able to do it in yours Utility or MainActivity class. You simply have to name Utils.init() and it’ll initialize the Filament for you.
Utils.init()
Utils.init inside name Filament.init so that you needn’t do it once more. If Utils not out there, possibly since you forgot so as to add filament-utils-android dependent.
Filament might not work accurately on the emulator so attempt to use a bodily machine if doable.
You’ll be able to create your fashions by defining all of the vertices manually however that’s actually tough and time consuming. One other method is to make use of a device like Blender to create the fashions after which export them.
I am not going to show you easy methods to mannequin in Blender as a result of there are lots of of tutorials on that.
On this tutorial, I shall be utilizing a dice that I created in Blender. Take note of the two lights, for those who do not add lights your mannequin will look darkish. Should you add lights, be sure you improve their wattage (W).
Go to File > Export > glTF 2.0.
Set the format to gltFT Binary.
Below Included, choose Lights on time when you’ve got included lights.
In Information > Grid, be certain that UVs, Normals, and Vertex Colours are chosen.
After your mannequin is exported, you’ll have a .glb doc.
Now that we’ve got initialized the Filament and the mannequin, we will proceed to the following step.
To ensure your mannequin is exported accurately, you should utilize websites like glb.ee or babylon.js to think about it. Whether it is displayed accurately in these internet pages, then Filament shouldn’t have any downside displaying them.
Return to your IDE and put glb under file app/src/foremost/belongings/fashions. If you do not have belongings or fashions folders simply create them.
I’m utilizing Jetpack Compose and to make my code extra organized I’m creating a category that’s solely liable for rendering.
Let’s begin by defining a couple of variables. We additionally want to watch the lifecycle of the view to take away parts accurately.
class ModelRenderer {
personal lateinit var surfaceView: SurfaceView
personal lateinit var lifecycle: Lifecycle
personal lateinit var choreographer: Choreographer
personal lateinit var uiHelper: UiHelper
personal lateinit var modelViewer: ModelViewer
personal lateinit var belongings: AssetManager
personal val frameScheduler = FrameCallback()
personal val lifecycleObserver = object : DefaultLifecycleObserver {
override enjoyable onResume(proprietor: LifecycleOwner) {
choreographer.postFrameCallback(frameScheduler)
}
override enjoyable onPause(proprietor: LifecycleOwner) {
choreographer.removeFrameCallback(frameScheduler)
}
override enjoyable onDestroy(proprietor: LifecycleOwner) {
choreographer.removeFrameCallback(frameScheduler)
lifecycle.removeObserver(this)
}
}
}
Under, outline a way that shall be referred to as when the SurfaceView is obtainable within the element.
enjoyable onSurfaceAvailable(surfaceView: SurfaceView, lifecycle: Lifecycle) {
this.surfaceView = surfaceView
this.lifecycle = lifecycle
belongings = surfaceView.context.belongings
lifecycle.addObserver(lifecycleObserver)
...
}
Under, in the identical technique, proceed the configuration.
enjoyable onSurfaceAvailable(surfaceView: SurfaceView, lifecycle: Lifecycle) {
...
choreographer = Choreographer.getInstance()
uiHelper = UiHelper(UiHelper.ContextErrorPolicy.DONT_CHECK).apply {
// That is wanted to make the background clear
isOpaque = false
}
modelViewer = ModelViewer(surfaceView = surfaceView, uiHelper = uiHelper)
// That is wanted so we will transfer the digital camera within the rendering
surfaceView.setOnTouchListener { _, occasion ->
modelViewer.onTouchEvent(occasion)
true
}
// That is the opposite code wanted to make the background clear
modelViewer.scene.skybox = null
modelViewer.view.blendMode = View.BlendMode.TRANSLUCENT
modelViewer.renderer.clearOptions = modelViewer.renderer.clearOptions.apply {
clear = true
}
// This half defines the standard of your mannequin, be happy to alter it or
// add different choices
modelViewer.view.apply {
renderQuality = renderQuality.apply {
hdrColorBuffer = View.QualityLevel.MEDIUM
}
}
createRenderables()
}
The onSurfaceAvailable technique is liable for initializing the variables that we have to render the mannequin.
The createRenderables technique is without doubt one of the loading technique glb the file we exported earlier. modelViewer.loadModelGlb is a technique that parses the file’s contents and creates entities in Filament. modelViewer.transformToUnitCube is important to place and scale the mannequin accurately.
personal enjoyable createRenderables() {
val buffer = belongings.open("fashions/tutorial.glb").use { enter ->
val bytes = ByteArray(enter.out there())
enter.learn(bytes)
ByteBuffer.allocateDirect(bytes.measurement).apply {
order(ByteOrder.nativeOrder())
put(bytes)
rewind()
}
}
modelViewer.loadModelGlb(buffer)
modelViewer.transformToUnitCube()
}
Lastly we decide FrameCallback .
internal class FrameCallback : Choreographer.FrameCallback {
override enjoyable doFrame(frameTimeNanos: Lengthy) {
choreographer.postFrameCallback(this)
modelViewer.render(frameTimeNanos)
}
}
by default ModelViewer add a directional gentle above the mannequin in order that even for those who do not add a light-weight, you’ll nonetheless see the highest of the mannequin illuminated. The filament additionally solely helps 1-direction gentle.
Now then ModelRenderer executed, transfer on to the Enhancing part. I am placing my composable inside mine MainActivity.
class MainActivity : ComponentActivity() {
companion object {
init {
Utils.init()
}
}
override enjoyable onCreate(savedInstanceState: Bundle?) {
tremendous.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Floor(
modifier = Modifier.fillMaxSize(),
colour = MaterialTheme.colorScheme.background
) {
AndroidView(manufacturing unit = { context ->
val renderer = ModelRenderer()
SurfaceView(context).apply {
renderer.onSurfaceAvailable(this, lifecycle)
}
})
}
}
}
}
}
Now run the appliance.
In case your mannequin appears to be like like this it is as a result of lack of sunshine, make your lights brighter in Blender. I’m utilizing 9000W for this instance.
After making the lights brighter, the ultimate consequence ought to appear like this:
For some cause the background remains to be black on the emulator however for those who run it on a bodily machine the background shall be clear.
In case you are utilizing emulator, be sure you allow OpenGL2 or 3, in any other case it’ll crash rendering the doc.