Fills

On this page, we explore ways to close a drawn gesture into a region that can be filled.

このページでは、描いた線を塗りつぶせる領域として閉じ、その形をつくる方法を探ります。

The two methods below turn an open path into a closed region. The region is represented as a signed distance field in the fragment shader, allowing a fill to push the boundary, texture the interior, or shade it as a surface without adding geometry. Unlike the analytic primitives a distance field is usually built from (a circle, a box), here the exact drawn contour is passed to the shader, which measures the distance to that polygon.

以下の2つの手法では、開いたパスを閉じた領域に変換します。この領域はフラグメントシェーダ内で符号付き距離場として表現されるため、ジオメトリを追加せずに、塗りで境界を押し広げたり、内部にテクスチャを適用したり、表面として陰影をつけたりできます。距離場はふつう、円や矩形のような数式のプリミティブから作りますが、ここでは描いた輪郭そのものをシェーダに渡し、そのポリゴンまでの距離を測ります。

Blob drawing

open full size ↗

This demo creates a closed path that encloses the entire drawn gesture. It finds the smallest convex region containing all drawn points, then smooths and fills it.

このデモでは、描いた線全体を囲む閉じたパスを作ります。描いたすべての点を含む最小の凸領域を求め、それを滑らかにして塗りつぶします。

Tight blob

open full size ↗

The convex hull method fills in every concavity, which can turn a crescent into a solid lump. This demo's method closes the drawn path into a smooth loop, then defines the shape as the region within a chosen radius of that loop.

凸包法はすべての凹みを埋めてしまうため、三日月形も凹みのない塊になってしまいます。このデモでは、描いた線を滑らかなループとして閉じ、そのループから指定した半径以内の領域を形として定義します。