FC2ブログ

HEVC動画

こんにちは。

最近になって時々、家電量販店のテレビ売り場で「4K」「4Kテレビ」なんて文字が見られます。総務省も来年には4Kテレビ放送開始とか、2020年の東京オリンピックで8Kテレビ放送とか言ってるみたいですがどうなるんでしょうね。

いわゆるフルハイビジョンなどと比較すると約4倍のピクセル数で表示され、詳細かつきれいな映像になるとされています。

現在のフルハイビジョン動画ではMPEG-2MPEG-4 AVC/H.264がよく使われていて、Blu-ray Diskでその2つと同様採用されているVC-1などのコーデックがあります。

これに対して4K解像度の動画は映画以外ではあまりまだ一般的でないこともあって、一般的になっているコーデックを調べてもすぐ出てくるのはXAVCとH.265(HEVC)しかありません。

YouTubeには映画の宣伝動画などが4K解像度でアップロードされているようで、運営しているGoogleが推進するWebMなどは、(現状対応しているかはよくわかりませんが)すくなくともそのうち対応するのでしょうね。

さてよくわからないことはおいておいて、XAVCは基本的にH.264の高画質向けモードを使うよう(参考:en:Wikipedia - XAVC)なのでHEVCについて調べました。

するともうがっかりするぐらいまだ開発段階でした。HTML5を調べたときもがっかりしましたがそれ以上です。どうもその方面の専門の企業はエンコーダを開発しているようですが、素人にも使いやすいGUIを備えたエンコーダはまだ(少なくとも無償ソフトでは)ありません。なんかDivX Converterで変換に対応しているようです。また再生ソフトもありません。またDivX Playerが再生に対応したようです。(テスト自体はちょっと前にやったので当時は打ち消し線つきで書いたような状況だったんです多分)

そもそも映像情報の符号化方式は暫定のようなものが決まってきているようですが、音声情報と多重化(MUX)したりするコンテナの標準的な方法も一つに固まっていないようです。

ただそんななかちょっと気合いを入れてHEVC.infoにあるエンコーダをbuildして使ってみました。

くわしい話は追記に譲って感想を書かせてもらうと、「エンコードはまだまだ」「デコードももうひとがんばり」といった感じです。

エンコード結果そのものは悪くありません。低ビットレートでは、同程度のビットレートで圧縮したH.264の動画の法がノイズ感が少なく見やすい印象も受けましたが、テスト用のエンコーダのマニュアルもあまり見ずに添付の設定ファイルをそのまま利用したので、パラメータの検討次第で同程度までは改善するのでしょう。

ただエンコード処理にかかる時間が長すぎます。約200Mbps・3秒でエンコードに約7時間、約3Mbps・3秒で約3時間かかりました。別にパソコンが(そんなに)古いわけではなく(Intel Core i5-2310(SandyBridge) 2.9GHz4core;main memory:4GB)、他でも課題の一つとして指摘されているようです。エンコード中CPUの使用率がちょうど25%程度だったのが気になったところで、最近のニュースでは、映像を分割して分散処理することで4K映像のリアルタイムエンコーディング(実時間での符号化)を実現したようですがちょっと重い感は否めないですね。

デコーダはエンコーダに比べれば早いですが、3秒の動画を200秒もかかってデコードするのはやっぱりつらくないでしょうか。


とりあえず今度はDivXコンバータを使ってみます。一部ではフルHDで実時間の12倍程度(十分長いか)って噂も聞きます。

続きを読む

スポンサーサイト



SVGZが見れない問題

こんばんは。

先日SVG-JSを公開させていただいたおかげで、少しはやる気が出たので何年か塩漬けにしていた問題を掘り起こしたら、あっさり片がついたのでさっそく記事に。

問題というのはほかでもなく、タイトル通り、SVGZ画像が表示されない問題です。

