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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

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

Amazon Web ServicesでWordPress

WebGL開発に関する情報が充実してきている

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

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

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

日立のフルパララックス立体ディスプレイ

WordPress on Google App Engine...

オープンソースの物理ベースGIレンダラ『appleseed』

Blender 4.2以降のWindowsPortable版...

Web経由でRaspberry PiのGPIOを操作したい

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

Raspberry PiのGPIOを操作するPythonライ...

ZBrushでゴジラ2001を作ってみる 目元だけ作り込んで...

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

Geogram:C++の3D幾何アルゴリズムライブラリ

iOSデバイスのためのフィジカル・コンピューティングツールキ...

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

ZBrushの作業環境を見直す

Theia:オープンソースのStructure from M...

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

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

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

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

WordPressプラグインの作り方

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

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

Deep Learningとその他の機械学習手法の性能比較

pythonの機械学習ライブラリ『scikit-learn』

天体写真の3D動画

Photogrammetry (写真測量法)

DCGAN (Deep Convolutional GAN)...

Physically Based Rendering

テスト

ZBrushでゴジラ2001を作ってみる 身体のアタリを作る

なんかすごいサイト

Ambient Occlusionを解析的に求める

MRenderUtil::raytrace

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

ZBrushで仮面ライダー3号を造る 仮面編 Dam Sta...

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

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

コメント