画像を製作する場合には複数の選択肢がありますが、現在では

 

    写真

    動画

    音声

 

については、デジタルで記録する時代になっていますが、写真や動画については解像度が存在します。これは、画素の集合体なので、正方形のドットが縦横に並んだものになっていますが、画素数は、その画素の総数になります。

 

 その為、垂直と水平の場合だと問題がありませんが、これが、斜線や曲線になると正方形の角が目立つようになります。この場合、この角を消さなければ違和感があるので、輪郭補正をかけて馴染むように補正する必要があります。この時に行う処理が 【 アンチエイリアシング 】 です。これは、20世紀から存在する物になりますが、3DCGを使う場合にはレンダリングオプションで存在しており、個人レベルで低価格でリリースされていたmyShadeやiShadeでもレンダリングオプションで使用できる物になっているので、レンダリング後の輪郭補正の処理としてごく当たり前に実装されている物になります。現在では、ゲーム制作時にラスタライズなどでレンダリングを行った際に演算によって書き出された結果の輪郭にジャギーが立っている場合の補正をする場合に、複数のアンチエイリアシングの選択肢が存在していますが、用途によってアンチエイリアシングを用いる事になります。これはドットの周辺を近似色で補正することでドットの角を目立たなくする手法なので、3DCGと言うよりも 【 ドット絵でカラーパレットが増えた時に当たり前に使うようになった処理 】 を輪郭補正技術で使っているようなイメージになりますが、ラスターグラフィックではドットの角が見えるので、こう言った処理を行います。

 

 アンチエイリアシングについては、

 

 ■ ラスターグラフィックと処理

 で紹介していますが、ドット絵の場合だとそう言った処理が発生します。

 

 

クターグラフィック                

 

 動画や映像のようにモニターに出力する場合には、表示機材自体に解像度が存在するので、ラスターグラフィックの形で出す必要がありますが、動画ファイルの場合、任意のコーディックで記録した物をデコード(複合化)を行って表示を行っています。その為、ラスターグラフィックの状態で最終的には書き出す事になりますが、ドットの集合体ではなく、頂点座標の指定を行い、その座標間の補間を行う事で形状を作るベクターグrフィックが存在します。

 

 前の世紀でも印刷物を作る場合に、パスを使った処理でロゴを作りそれを印刷するようなことが行われていましたし、1990年代には3DCGが使用できるようになっていた(というか、アタリショックの前までだとアミーガとかが出ていたので、PC98シリーズとMACとアミーガで3DCGの選択肢がありました。)ので、頂点座標を指定してその頂点間を辺や面で補間して処理をするグラフィックの手法が存在しています。

 

 平面のツールの場合、 【 ドロ―系ツール 】 という名称の物になりますが、アドビのIllustratorなどがそれに該当します。このツールは1990年代ではなく、1980年代から存在するので、シャープがx68000を出す前から一般販売が始まっていたツールですが、当初はPostScriptの編集ツールでMachintosh版しか存在していませんでした。これが出たのが1986年の12月ですから、相当昔から存在しています。つまり、シャープのコンピューターのラインにX1がある時代から存在していたわけです。ちなみに、表示においてアンチエイリアスが採用されるのは1998年のバージョン8からなので、それ以前のものはスムージング処理が存在しなかったという事になりますが、1990年代になると、Corelも自社製品のCorel Drawなどをリリースしていましたから、ごく当たり前に市販のツールにベクターグラフィックが使える条件がありました。

 

 その為、1980年代末には既にこう言った処理が出来るツールが存在し、1990年代には平面ではなく3DCGでそう言う物が使えるようになっていたので、この分野は四半世紀以上前から存在しています。

 

 現在は、WINDOWS 10でもベクターグラフィックで動くツールが標準アプリとして存在していますが、それとは別に

 

   MR

   3Dプリント

   360度映像の再生

 

を標準サポートしており、ペイントも前の世代までだとラスターグラフィックですが、現在の 【 ペイント3D 】 はベクターグラフィックなので、ドットの範囲選択ではなく、オブジェクトの選択という形で空間内にオブジェクトを配置してフレーム内の状態を作れるようになっています。

 

出力段階でも視点の指定などが出来るので、面白い作りになっていますが、 【 オブジェクト 】 を管理するというのはベクターグラフィックの特徴なので、単一の層の中に複数のオブジェクトを改装を持たせて配置できるようになっています。ペイント3Dについては、

 

 ■ WINDOWSのアプリ

 

 

 ■ WINDOWS 10のアプリと動画制作

 

