JP5891530B2 - 動画表示処理方法及びその方法を実現する画像表示装置 - Google Patents

Description

本発明は、動画表示処理方法及びその方法を実現する画像表示装置に関し、特に、ブラウザで連続的に滑らかに変形するアニメーションを表示可能にした動画表示処理方法及びその方法を実現する画像表示装置に関する。

おもにネットワーク上の情報を閲覧するためのソフトウェアであるブラウザは、当初はテキストデータを表示することのみを意図していたが、改良が進むにつれていわゆる動画を表示することにも対応してきている。まずは、ＨＴＭＬ（Hyper Text Markup Language）内に埋め込まれたスクリプト言語（例えば、JavaScript（オラクル社の登録商標））を解釈可能なように構成されたブラウザが登場し、また、例えばアドビシステムズ社製のFlashをブラウザ中のプラグインとして動作させることで、動画を含んだウェブサイトが表示可能となる。

また、最近では、ウェブページを記述するための標準のマークアップ言語自体が、動画データをサポートするように標準化が進められている。すなわち、ＨＴＭＬ５は、二次元画像の記述言語であるＳＶＧ（Scalable Vector Graphics）を採用し、回転・拡大・移動操作や、透明度変更操作により簡易な動画表示を実現できるようになる。ＳＶＧは、その名の通り、ベクトルデータとしてのフォーマットであるので、拡大しても描画の劣化が生じないという利点がある。ＳＶＧに基づく表示処理は、例えば特許文献１に開示されている。

特開２０１１−２２６７１号公報

しかしながら、上述のＳＶＧのフォーマットに基づいて動画（アニメーション）を表現しようとしても、基本形状の移動・回転（旋回）・拡大処理や、透明度変更処理をサポートしているのみであるため、例えば図５（ｂ）に示す通常のＴＶアニメーションのような連続的で滑らかな変形は行えず、例えば同図（ａ）に示すような、基本形状単位で動く、ぎこちない動きしか実現できない。

一方、そのようなＳＶＧのフォーマットに基づいても、微細な基本形状単位で、かつ、Motion JPEGのように多くのフレーム数分のデータを、ＳＶＧのデータとして持っておき、静止画の連続描画として実現する方策も考えられる。しかしながら、そのような方策では、膨大な量のデータを予め記憶しておく必要があるという課題がある。

特に、回線速度が制約されたモバイルデバイスにおいて、そのような動画表示を実現しようとすると、データ量が大きくなるほど通信時間が長くなるので、結果として、ユーザビリティが低下することとなる。

本発明は上述のような事情から為されたものであり、本発明の目的は、ブラウザが認識できる既存の画像記述フォーマットを採用しつつ、予め記憶しておくデータ量を増やすことなく、ブラウザで連続的に滑らかに変化する動画を表示することができる動画表示処理方法及びその方法を実現する画像表示装置を提供することにある。

上記目的を達成するため、本発明の画像表示処理方法は、少なくとも２つ以上の時系列のキーフレームに係る、ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータを用意し、時間的に隣り合うキーフレームに係るベクトルデータを各キーフレームにおける対応する前記特徴点相互で補間することにより、各キーフレームを画像表示デバイスに順次描画するとした場合の滑らかではない動画を滑らかな動画として表示できるようにするための補間フレームに係るベクトルデータを生成し、前記キーフレーム及び補間フレームに係るベクトルデータを、前記ブラウザで動画として表示できるデータ形式に変換して、前記ブラウザで動画を描画する画像表示処理方法であって、前記補間フレームに係るベクトルデータの生成は、前記時間的に隣り合うキーフレームに係るベクトルデータに基づく描画の間に、動的に行うことを要旨とする。

前記ブラウザで動画として表示できるデータ形式は、ＳＶＧフォーマットであることが好適である。あるいは、前記ブラウザで動画として表示できるデータ形式は、ＨＴＭＬに埋め込み可能なスクリプト言語の記述形式であることが好適である。

また、前記少なくとも２つ以上の時系列のキーフレームに係る、ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータを圧縮して用意しておき、前記時間的に隣り合うキーフレームに係るベクトルデータに対して伸長処理を施した後に、前記補間処理及び描画処理を行うことが好適である。

