SVGLoader: Add stroke support

[yomboprime]

Related: #15922

This PR adds some functions to generate a stroke from an array of 2D points. It can be used with the output paths of SVGLoader.parse() or with points from any other source, like Shape.getPoints(). For example, shapes generated from Font text. Optionally normals and UV coordinates are generated. The SVGLoader.parse() has been updated to parse the stroke XML attributes.

Added 3 (static) functions:

• THREE.SVGLoader.pointsToStroke( points, style ): The main function wich generates a stroke BufferGeometry.

• THREE.SVGLoader.pointsToStrokeWithBuffers( points, style, arcDivisions, minDistance, vertices, normals, uvs, vertexOffset ): Same as above but targeted to fill existing buffers instead of creating a new BufferGeometry. Returns number of vertices written. Vertices buffer can be null just to obtain the vertices count. Normals and UVs buffers are optional.

• THREE.SVGLoader.getStrokeStyle( width, color, opacity, lineJoin, lineCap, miterLimit ): An utility function to obtain a style object usable in the previous functions.

Changes in SVGLoader.parse():

• Added the parsing of the following SVG style attributes: stroke, stroke-opacity, stroke-width, stroke-linejoin, stroke-linecap, stroke-miterlimit.

• Removed isVisible() function. Now all paths are parsed and added to the output (Previously were parsed only the ones with fill attribute) The color path property is still set the fill color attribute, if exists.

Other changes not related to strokes:

• Renamed function parseTransformNode to parseNodeTransform.

• Moved declaration of some temporary vectors to cause less memory leak.

What is implemented:

• Line joins (stroke-linejoin attribute): Implemented bevel, round, miter and miter-limit

• Line endcaps (stroke-linecap attribute) Implemented all of them: round, butt and square

What is not implemented:

• Line joins: arcs, since the stroke algorithm works with linear paths. This value falls back to miter.

• Stroke width: Only default units in mm or the default document units are accepted. Values with embedded units (px, in or percentages %) are not yet parsed.

• Other attributes not implemented, relative to dashing: stroke-dasharray, stroke-dashoffset

Changes to SVGLoader example:

• Added drawing of stroke paths (the tiger looks awesome) and two more SVG files.

• Added gui to show/hide and toggle wireframe on filled shapes and strokes.

New example webgl_geometry_text_stroke:

• It is a copy from webgl_geometry_text_shapes with minor changes to show stroke text instead of line text.

[Mugen87]

https://raw.githack.com/yomboprime/three.js/svg_strokes/examples/webgl_loader_svg.html
https://raw.githack.com/yomboprime/three.js/svg_strokes/examples/webgl_geometry_text_stroke.html

[mrdoob]

Nice! Thanks!

[yomboprime]

@Mugen87 I saw you added a note to the migration guide about SVGLoader. I think it should contain also a note like "Also, all paths are returned now (not only the ones with fill color)" I would edit it myself but I'm not sure.

[Mugen87]

Sounds good.

Also, all paths are returned now (not only the ones with fill color)

Go for it^^.

[yomboprime]

Sounds good.

Also, all paths are returned now (not only the ones with fill color)

Go for it^^.

I'm sorry I don't know how to fork the wiki. I've tried to clone and modify locally but obviosly I haven't got permission to push. How should I proceed?

[Mugen87]

Can't you just use the edit button on the top right?

[yomboprime]

That button doesn't show for me :-(

[yomboprime]

Uh oh...! With great power comes great responsibility... 🕷🕶