www.kevs3d.co.uk/dev/shaders/ WebGL + GLSL でシェーダをうまく活用したサンプルがいくつかある。 非常に素晴らしいのだけど、それぞれのサンプルの負荷はそれなりにあるため閲覧には注意。
Shader Editor - Firefox Developer Tools | MDN 一時期、ごく一部で非常に話題になりました。 これは、もうなんていうか、すごいなぁ。ヘタなネイティブアプリケーションよりも、ブラウザ一丁のほうがいろいろ便利になっていくのかなと、いやがおうにも感じさせます。 でも相当いいスペックのマシンじゃないとけっこう厳しいのでしょうね。
This book has a collection for ordering a printed copy of this book for a fee. (edit) (help) GLSL programming in the game engine Unity is considerably easier than GLSL programming for an OpenGL, OpenGL ES, or WebGL application. Import of meshes and images (i.e. textures) is supported by a graphical user interface; mipmaps and normal maps can be computed automatically; the most common vertex attrib
ホーム < ゲームつくろー! < プログラマブルシェーダ編 シェーダ編 その5 0から学ぶ法線マップ ポリゴンの表面にはテクスチャが貼られる。これは3Dのゲームを作ろうと思う方はもちろんどなたでもご存知の事です。貼るという語意から、テクスチャには色が付いているんだろうなともイメージできます。しかし、DirectXの中では「色」というのは単なる数字です。特にシェーダの中に入ると、それは0.0~1.0の小数点になってしまいます。 テクスチャは何とも便利な物で、ポリゴン表面のある部分の色を示す事ができます。テクスチャの色は結局数値なのですから、これを別のもっと一般化すると「テクスチャはポリゴン表面のある部分の『値』を示す事ができる」となります。 ポリゴン表面の性質にも色々とありますが、色味以外の代表格と言うと「法線」です。ポリゴンの向きですね。これまで、法線は頂点単位でしか定義されませんでした。
ホーム < ゲームつくろー! < Unity/Shader編 Shader編 その2 ShaderLabでUnityシェーダの下地作り Unityには「固定機能シェーダ」「サーフェイスシェーダ」そして「頂点/フラグメントシェーダ」という3種類のシェーダタイプがあり、そのどれもがShaderLabというUnity独自のフォーマット下で記述されます。 ShaderLabのリファレンスはこちらになります: Unity.ShaderLab sintax: http://docs.unity3d.com/Documentation/Components/SL-Shader.html ① ShaderLabの役割 ShaderLabはUnityとシェーダコードとの仲立ちをするコードです。シェーダは何か入力情報が無いと動かす事ができませんが、その「入力情報」はUnityのGUIやスクリプトで与えます。マ
There are different ways to perform blur and this is one of the most common way to do it in a shader. It’s a two step method with first a horizontal blur and then a vertical blur. By splitting the work in two directions (two passes) you can save a lot of computation. The method can be divided in the following parts: Render the scene you want to blur to a texture (could be downsampled) Render a scr
CSS Shaderで遊ぶ(2) カテゴリ:CSS Shader 2013年5月26日 08:15 前回記事、「CSS Shaderで遊ぶ」ではCSS Shaderの触りを書きました。 詳細にはほとんど触れていませんが、どんなことができるのか、CSS Shaderの可能性は感じてもらえたのではないでしょうか。 今回の記事では、前回触れたUIを作るという点にフォーカスを当てて、簡単なエフェクトを作ってみるとともに、シェーダでどんなことをやっているのかひとつずつ見ていこうと思います。とはいえ、自分もまだまだ勉強中の分野のため、間違いだったり勘違いがあるかもしれません。なので、読む方はそれを念頭に読んでいただければと思います。 CSS ShaderでUIを作る ということで、さっそく今回のために作成したサンプルを見てみようと思います。サンプルはまたしてもjsdo.itに上げました。 UIというこ
今日は、GLSLによるカートゥーンを紹介しようと思います。割と簡単にでき、それなりに見栄えがするからです。その応用として、輪郭線も描画します。 カートゥーンの原理 カートゥーンはセルアニメ調のレンダリングです。左下の図に示すように、頂点vにおいて、法線と光源ベクトル(頂点から光源へのベクトル)との内積(照度)を、右下の図のようなテクスチャのs座標に当てはめることで簡単に実現できます。 更に、次の図の左のように、視線ベクトルと法線の内積を考えると、輪郭となる部分はほぼ0になります。そのため、その内積をt座標に割り当てることで、輪郭線を実現できます。 s座標もt座標も単位ベクトル同士の内積で計算できますが、その範囲は-1~1になるため、テクスチャマッピング(glTexParameterによる指定)をクランプに設定する必要があります。 バーテックスシェーダ(頂点シェーダ) 今回は、頂点シェーダで
Advances in HTML5 and CSS (for example transitions, animations, transforms, text shadows, box-shadows, gradients, SVG) have improved the graphical and interactive richness of HTML. SVG filter effects are now moving to Filter Effects 1.0 to become available in CSS and HTML, in addition to SVG, and will bring effects such as grayscale, sepia tone, or hue-rotate to all web content. Note: Since CSS Sh
WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 こちらの記事を見て「おお、ついに CSS Shaders 実装されたんか!」と喜び勇んで試した後、すべてが終わってから Dev 版 Chrome でも使えることに気づくという情弱ぶりを発揮した今日この頃、みなさんいかがお過ごしでしょうか。いったいいつから使えてたんだろう・・・(´・ω・`) そんなわけで、最新の話題でもないみたいですが、せっかく試したので記事にして
About CSS Custom Filters bring cinematic visual effects to HTML, using simple CSS syntax. They expand the visual effects and interactivity possible with web content. We think CSS Custom Filters can be both visually pleasing and, perhaps more importantly, provide enhanced user experience by offering very organic and natural user interaction feedback. With CSS Custom Filters, you can twist, wave, cu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く