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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

bpy-renderer:レンダリング用Pythonパッケー...

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

Transformers ”Reference & Buli...

Phongの表現力パネェ 材質別のPhong Shader用...

adskShaderSDK

フリーで使えるスカルプト系モデリングツール『Sculptri...

映画『ジュラシック・ワールド/炎の王国』のVFXブレイクダウ...

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

ZBrush キャラクター&クリーチャー

動的なメモリの扱い

Open3D:3Dデータ処理ライブラリ

OpenCVの三角測量関数『cv::triangulatep...

C++始めようと思うんだ

OpenCV バージョン4がリリースされた!

BlenderProc:Blenderで機械学習用の画像デー...

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

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

UnityでPoint Cloudを表示する方法

オープンソースの顔認識フレームワーク『OpenBR』

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

Google Chromecast

Unreal Engine Tokyo MeetUp!へ行っ...

FreeMoCap Project:オープンソースのマーカー...

LuxCoreRender:オープンソースの物理ベースレンダ...

MythTV:Linuxでテレビの視聴・録画ができるオープン...

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

『パシフィック・リム: アップライジング』のVFXブレイクダ...

hloc:SuperGlueで精度を向上させたSfM・Vis...

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

立体視を試してみた

DensePose:画像中の人物表面のUV座標を推定する

ZBrushで手首のモデリングをリファイン

画像生成AI Stable Diffusionで遊ぶ

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

OpenCVで顔のランドマークを検出する『Facemark ...

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

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

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

フルCGのウルトラマン!?

WordPress on Windows Azure

GAN (Generative Adversarial Ne...

BSDF: (Bidirectional scatterin...

コメント