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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

iPhoneアプリ開発 Xcode 5のお作法

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

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

Mayaでリアルな布の質感を作るチュートリアル

ZBrushでアヴァン・ガメラを作ってみる 歯茎を別パーツへ...

HD画質の無駄遣い

OpenCV 3.1から追加されたSfMモジュール

Unityをレンダラとして活用する

Geogram:C++の3D幾何アルゴリズムライブラリ

Mayaのプラグイン開発

mentalrayのSubsurface Scatterin...

顔モデリングのチュートリアル

科学技術計算向けスクリプト言語『Julia』

生物の骨格

Unityの各コンポーネント間でのやり取り

OpenVDB:3Dボリュームデータ処理ライブラリ

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

ZBrushでカスタムUIを設定する

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

池袋パルコで3Dのバーチャルフィッティング『ウェアラブル ク...

Math.NET Numerics:Unityで使える数値計...

SIGGRAPH 2020はオンライン開催

ラクガキの立体化 背中の作り込み・手首の移植

ラクガキの立体化 1年半ぶりの続き

2012 昨日のクローズアップ現代を見た

フィーリングに基づくタマムシの質感表現

Super Resolution:OpenCVの超解像処理モ...

クラスの基本

OpenCVの顔検出過程を可視化した動画

NeRF (Neural Radiance Fields):...

書籍『開田裕治 怪獣イラストテクニック』

頭蓋骨からの顔復元と進化過程の可視化

ブラウザ上でJavaScript,HTML,CSSを書いて共...

OpenGVのライブラリ構成

Zibra Liquids:Unity向け流体シミュレーショ...

OpenSfM:PythonのStructure from ...

JavaScriptとかWebGLとかCanvasとか

2D→3D復元技術で使われる用語まとめ

チャットツール用bot開発フレームワーク『Hubot』

ヘッドマウントディスプレイとビジュアリゼーションの未来

Pythonの自然言語処理ライブラリ『NLTK(Natura...

Subsurface scatteringの動画

コメント