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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

ちょっと凝り過ぎなWebキャンペーン:全日本バーベイタム選手...

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

OpenCV 3.3.0 contribのsfmモジュールの...

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

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

Adobe Photoshop CS5の新機能

UnityでShaderの入力パラメータとして行列を渡す

SVM (Support Vector Machine)

UnityプロジェクトをGitHubで管理する

『ゴジラ キング・オブ・モンスターズ』のVFXブレイクダウン

プログラミングスキルとは何か?

3Dスキャンに基づくプロシージャルフェイシャルアニメーション

DCGAN (Deep Convolutional GAN)...

Unreal Engine 5の情報が公開された!

GoB:ZBrushとBlenderを連携させるアドオン

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

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

Unityで強化学習できる『Unity ML-Agents』

Transformers ”Reference & Buli...

ラクガキの立体化 胴体の追加

映画『シン・ウルトラマン』 メイキング記事まとめ

Twitter APIのPythonラッパー『python-...

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

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

ファンの力

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

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

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

ラクガキの立体化

『手を動かしながら学ぶエンジニアのためのデータサイエンス』ハ...

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

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

Houdiniのライセンスの種類

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

SculptrisとBlenderで作ったGodzilla ...

クラスの基本

機械学習手法『Random Forest』

VCG Library:C++のポリゴン操作ライブラリ

『スター・ウォーズ/スカイウォーカーの夜明け』のVFXブレイ...

ZBrushでゴジラ2001を作ってみる 身体のシルエット出...

ZBrushで人型クリーチャー

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

コメント