SVGはみなさんご存知XMLによるベクトル画像のファイル形式です。
SVGに限らず、ベクトル画像のファイル形式全般に言えることですが、「拡大縮小(表示)しても画像が荒れない」というメリットの反面、ベクトル画像は「使用するサイズを小さくしてもファイルサイズは小さくならない」という欠点もあります。

対策としては、小さく使うベクトル画像のなかのさらに小さいオブジェクトは削除してしまうとか、思い切って小さな画像はラスター画像に変換したものを使うとかが考えられますが、そのような対策だけではベクトル画像そのものが使いやすくはならないので、SVGを規格化しているW3Cが認めている対策の一つがGZIP圧縮です。

GZIP圧縮というのはZIPやLHA圧縮と似た、デジタルデータの圧縮方式の一つで、オープンなライセンスで開発されているほか、多くの後継規格に比べれば圧縮率などで負けるものの、(SVGやXMLのような)テキストデータなど、"圧縮しやすい"部類のデータには十分な圧縮効率を持つことなど多くの利点を持っています。

通常GZIP圧縮を施したファイルは".gz"等の拡張子を持ちますが、SVGの規格では、SVGファイルを単にGZIP圧縮したファイルに".svgz"の拡張子を付けることを認めており、これが表題の"SVGZ"です。実際最近では時々WEBサイトにも使われているようです。

ところが、SVG-JSのサンプルとして私が作成したSVGZファイルは最近までメジャーなブラウザ(Chrome,FireFox,InternetExplorer,Opera,Safari)では全く閲覧できなかったのです。しかもInternetExplorer以外はなんだかまともそうなエラーを吐いていたのであきらめていたのです。

少しGoogleなどで「SVGZ 見れない」などと調べると、「サーバーがContent-Type(MIME Type)を正しく返すように設定してください」「.htaccessファイルで正しいHTTPヘッダを返すよう設定」などのサイトはありますが、そのどれを試しても駄目でした。

もちろんサーバーは自宅サーバ(Apache)とFC2のレンタルサーバーの二つでいろいろ試しましたが無理だったので、あきらめていたのです。

しかし今回はようやく解決しました。やったのは三つです。
(1).htaccessを確認
(2)svgファイルの謎の先頭部分を消去
(3)アーカイバの交代

あきらめていたことを再開するにはきっかけというものがあるもので、WEB上でSVGの情報を調べているときに、SVGべんりやな~などとみている途中に、はたと気づいてその画像のファイル形式を見たら、あらびっくり。SVGZ形式だったのです。その時はChromeで閲覧していたのですがほかのブラウザで見ても正常。これは落として謎を解明するしかない!と思ったわけです。

さて、とはいっても最初はやはりHTTPヘッダの問題なんだろうなとは思いました。
なのでその正しく表示されているファイルを、正しく表示されているサーバから直接表示してもらい、HTTPヘッダを確認したところ、Chromeでは確かに「Content-Type:image/svg+xml」となっていましたが、FireFoxではなぜか「Accept-Type:text/html...」となっておりよくわからないがちゃんと認識されていない風。ということはHTTPヘッダが原因ではないかもと思いなおしました。

そこで、次にやったのは落としたSVGZ画像をGZIPファイルとして解凍し、出てきたSVG画像をテキストエディタで見てみても...変わりありません。そのファイルを参照しながら作ったわけでもないのにxml宣言やDOCTYPE宣言の中身まで一緒でした。ただ気になったのは、コメントで、Illustratorから作成されたらしき跡があったので、自分のSVGファイル(Vista付属のメモ帳で手打ち)とは見えないところで違いがあるかも...?と思いバイナリエディタで閲覧...

正直に言って、差があるとは思いませんでした。でも差がありました。
使用したのはStirlingというバイナリエディタですが、1byteごとに値とともに右側にテキストが表示されます。それを見ると、正しく表示されたSVGでは最初からxml宣言「<?xml...」と始まるのに、私が作った方は謎の先頭部分「・・・<?xml...」のようなものが付いていたので...勇気を出して削除!

