---
title: WebGL Stroking
date: 2024-07-20T04:27:26.000Z
updated: 2026-01-08T14:50:56.571Z
url: https://baku89.com/WebGL_Stroking
---

# WebGL Stroking

[Abstraction Ladder](/Abstraction_Ladder)

全てのグラフィック編集ツールは、こういったデータ表現の階層を取っていて欲しい

1. Path

- SVGのdタグなど。曲線などをそのまま保持出来る。最も高レベルな図形表現

2. Polygon

- WebGLなどでレンダリング可能な多角形集合
- ポリゴンと頂点・プリミティブ毎のカスタムアトリビュート、シェーダーからなる

3. Raster

- ラスター画像

SVGやCanvas APIは、ストローク幅を可変にしたり、線に沿ったグラデーション、メッシュグラデーションなど、複雑なベクターグラフィック表現ができない。

[Efficient WebGL stroking](https://hypertolosana.wordpress.com/2015/03/10/efficient-webgl-stroking/)