I know theejs supports SVG, so I was curious if anyone has ever had success running a Lottie animation?
Lottie can render its animations to a canvas which can be used as a data source for an instance of THREE.CanvasTexture. Iâ've used the official basic Lottie demo for the following three.js fiddle:
2 Likes
Thank you for the demo!
One of the great parts of using lottie or SVG is that you have infinite resolution when using vector graphics.
Wouldnât rending to texture take this away and lock the the image into a specific resolution. I could not zoom into the cube in your example to see if the image it had as a texture would still be sharp. But I assume it would not if it now lives on a texture map.
I have imported an SVG into the Editor and see it perfectly in my scene, I guess it is now a polygon plane of sorts with many points or vertices. It is this SVG in my scene that I was hoping to animate with lottie so I could maintain unlimited resolution? Is this possible?
1 Like
How about having Lottie render to a div using CSS3DRenderer?
That will render actual SVG, not a rasterized texture.
Interesting! But the div lives in 2D space, and what I am trying to do is animate the 3D SVG that you will find in your 3D threejs scene
The CSS3DRenderer is 3d.
It will give your div 3 dimensions.
Check out the three.js code examples and search for codepen.io / fiddles and here for some understanding.
A div box is 2D and does not live within the 3D canvas.
CSS3DRenderer
can be used to apply hierarchical 3D transformations to DOM elements via the CSS3 transform property.
Unless I am wrong? 
For example
Letâs say this tiger was animated
I would want the lottie animation to drive the tiger you see in this 3D scene
The example triangulates all SVG shape definitions so itâs possible to render them as meshes with WebGL. The triangulation process is costly and not something you want to do per frame.
However, if you want to create an animated mesh based on an animated SVG, it would be necessary to triangulate data per frame. Which is definitely not recommended because of the related performance overhead.
Ha ha ok you talked me out of it⌠Thank you though, because I wouldnât want to put to much work into something that will be expensive for performance.
So back to your original suggestion then. Does canvas to texture support transparency?
Do you think the Lottie example you made is much more optimized of an approach then just rendering an image sequence or video as a texture. I would guess so seeing how small Lottie files are, but perhaps canvas to texture is more costly than video or image sequence as a texture?
I have a working example of animated svgs in divs that are in 3d.
A cube with separate animated svgs on each cube side, as cube is rotated in 3d space.
I donât have the ability to share them now (doh) but can in a bit.
This is not using three.js however, but can easily be overlapped
(Sorry bout confusion css3drenderer does indeed rasterize)
My example does not
Starting with r123, there will be LottieLoader which makes the loading process of Lottie files easier:
1 Like
Well thatâs awesome!!
Whatâs the workflow, load Lottie files and render to a canvas then canvas as a texture? Like your example? This will be great!
I think it still would be great if Lottie files could drive the SVG that is in the 3D scene, this way you would have unlimited resolution, but again you said this is very expensive�
As I said before, that does not work. You have to work with a canvas like the loader and my example does.
I hear you! Just wishing for features to magically appear. Thank you for the workflow
I can not zoom into your box in your example. But I assume if I zoomed close enough the animation would start to look pixilated? Due to the texture map size?
What would be your method for allowing transparency so you only see the Lottie animation and nothing else?
This is inevitable when using textures. Texture filtering can mitigate this issue however the default texture settings are already targeting good quality.
You can configure the alphaTest property so only fragments with an alpha value greater than a specific value will be rendered. https://jsfiddle.net/et2z0Los/
@Mugen87 Iâm not so familiar with Lottie but it looks like the LottieLoader uses a fixed resolution based on the loaded data:
container.style.width = data.w + 'px';
container.style.height = data.h + 'px';
Would it instead be possible to override that with a higher resolution so the resulting texture would be more crisp? Iâm not sure if the Lottie animation data relies on those dimensions, thoughâŚ
It actually looks like it does work â at least in the case of that specific animation. Hereâs the current result from LottieLoader which sets the container to 500x500:
And here it is with a hard hard coded 5 times multiplier (setting the container to 2500x2500):
container.style.width = data.w * 5 + 'px';
container.style.height = data.h * 5 + 'px';
Maybe someone who knows more about the Lottie format can say but it might be nice to have an option on LottieLoader to override the width and height of the resulting texture.
Letâs see what @mrdoob thinks about this 
.