また、前記時間的に隣り合うキーフレームに係るベクトルデータからの補間は、各キーフレームに含まれるオブジェクトの対応関係と、そのオブジェクトを構成する前記特徴点の対応関係に基づき行われる。

また、本発明の画像表示処理方法は、モバイル機器に搭載されることが好適である。

更に、本発明の画像表示装置は、画像表示デバイスと、少なくとも２つ以上の時系列のキーフレームに係る、ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータについて、時間的に隣り合うキーフレームに係るベクトルデータを各キーフレームにおける対応する前記特徴点相互で補間することにより、各キーフレームを前記画像表示デバイスに順次描画するとした場合の滑らかではない動画を滑らかな動画として表示できるようにするための補間フレームに係るベクトルデータを生成し、前記キーフレーム及び補間フレームに係るベクトルデータを、前記ブラウザで動画として表示できるデータ形式に変換する処理において、前記補間フレームに係るベクトルデータの生成は、前記時間的に隣り合うキーフレームに係るベクトルデータの、前記ブラウザで動画として表示できるデータ形式への変換の間に、動的に行う画像処理部と、前記画像処理部により生成された、前記ブラウザで動画として表示できるデータ形式のデータを認識し、前記画像表示デバイスに描画するように制御する表示制御部と、を備えることを要旨とする。

また、前記少なくとも２つ以上の時系列のキーフレームに係る、前記ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータを格納するデータ格納部を更に備えるとよい。そのとき、前記ベクトルデータは圧縮されていることが好適である。

また、本発明の画像表示装置は、モバイル機器に実装されることが好適である。

本発明の画像表示処理方法及び画像表示装置によれば、キーフレームの、ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータのみを用意しておき、各キーフレームのベクトルデータの状態で、それらに基づいて補間ベクトルデータを求め、滑らかな動画を表示するための補間フレームのベクトルデータを生成し、それらのキーフレーム及び補間フレームのベクトルデータを、ブラウザで動画として表示できるデータ形式へ変換して表示するようにしているので、ブラウザにより、時間経過に伴って形状が滑らかに変形するアニメーションを描画することができる。

また、補間フレームのベクトルデータを実時間に動的に生成しているので、予め用意しておくデータとしては、各キーフレームの特徴点の集合データから成るベクトルデータのみであり、データ量を抑えることができる。その意味では、モバイル機器に適用した場合には、通信データ量を抑えつつ、滑らかに変形するアニメーションが表示できることとなるので、好適である。

また、ブラウザで動画として表示できるデータ形式として、特に、ＳＶＧフォーマット又はＨＴＭＬに埋め込まれるスクリプト言語という既存の規格・形式を採用でき、その部分において新たなものを発案しておらず適用が容易である。

本発明の動画表示処理方法の一実施形態の概念を説明するための図である。 オブジェクト間の対応関係と、それに基づく補間処理を説明するための図である。 本発明の動画表示処理方法の一実施形態の処理手順を示すフローチャートである。 本発明の画像処理装置の一実施形態の構成ブロック図である。 従来の技術を説明するための図である。

以下、図面を参照して、本発明の実施の形態について詳細に説明する。
図１は、本発明の動画表示処理方法の一実施形態の概念を説明するための図である。図４は、本発明の画像表示装置の一実施形態の構成ブロック図である。

図４に示すように、一実施形態に係る画像表示装置は、画像処理プロセッサ１０と、キーフレームデータ格納部２０と、表示制御部３０、表示デバイス４０とを備えている。また、画像処理プロセッサ１０は、デコーダ１１と、形式変換手段１２と、補間手段１３とを少なくとも備えている。

そこで、図１及び図４を参照し、この一実施形態においては、キーフレームデータ格納部２０に動画（アニメーション）の複数のキーフレームのベクトルデータ［１］〜［ｎ］を圧縮して格納しておく。これらのキーフレームは、時系列の複数のフレームであり、好適には、時間的に等間隔のものであるが、それには限られない。典型的には、アニメーションのクリエイターが作製した基本画像である。

