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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

Gource:バージョン管理の履歴を可視化するツール

ポリ男からMetaHumanを作る

AnacondaとTensorFlowをインストールしてVi...

OpenCVのfindEssentialMat関数を使ったサ...

物理ベースレンダリングのためのマテリアル設定チートシート

OpenCV 3.3.0-RCでsfmモジュールをビルド

Google App Engine上のWordPressでF...

OpenCVでカメラ画像から自己位置認識 (Visual O...

ZBrush 2021.6のMesh from Mask機能...

スターウォーズ エピソードVIIの予告編

clearcoat Shader

Maya には3 種類のシェーダSDKがある?

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

ZBrushで仮面ライダーBLACK SUNを作る 頭部~バ...

cvui:OpenCVのための軽量GUIライブラリ

MVStudio:オープンソースのPhotogrammetr...

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

プロシージャル手法に特化した本が出てるみたい(まだ買わないけ...

ZBrushで基本となるブラシ

Composition Rendering:Blenderに...

Physics Forests:機械学習で流体シミュレーショ...

Windows Server 2008にAutodesk M...

Seleniumを使ったFXや株の自動取引

Raspberry Pi

Google Chromecast

ガメラ生誕50周年

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

マルコフ連鎖モンテカルロ法

リメイク版ロボコップスーツのメイキング

ZBrush 2018での作業環境を整える

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

Deep Learningとその他の機械学習手法の性能比較

Shader.jp:リアルタイム3DCG技術をあつかうサイト

SIGGRAPH ASIA 2009で学生ボランティア募集し...

顔のモデリング

Mixamo:人型3Dキャラクターアニメーション制作サービス

ZBrushで手首のモデリングをリファイン

GitHub Pagesで静的サイトを作る

ZBrushでゴジラ2001を作ってみる 頭の概形作り

PureRef:リファレンス画像専用ビューア

CGWORLD CHANNEL 第21回ニコ生配信は『シン・...

Photo Bash:複数の写真を組み合わせて1枚のイラスト...

コメント