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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

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

Pythonの自然言語処理ライブラリ『NLTK(Natura...

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

『ピクサー展』へ行ってきた

TeleSculptor:空撮動画からPhotogramme...

参考書

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

プログラミングスキルとは何か?

cvui:OpenCVのための軽量GUIライブラリ

html5のcanvasの可能性

Unityの薄い本

OpenCVの超解像(SuperResolution)モジュ...

Blender 2.8がついに正式リリース!

Unreal Engineの薄い本

uGUI:Unityの新しいGUI作成システム

科学技術計算向けスクリプト言語『Julia』

機械学習に役立つPythonライブラリ一覧

OANDAのfxTrade API

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

PyMC:Pythonのベイズ統計ライブラリ

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

Pix2Pix:CGANによる画像変換

MRenderUtil::raytrace

フルCGのウルトラマン!?

写真に3Dオブジェクトを違和感無く合成する『3DPhotoM...

BlenderのPython環境にPyTorchをインストー...

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

WordPressプラグインの作り方

PGGAN:段階的に解像度を上げて学習を進めるGAN

Twitter APIのPythonラッパー『python-...

写真から3Dメッシュの生成・編集ができる無料ツール『Auto...

オープンソースの人体モデリングツール『MakeHuman』の...

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

Maya LTでFBIK(Full Body IK)

BlenderのRigifyでリギング

映画『ゴジラ-1.0』 メイキング情報まとめ

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

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

スクラッチで既存のキャラクターを立体化したい

Physically Based Rendering

Accord.NET Framework:C#で使える機械学...

Managing Software Requirements...

コメント