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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

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

3DCGのモデルを立体化するサービス

OpenCVで動画の手ぶれ補正

FCN (Fully Convolutional Netwo...

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

OpenVDB:3Dボリュームデータ処理ライブラリ

Manim:Pythonで使える数学アニメーションライブラリ

立体視を試してみた

レンダラ制作はOpenGL とか DirectX を使わなく...

Faceshiftで表情をキャプチャしてBlender上でM...

mentalrayのSubsurface Scatterin...

Mayaのシェーディングノードの区分

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

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

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

『スター・ウォーズ 最後のジェダイ』のVFXブレイクダウン ...

MFnDataとMFnAttribute

第1回 3D勉強会@関東『SLAMチュートリアル大会』

uvでWindows11のPython環境を管理する

この本読むよ

オープンソースのネットワーク可視化ソフトウェアプラットフォー...

定数

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

トランスフォーマー/ロストエイジのメイキング

uGUI:Unityの新しいGUI作成システム

JavaScriptとかWebGLとかCanvasとか

書籍『ゼロから作るDeep Learning』で自分なりに学...

Python for Unity:UnityEditorでP...

PureRef:リファレンス画像専用ビューア

Mayaのレンダリング アトリビュート

geometry3Sharp:Unity C#で使えるポリゴ...

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

ZBrushでゴジラ2001を作ってみる 目元だけ作り込んで...

Deep Learningとその他の機械学習手法の性能比較

ZBrushでカスタムUIを設定する

中学3年生が制作した短編映像作品『2045』

MRenderUtil::raytrace

iPhone 3GSがますます欲しくなる動画

白組による『シン・ゴジラ』CGメイキング映像が公開された!

NeuralNetwork.NET:.NETで使えるTens...

ラクガキの立体化

OpenGV:画像からカメラの3次元位置・姿勢を推定するライ...

コメント