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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

CEDEC 3日目

CycleGAN:ドメイン関係を学習した画像変換

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

Pix2Pix:CGANによる画像変換

ラクガキの立体化 背中の作り込み・手首の移植

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

生物の骨格

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

Autodesk CompositeとAutodesk Ma...

D3.js:JavaScriptのデータビジュアライゼーショ...

Mask R-CNN:ディープラーニングによる一般物体検出・...

Maya API Reference

Google App Engine上のWordPressでF...

粘土をこねるようなスカルプトモデリング

Human Generator:Blenderの人体生成アド...

Mean Stack開発の最初の一歩

Unite 2014の動画

ZBrushで仮面ライダー3号を造る 仮面編 リファレンス画...

UnityのGlobal Illumination

実写と実写の合成時の色の馴染ませテクニック

Alice Vision:オープンソースのPhotogram...

ZBrush 2018へのアップグレード

フィーリングに基づくタマムシの質感表現

2D→3D復元技術で使われる用語まとめ

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

iPhone 3GSがますます欲しくなる動画

Photoshopで作る怪獣特撮チュートリアル

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

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

R-CNN (Regions with CNN featur...

BlenderのRigifyでリギング

ZBrushでゴジラ2001を作ってみる 側頭部のボリューム...

Deep Fluids:流体シミュレーションをディープラーニ...

clearcoat Shader

OpenMVSのサンプルを動かしてみる

pythonもかじってみようかと

konashiのサンプルコードを動かしてみた

ZBrushでアヴァン・ガメラを作ってみる 壊れたデータの救...

HD画質の無駄遣い

UnityプロジェクトをGitHubで管理する

Paul Debevec

Unity MonoBehaviourクラスのオーバーライド...

コメント