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

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


スポンサーリンク

Normal Mapping with Javascript and Canvas





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

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

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


スポンサーリンク

関連記事

スターウォーズ エピソードVIIの予告編
PGGAN:段階的に解像度を上げて学習を進めるGAN
ラクガキの立体化 反省
チャットツール用bot開発フレームワーク『Hubot』
Blender 2.8がついに正式リリース!
GoB:ZBrushとBlenderを連携させるアドオン
CGALDotNet:計算幾何学ライブラリ CGALのC#ラッパー
第1回 3D勉強会@関東『SLAMチュートリアル大会』
テスト
OpenSfM:PythonのStructure from Motionライブラリ
TensorSpace.js:ニューラルネットワークの構造を可視化するフレームワーク
Zbrushでメカ物を作るチュートリアル動画
Amazon Web ServicesでWordPress
iPhone 3GSがますます欲しくなる動画
ROSの薄い本
1枚の画像からマテリアルを作成できる無料ツール『Materialize』
Google App Engineのデプロイ失敗
Mechanizeで要認証Webサイトをスクレイピング
iPhone・iPod touchで動作する知育ロボット『ROMO』
OpenMayaRender
ZBrushでアヴァン・ガメラを作ってみる 口内の微調整・身体のライン修正
ブログがダウンしてました
Structure from Motion (多視点画像からの3次元形状復元)
After Effects全エフェクトの解説(6.5)
『ローグ・ワン/スター・ウォーズ・ストーリー』のVFXブレイクダウン まとめ
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
OpenMesh:オープンソースの3Dメッシュデータライブラリ
無料で使える人体3DCG作成ツール
Rerun:マルチモーダルデータの可視化アプリとSDK
UnityでARKit2.0
ブログをGoogle App EngineからAmazon EC2へ移行
ZBrushでアヴァン・ガメラを作ってみる 頭頂部の作り込み・舌の追加
スクラッチで既存のキャラクターを立体化したい
ブラウザ操作自動化ツール『Selenium』を試す
天体写真の3D動画
3Dスキャンに基づくプロシージャルフェイシャルアニメーション
映画『ジュラシック・ワールド』のVFXメイキング
ジュラシック・パークのメイキング
Raspberry Piでセンサーの常時稼働を検討する
HD画質の無駄遣い
ZBrushのキャンバスにリファレンス画像を配置する
ゴジラ三昧

コメント