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

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


スポンサーリンク

Normal Mapping with Javascript and Canvas





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

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

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


スポンサーリンク

関連記事

iPhone欲しいなぁ
UnityでLight Shaftを表現する
ROSの薄い本
Vancouver Film Schoolのデモリール
ZBrushで仮面ライダーBLACK SUNを作る 頭部~バストの概形
画像生成AI Stable Diffusionで遊ぶ
2D→3D復元技術で使われる用語まとめ
プログラムによる景観の自動生成
.NETで使えるTensorFlowライクなニューラルネットワークライブラリ『NeuralNetwo...
ラクガキの立体化 背中の作り込み・手首の移植
PureRef:リファレンス画像専用ビューア
CreativeCOW.net
CGALDotNet:計算幾何学ライブラリ CGALのC#ラッパー
Raytracing Wiki
UnityでARKit2.0
ZBrushの練習 手のモデリング
MythTV:Linuxでテレビの視聴・録画ができるオープンソースプロジェクト
イタリアの自動車ブランドFiatとゴジラがコラボしたCMのメイキング
ZBrushのZScript入門
インタラクティブにComputer Visionコーディングができるツール『Live CV』
BlenderのRigifyでリギング
ドラマ『ファーストクラス』のモーショングラフィックス
SVM (Support Vector Machine)
Phongの表現力パネェ 材質別のPhong Shader用パラメータ一覧
『スター・ウォーズ 最後のジェダイ』のVFXブレイクダウン まとめ
物理ベースレンダリングのためのマテリアル設定チートシート
FCN (Fully Convolutional Network):ディープラーニングによるSema...
Houdiniのライセンスの種類
ラクガキの立体化 分割ラインの変更・バランス調整
Subsurface scatteringの動画
『スター・ウォーズ フォースの覚醒』のVFXブレイクダウン まとめ
ディープラーニングに対応したPythonの機械学習ライブラリ『Pylearn2』
PGGAN:段階的に解像度を上げて学習を進めるGAN
昔Mayaでモデリングしたモデルをリファインしてみようか
自前のShaderがおかしい件
書籍『The Art of Mystical Beasts』を購入
写真に3Dオブジェクトを違和感無く合成する『3DPhotoMagic』
参考になりそうなサイト
オープンソースのロボットアプリケーションフレームワーク『ROS (Robot Operating S...
OpenVDB:3Dボリュームデータ処理ライブラリ
ZBrushで仮面ライダー3号を造る 仮面編 Dam Standardブラシでディティールを彫る
Seleniumを使ったFXや株の自動取引

コメント