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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

ZBrush 2018へのアップグレード

DCGAN (Deep Convolutional GAN)...

サンプルコードにも間違いはある?

MPC社によるゴジラ(2014)のVFXブレイクダウン

フリーで使えるスカルプト系モデリングツール『Sculptri...

ZBrushでアヴァン・ガメラを作ってみる 甲羅のバランス調...

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

ファンの力

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

ドラマ『ファーストクラス』のモーショングラフィックス

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

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

ガメラ生誕50周年

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

ラクガキの立体化 3Dプリント注文

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

UnityでShaderの入力パラメータとして行列を渡す

動的なメモリの扱い

ラクガキの立体化 分割ラインの変更・バランス調整

タダでRenderManを体験する方法

書籍『メイキング・オブ・ピクサー 創造力をつくった人々』を読...

UnityでTweenアニメーションを実装できる3種類の無料...

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

映画から想像するVR・AR時代のGUIデザイン

Unityの薄い本

KelpNet:C#で使える可読性重視のディープラーニングラ...

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

MeshroomでPhotogrammetry

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

Photo Bash:複数の写真を組み合わせて1枚のイラスト...

C++の抽象クラス

デザインのリファイン再び

WordPressのテーマを自作する

『スター・ウォーズ 最後のジェダイ』のVFXブレイクダウン ...

BlenderでPhotogrammetryできるアドオン

OpenMayaRender

Point Cloud Utils:Pythonで3D点群・...

スターウォーズ エピソードVIIの予告編

mentalrayのSubsurface Scatterin...

ZBrushと液晶ペンタブレットでドラゴンをモデリングするチ...

OpenCV 3.1とopencv_contribモジュール...

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

コメント