しかし実はこれだけではすぐにはうまくいきませんでした。なぜかOperaだけはこの時点でSVGZが表示されたのですが、ほかはNG。ここであきらめたらまた塩漬け行きだったんですが、今回はもうひとひねりしなきゃいかんと思い頑張りました。

実は私、最近、普段使いのアーカイバ(圧縮・解凍ソフト)を変えまして、以前はLhaplus + 7-zipだったのを、Explzhにしたのです。当然まだ使い方は探り探りなのでこの実験の初期段階では、Explzhではなく、昔にw32texをインストールするときに使用したgzipを利用していたのです。そこでExplzhでどうにか(.tar.gzではなく).gz圧縮ができないか2分ほど苦戦(←)したのですがそこはあきらめてLhaplusを再インストール...

しかしその甲斐あってLhaplusで圧縮しなおしたものはFireFoxを除くすべて(InternetExplorerも!)で表示されました。

もちろんこの後もFireFoxでも表示されるよう試行錯誤しました。その一つが.htaccessファイルの確認です。
どうも.htaccessファイルがUTF-8だとうまく動かない(かもしれない)という情報が入ってきたので、ANSI(SHIFT-JIS)になるよう確認。

最終的にその日はいくら確認しても正しく表示されなかったのですが...

本日確認しなおしてみたら正しく表示されました。もう安心しきって確認していませんが、FireFoxのキャッシュとかその辺のリセットが甘かったのでしょうね。

ずいぶん長いこと悩まされてきただけによくわかるのですが、WEBで「SVGZが見れない問題」を検索してもこの手の解決法が出ているところが無いように思われるので特段急いであげてみました。どなたかのお役に立てばと思います。

なお上記エラーを確認した環境は以下の通りです:
OS:Windows Vista SP2
Browser:Chrome26.0.1410.64 m,FireFox17.0.1,InternetExplorer9.0.811216421,Opera12.15Build1748,Safari5.1.7(7534.57.2)
Editer:OS付属のメモ帳(notepad.exe)

また、エラー修正のために利用させていただいたソフトは以下の通りです:
BinaryEditer:Stirling - Vector
Archiver/Compressor:Lhaplus Vector

SVGで多角形を簡単に描く

お久しぶりです。

前に書いたJavascriptができてたので紹介を。

「SVG-JS」といいます。

今のところは正多角形と星型を(SVGの基本図形のような感覚で)作ることができます。

●使い方
まず使いたいHTMLのヘッダで以下のようにjsファイルを読み込みます。

<script src="./SVG-JS.js"></script>

諸般の都合でクラス名(要素にclass属性で指定された文字列)から検索して要素を取得するためにHTML5で導入された規格に基づくメソッド(getElementsByClassName)を使用しています。
これからHTML5規格準拠のブラウザが普及するにつれて問題なくなると考えていますが、当然古いブラウザでは動作しません。もしそのようなブラウザもサポートする場合は「prototype.js」を以下のように読み込んでください。

<script src="./prototype.js"></script>

prototype.jsはprototypejs.orgからダウンロードできます。
SVG-JS.js本体はこちらから。

またSVGファイルを別に作ってobject要素などでHTMLに埋め込む場合は、SVGはXMLなので次のようにします:
<script xlink:href="./prototype.js"></script>
<script xlink:href="./SVG-JS.js"></script>

href属性ではなく、xlink:href属性であることに注意してください。
実際のSVG内には以下のように記述します。

正多角形の場合:
<g class="rpoly" num="5" r="100" stroke="#000000" stroke-width="1" fill="none"></g>

星型の場合:
<g class="star" num="5" inr="40" outr="100"></g>

rpoly(RegulerPOLYgon)とstarともに、頂点の数はnum属性で指定します。

rpolyのほうは半径としてr属性を指定するとその半径の円に内接する正多角形を描きます。

