法線マップを用意してCanvas上でShadingするサンプル

何かこのページだいぶ前にメモったつもりだったんだけどな。

Normal Mapping with Javascript and Canvas





まあ、ラスタライズ後の処理だけ実装した感じだよね。これがあるだけで立体感がまるで違う。この例ではマウスでライトを制御してるけど、もちろん自動でライトの方向を三次元的にグルグル動かすことも可能なはず。(オブジェクトが動かないだけ)

これのサンプルコード見てて知ったんだけど、JavaScriptって関数の中に関数を記述する『クロージャ』ってのがあるのね。クロージャについてはもう少し勉強しよう。

ついでに
Realtime Raytracing in Javascript!
Path tracing a cornell box in Javascript

関連記事

任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語...

GitHub Pagesで静的サイトを作る

中学3年生が制作した短編映像作品『2045』

python-twitterで自分のお気に入りを取得する

写真に3Dオブジェクトを違和感無く合成する『3DPhotoM...

SIGGRAPH Asia

Subsurface scatteringの動画

トランスフォーマー :リベンジのメイキング (デジタルドメイ...

Alice Vision:オープンソースのPhotogram...

3DCGのモデルを立体化するサービス

BlenderProc:Blenderで機械学習用の画像デー...

ブログの復旧が難航してた話

ZBrushでゴジラ2001を作ってみる 身体のバランスを探...

ZBrushでアヴァン・ガメラを作ってみる 下アゴと頭部を作...

無料で使える人体3DCG作成ツール

FCN (Fully Convolutional Netwo...

libigl:軽量なジオメトリ処理ライブラリ

WordPressプラグインの作り方

Pythonのソースコードに特化した検索エンジン『Nulle...

ZBrushでアヴァン・ガメラを作ってみる 甲羅のバランス調...

布のモデリング

WebGL開発に関する情報が充実してきている

Vancouver Film Schoolのデモリール

手を動かしながら学ぶデータマイニング

AfterEffectsプラグイン開発

ZBrushでアヴァン・ガメラを作ってみる 脚のトゲの作り直...

トランスフォーマーロストエイジのメイキング

単純に遊びに行くのはだめなのか?

第20回 文化庁メディア芸術祭『3DCG表現と特撮の時代』

SIGGRAPH ASIAのマスコット

注文してた本が届いた

グローバルイルミネーションに手を出す前に、やり残したことがあ...

ZBrushでアヴァン・ガメラを作ってみる 下半身のバランス...

UnityでPoint Cloudを表示する方法

タダでRenderManを体験する方法

2012のメイキングまとめ(途中)

Adobe Photoshop CS5の新機能

UnityでOpenCVを使うには?

ハリウッド版「GAIKING」パイロット映像

ZBrushでアヴァン・ガメラを作ってみる 頭頂部と首周りを...

Unite 2014の動画

Physically Based Rendering

コメント