GLSLシェーダによるカートゥーンレンダリング
今日は、GLSLによるカートゥーンを紹介しようと思います。割と簡単にでき、それなりに見栄えがするからです。その応用として、輪郭線も描画します。 カートゥーンの原理 カートゥーンはセルアニメ調のレンダリングです。左下の図に示すように、頂点vにおいて、法線と光源ベクトル（頂点から光源へのベクトル）との内積（照度）を、右下の図のようなテクスチャのs座標に当てはめることで簡単に実現できます。 更に、次の図の左のように、視線ベクトルと法線の内積を考えると、輪郭となる部分はほぼ0になります。そのため、その内積をt座標に割り当てることで、輪郭線を実現できます。 s座標もt座標も単位ベクトル同士の内積で計算できますが、その範囲は-1～1になるため、テクスチャマッピング（glTexParameterによる指定）をクランプに設定する必要があります。 バーテックスシェーダ（頂点シェーダ） 今回は、頂点シェーダで
Three.jsでWebGLを触ってみる - Qiita
WebGLを手軽に使えるThree.jsを使って色々と作っていく過程で得たものを備忘録として残していく記事です。 自分が実際に触ったり、Three.jsに最初からついてるサンプルをいじりながら自分が理解したものなので、 中には誤解していたり勘違いしている情報もあるかも しれないので、参考にする場合は自己責任でお願いします； まず手始めに、簡単なモデルデータの読み込み、morph animation、影の表示をやってみました。 実際に動いているものはjsdo.itにあげています。 モデルデータはBlenderに最初から用意されている猿？を使用しました。 Three.jsで影を表示する Three.jsで影を表示するにはLight、Renderer、Meshのそれぞれで影を有効にしないとなりません。 今回のサンプルでいうと以下のコード断片です。 Lightの設定 globalLight = n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
