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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

Siggraph Asia 2009 カンファレンスの詳細

ラクガキの立体化

『手を動かしながら学ぶエンジニアのためのデータサイエンス』ハ...

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

Webスクレイピングの勉強会に行ってきた

ブラウザ上でJavaScript,HTML,CSSを書いて共...

『Geocities-izer』 どんなWebページも一昔前...

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

プログラムによる景観の自動生成

布のモデリング

TensorSpace.js:ニューラルネットワークの構造を...

ラクガキの立体化 進捗

OpenCV 3.1から追加されたSfMモジュール

ZBrushのハードサーフェイス用ブラシ

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

Blenderでよく使うaddon

SVM (Support Vector Machine)

pythonもかじってみようかと

MB-Lab:Blenderの人体モデリングアドオン

Gource:バージョン管理の履歴を可視化するツール

ファンの力

Maya 2015から標準搭載されたMILA

R-CNN (Regions with CNN featur...

OpenCV3.3.0でsfmモジュールのビルドに成功!

3Dモデルを立体視で確認できるVRアプリを作っている

MeshroomでPhotogrammetry

OpenMayaのPhongShaderクラス

Open Shading Language (OSL)

ZBrushCoreのTransposeとGizmo 3D

ZBrushのUV MasterでUV展開

トランスフォーマー :リベンジのメイキング (デジタルドメイ...

Dlib:C++の機械学習ライブラリ

ROSの薄い本

Manim:Pythonで使える数学アニメーションライブラリ

ZBrushで仮面ライダーBLACK SUNを作る 頭部~バ...

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

Maya LTのQuick Rigを試す

Mean Stack開発の最初の一歩

単純に遊びに行くのはだめなのか?

Houdiniのライセンスの種類

SIGGRAPH ASIAのマスコット

Texturing & Modeling A Pro...

コメント