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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

Webページ制作のためのメモ

ブログをwpXレンタルサーバーからwpX Speedへ移行

Google App Engineのデプロイ失敗

ラクガキの立体化 胴体の追加

CGのためのディープラーニング

Paul Debevec

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

Live CV:インタラクティブにComputer Visi...

ZBrushでアヴァン・ガメラを作ってみる パーツ分割

Google App EngineでWordPress

「ベンジャミン·バトン数奇な人生」でどうやってCGの顔を作っ...

GoB:ZBrushとBlenderを連携させるアドオン

Subsurface scatteringの動画

GAN (Generative Adversarial Ne...

Mayaのポリゴン分割ツールの進化

オープンソースのロボットアプリケーションフレームワーク『RO...

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

UnityのGameObjectの向きをScriptで制御す...

ZBrushでリメッシュとディティールの転送

PeopleSansPeople:機械学習用の人物データをU...

ラクガキの立体化 反省

素敵なパーティクル

iOSデバイスのためのフィジカル・コンピューティングツールキ...

iPhone x ロボットハッカソン~RomoのiPhone...

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

ZBrushでアヴァン・ガメラを作ってみる 脚のポーズ調整

2012のメイキングまとめ(途中)

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

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

無料で使える人体3DCG作成ツール

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

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

映画『シン・仮面ライダー』 メイキング情報まとめ

ArUco:OpenCVベースのコンパクトなARライブラリ

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

UnityでARKit2.0

ZBrush 2021.6のMesh from Mask機能...

SculptrisとBlenderで作ったGodzilla ...

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

WinSCP

Unite 2014の動画

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

コメント