starの方は、二つ半径があってinrが内側の半径を、outrが外側の半径を表します。そうなる必然的な理由は特にありませんがinrは基本的に必須指定です。outrは省略すると自動的にinrの倍が指定されます。

ちなみに特段内側と外側というのに意味はありません。outrをinrより小さくすればそうなります。

あとinrやoutr、r属性に指定する値は単位を付けないでください。パーセント(%)指定などは使えません。ごめんなさい。

上以外のプレゼンテーション属性(strokeなど)は基本図形(rect要素など)とまったく変わりません。

描画される中心の位置がそのままではSVGの(0,0)の位置になるので、transform属性で移動して利用してください。傾きの角度なども同じです。

サンプルファイルを置いておきます。SVG規格準拠のSMILアニメーションを利用していますが<g>要素の子要素で指定した通りのアニメーションが基本図形などと同様に利用できているのがわかると思います。

続きを読む

NVIDIA Quadro 410


……ホク…ホク……(^^)……


…こんばんは。
タイトルの、
NVIDIA Quadro 410という、
グラフィックボード(ビデオカード)を、

…買ってしまいました…


PhotoshopやPremiere ProなどのAdobe製画像・動画処理ソフトでは(だいたいCS5前後から)NVIDIA社の提供するグラフィックボード(GPU)によるハードウェアアクセラレーションを導入しています。
つまり、NVIDIA社製のチップを使用したグラボを適切に導入すればPhotoshopが軽くなる!
のです。

ちなみに言うとNVIDIA社のGPUにはゲーム向けのGeForceと画像処理など向けのQuadroの二つのシリーズが(おおざっぱにいって)ありますが、今回購入したのはQuadroシリーズのほう。GeForceの方が安いのもたくさん出てるけど、Quadroにこだわって買ってみました。

使ってみた感じはPhotoshopは…じつはわかりにくかった。PixelBenderとかの「ハードウェア使ってます!」が売りのフィルターをかけてみたらよかったのかもしれませんが、いろんなソフトを試してみる関係上まだそこまで試してません。
でもでも!Photoshopの「回転ビューツール」は一般的なオンボードグラフィックでは利用不能なのですが、OpenGL対応のグラフィックボードを導入することで利用することができます。
もちろんQuadro410を導入したらつかえました!ペンタブは持ってないですが、ペンタブなどで作業するときは(大きくていいペンタブほど)ペンタブそのものを回転させるわけにはいかないですから便利だと思います。

このブログでは出てこないですが、AfterEffects(AE)・Premiere Pro(Pr)での処理の高速化は目覚ましいものです!
正確にベンチマークしたわけではありませんがAEのメモリプレビューがフレームを読み込むまでの時間や、エフェクトの反映の素早さが体感でわかります。

意外に心配だったのが「買ってみたけど正直速くなったかわからない」というオチです。
しかし心配は取り越し苦労でした。
Blenderという、フリーの3DCGソフトウェアでCyclesというレンダリングエンジンはもろにGPU、それもNVIDIAのCUDAを利用して処理の高速化ができるのでもともとのCPUによるレンダリングとQuadro410によるレンダリング時間を比較してみました。

CPU
GPU


ごちゃごちゃしてるスクリーンショットですが、大事なのは赤線部分。
CPU … 11:23.82
GPU … 06:07.08
Timeというのがレンダリング(画像化処理)にかかった時間です。ちなみにマテリアル設定などはまったく同じで、細かいことを言うとメモリの制限からGPUのほうはタイルサイズを80x80にして16分割して計算していますが、それ以外はまったく同じです。まぁ少し大げさかもしれませんが「倍」といっていいでしょう。

Quadro 410はいちおう2013/2/1現在、最新のコードネームKeplerのコアを搭載していますが、同じ世代の製品としては最も廉価版に位置する製品です。なのでお金とPC内のスロットに余裕のある場合はGeForce GTX 650やQuadro 2000なんかもいいかもしれませんね。
Quadroはスペックを上げると値段の上がり方が尋常ではないので、Quadro 410以上のものを考えるなら現実的にはGeForceになるでしょうし、個人的にはロープロファイルの制限がありますが、ZOTACなどではGTX 650のロープロファイル版もあるんですね。

