[ 24bit-PNG画像の使用について ]


●24bit-PNGとは?

ウェブブラウザ上で使用できる画像形式の中で最もハイクォリティな表現が可能な形式。

画像形式 RGBチャンネル(色情報) αチャンネル(透明度情報) アニメーション 画像劣化
GIF 8bit(256色) 1つのみ(1色のみ完全透明可) 256色以内への減色時
PNG(8bit) 不可
PNG(24bit) 24bit(フルカラー) 各ピクセル毎に 8bit(半透明可) なし
JPG なし(透明不可) 圧縮時(保存時)

* 色情報の 24bit と、透明度情報の 8bit を足して、32bit-PNG と言うこともあるようだ。
* 画像処理ソフト「Photoshop」上では、「PNG-24」という名称で扱われている。


●鉄道を表現する上でのメリット

(1) ジャギー(ギザギザ感)を見えにくくする「アンチエイリアス処理(色補完処理)」が、背景透過との境界線上でも使える。

* 背景透過との境界線上でのアンチエイリアスが可能なのは、アルファチャンネル(透明度情報)が「各ピクセル毎に 8bit(256段階)」で設定可能であることによる。
* 他にも「手すりを半透明にすることで細く見せる」といった表現にも使える。風景(特に前景)においても、車体と重なる樹木などのギザギザ感がなくなるのは大いなるメリットだ。

(2) 色数の制約がない。
* 但し、この縮尺では色数制限がなくなる事のメリットはそれほど大きいものではない。8bit(256色)でも困るような車輌は少ない。グラデーションのあるラッピング(またはペイント)車体や流線形先頭部の陰影表現でのみ有効といった所だろう。

[ 左上フレーム走行見本での実例 ]
No.367 - パンタグラフ等のジャギーのなさや、手前の樹木、奥の雲あたりが 24bit-PNGの特性を生かした表現。
No.369 - D51に装着されたギースル・エジェクタ煙突の独特な形状は 8bitでは表現できない。
No.370 - 24bitの蒸機動輪。但し、動作までスムーズになるわけではない。
No.372 - 8bit機関車+24bit客車。蒸機の煙や、手前の樹木が 24bitの特徴が出ている箇所。
No.373 - 透過率の異なる画像をいくつか重ねることによる夜景表現。
No.376 - 8bitではギザギザ感をどうにもできない線画も 24bitならスムーズなラインが可能。
No.378 - 24bitでしか表現できない、透明度グラデーションのある画像による吹雪表現。
No.384 - ギザギザ感のない流線形と、フルカラーによるラッピング車輌。
No.387 - 手描き(フリーハンド)風な絵は、ジャギーが少ないからこそ表現可能。
No.426 - 勾配表現でのジャギーの少なさ。但し IA01系プログラム上での動作までスムーズになるわけではない。
No.427 - 同じく勾配表現。
No.434 - 光の拡散を表現した 24bitの信号機だが、効果は微妙である(夜景なら効果は大きいかも)。
No.455 - 汚れ色の半透過を前景に置いた洗車表現。但し背景も汚れと同じ色でなければならないので、表現上の限界はある。
No.526 - 前景のリアルさを追究する上で、透過部分との境界のジャギーがなくなるのは大いなるメリット。
No.574 - 半透過ならではのステンドグラス。
No.611 - 鉄道車輌にぼかし表現を加えた遠近表現。
No.660 - ギザギザのない丸穴。
No.713 - ギザギザのない斜張ワイヤ。
No.756 - ギザギザのない楕円。
No.787 - 傾斜した細いロープの表現には、24bit-PNGは必須かも。
No.832 - 汚れ表現には、フルカラーが有効かも。但しこのシーンでは、汚しは風景のみ。車輌はピカピカのまま。
No.871 - 車庫の窓ガラスのような透過グラデーション表現は 24bitでないと難しい。
No.910 - 前景側に人間を描く場合には、24bitでないとカクカクしてしまう。
No.1120 - 前景で車輌が隠れてしまう実在風景。前景を半透過にして車輌を見せるためには 24bitが必須。
No.1211 - ガラスを使ったモダンな電停も、半透過表現なしには不可能。
No.1242 - 幌なし車輌の連結用に、半透明窓と幌を一体化した 24bit画像を使用。
No.1315 - 右行列車をメインに表現するため、手前に重なる左行列車を半透明のシルエット的列車(24bit画像)で表現。
No.1319 - No.1120と同じく前景で車輌が隠れてしまう実在風景における前景半透過。
No.1363 - A02SL-Expert v3.5- のハイブリッドドアの実例。ガラスの重なりによる透明度の差は、24bit-PNG必須の表現。


●電車走行キット上で使用可能な箇所

