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

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


スポンサーリンク

Normal Mapping with Javascript and Canvas





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

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

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


スポンサーリンク

関連記事

OpenCV 3.3.0 contribのsfmモジュールのサンプルを動かしてみる

ZBrushでアマビエを作る その2

3Dスキャンしたテクスチャから照明を除去するUnityツール『De Lighting tool』

CGWORLD CHANNEL 第21回ニコ生配信は『シン・ゴジラ』メイキングスペシャル!

SONY製のニューラルネットワークライブラリ『NNabla』

Webサイトのワイヤーフレームが作成できるオンラインツール

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

書籍『ROSプログラミング』

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

Google App Engine上のWordPressでAmazonJSを利用する

SculptrisとBlenderで作ったGodzilla 2014 (Fan Made)

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

ZBrushのキャンバスにリファレンス画像を配置する

組み込み向けのWindows OS 『Windows Embedded』

Google App Engine上のWordPressでFlickrの画像を貼る

ブログのデザイン変えました

NeRF (Neural Radiance Fields):深層学習による新規視点合成

ブラウザ操作自動化ツール『Selenium』を試す

OpenMesh:オープンソースの3Dメッシュデータライブラリ

ポリ男からMetaHumanを作る

Pix2Pix:CGANによる画像変換

生物の骨格

AnacondaとTensorFlowをインストールしてVisual Studio 2015で使う

Mayaのプラグイン開発

書籍『メイキング・オブ・ピクサー 創造力をつくった人々』を読んだ

Mayaでリアルな布の質感を作るチュートリアル

clearcoat Shader

ROMOハッカソンに行ってきた

映画『ジュラシック・ワールド』のVFXメイキング

IronPythonを使ってUnity上でPythonのコードを実行する

『手を動かしながら学ぶエンジニアのためのデータサイエンス』ハンズオンセミナーに行ってきた

Photogrammetry (写真測量法)

TensorFlowでCGを微分できる『TensorFlow Graphics』

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

OpenCVで平均顔を作るチュートリアル

オープンソースのテクスチャマッピングシステム『Ptex』

OpenVDB:3Dボリュームデータ処理ライブラリ

geometry3Sharp:Unity C#で使えるポリゴン操作ライブラリ

OpenCVで顔のモーフィングを実装する

ラクガキの立体化 分割ラインの変更・バランス調整

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

C++始めようと思うんだ

コメント