のようなこともできますが、3Dのオブジェクトをブーリアンを用いて構築できる3DBuilderもあります。これについては、

 

 ■ 3D Builder

で紹介していますが、現在は、機能を簡単に慰した状態でベクターグラフィックや3DCGを扱える対象年齢を低めに設定してあるアプリも用意されています。

 

 ベクターグラフィックですが、3DCGポリゴンのように直線を扱う物もありますが、チューブやケーブルのように曲線的な物を作る場合にはパスを用います。このパスを使った製作が1980年代から使えるようになった 【 ドロー系ツールでの画像制作 】 になります。


 20世紀には、GIMPが存在していたので、ラスターグラフィックで画像処理をする場合に、レイヤーを使った画像制作た当たり前なフォトレタッチやコンポジションが行えていたので、個人レベルでも色彩のコントロールやレイヤーによる素材の合成は行えていました。流石に、現在のバージョンのようにいろいろできる訳ではありませんが、20世紀でもLinux(XWINDOWSで動いていて、CUIで操作する部分が多いような時代からそんな感じです。)をインストールすると、もれなくGIMPがついてきていたので、ラスターグラフィックの作業だとGIMPで行える状態になっていました。

 

 2003年以降は、Inkscapeが登場したので、ドロー系ツールを個人でも気軽に使えるようになりました。

 

 ちなみに、Nanの時代のBlenderは1998年にはWINDOWS版が存在していましたから、実質的に1998年には無償版のblenderで個人でもベクターグラフィックを扱えるようになっていたのですが、2DのツールでOSSだとこの辺りから使いやすくなりました。

 

 とは言っても、MyshadeやiShadeは1998年にリリースされているので、この時代にはパスを使ったモデリングが出来るツールが1万円前後でリリースされていました。3Dの軸を減らせば2Dで使用できるので、この時代にはパスを使った形状制作を体験する事が出来ました。

 

 

 I  nkscapeを使う                   

 

 現在は、画像制作を行うアプリケーションでもベクターで処理をしてラスターで出力するような物もありますが、Inkscapeは完全なベクターグラフィックツールになります。こうしたツールは、巨大なサイズの物を作る時に曲線や斜線を描いてもジャギーが出ないという利点があります。また、拡大・縮小を行っても座標と座標間の補間で処理を行っているので、破綻しないという利点があります。ラスターグラフィックは画素の座標が整数処理(を使っているので、変数を使うときには色も含めてint型で宣言して使用する事ができます。数値の範囲がそこまで巨大ではないので、longを使う事はないと思います。色のように256を使う場合だと違う選択肢になりますが、基本的に整数処理になります。)なので、変形した時の変化は近似値でディテール補間をする必要がありますが、ベクターグラフィックは座標を計算で処理をしていますから、浮動小数点演算(なので、変数で宣言する時には、floatやDouleを使います。)を用いる事になります。

 

 また、縮小に強いので、小さな解像度でディテールのある物を描く場合にも向いていますし、サイズの拡大縮小や回転をしても破綻しないので使いやすい仕様になっています。Inkscapeもそう言った特性を持つベクターグラフィックになります。

 

 まず、

 

 

のようにキャンパスのサイズを変更し、

 

 

のように形状を作り並べます。形状はオブジェクト単位で管理されているので、単一のレイヤーで作業をしていますが、

 

 

のように製作したオブジェクト単位で下降できます。また、複数のオブジェクトを選択して、

 

 

のようにメニューから 【 統合 】 を選択するとブーリアン演算ができるので、形状の一体化やくりぬきなどが行えます。統合すると、

 

 

のように一つのオブジェクト解いて使用できます。

 

 画像を見てもらうと頂点が出ていますが、この頂点の座標をコントロールすると直線的な変化を与える事ができます。この図形では、三かけ期の頂点とは別に辺の中央にも頂点があります。この頂点を削除すると、

 

 

のようにハンドルが出てきます。このハンドルの方向に直線が伸びるので、これを加工することで形状の状態を変更できます。

 

 

のように曲線にすることもできますし、画面上部のノードのアイコンで特性を変更できます。

 

 

左右がん連動して動くようにすると、

 

 

のようになりますし、シャープにする選択をすると、個別にハンドルを動かせるようになるので、

 

 

のように頂点部分でエッジを立てる事が出来るようになります。その為、多角形やハートのようなエッジが必要なパーツだと左右のハンドルが個別に動くような指定にしておく必要があります。

 

 ハンドルの影響ですが、

 

 