以下を除く全ての画像で可。
× 線路。
× 架線。
× 架線柱。
× M01系プログラムにおける、中近景〜遠景。
× 踏切警報機。
踏切遮断棒。
信号機。
* 上の4つは「tableの背景画像として表示」させているが、GIF以外の画像形式に関しては、こういう表示方法に対応していないブラウザが存在する。Netscape4などの古いブラウザではフリーズの原因にもなる。線路や架線を独立したオブジェクトではなく、通常の風景画像内に描いてしまう場合は問題はない。
* 警報機は動画GIF使用。PNGは動画不可動画可能になったが、対応ブラウザが限定されるので、使用に問題がある。
* 踏切遮断棒は、A03、A03S、A06、A02SL-Expert、IA01のみ PNG使用可能。
* 信号機は、A02SL-Expertのみ PNG対応。
* スムーズドア画像と蒸機動輪に関して、古いバージョンのプログラムでは PNG対応していないものがある。


●使用上の問題

(1) 正常に表示できないブラウザがあった。

× 一切表示不可 IE3、Netscape3(←これらは TKプログラム自体が動作しないが…)
× 透明部分表示不可 IE4、WindowsIE5、WindowsIE6、Netscape4
表示可 MacIE5、WindowsIE7〜、Netscape7〜、FireFox、Safari 等

* 表示に問題のあるブラウザの大半は20世紀に終わっているが、唯一 Windows版 IEのみが、2006年末まで PNG表示に問題のあるバージョンが現役であり、これが 24bit-PNGの使用における最大の障碍であった。
* 2006年 11月 2日に登場した IE7(日本語正式版)により最新ブラウザすべてが 24bit-PNGを正常に表示可能となったが、WindowsXPより以前の Me、98等の OSでは IE7が使えない等の問題もあり、IE6以前のブラウザが完全に淘汰されるまでには、相当の時間がかかるのは必至。どの段階で 24bit-PNGを鉄道シーンに使うかという見切をつけるべきか。大いに迷うところである。……と書いてから年月が流れ、今や迷うこともなくなったか。
* PNGとは関係のないところ(セキュリティがらみ)で、IE6撲滅キャンペーン「IE6 No More」が行われていた。Microsoft 自身も「spoilt milk(腐った牛乳)」と呼んでいて早急に破棄すべきものとして、どの国が遅れているかを地図で表示するサイト「IE6 Countdown」なんていうものまで存在していたが、今は「IE6 Countdown to Death」に変わっている。遂に消滅したのだ。

(2) 8bitより画像容量が重くなる。
* ナローバンドを考慮する場合には気になる問題である。……が、もはや、それを考慮する必要のない時代になった。
* ブロードバンドしか考えない=通信速度は気にしないにしても、他にも問題はある。塵も積もれば山となる。画像数が増えれば、サーバー容量を大きく食うほどの差になりうる。契約サーバーの容量に余裕がない場合は要注意だ。
* 8bit-PNGとの比較では確実に重くなるが、8bit-GIFとの比較では逆に軽くなる場合もないわけではない。
* 階調表現がシンプルであれば軽くなり複雑であれば重くなる。この辺は GIFに近く、JPGとは大いに異なる点。

(3) 動画にできないできるようになったが、対応ブラウザが限定される
* 24bitに限らず 8bit-PNGを含めて、PNGは、GIFのようなアニメーション表現が不可能。動的表現と 24bitのリアリティを同時に表現するのが難しい。
* 動画PNGが表示できるのは、2016年初夏時点で Firefox と Safari のみ、2017年に Chrome が対応。


●描画の実際

(1) 半透明窓を別画像にする必要がない。
* 8bitTKではやむをえず分離した車体と半透明窓だが、実際、別々の画像として描くのが面倒なのは事実。この点からは解放されるし、ファイル管理、編成指定の点でも煩雑さが解消される。
* 既存の半透明窓設定は、乗客画像用などに使うことになろうか。別画像を重ねられる機能はなにがしかの使い道はある。

(2) 描画難度がやや高く、描画ソフトもそれなりのものが必要となる。
* 透過率という要素を意識しながら描くのは慣れが必要。半透過レイヤ同士をうっかり重ねると透過率が変わってしまう、といった問題を回避しながら描かねばならない等、気を使うことも増える。
* 一方で、ジャギーを見えにくくする工夫(半透明窓応用の疑似アンチエイリアスなど)をわざわざしなくてよい点では、24bitの方が描画が楽。流線形などでは、描画の手間が 8bitと逆転してしまうかもしれない。
* 筆圧感知タブレットがあれば、エアブラシツールで「筆圧=不透明度」という描画が可能。車輌画像ではそれほど使い道はなさそうだが、風景(特に前景)ではかなり有効。24bit-PNGの世界に本格的に踏み込むには、それなりの描画ソフトだけでなく、それなりの周辺機器(この場合はペンタブレット)も必要なのかもしれない。ハードルが高くなってしまう問題は確かにある。



<< 前頁へ戻る