以前の記事「CSS3のブレンドモードが素敵! 新プロパティmix-blend-modeを使いこなそう」の表現例として、CSS3ブレンドモードとHTML5 Canvas/WebGLモーションと組み合わたデモを作成しました。スマートフォンでもデスクトップブラウザでも動作しますので、次のデモをお試しください。

CSS3ブレンドモードに限らず、HTML5周辺技術にはブレンドモードを実現する方法が他にもあります。本記事ではそれぞれのテクノロジーの理解を深めるべく、デモ作成にあたり技術的に調査したことをまとめて紹介します。

Webでブレンドモードを実現する方法のまとめ

HTML5周辺技術として、CSS3/Canvas要素(Context2D)/WebGL/Flash Player(プラグイン)のいずれかを使うことでWebページでブレンドモードを実現することができます。ただし、いずれの方法でも全く同じ種類が利用可能ということはなく、利用できるブレンドモードの種類はそれぞれのテクノロジーによって異なります。そこで、これらのテクノロジーで実現可能なブレンドモードを以下の表にまとめました。この表ではビルドインで備わっているブレンドモードのみを「○」としています。

技術名CSS3Canvas要素WebGL
(Thee.js)
WebGL
(PIXI.js)
Flash
通常
比較(暗)
乗算
焼きこみ/減算
比較(明)
スクリーン
覆い焼き/加算
オーバーレイ
ソフトライト
ハードライト
差の絶対値
除外
色相
彩度
カラー
輝度
反転
アルファ
消去

CSS3とFlash PlayerはPhotoshopライクなグラフィカルなブレンドモードを搭載しています。デザイナーやモーションクリエイターにとっては直感的に利用しやすいのではないでしょうか。しかし、CSS3のブレンドモードは執筆時点(2015年9月現在)はMicrosoft EdgeやInternet Explorerが対応していないのがデメリットです。そこで比較的幅広くブラウザに搭載されているCanvas要素の出番がでてきますが、Canvas要素はブレンドモードの種類がそもそも少ないという制約があります(一番使い道のある「加算」表現が利用可能なのが救いですが…)。ここで挙たように、それぞれのテクノロジーには一長一短があるのでコンテンツに応じて最適な手段を検討するのが現実解となります

なお、以下の注釈で記載していますが、CSS3以外のテクノロジーでは独自のブレンドモードを開発する手段が用意されています。WebGLやFlashではシェーダーを自作すれば、様々なレイヤーの重ね方が可能です。ただし、ブレンドモードを自作するためには学習コストが高く、シェーダー言語の理解と習熟が必要となります。

※Canvas要素(Context2D)ではglobalCompositeOperationプロパティーでブレンドモードを実現します。globalCompositeOperationプロパティーで実現可能な合成方法は「CanvasRenderingContext2D.globalCompositeOperation – Web API インターフェイス | MDN」を参照ください。なお、compositeOperationプロパティーに存在しない合成方法でも、代替手法としてピクセル値の計算処理を実装すれば任意のブレンドモードの実現が可能です。ただし、計算負荷が高いため処理速度は遅く、リアルタイムの合成には向きません。
※WebGLはJSライブラリ「Three.js」と「PIXI.js」で実現可能なブレンドモードをまとめました。Pixi.jsではビルトインで用意されているブレンドモードの種類は多いですが、動作しないブレンドモードも存在するため記事「[pixi.js] ブレンドモード | にゃあプロジェクト」を参考ください。
※WebGLではフラグメントシェーダ―を記述すれば基本的には任意のブレンドモードが可能です。詳しくは記事「WebGL で高速 BlendMode – ヨモツネット」を参照ください。この場合の処理速度は良好です。
※Flash(DisplayList)ではblendModeプロパティーでブレンドモードを実現します。なお、blendModeプロパティーにない合成方法でも、PixelBender機能(Shaderクラス)を用いて任意のブレンドモード(blendShaderプロパティー)が可能です。この場合の処理速度は良好です。
※FlashでもWebGLと同様のGPUを利用する技術「Stage3D」が存在します。Stage3Dではフラグメントシェーダ―を作成することで任意のブレンドモードの実現が可能です。この場合の処理速度は良好です。

デモ作成で選んだのはCSS3のブレンドモード

話が変わりますが、デモ作成にあたり2つのレイヤーを作成しました。一つはカラフルな背景のレイヤー、もう一つはドローイングの曲線が描かれてたレイヤーです。それぞれを独立したデモを用意しましたので、背景レイヤーデモドローイング曲線デモを再生すると以下の説明がわかりやすくなると思います。

150812_dom_layers

この2つのレイヤーをどのように組み合わせるのが面白いのか、様々なブレンドモードの表現を比較しました。以下の図板は試行錯誤の一例です。

長年の勘から「加算」が妥当だろうと思っていたのですが、CSS3の「ハードライト (mix-blend-mode: hard-light)」を使えば、ユニークな印象を出せることに気づきました。ハードライトは2つのレイヤーのうち、前面のレイヤーが50%グレーより明るい部分は[スクリーン]に、暗い部分は[乗算]になる合成する方法です。

iPadとAdobe Penでドローイング

広がるブレンドモードの表現

今回はモーションにおけるCSS3ブレンドモードの活用例を紹介しました。ブレンドモードはPhotoshop 3から搭載されるグラフィックデザインにおける伝統的な手法です。Webの世界では2005年登場のFlash Player 8で実現できていましたが、ここ数年の不毛な世間のFlashバッシングの影響もあり、ブレンドモードを利用したWebデザインが少なくなっていました(デザイン表現の選択肢が少なくなっていました)。現時点では対応ブラウザが限られるので時期尚早かもしれませんが、CSS3ブレンドモードの活用でWebデザインの可能性が広がるはずです。ぜひアイデアの一つとして活用してみてはいかがでしょうか?