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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

Maya には3 種類のシェーダSDKがある?

OpenGV:画像からカメラの3次元位置・姿勢を推定するライ...

iPhone・iPod touchで動作する知育ロボット『R...

MeshLab:3Dオブジェクトの確認・変換に便利なフリーウ...

『スター・ウォーズ/スカイウォーカーの夜明け』のVFXブレイ...

ZBrushで仮面ライダー3号を造る ベース編

機械学習で遊ぶ

Unityの各コンポーネント間でのやり取り

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

Runway ML:クリエイターのための機械学習ツール

BlenderProc:Blenderで機械学習用の画像デー...

ZBrushでアヴァン・ガメラを作ってみる 頭頂部と首周りを...

Konashiを買った

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

ファンの力

JavaによるCGプログラミング入門サイト (日本語)

PyDataTokyo主催のDeep Learning勉強会

ガメラ生誕50周年

GAN (Generative Adversarial Ne...

Mixamo:人型3Dキャラクターアニメーション制作サービス

MetaHumanの頭部をBlenderで編集できるアドオン

OpenAR:OpenCVベースのマーカーARライブラリ

CGWORLD CHANNEL 第21回ニコ生配信は『シン・...

自前Shaderの件 解決しました

Google XML Sitemap Generatorプラ...

Unity ARKitプラグインサンプルのチュートリアルを読...

ジュラシック・パークの続編『ジュラシック・ワールド』

Google App Engineのデプロイ失敗

Unityをレンダラとして活用する

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

BlenderでPhotogrammetryできるアドオン

Model View Controller

PythonでBlenderのAdd-on開発

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

『ゴジラ キング・オブ・モンスターズ』のVFXブレイクダウン

ZBrush 2018での作業環境を整える

Google App Engine上のWordPressでA...

『ローグ・ワン/スター・ウォーズ・ストーリー』のVFXブレイ...

mentalrayのSubsurface Scatterin...

アクセス元IPアドレスから企業名が分かるアクセス解析『Use...

Pythonのソースコードに特化した検索エンジン『Nulle...

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

コメント