RC Tracing

リンク

アクセス

使用方法

サンプリング数

レンダリングする光の本数です。光の本数が多いほど処理は重くなりますが像は明るくなり、きれいになります。

光速

光の速さを設定します。数値が大きければ大きいほど処理は速くなりますが、当たり判定の処理が大まかになります。

アイリス

カメラで言う「絞り」の大きさを設定します。スケールは「F値」とは異なります。大きくするほどカメラに入る光の量が増え、像が明るくノイズが少なくなり、ピントがズレるとより大きくボケるようになります。アイリスは数値を大きくしてもほとんど処理には影響しません。

フォーカス

画像のピントが合う位置を設定します。小さくすると遠くのものに焦点が合います。

スケール

画像の大きさを設定できます。数値を大きくすればするほど、ズームしたような画像になります。

解析

設定が終わったら「解析」というボタンを押すと処理が始まります。処理が終わるまで時間がかかることがあります。レンダリング結果はボタンの上に表示されます。

解析が終わってからも、再び「解析」を押すことでより画像を明るくすることができます。その際、「サンプリング数」と「光速」以外のインスペクタを変更しないでください。像がブレたように映ることがあります。

もう一度初めからやり直すときは「クリア」というボタンを押します。

レンダリング方法について

この作品は、光の筋を一つ一つレンダリングして画像を生成する方法を用いています。

実際は光は光源から出ているので、光源からレンダリングするとよりリアルな画像を生成できますが、以前のレイトレーシング Ray Tracingでは、軽量化のためにカメラのピクセル側からレンダリングを行っていました。そのため、カメラのピクセルが基準となってしまい、光がレンズなどで密集しているところなどでは明るさがうまく表現できないという問題点がありました。

このプロジェクトでは実際と同じようにレンダリングを光源からしています。このレンダリング方法はその特性からボケができます。今までこの方法を試したときは画像全体がボケてしまいましたが、最近になって画像の一部に焦点を合わせてレンダリングできる方法を思いついたため、実際にJavaScriptで作りました。

また、JavaScriptで作ったため、Scratchと比べて大幅に軽量化できました。

詳しいレンダリング方法については、こちら(抽象的な表現を多く含みます)に書いています。

更新内容

0.0

1.0

描画の処理をまとめて行うことで、前回のレンダリングエンジンよりもパフォーマンスを向上させました。

0.0は入ってきた光から座標を求め、その座標に描画していましたが、今回はあらかじめ設定した画像の各ピクセルに座標に応じて色の情報を入れるように変更しました。これによってよりレンダリングされたピクセルを使ってノイズの少ない画像を出力できるようにしています。また、出力画像の解像度を変更できるようにしました。解像度を下げることでもノイズをより減らすことができます。

あとでまとめて描画する仕様に変更したため、全体的な画像の明るさに応じてセンサーの感度を変える機能をつけることができました。前回はサンプリングを増やすとその分画像の明るさが増えていきましたが、今回は画像からランダムな点を抽出し、自動で画像の明るさを変更することができるようにしました。

1.1

このレンダリングエンジンは光の方からレンダリングを行うため、明るい部分と暗い部分でのノイズの差が問題でした。今回は暗い部分は解像度を下げて描画することで、より画像のざらざら感を下げつつ、全体の解像度を落とすことに比べてでディティールを維持することができました。

このプロジェクトは明るさが一定以下のピクセルについては解像度を縦横それぞれ2分の1にしてレンダリングしています。

1.2

今までのバージョンでは、光の角度をx, y座標を使って生成していました。そのため、ランダムな向きで生成する際に球体の上下の部分に光が偏ってしまうことが問題でした。このバージョンでは、光の角度をランダムな3次元上の球の位置で生成してからそれを角度に変換することでより自然な光の表現ができるようにしました。

「自動的に書き出し」のチェックボックスにチェックを入れると、連続的にレンダリングをする機能も追加しました。

2.0

RC Tracing 1.2まではレンダリングを続けているとメモリの制限によって途中でレンダリングが止まってしまったり、画像が乱れてしまうことがありました。このバージョンではそれを対策してもっとレンダリングを続けられるようにしました。

メモリを効率よく使うことで、レンダリングの速度自体も向上しました。

具体的には、レンダリングした後にその画像の1番明るいピクセルを下に画像全体のあかるさを調節し、メモリによる停止が起こらないようにしました。

ブラウザを閉じようとしたときに、レンダリングをしていた場合は確認画面が表示されるようにしました。

2.1

面がまっすぐになるようにシーン全体を回転させ、反射を処理してから逆に回転することで、曲面のレンダリングに対応させ、乱反射の精度を向上させました。

具体的には、レンダリングした後にその画像の1番明るいピクセルを下に画像全体のあかるさを調節し、メモリによる停止が起こらないようにしました。