2D facial Animations on a 3D character

Hey all,

I’m curious if anyone has had any experience setting up a rigged 3D model with 2D facial expressions like the photo below within PlayCanvas.

I have a pretty good idea of how to do this in 3D animation packages like Maya & Blender but I am curious what the best way to set this up within PlayCanvas is. Is it just to have multiple diffuse maps for different expressions and then update the model’s material every time the map is switched out? Is there an alternative with any of the new animation features?

Thanks in advance

Hi @Jake_Johnson,

There is a number of ways to do this, one is to swap materials like you said, another is to use a texture sheet, that includes multiple expressions. You can use the texture map offset together with tiling, in the material settings, to set the part of the texture that corresponds to each expression. You can do that in code to give the illusion of animation.

This free mixamo character includes a texture sheet like this:


@Leonidas Is there a project with a setup that iterates through the different expressions? I understand how to do that in a sprite sheet on a sprite element for 2D but I’m not that familiar with how to step through that sheet within a character material. Would it just be changing the texture map offset at a set interval that corresponds with how the sheet is tiled? So if it is 5x5 you would go 20 percent across the sheet each time you want a new face.

I don’t have a project in mind, but here is a test from an older project of mine. Playing with offset X/Y with increments of 0.1 for the eyes material it produces various expressions:


Oh okay that is extremely helpful. So how do you have different materials setup for just the eye and not the entire “head” model. Are you selecting different polygons and applying mats in your 3D suite to make that happen? Are there extra planes on top of the head? What is the setup on the model?

I didn’t model that, it’s a free model you can grab and test from mixamo.com

Though yes, I imagine it’s something similar to what you describe. Though, no extra polygons on top of the face (that would produce z-fighting).

Just select the regular eye polygons, unwrap them and point them to a separate eye material. When you export your model and import to PlayCanvas you will have two materials (mesh instances), one for the body and one for the eyes.

@Leonidas Just looked on the model. It actually does have different polygons slightly in front of the head. Interesting setup. You can see it has the same for the mouth and the eyebrows.

1 Like

Good to know, thanks for sharing.

I don’t think it’s required to do what you are looking for, but feel free to try.

1 Like