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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

Blender 2.8がついに正式リリース!

オープンソースのロボットアプリケーションフレームワーク『RO...

注文してた本が届いた

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

FCN (Fully Convolutional Netwo...

PolyPaint

Webサイトのワイヤーフレームが作成できるオンラインツール

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

UnityからROSを利用できる『ROS#』

Amazon EC2ログイン用の秘密鍵を無くした場合の対処方...

TeleSculptor:空撮動画からPhotogramme...

タマムシっぽい質感

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

書籍『ROSプログラミング』

Model View Controller

Google App Engine上のWordPressでA...

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

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

OpenCV

Kaolin:3Dディープラーニング用のPyTorchライブ...

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

iOSデバイスと接続して連携するガジェットの開発方法

映画『ゴジラ-1.0』 メイキング情報まとめ

PyTorch3D:3Dコンピュータービジョンライブラリ

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

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

ブログの復旧が難航してた話

R-CNN (Regions with CNN featur...

ZBrushでメカ物を作るチュートリアル動画

Windows Server 2008にAutodesk M...

Managing Software Requirements...

Python for Unity:UnityEditorでP...

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

KelpNet:C#で使える可読性重視のディープラーニングラ...

ドラマ『ファーストクラス』のモーショングラフィックス

MB-Lab:Blenderの人体モデリングアドオン

Raspberry PiでIoTごっこ

Unityからkonashiをコントロールする

ファンの力

布地のシワの法則性

IronPythonを使ってUnity上でPythonのコー...

Siggraph Asia 2009 カンファレンスの詳細

コメント