ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSS Shaders with WebGLはWebGLを使ってCSS Shadersを実現するサンプル集です。

CSS Shadersという技術があります。CSSによって要素を変形させるもので、プログラマブルシェーダーというプログラミングによって制御します。それによって何ができるのかその一例としてみておきたいのがCSS Shaders with WebGLです。


カーテン表示。


マウスのポインターを拡大表示。


白黒に変換。


旗のように表示。


こんな感じに斜めに表示。


地図のように折り目のある表示。


デモ動画です。

CSS Shaders with WebGLはWebGLを使ってCSS Shadersを実現しています。通常であればGoogle ChromeのEnabls CSS Shadersというフラグを有効にしないと使えません。どんどん高度化していくWeb技術を垣間みれる、非常に面白いサンプルになっています。

CSS Shaders with WebGLはHTML5製のオープンソース・ソフトウェア(Public Domain)です。


MOONGIFTはこう見る

CSS Shadersという単語自体、この記事を通してはじめて知ったのですが、WebGLやOpenGLと同じようにシェダー言語(ほぼ互換)を使って3Dグラフィックスを作り出す技術だそうです。シェダー言語はほぼプログラミングであり、その意味でCSSが非常に高度化されているのが分かるかと思います。

ぱっと思いつくのはゲームでしょうか。グラフィックスを描く際にWebGL頼りではなくCSSでできるというのはメリットがあるように思えます。デメリットとしてはソースが全て公開になってしまうことでしょう。Webデザイナーの方でCSS Shadersを使いこなせるレベルになったとすれば、それはとても凄いことのように思えます。

CSS Shaders with WebGL

niklasvh/WebGL-CSS-Shaders · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2