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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

C#で使える遺伝的アルゴリズムライブラリ『GeneticSh...

ZBrushで基本となるブラシ

Adobe Photoshop CS4 Extendedの3...

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

CLO:服飾デザインツール

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

ZBrushでアヴァン・ガメラを作ってみる 腕の作り込み

アクセス元IPアドレスから企業名が分かるアクセス解析『Use...

MPFB2:Blenderの人体モデリングアドオン

Iterator

Rerun:マルチモーダルデータの可視化アプリとSDK

CGのためのディープラーニング

TensorSpace.js:ニューラルネットワークの構造を...

Amazon Web ServicesでWordPress

布地のシワの法則性

Swark:コードからアーキテクチャ図を作成できるVSCod...

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

ZBrushで人型クリーチャー

ZBrushのZmodelerとDynamic Subdiv...

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

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

UnrealCLR:Unreal Engineで.NET C...

PyMC:Pythonのベイズ統計ライブラリ

『ピクサー展』へ行ってきた

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

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

AfterEffectsプラグイン開発

Unityで学ぶC#

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

マイケル・ベイの動画の感覚

bpy-renderer:レンダリング用Pythonパッケー...

顔追跡による擬似3D表示『Dynamic Perspecti...

Phongの表現力パネェ 材質別のPhong Shader用...

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

MFnDataとMFnAttribute

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

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

今年もSSII

日本でMakersは普及するだろうか?

WordPressの表示を高速化する

『パシフィック・リム: アップライジング』のVFXブレイクダ...

ZBrushでアヴァン・ガメラを作ってみる モールドの彫り込...

コメント