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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

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

リメイク版ロボコップスーツのメイキング

トランスフォーマー :リベンジのメイキング (デジタルドメイ...

UnityのAR FoundationでARKit 3

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

Mean Stack開発の最初の一歩

3DCG Meetup #4に行ってきた

自前Shaderの件 解決しました

ZBrushでアヴァン・ガメラを作ってみる おでこ(?)のバ...

ポリゴンジオメトリ処理ライブラリ『pmp-library (...

Google XML Sitemap Generatorプラ...

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

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

GAN (Generative Adversarial Ne...

映画『ミュータント・タートルズ』を観てきた

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

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

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

Adobe Photoshop CS4 Extendedの3...

単純に遊びに行くのはだめなのか?

UnrealCV:コンピュータビジョン研究のためのUnrea...

映画『ブレードランナー 2049』のVFX

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

書籍『OpenCV 3 プログラミングブック』を購入

参考書

Mitsuba 2:オープンソースの物理ベースレンダラ

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

iPhone・iPod touchで動作する知育ロボット『R...

3Dスキャンに基づくプロシージャルフェイシャルアニメーション

SDカードサイズのコンピューター『Intel Edison』

TorchStudio:PyTorchのための統合開発環境と...

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

Structure from Motion (多視点画像から...

Shader.jp:リアルタイム3DCG技術をあつかうサイト

Polyscope:3Dデータ操作用GUIライブラリ

pythonの機械学習ライブラリ『scikit-learn』

Transformers ”Reference & Buli...

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

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

顔追跡による擬似3D表示『Dynamic Perspecti...

オープンソースの人体モデリングツール『MakeHuman』の...

Pylearn2:ディープラーニングに対応したPythonの...

コメント