そこで、通常のベクトルデータの形式（特徴点のベクトルデータの集合）のままでは前述のようにブラウザでは表示できないので、ブラウザに表示するための形式（この実施形態にあっては、ＳＶＧフォーマット）に変換して表示するのであるが、これらのキーフレームの各時点でのデータのみに基づいてそのまま表示しても、滑らかな連続的なアニメーションにはならないので、時間的に前後のフレーム間で補間を行う。但し、ＳＶＧフォーマットのデータ形式では補間処理が行えないので、通常のベクトルデータの状態で補間を行うことが、本発明の動画表示処理方法の特徴である。これにより、形状が徐々に変形するようなアニメーション表示が可能となる。加えて、表示処理中に実時間で動的に補間データを生成することが、本発明の特徴である。図１はその概念の例を示している。

図１及び図４を参照して、まず、画像処理プロセッサ１０は、キーフレームのベクトルデータ［１］をキーフレームデータ格納部２０から読み出し、デコーダ１１により伸長処理し、更に形式変換手段１２によりＳＶＧフォーマット［１］に変換し、表示制御部３０に送る。表示制御部３０は、ＳＶＧフォーマットを含むＨＴＭＬを解釈可能な処理手段（ブラウザ）であり、送られてきたＳＶＧフォーマット［１］のデータに基づき、表示デバイス４０に表示する。

次に、画像処理プロセッサ１０は、キーフレームのベクトルデータ［２］をキーフレームデータ格納部２０から読み出し、デコーダ１１により伸長処理し、前述の伸長後のベクトルデータ［１］と、今回の伸長後のベクトルデータ［２］に基づいて、補間手段１３により、補間フレームのベクトルデータ［１−２］を生成する。そして、画像処理プロセッサ１０は、形式変換手段１２により、生成した補間フレームのベクトルデータ［１−２］をＳＶＧフォーマット［２］に変換し、表示制御部３０に送る。表示制御部３０は、送られてきたＳＶＧフォーマット［２］のデータに基づき、所定時刻に表示デバイス４０に表示する。最後に、画像処理プロセッサ１０は、形式変換手段１２により、伸長後のベクトルデータ［２］をＳＶＧフォーマット［３］に変換し、表示制御部３０に送る。表示制御部３０は、送られてきたＳＶＧフォーマット［３］のデータに基づき、所定時刻に表示デバイス４０に表示する。

ここで、上述の補間処理の具体例を、図２を参照して説明する。まず、キーフレームデータ格納部２０に格納された各フレームの各ベクトルデータ［ｋ］には、少なくとも１つのオブジェクトＳ（ｉ）のデータが含まれている。更に、各オブジェクトＳ（ｉ）のデータには、少なくとも１つの特徴点ｃ（ｊ）の情報が含まれている。

図２（ａ）は，最も単純に、ベクトルデータ［ｋ］に１つのオブジェクトＳ（１）が含まれている場合を示している。そこで、同図の左側及び右側に示したベクトルデータ［１］及びベクトルデータ［２］のオブジェクトＳ（１）は互いに関係付けられており、かつ、オブジェクトＳ（１）は、特徴点ｃ（１），ｃ（２）を含んで、それらも互いに関係付けられている。このとき、補間フレームのベクトルデータ［１−２］におけるオブジェクトＳ（１）は、中央図の下の図に示すように、各特徴点ｃ（１），ｃ（２）に係るベクトルデータについて、キーフレーム間で補間することにより得られる。なお、図示のものは単純に線形補間であるが、補間の方式はこれに限られることなく、既知の各種の補間方式が採用できる。

図２（ｂ）は、楕円が変形するようなアニメーションであり、４つの特徴点ｃ（１），ｃ（２），ｃ（３），ｃ（４）を含んでいる。この場合も、図２（ａ）と同様に、対応する特徴点同士の補間処理により、中央図に示す補間フレーム上でのオブジェクトが得られる。また、一般的には、１フレーム内には、複数のオブジェクトが含まれ、そのような場合も、例えば図２（ｃ）に示すように、対応するオブジェクト間における特徴点の補間処理により、各オブジェクトについて、補間フレーム上でのオブジェクトが得られる。

なお、図１及び図２においては、前後のキーフレーム間に生成する補間フレームは１つであるが、無論２以上であってもよい。以上のような処理により、形状が徐々に変形するようなアニメーション表示が可能となる。

