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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

ZBrushでアヴァン・ガメラを作ってみる 歯を配置

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

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

MPFB2:Blenderの人体モデリングアドオン

Twitter APIのPythonラッパー『python-twitter』

オープンソースのテクスチャマッピングシステム『Ptex』

物理ベースレンダリングのためのマテリアル設定チートシート

Texturing & Modeling A Procedural ApproachをGoo...

Blendify:コンピュータービジョン向けBlenderラッパー

mentalrayのSubsurface Scattering Shader『misss_fast_...

UnityでPoint Cloudを表示する方法

オープンソースの物理ベースGIレンダラ『appleseed』

ZBrushでゴジラ2001を作ってみる 身体のシルエット出し

OpenCV 3.3.0-RCでsfmモジュールをビルド

書籍『The Art of Mystical Beasts』を購入

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

天体写真の3D動画

フォトンの放射から格納までを可視化した動画

adskShaderSDK

iPhoneアプリ開発 Xcode 5のお作法

ZBrushで仮面ライダーBLACK SUNを作る 頭部~バストの概形

Math.NET Numerics:Unityで使える数値計算ライブラリ

ZBrushのZmodelerとDynamic Subdivisionを学ぶ

NeRF (Neural Radiance Fields):深層学習による新規視点合成

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

OpenCV

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

SONYの自律型エンタテインメントロボット『aibo』

ジュラシック・パークの続編『ジュラシック・ワールド』

Unityで360度ステレオVR動画を作る

『ローグ・ワン/スター・ウォーズ・ストーリー』のVFXブレイクダウン まとめ

イタリアの自動車ブランドFiatとゴジラがコラボしたCMのメイキング

仮想関数

Accord.NET Framework:C#で使える機械学習ライブラリ

池袋パルコで3Dのバーチャルフィッティング『ウェアラブル クロージング バイ アーバンリサーチ』

『スター・ウォーズ フォースの覚醒』のVFXブレイクダウン まとめ

書籍『仕事ではじめる機械学習』を読みました

BSDF: (Bidirectional scattering distribution funct...

ブログのデザイン変えました

ZBrushでUndo Historyを動画に書き出す

Windows10でPyTorchをインストールしてVSCodeで使う

Google Earth用の建物を簡単に作れるツール Google Building Maker 公...

コメント