How do I animate the drawing of a line?

Questions
1

I’d like to animate drawing of lines like in the intro of the Tron movie: the TRONTAGE 2011 on Vimeo

I couldn’t find a tutorial on this–how do I do it with Babylon?

I did find a Three.js tutorial: javascript - Drawing a line with three.js dynamically - Stack Overflow

2

The tool to use is : MeshBuilder - Babylon.js Documentation
Like in 3js, the number of points set will be the maximum number. Think to build your line mesh as updatable
Then to “animate” or morph the lines, just use the parameter instance and simply change the points coordinates according to your need.
Parametric Shapes - Babylon.js Documentation
Create Parametric Shapes - Babylon.js Documentation

If you need something more versatile (different colors, segments, etc) still drawn in one draw call, then use the LineSystem instead : MeshBuilder - Babylon.js Documentation
that works exactly like the line mesh Create Parametric Shapes - Babylon.js Documentation

4 Likes