また、図１は本発明の概念的な説明のための図であるので、最も単純に２つのキーフレームの場合で説明したが、更に一般化すると、３つ以上のキーフレームのベクトルデータを予め記憶しておき、描画動作の実時間の経過に伴って、順に補間処理を進めていくということになる。図３は、本発明の動画表示処理方法の一実施形態の処理手順を示すフローチャートである。

図３を参照して、まず、画像処理プロセッサ１０は、最初のキーフレームのベクトルデータをキーフレームデータ格納部２０から読み出し（ステップＳ１）、デコーダ１１により伸長処理し、更に形式変換手段１２によりＳＶＧフォーマットに変換し、表示制御部３０に送る。表示制御部３０は、送られてきたＳＶＧフォーマットのデータに基づき、所定時刻に表示デバイス４０に描画する（ステップＳ２）。

次に、画像処理プロセッサ１０は、次のキーフレームのベクトルデータをキーフレームデータ格納部２０から読み出し、デコーダ１１により伸長処理を行う（ステップＳ３）。その伸長後のベクトルデータと、直前のキーフレームに係る伸長後のベクトルデータ（最初の処理においては、ステップＳ１において読み出した最初のキーフレームに係る伸長後のベクトルデータ）とに基づいて、補間手段１３により、補間フレームのベクトルデータを生成する（ステップＳ４）。そして、画像処理プロセッサ１０は、形式変換手段１２により、生成した補間フレームのベクトルデータをＳＶＧフォーマットに変換し、表示制御部３０に送る。表示制御部３０は、送られてきたＳＶＧフォーマットのデータに基づき、所定時刻に表示デバイス４０に描画する（ステップＳ５）。なお、ここでは、２つのキーフレーム間において、２以上の補間フレームを生成することを想定している。従って、次に、２つのキーフレーム間において、すべての補間フレームの生成・描画が終了したか否かを判定する（ステップＳ６）。

すべての補間フレームの生成・描画が終了していない場合（ステップＳ６において否定判定）は、ステップＳ４に戻り、次の補間フレームを生成し、描画する。一方、すべての補間フレームの生成・描画が終了した場合（ステップＳ６において肯定判定）、画像処理プロセッサ１０は、その時点での補間処理に係る後ろのキーフレームの伸長後のベクトルデータを、形式変換手段１２によりＳＶＧフォーマットに変換し、表示制御部３０に送る。表示制御部３０は、送られてきたＳＶＧフォーマットのデータに基づき、所定時刻に表示デバイス４０に描画する（ステップＳ７）。

最後に、ステップＳ７における後ろのキーフレームが最後のキーフレームか否かを判定する（ステップＳ８）。後ろのキーフレームが最後のキーフレームではない場合（ステップＳ８において否定判定）には、ステップＳ３に戻り、それ以降の処理を繰り返す。一方、後ろのキーフレームが最後のキーフレームの場合（ステップＳ８において肯定判定）には、処理を終了する。

なお、ベクトルデータによる動画のみを表示するのではなく、ネットワークを介してロードした、ＨＴＭＬに基づいて記述されたテキストデータと共に表示してもよい。また、上述の実施形態においては、キーフレームのベクトルデータを予め格納部に格納するようにしたが、これに限られることはなく、キーフレームのベクトルデータについても、ネットワーク又は通信回線を介して得るようにしてもよい。例えば、本発明をモバイル機器に適用した場合には、通信データ量を抑えつつ、滑らかに変形するアニメーションが表示できることとなる。

＜他の実施形態＞
上述の実施形態においては、キーフレーム及び補間フレームのベクトルデータを、図１に示すようにＨＴＭＬがサポートするＳＶＧフォーマットに変換したが、これに限られることはなく、ブラウザにより表示可能な既存の標準形式であればよい。従って、ＨＴＭＬに埋め込まれるスクリプト言語（例えば、JavaScript、Canvas等）に変換・記述するようにしてもよい。

以上のように、本発明における上述の実施形態によれば、キーフレームの、ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータのみを用意しておき、各キーフレームのベクトルデータの状態で、それらに基づいて補間ベクトルデータを求め、補間フレームのベクトルデータを生成し、それらのキーフレーム及び補間フレームのベクトルデータをＳＶＧフォーマット又はＨＴＭＬに埋め込まれるスクリプト言語に変換して表示するようにしているので、ブラウザにより、時間経過に伴って形状が滑らかに変形するアニメーションを描画することができる。

