9月9日(土)~9月10日(日)に諏訪湖で開催されたレイトレ合宿5‽に参加しました!

レイトレ合宿は完全自作のレイトレーサーを走らせて画像の美しさを競うイベントです。

去年に初参加させていただき、今年で2回目の参加になります。去年の参加報告はこちらです。

私はRustでパストレーサ(Hanamaruレンダラー)を実装して、こんな感じの画像をレンダリングしました。

今年は16人中9位なので、去年の13人中10位よりは進歩しました!

result

↑リンクをクリックするとオリジナルの可逆圧縮の画像になります。

ソースコードはGitHubに公開しています(スターください)。

Read more


今夜はアニメ「正解するカド」の最終回ですね。

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

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

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

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

カド

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

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

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

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

Read more


4/9(日)にアキバ・スクエアで開催される技術書典2に参加します。 技術書典は技術書のみを扱うコミケようなイベントです。

去年に引き続き、技術サークルTechBoosterのWeb本の著者のひとりとして参加します。

今回は『Think Web』の『第6章 まるで実写!?GPUパストレーシングのWebGL実装』を担当しました。

Think Webの表紙

パストレーシングとは?

パストレーシングは3Dの描画手法のひとつで、現実世界に近い光の振る舞いをシミュレートすることで、大域照明を考慮した写実的なレンダリングを可能にします。 実際にハリウッド映画などの写実的なCGの多くには、パストレーシングやパストレーシングを発展した手法が採用されています。 写実的なレンダリングができる反面、処理時間が膨大にかかるという弱点があります。

本の内容

私の章ではパストレーシングのGPU実装による高速化について紹介します。 しかも単純な高速化ではなく、ブラウザ上で3DCGを扱うWebAPIであるWebGLによりGPU実装することで、 ブラウザ上で動作するインタラクティブなパストレーシングを実現します。

去年12月のWebGLのアドベントカレンダーのQiita記事と同じテーマですが、内容を大幅に加筆・変更しています。 Qiitaには書ききれなかったパストレーシングの基礎や原理の部分から説明し、実際のコードを踏まえながら実装についても丁寧に解説しました。

なるべく敷居を下げるために専門用語を解説しつつ、説明が長く過ぎず短すぎず丁度いい分量になるように意識して執筆しました。 読者ターゲットは、単純なレイトレーシングは分かっているけれども、パストレーシングは難しい…という人を想定しています。

Read more


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

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

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

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

Read more


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


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

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

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

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

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

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

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

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

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

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

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

Read more


はじめに

2016-02-20〜21に開催されたTokyo Demo Fest 2016に参加しました。

Tokyo Demo Festとは、このようなイベントです(公式ページからの引用)。

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

私は”Carbon”という作品をGLSL Graphics Compoに提出して、3位入賞してきました!

さらに、three.jsの作者であり、GLSL Sandboxの作者でもあるMr.Doobと握手してきました!

今回が初参加でしたが、本当に最高のイベントでした!楽しかったです。 オーガナイザーのみなさん、参加者のみなさん、ありがとうございました!

全体のレポートについては、@h_doxasさんの記事がとても分かりやすいです。

この記事では、GLSL Graphics Compoで発表した”Carbon”という作品の裏話と、個人的に印象に残った思い出などを話します。

Carbon 製作秘話

Compo(コンポ)とは、一定の制約の中で映像や音楽の作品を製作し、投票によって順位をつけるイベントです。

今年のGLSL Graphics Compoでは、GLSL Sandbox上で動作する映像作品の順位を競いました。

GLSL Sandboxで動作させるためには、フラグメントシェーダだけで作品を実装する必要があります。 当然ですが、立体データや画像データは読み込めないので、コードだけでなんとかする必要があります。

私は”Carbon”というタイトルで作品を提出して3位入賞しました。 今年のGLSL Graphics Compoはレベルが高かったので、入賞できて嬉しかったです。

コチラから動くデモをご覧になれます!

Carbon - Blue Carbon - Green Carbon - Red Carbon - Violet

今回もレイマーチングによる作品です。

距離関数(distance function)は、Mandelboxというフラクタル図形を mod でループさせただけなので、非常にお手軽です。

Read more


バレンタインデー(2016/02/14)にGPU の熱でチョコも溶けちゃう!? GLSL シェーダテクニック勉強会でレイマーチングについて発表してきました。

シェーダというニッチな分野にも関わらず、100人以上の参加者となる熱い勉強会でした。 無料なのに出席率が高く、参加者のモチベーションが高くて良いことだなと思いました。 WebGLの普及により、Web系のエンジニアもシェーダを触ることで、シェーダの注目度が上がってきたのを感じました!

当日の様子はtogetterまとめを参考にしてください。

私は「シェーダだけで世界を創る!three.jsによるレイマーチング」という発表をしました。

シェーダだけで世界を創る!three.jsによるレイマーチング from Sho Hosoda

Read more