これはKLab Advent Calendar 2017の11日目の記事です。

はじめに

先日、three.jsのexamples(公式サンプル集)で紹介されている「raymarching / reflect」に関して、2つのPRを送ってマージされました。

内部的なリファクタリングですので、目に見える変化はまったくありません。

レイトレーシングやレイマーチングでは、レイを生成する処理が必要です。 そのレイの生成処理を改良しました。 上記のPRでは、カメラ行列(モデル行列 + プロジェクション行列の逆行列)からレイの生成するリファクタリングを行いました。

レイの生成方法というのはとても奥深いテーマで、さまざまな実装方法があります。 この記事では、今回のPRに至るまでの試行錯誤をまとめたいと思います。

raymarching / reflect とは

「raymarching / reflect」は、three.jsによるレイマーチングのGLSL(GPU)実装の技術デモです。

無数のオブジェクトの描画はレイマーチングが得意とする表現です。 レイマーチングでは距離関数を利用してシーンの形状を定義します。 距離関数にmod関数を適用すると、同じ形状を無限に繰り返す repetition を実現できます。

three.jsによるレイマーチングのGLSL(GPU)実装の技術デモ: reflect

私が2年前に実装して、three.jsのexamplesに取り込んでいただきました。その時のPRはこちらです。

解説記事もあるので、もしご興味があればあわせてお読みください。

要するに、2年前に自分で作った作品を今になって改良しました。

Read more


当サイト(gam0022.net)をLet’s EncryptでHTTPS対応しました。

HTTP対応

Let’s EncryptによるHTTPSの設定はcertbotというコマンドラインツールを利用しました。 nginxの設定変更でHTTP/2対応もできました。 どちらも驚くほど簡単で拍子抜けしました。

はてなブックマークの数が0にリセットされてしまいましたが、仕方がないので諦めました。

Read more


当サイト(gam0022.net)を動かしているサーバをServersMan@VPSからConoHaに乗り換えました。

2011/12にServersMan@VPSを契約したので、なんと6年間もお世話になりました。

ServersManさん長い間ありがとうございました。ConoHaちゃんよろしくお願いします。

引っ越した理由

結論から言うと、ServersMan@VPSで設定されているTCPのバッファサイズ制限が厳しすぎて、ブログ用のサーバとしての利用が困難になってきたからです。

去年頃から記事へのアクセスが増えると、アクセスが非常に遅くなったり、サーバが強制停止してsshすらできない状況が頻発していました。 特にサーバが停止されると管理画面からサーバを再起動するしかなくなり、非常に困っていました。

ServersMan@VPSではOpenVZというサーバ仮想化ソフトが使われています。 OpneVZのリソース情報は /proc/user_beancounters から確認できます。

Read more


会社の同期(@kanetaaaaa)とチーム「アロマゲドン」を結成して、ISUCON7予選に参加しました。 ISUCONは、お題となるWebサービスに対して、決められたレギュレーションの中で高速化を図るチューニングバトルです。

チーム名のアロマゲドンは、TVアニメ『プリパラ』に登場する白玉みかんさんと黒須あろまさんの2人組アイドルユニットの名前をお借りしました。 本チームでは、白玉みかんさん役を私が、黒須あろまさん役をkanetaaaaaさん(以下、あろま)が務めました。

予選結果は、407チーム中81位で、最終スコアは46,461でした。 アプリのチューニングはある程度はできたのですが、GET /iconsの帯域問題に対処できなかったのが敗因でした。 来年の予選突破に向けて、反省と感想を残そうと思います。

score遷移

Read more


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


12/21に開催されたemscripten night !! #2という勉強会に参加して、 「Emscriptenを使ってブラウザ上でレイトレーシングする」というタイトルで10分間のLT発表を行いました。

こちらが発表資料です。

Read more