また、補間フレームのベクトルデータを実時間に動的に生成しているので、予め用意しておくデータとしては、各キーフレームの特徴点の集合データから成るベクトルデータのみであり、データ量を抑えることができる。その意味では、モバイル機器に適用した場合には、通信データ量を抑えつつ、滑らかに変形するアニメーションが表示できることとなるので、好適である。

また、ＳＶＧフォーマット又はＨＴＭＬに埋め込まれるスクリプト言語という既存の規格・形式を介しているので、その部分において新たなものを発案しておらず適用が容易である。

本発明の動画表示処理方法及びその方法を実現する画像表示装置は、既存のブラウザによる表示に適用される。

１０ 画像処理プロセッサ
１１ デコーダ
１２ 形式変換手段
１３ 補間手段
２０ キーフレーム格納部
３０ 表示制御部
４０ 表示デバイス

Claims (10)

1. 少なくとも２つ以上の時系列のキーフレームに係る、ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータを用意し、
   時間的に隣り合うキーフレームに係るベクトルデータを各キーフレームにおける対応する前記特徴点相互で補間することにより、各キーフレームを画像表示デバイスに順次描画するとした場合の滑らかではない動画を滑らかな動画として表示できるようにするための補間フレームに係るベクトルデータを生成し、
   前記キーフレーム及び補間フレームに係るベクトルデータを、前記ブラウザで動画として表示できるデータ形式に変換して、前記ブラウザで動画を描画する画像表示処理方法であって、
   前記補間フレームに係るベクトルデータの生成は、前記時間的に隣り合うキーフレームに係るベクトルデータに基づく描画の間に、動的に行うことを特徴とする画像表示処理方法。
2. 前記ブラウザで動画として表示できるデータ形式は、ＳＶＧフォーマットであることを特徴とする請求項１に記載の画像表示処理方法。
3. 前記ブラウザで動画として表示できるデータ形式は、ＨＴＭＬに埋め込み可能なスクリプト言語の記述形式であることを特徴とする請求項１に記載の画像表示処理方法。
4. 前記少なくとも２つ以上の時系列のキーフレームに係る、ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータを圧縮して用意しておき、前記時間的に隣り合うキーフレームに係るベクトルデータに対して伸長処理を施した後に、前記補間処理及び描画処理を行うことを特徴とする請求項１に記載の画像表示処理方法。
5. 前記時間的に隣り合うキーフレームに係るベクトルデータからの補間は、各キーフレームに含まれるオブジェクトの対応関係と、そのオブジェクトを構成する前記特徴点の対応関係に基づき行われることを特徴とする請求項１に記載の画像表示処理方法。
6. モバイル機器に搭載されることを特徴とする請求項１に記載の画像表示処理方法。
7. 画像表示デバイスと、
   少なくとも２つ以上の時系列のキーフレームに係る、ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータについて、時間的に隣り合うキーフレームに係るベクトルデータを各キーフレームにおける対応する前記特徴点相互で補間することにより、各キーフレームを前記画像表示デバイスに順次描画するとした場合の滑らかではない動画を滑らかな動画として表示できるようにするための補間フレームに係るベクトルデータを生成し、前記キーフレーム及び補間フレームに係るベクトルデータを、前記ブラウザで動画として表示できるデータ形式に変換する処理において、前記補間フレームに係るベクトルデータの生成は、前記時間的に隣り合うキーフレームに係るベクトルデータの、前記ブラウザで動画として表示できるデータ形式への変換の間に、動的に行う画像処理部と、
   前記画像処理部により生成された、前記ブラウザで動画として表示できるデータ形式のデータを認識し、前記画像表示デバイスに描画するように制御する表示制御部と、
   を備えることを特徴とする画像表示装置。
8. 前記少なくとも２つ以上の時系列のキーフレームに係る、前記ブラウザでそのままでは表示できない特徴点の集合データから成るベクトルデータを格納するデータ格納部を更に備えることを特徴とする請求項７に記載の画像表示装置。
9. 前記ベクトルデータは圧縮されていることを特徴とする請求項８に記載の画像表示装置。
10. モバイル機器に実装されることを特徴とする請求項７に記載の画像表示装置。

Images