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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

Maya LTのQuick Rigを試す

マジョーラ

CycleGAN:ドメイン関係を学習した画像変換

Mechanizeで要認証Webサイトをスクレイピング

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

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

WordPressのサーバ引っ越し方法を考える

天体写真の3D動画

JavaによるCGプログラミング入門サイト (日本語)

Live CV:インタラクティブにComputer Visi...

任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語...

2012のメイキングまとめ(途中)

Adobe Photoshop CS4 Extendedの3...

Konashiを買った

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

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

ラクガキの立体化 目標設定

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

OpenCV 3.1のsfmモジュールを試す

Autodesk CompositeとAutodesk Ma...

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

iOSで使えるJetpac社の物体認識SDK『DeepBel...

実写と実写の合成時の色の馴染ませテクニック

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

konashiのサンプルコードを動かしてみた

ManimML:機械学習の概念を視覚的に説明するためのライブ...

html5のcanvasの可能性

Python.NET:Pythonと.NETを連携させるパッ...

Blendify:コンピュータービジョン向けBlenderラ...

写真から3Dメッシュの生成・編集ができる無料ツール『Auto...

OpenSfM:PythonのStructure from ...

Stanford Bunny

Unity ARKitプラグインサンプルのドキュメントを読む

第20回 文化庁メディア芸術祭『3DCG表現と特撮の時代』

Google Earth用の建物を簡単に作れるツール Goo...

OpenCV

ZBrushで仮面ライダー3号を造る 仮面編 横顔のシルエッ...

Kornia:微分可能なコンピュータービジョンライブラリ

JavaScriptとかWebGLとかCanvasとか

UnityでPoint Cloudを表示する方法

Maya LTでFBIK(Full Body IK)

ZBrushでアヴァン・ガメラを作ってみる 首回りの修正・脚...

コメント