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

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

Normal Mapping with Javascript and Canvas





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

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

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

関連記事

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

WordPressのテーマを自作する

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

立体視を試してみた

Pix2Pix:CGANによる画像変換

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

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

BGSLibrary:OpenCVベースの背景差分ライブラリ

ZBrushでアヴァン・ガメラを作ってみる 頬の突起を作り始...

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

Maya LTでFBIK(Full Body IK)

OpenMayaRender

MFnMeshクラスのsplit関数

FCN (Fully Convolutional Netwo...

VGGT:マルチビュー・フィードフォワード型3Dビジョン基盤...

Shader.jp:リアルタイム3DCG技術をあつかうサイト

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

SVM (Support Vector Machine)

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

Live CV:インタラクティブにComputer Visi...

UnityでLight Shaftを表現する

UnityのGlobal Illumination

AndroidもopenGLも初心者さ (でもJavaは知っ...

SIGGRAPH 2020はオンライン開催

ZBrushでアヴァン・ガメラを作ってみる 壊れたデータの救...

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

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

Unity ARKitプラグインサンプルのドキュメントを読む

映画『シン・ウルトラマン』 メイキング記事まとめ

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

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

Google App Engine上のWordPressでF...

ZBrush 4R8 リリース!

Composition Rendering:Blenderに...

Blender 4.2以降のWindowsPortable版...

Digital Emily Project:人間の顔をそっく...

iPhoneアプリ開発 Xcode 5のお作法

Autodesk CompositeとAutodesk Ma...

オープンソースのロボットアプリケーションフレームワーク『RO...

動的なメモリの扱い

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

openMVG:複数視点画像から3次元形状を復元するライブラ...

コメント