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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

Unityで学ぶC#

海外ドラマのChromaKey

マジョーラ

After Effects全エフェクトの解説(6.5)

現在公開されているWeb API一覧

書籍『ゼロから作るDeep Learning』で自分なりに学...

Ambient Occlusionを解析的に求める

OpenMVS:Multi-View Stereoによる3次...

OpenCV バージョン4がリリースされた!

ZBrush 4R7

色んな三面図があるサイト

Quartus II

映画『シン・仮面ライダー』 メイキング情報まとめ

動的なメモリの扱い

ヒーローに変身なりきりアーケードゲーム『ナレルンダー』

C++始めようと思うんだ

3Dグラフィックスの入門書

DUSt3R:3Dコンピュータービジョンの基盤モデル

Konashiを買った

書籍『メイキング・オブ・ピクサー 創造力をつくった人々』を読...

CreativeCOW.net

ラクガキの立体化 分割ラインの変更・バランス調整

ZBrushでアヴァン・ガメラを作ってみる 爪とトゲを追加

TeleSculptor:空撮動画からPhotogramme...

仮想関数

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

ブラウザ操作自動化ツール『Selenium』を試す

Mitsuba 3:オープンソースの研究向けレンダラ

注文してた本が届いた

素敵なパーティクル

Kubric:機械学習用アノテーション付き動画生成パイプライ...

WordPressプラグインによるサイトマップの自動生成

ZBrushでアヴァン・ガメラを作ってみる 壊れたデータの救...

OpenCV

顔のモデリング

Vancouver Film Schoolのデモリール

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

UnrealCLR:Unreal Engineで.NET C...

ZBrushで仮面ライダー3号を造る 仮面編 Clay Po...

Multi-View Environment:複数画像から3...

マンガで分かる JavaScriptプログラミング講座

OpenFace:Deep Neural Networkによ...

コメント