のようにそれぞれのハンドルの向きが平衡の場合、直線的に伸びた先に曲面が出来上がりますが、このハンドルの長さを変えると、

 

 

のように辺も延長されます。ただし、平行に伸びたハンドルの間の曲線部分は尖った感じの形状になっています。

 

 パーツには前後関係があるので、新規に追加したバーツは常に喘鳴に追加されます。

 

 

 

■ ブーリアンを使う                  

 

 ベクターグラフィックでは形状の合成や部分的な切り抜きにブーリアン演算を使います。Blenderでもモディファイヤにブーリアンが存在しますが、2.91からブーリアンが賢くなっているのでさらに使いやすくなりました。(押し出しの機能で形状が破綻しなくなっているので、そうした点でもかなりアルゴリズムが貸し込むなっています。)

 

 まず、

 

 

のようにオブジェクトを追加して、

 

 

のように 【 差分 】 を選択すると、

 

 

のように指定した形状と重なった部分が除去され、対象のオブジェクトを選んでもう一方の形状を選んで

 

 

のように 【 統合 】 を選択すると、

 

 

のように一体化されます。

 

 

■ オブジェクトの階層                

 

 オブジェクトには単一レイヤー内でも階層が存在するので、

 

 

のような形状を差分でくりぬいて

 

 

のような円を後ろの置きたい場合、上部にある階層のアイコンから最適な階層を選択すると、

 

 

のように後ろの位置に配置する事ができます。

 

 形状ですが、

 

 

のような物を追加して一体化させる場合にはブーリアンを用いる事になるので、実行すると、

 

のようになりますが、

 

 

のようにする場合には、一体化を行わずに、配置する事になります。この時に、口のパーツを加工して閉じたい場合、個別に回すのは大変ですから、グループ化を行います。歯と下あごの部分を選択して、

 

 

のように 【 グループ化 】 を選択すると、一つのオブジェクトとして動かす事が出来るので、

 

 

のように回転させることができます。これを

 

 

のように補完することもできますし、加工することもできます。

 

 

 

■ 形状の変形                     

 

 作った形状は範囲選択をして複製が出来るので、

 

 

のようにできますが、これを更に複製して回転させてもベクターグラフィックでは形状の破綻がありません。

 

 

また、斜めにしても同様の結果になります。

 

 

 

 スターグラフィックの場合            

 

 ベクターでは常に正しい状態で表示されるので、これをラスターグラフィックでエクスポートして使ってみる事にします。とりあえず、

 

 

のようにしてPNGで書き出しGIMPで読み込みます。GIMPを立ち上げて開いてみると、

 

 

のように透過PNGの状態で読み込まれます。そのまま見てみると、

 

 

のようにアンチエイリアシングが入るので、サイズが小さくなるとディテールがなくなります。また、垂直のオブジェクトと斜めのオブジェクトではエッジ周辺のディテールが怪しくなっています。

 

 これがインポート段階のオブジェクトですが、元の画像をラスターグラフィックの状態で回転させてみます。

 

 

の部分を回転すると、

 

 

のようになりますが、実行後には

 

 

のような差が出てしまいます。アンチエイリアシングで色が変わってしまうので、扱いにくい状態になっています。ドットで描くとこうした事はありませんが、画像処理による低解像度の画像処理ではこうした事が発生します。また、画像処理ですが、コントラスト調整を行うと、

 

 

のように輪郭が太くなるので、全く異なる画像になるので、異なるアプローチを持ちる必要があります。ちなみに、

 

■ ベクターの出力結果を調整した物       

 

■ ラスターグラフィックを調整した物       

 

■ ラスターグラフィックを回転した物        

 

になりますから、ベクターグラフィックで作って動かしたものをエクスポートしたほうが品質は高くなります。

 

 ちなみに、SVGはBlenderでも読み込めるので、

 

 

のようにシーン内に配置する事ができます。

 

回の作業環境                   

 

  ■ Core i5 650

  ■ H55M-Pro 

  ■ DDR 1333 2GBx2+1GBx2(DUAL CH)

  ■ Quadro K620(PCI Express x16 【GEN2動作】)

  ■ SATA HDD

  ■ WINDOWS 10 x64 (20H2)

 

 

  ■ Inkscape 1.0 (x64) 

     https://inkscape.org/ja/

 

  ■ Blender 2.91.0 (x64) 

     https://www.blender.org/

 

  ■ Gimp 2.10.18 (x64)

     https://www.gimp.org/