2024/11/20(水) [n年前の日記]
#1 [cg_tools] svgファイルフォーマットについて少し調べてた
OpenGLで、2Dと言うか、平面的な図形っぽいものを描きたい。そのための図形データをドローソフトの類で作りたい。svgファイルとして作成して、そのsvgファイルからデータを作れないかと思い立った。
そういう理由で、svgファイルフォーマットについて調べ始めてみた。
_パス - SVG 1.1 （第２版）
_Scalable Vector Graphics - Wikipedia
Inkscape 1.4 x64 で簡単な図形を作成して、svg保存して中身を眺めてみたのだけど…。なかなか面倒なフォーマットに見える…。
相対座標が入ってくるあたりが面倒臭い…。それって現在座標を常に記憶しながら処理しないといかんのでは…。全部の座標を絶対座標で記述してくれたりしないものか…。
そこでふと、別フォーマットに変換してみるのはどうかと思いついた。例えば wmf で一旦保存して、その wmf を開いて svg として保存したらどうなるか。
wmf なら、曲線(カーブ)を持つことができないから、曲線は直線で近似して保存されるはずだし。OpenGLで描画する場合、曲線は扱えないから直線で近似することになるはずで、かえって都合がいいのではないか。
試してみたところ、wmf で保存して、Inkscape で wmf を開いて svg として保存した場合、座標値は全部絶対座標になることが分かった。ただ、グループ情報は無くなって全ての path が同階層に展開されるし、svg 上で単位を px にしていても mm に変換されてしまう。
そういう理由で、svgファイルフォーマットについて調べ始めてみた。
_パス - SVG 1.1 （第２版）
_Scalable Vector Graphics - Wikipedia
Inkscape 1.4 x64 で簡単な図形を作成して、svg保存して中身を眺めてみたのだけど…。なかなか面倒なフォーマットに見える…。
- path の d の中に座標値が並んでいる。
- 大文字なら絶対座標、小文字なら相対座標を示す。例えば M 16,248 なら絶対座標だし、m 16,248 なら相対座標。
- 水平直線なら H か h が記述されていて、垂直直線なら V か v が記述されている。
- Z か z で、その path は Close path (閉じているパス。終点が始点と繋がっているパス)であることを示す。
相対座標が入ってくるあたりが面倒臭い…。それって現在座標を常に記憶しながら処理しないといかんのでは…。全部の座標を絶対座標で記述してくれたりしないものか…。
そこでふと、別フォーマットに変換してみるのはどうかと思いついた。例えば wmf で一旦保存して、その wmf を開いて svg として保存したらどうなるか。
wmf なら、曲線(カーブ)を持つことができないから、曲線は直線で近似して保存されるはずだし。OpenGLで描画する場合、曲線は扱えないから直線で近似することになるはずで、かえって都合がいいのではないか。
試してみたところ、wmf で保存して、Inkscape で wmf を開いて svg として保存した場合、座標値は全部絶対座標になることが分かった。ただ、グループ情報は無くなって全ての path が同階層に展開されるし、svg 上で単位を px にしていても mm に変換されてしまう。
◎ blenderにインポート :
svg にしろ wmf にしろ、OpenGLで描画するためには三角ポリゴンか四角ポリゴンにしないといけない。データに対する処理を簡単にするためには、全部三角ポリゴンにしたほうがいいだろうか。となると、n角形を三角ポリゴンに分割していく処理が必要になる。
blenderならn角形を三角ポリゴンや四角ポリゴンに変換する機能があるなと思いついて、svg を blender 4.2.3 LTS にインポートして様子を眺めてみた。
svg は、めちゃくちゃ小さい形状でインポートされた。かつ、全ての path はカーブとして読み込まれた。ただ、svgで指定していた色は、ベースカラーとして読み込んでくれる模様。色情報については blender上でもちゃんと残るので、その点は助かる。
オブジェクトを全部選んで、拡大。適用 → 全トランスフォームで、座標値を拡大後の値で置換する。
カーブを1つ選んで右クリック → 変換 → メッシュ、でカーブをメッシュ(ポリゴン)に変換できる。ただ、複数のカーブを選んだ場合、変換できる時と変換できない時がある。条件が分からない…。何にせよ、blender上で各カーブをメッシュに変換してみたところ、矩形1つは三角ポリゴン2つに変換してくれた。この状態なら OpenGL で描画することもできそう。
試しに Wavefront (.obj) 形式でエクスポートしてみた。エクスポートされた .obj を新規にインポートしてみたところ、元の見た目が再現された。座標値データについてはこのままでもイイ感じ。
ただ、.obj でエクスポートした場合、マテリアル情報がおかしくなることに気づいた。Wavefront (.obj) 形式の場合、マテリアル情報は .mtl ファイルとして保存されるのだけど、その .mtl に記述されている色の数値が、元々の svg で指定してたRGB値と全く一致しない…。
blender側の設定次第で .mtl 内の値は変化するのではないかと期待して試してみたけれど…。色々な設定を変更してみても、.mtl の記述には全く変化がなかった。このままでは、svg上で指定した本来のRGB値が得られない…。
.mtl内の各値がどうやって算出されているか、それさえ分かれば、.mtlから本来のRGB値を逆算することも可能なのだろうけど…。
blenderならn角形を三角ポリゴンや四角ポリゴンに変換する機能があるなと思いついて、svg を blender 4.2.3 LTS にインポートして様子を眺めてみた。
svg は、めちゃくちゃ小さい形状でインポートされた。かつ、全ての path はカーブとして読み込まれた。ただ、svgで指定していた色は、ベースカラーとして読み込んでくれる模様。色情報については blender上でもちゃんと残るので、その点は助かる。
オブジェクトを全部選んで、拡大。適用 → 全トランスフォームで、座標値を拡大後の値で置換する。
カーブを1つ選んで右クリック → 変換 → メッシュ、でカーブをメッシュ(ポリゴン)に変換できる。ただ、複数のカーブを選んだ場合、変換できる時と変換できない時がある。条件が分からない…。何にせよ、blender上で各カーブをメッシュに変換してみたところ、矩形1つは三角ポリゴン2つに変換してくれた。この状態なら OpenGL で描画することもできそう。
試しに Wavefront (.obj) 形式でエクスポートしてみた。エクスポートされた .obj を新規にインポートしてみたところ、元の見た目が再現された。座標値データについてはこのままでもイイ感じ。
ただ、.obj でエクスポートした場合、マテリアル情報がおかしくなることに気づいた。Wavefront (.obj) 形式の場合、マテリアル情報は .mtl ファイルとして保存されるのだけど、その .mtl に記述されている色の数値が、元々の svg で指定してたRGB値と全く一致しない…。
blender側の設定次第で .mtl 内の値は変化するのではないかと期待して試してみたけれど…。色々な設定を変更してみても、.mtl の記述には全く変化がなかった。このままでは、svg上で指定した本来のRGB値が得られない…。
.mtl内の各値がどうやって算出されているか、それさえ分かれば、.mtlから本来のRGB値を逆算することも可能なのだろうけど…。
[ ツッコむ ]
以上です。