Calendarの21日目の記事です。#LLAdventJPとは?僕も知りません。?と思ったのがきっかけで、いろいろ調べてみたらGLSLというキーワードにぶち当たったので、なんだろうと思って軽めに調べてみました。以下、こんな感じで話が進みます。filterについてGLSLとは?そもそもシェーダーとは?GLSLのHelloWorldまとめちなみにタイトルにもあるように、3Dグラフィックスの周りはド素人であるため、専門でやられている方にはつまらなく感じるかもしれません。間違いとかありましたら、叩かれるのはこわいのでやさしく指摘してくだされば幸いです。filter昨今のモダンブラウザの高速リリースによって、ビジュアル面でもFlashと同等レベルのことが出来るようになってきました。filterは、その最たる例と言ってもいいのかもしれません。filterに関しては、こちらのページが分かりやすいです。Rocksグレースケール(灰色っぽくする)とか、コントラスト比をいじるとか、Flashで普通に出来たことが、同じようにHTMLに出来るようになっただけでしょ?と思われる方もいるかもしれません。僕はそうは思っていなくて、任意のDOM要素に対して使えるというのがかなりのメリットではないかと考えています。試してみましょう!試しにお使いのブラウザ(Chromeなど)の開発者ツールで、このページの下にあるであろう『いいね!』ボタンのiframeを選択し、以下のようなスタイルをあててみてください。grayscale(100%);どうですか?いいねボタンが白黒になりましたか?まるでFBのお葬式のようですね!これってかなりすごいことで、例えばbodyに対してブラーエフェクト(blur、ぼかしのエフェクトのこと)を先にかけておいて、ちょっと間を置いてエフェクトを消してやれば、ぼやけていたWebコンテンツがしゅっと見えるような表現が出来たりしますよね!こういった今までつまんない感じだったWebコンテンツを、少しのCSSの記述だけでとても簡単にカッコイイ感じに変身させることができちゃうのです。※もちろん、色んな要素にエフェクトかけまくっちゃうとレンダリング負荷は高まりますので、それだけあれば何でも解決するかというとそんなことはありません。公式の仕様は以下に載ってます。僕もまだこれからちゃんと読まないといけないレベルですが、一応紹介までに。種類の1つに、customというのがあります。エフェクトのかけ方を、こちらで自由に制御できちゃうみたいなんですねー。デモを見て、「おー、すげー!」でもしてみましょうか。1つであるため、任意のDOM要素に対してエフェクトがかけられるわけですね。見る限り、以下のようなことが出来そうです。色の塗り分け影の付け方をいじる3Dを2Dに対応付けして、3Dっぽく見せる・・・と、ここまで調べてみると、3Dグラフィックスの専門用語がそれなりにわんさか出てきます。GLSLに触れるとともに一通り調べてみました。GLSLとは?そもそもシェーダーとは?まずGLSLについて。GLslangとしても知られ、C言語をベースとした高レベルシェーディング言語である。4.10(米国時間2010年7月28日)である。GLSLより引用はい、OpenGLのシェーディング言語なわけですね。shading)は、3次元コンピュータグラフィックスやイラストレーションなどで明暗のコントラストで立体感を与える技法である。絵画では陰影画法と呼ぶ。シェーディングより引用ほほう、これはデモで見て予想した通りのことが出来る技法ですね。リソースに対して使用するソフトウェア命令の組み合わせである。シェーダより引用シェーディング(光や影、ピクセルの色や位置などの変化)をシェーダーが担当してくれているのですね。いうことは、一番最初に見たCSSの記述は、シェーダーのことを表しているようです。