event, CG, レイマーチング
3/10（土）に開催されたメガデモ勉強会! 2018で発表しました。

発表タイトルは「もっと綺麗で写実的な絵作りをしたい！レイマーチング向けのシェーディング技術」です。

発表の概要はこんな感じです。

  • レイマーチングのおさらい
  • レイマーチングでいい感じにシェーディングするための理論と実践
    • 写実的なレンダリングに不可欠な 大域照明 を説明
    • 大域照明を構成する間接照明を近似する AO を説明
    • レイマーチングによるAO計算の実装を図で解説
  • レイマーチングによるマテリアル実装のベストプラクティスを紹介

AOがどういう意味を持つのか、大域照明にどんな関係にあるのか、などを学んでいただけたら嬉しいです。 レイマーチングによるAO計算の動作原理を図で解説した日本語の資料は見たことが無いので、 この発表を聞いて「なるほどな」と思ってもらえれば幸いです。

Read more

Unity, CG, レイマーチング
これは Unity #2 Advent Calendar 2017 21日目の記事です。

デモシーン界隈では、美しいCGアニメーションをリアルタイムに生成するプログラムを「デモ」と呼びます。

今回はUnityを使ったデモの制作に初挑戦しました。 13秒の短い無音の動画です。

作品の解説

「レイマーチングで動的に生成したモデル」と「ポリゴンメッシュのモデル」を混在させた作品です。 ロボットは通常の3Dモデルですが、床や柱のモデルはレイマーチングでプロシージャルに生成しました。

レイマーチングにはuRaymarchingというAssetを利用しました。

映像作品と相性が良さそうなので、Unity2017のTimelineも利用しました。

今回は試作という意味から、uRaymarchingとTimelineの他にも様々なアセットを試しました。 色々と試行錯誤をしたので、この記事ではそのノウハウを共有したいと思います。

Unityのバージョンは執筆時点の最新版である2017.2.1f1を用いました。

Read more

CG, WebGL, レイマーチング
今夜はアニメ「正解するカド」の最終回ですね。

フラクタル図形（カド）や折り紙（ワム）が重要な要素になっていて、個人的にとても刺さるアニメでした。

最終回は楽しみですが、今日で終わってしまうと思うと寂しくも感じます。

さて、レイマーチング（スフィアトレーシング）は「カド」のようなフラクタル図形の描画がとても得意です。

そこで、WebGLによるレイマーチングでカドのレンダリングに挑戦しました！！

カド

レイマーチングでカド(MandelBox)を描画した結果です。

次のリンクからブラウザ上から動かすこともできます。

PauseをOFFにすると、カドがアニメーションします（負荷注意）。

描画の負荷が重たすぎる場合には、Pixel Ratioを1/2xか1/4xにしてください。

Read more

CG, レイマーチング
レイマーチング（別名 Sphere Tracing）とは、距離関数と呼ばれる数式で定義したシーンに対して、レイの衝突判定を行って絵を出す手法です。

この距離関数に対し、fold（折りたたみ）の操作を行うと、万華鏡のような美しい形状や、フラクタルのような複雑な形状の設計が可能です。

先日のTokyoDemoFest2017でも、このfoldを用いた作品を投稿しました。

この記事では、距離関数のfoldについて、解説していきます。

Read more

event, CG, レイマーチング, TokyoDemoFest, GLSL
2017年2月18日(土)・19日(日)の2日間に開催されたTokyo Demo Fest 2017に参加しました。

去年に引き続き、2回目の参加でした。去年の記事はこちらです。

Tokyo Demo Fest(TDF)とは、こんなイベントです（公式サイトからの引用）。

Tokyo Demo Fest は日本で唯一のデモパーティです。 デモパーティは、コンピュータを用いたプログラミングとアートに興味のある人々が日本中、世界中から一堂に会し、デモ作品のコンペティション(コンポ)やセミナーなどを行います。また、イベント開催中は集まった様々な人たちとの交流が深められます。

今年は、なんと私の勤め先であるKLab株式会社もTDFにパートナーという形で参加させていただきました！ 去年の様子を紹介したことをきっかけに、弊社内でデモシーンへの関心が高まりつつあり非常に嬉しいです。

また、個人としては「Fusioned Bismuth」という作品でGLSL Graphics Compoで3位を頂くことができました！ 自分の作品を多くの方に評価していただけて、大変嬉しいです！！ありがとうございました！

Read more

WebGL, CG, レイマーチング

Qiitaに「GPUをつかったリアルタイムなレイトレーシング」の記事を2つ投稿しました。

実際に動作するものはコチラです。WebGLなのでブラウザでそのまま動作します。

レイトレーシングは膨大な計算が必要で、一般的にはリアルタイムに行うことは困難です。

WebGLのフラグメントシェーダでレイトレーシングを実装することで、GPUの力を利用してリアルタイムに処理しようというものです。

記事で紹介している例は、iPhone6のような携帯端末でもリアルタイムに動作するくらい軽量です。

さらに面白い特徴として、ラスタライザでは難しい、相互の鏡面反射、2回以上の屈折、無限の繰り返しも実現しています。

ラスタライザで鏡面反射するためには、キューブ環境マッピングがよく用いられます。 環境マッピングとは、周囲の景色を立方体のテクスチャに入れておいて、それを参照して反射して写り込んだ景色をフェッチします。 しかし、環境マッピングだけでは、床も球体も鏡面反射するような、相互に鏡面反射するシーンは実現できません。

また屈折も環境マッピングで実現できるのですが、環境マッピングで2回以上の屈折させるのは難しい課題になります。

レイトレーシングではカメラからスクリーンの全ピクセルに対して光のシュミレーションをするため、 環境マッピングでは難しかった鏡面反射や屈折の問題を簡単に解決できるというわけです！

1つ目の記事ではレイトレーシングではなく、厳密にはレイマーチングを使っています。 レイマーチングはレイトレーシングの1種です。レイマーチングでは、シーンを距離関数で定義します。 シーンを距離関数で定義することで、mod 演算を利用した物体を無限に繰り返すことができます。

昔はレイトレーシングで1枚の絵を描画するために一晩のような長い時間が必要でした。 それが今やリアルタイムにWebブラウザ上で動作するなんて、すごい時代になりましたね。

Read more