今晩はいつも通りまとまりませんがここまでで。

SVGとJavascriptのぐち

微妙にこのブログとは関係ないかもしれませんが、そのうち関係するので愚痴(+備忘録)を...

実は最近、jQuery Mobileというモバイル向けウェブサイトのフレームワークを触り始めたんですが、このフレームワークはJavascriptとCSSを読み込み、リンクなどを通常と同様に設定するだけで自動でボタン等がスマホ風にデザインされるという超便利ツール(それだけじゃありませんが...(-_-;))。

これに着想を得て(というほどでもないですが)、「javascriptを読み込んでおいて、inlineSVGの<g>要素にclass="star"を設定すると星型の<polygon>要素が挿入される」というjavascriptが作れないかと思って試行錯誤していたのです!

つまり...

<html>
  <head>
    <script src="hoge.js"></script>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 400 400">
      <g class="star" num="5" outr="100" inr="50"
         style="stroke:#ff0000;stroke-width:5;fill:none;"
         transform="translate(200 200)" />
      <rect x="0" y="0" width="400" height="400" stroke="#0000ff" fill="none" />
    </svg>
  </body>
</html>
というコードから

というSVGが生成されるというJavascriptが書きたいわけです。

もしこれができれば、後は同様にして正多角形やらなにやらも割と簡単に作れるはず...と思ったんですが、プログラミングって難しいですね...特にJavascriptもさることながらDOMとか...

一番最初にはまったのがcreateElementメソッドで、JavascriptからHTML(SVG)内に要素(<g>とか)を作るにはまずcreateElementメソッドという関数みたいなものを使って要素を作成します。それを必要な場所に挟み込む(こちらはappendChild)ことで実現します。

ところがどっこい今回はHTML要素(HTMLオブジェクト)ではなくてSVG要素(オブジェクト)を作るので、createElementメソッドではなくてcreateElementNSメソッドを使わねばならなかったのです。雰囲気から察するにXML系のマークアップ(XHTMLなど)でもそうなのかもしれないのでXHTMLをバリバリ使う方には常識なのかも知れませんが...

次の問題はまだ検討中の"getElementsByClassName"の問題。このメソッド、実はまだあんまり実装されてない"新しい"メソッドらしい。そもそも"getElementsByClass"と調べると上のメソッドではなくて自作で似たような機能の関数を作るっていう記事が最初に出てくるほど。あとはprototype.jsを使う方法。そのへんをどうするか(非対応ブラウザ切り捨てか・prototype.jsに依存させるか・関数を組み込んでおくか)はまだ検討中...とりあえず実験はprototype.jsを組み込んで続行中←

もうひとつ"getElementsByClassName"ではまったこと。これの返り値ってElementsっていうぐらいだから要素が一つだけ返ってくるわけではなく、複数返ってくるため配列"のようなもの"になっている。この"のようなもの"というのが曲者で、たとえば

stargroup=getElementByClassName("star")
alert(stargroup[0]);
とするとalertで"undefined"とか"null"が返ってくる(どっちが返ってくるかはブラウザや、"stargroup[0]"と"stargroup.item(0)"とでも異なる)。ただ"alert(stargroup.length);"は正しい長さを返してくるので、まったく動いてないわけでもないらしい...というわけで適当な変数に代入してみた。
stargroup=getElementByClassName("star")
var star0 = stargroup[0]
alert(star0);
これでうまくいきました。よくわかりませんが上のように代入してstar0の方をいじってあげるともろもろのプロパティも取得できます。

もう少し時間はかかるかもしれませんが完成すれば、Illustratorのような豊富な基本図形を簡単に使えるようになるかもしれません。

プロフィール

f(t)=k

Author:f(t)=k
ベクトル画像をもっと世に広めたい一般人その1

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR