event, CG, Slide, レイマーチング, TokyoDemoFest, Unity
6/19に開催されたUnityエンジニアによるShader勉強会！で「Unity×レイマーチングによる映像制作の実践手法」という発表をしました。

Read more

event, CG, Slide
Mercari GDC 2019 報告会に登壇しました。

私はレンダリング系セッションの紹介に加えて、Meetupはいいぞ！という話をしました。

Read more

event
先週（3/18〜3/22）、アメリカのサンフランシスコで開催されたGDC2019に参加しました。

GDCは初参加でしたが、スポンサーセッションで登壇したり、Unity本社でUnity Profilerのミーティングを行ったり、 Meetupに参加して海外のシェーダーやWebGLのエンジニアと交流したり、Stadiaの遅延を味わったりと、セッションの聴講だけでなく貴重な体験をたくさんできました！

スポンサーセッションでの登壇

Google と KLab の2社の合同セッションReal-World Techniques and Best Practices for Optimizing Android Gamesで登壇しました。

前半はGoogleのFrancescoさんが「Android Common Performance Pitfalls」というタイトルで「Androidのパフォーマンスチューニングのはまりどころ」を紹介しました。

後半はKLabから私（@gam0022）、@ohomagic さん、@hnw さんの3人で 「Continuous Profiling for Android Game Performance Optimization」というタイトルで「CI/CDと連携したモバイル（Android）向けUnity製ゲームの自動プロファイリングシステムの構築方法」について紹介しました。

資料と動画は近日公開する予定ですので、乞うご期待ください！

Read more

event, CG, レイマーチング, TokyoDemoFest, GLSL, VSCode
これはWebGL Advent Calendar 2018の24日目の記事です。

みなさんはGLSL Sandboxのシェーダーをローカルで編集したりgitで管理したいと思ったことはありませんか？

VSCodeの拡張機能の『Shader Toy』をインストールすれば簡単に実現できます。

本拡張はShadertoyとGLSL Sandboxの互換性を備えており、 どちらのコードも修正なしにそのまま動作できます！

WindowsとMacの両方に対応しています。

次の画像はTraveler2 by kaneta（Tokyo Demo Fest 2018 GLSL Compo優勝作品）をVSCode上で動作させた様子です。

traveler2

導入方法と使い方

導入方法と使い方は簡単です。

導入方法

install

  1. 拡張機能のウィンドウを開く
  2. 「shadertoy」で検索
  3. インストールボタンを押す

使い方

GLSLのコードを編集した状態でコマンドパレットから「Shader Toy: GLSL Preview」を開くだけです。

GLSLのコードを認識しないときは、「Shader Toy: GLSL Preview」を閉じてから再実行すると認識できる場合があります。

Read more

event, CG, レイマーチング, TokyoDemoFest, Unity
これはKLab Engineer Advent Calendar 2018の12日目の記事です。

12月1日～12月2日に秋葉原で開催されたTokyo Demo Fest 2018（以下、TDF）に参加しました。

TDFは、日本国内で唯一のデモパーティです。 コンピュータを用いて作成された楽曲や映像作品をデモと呼び、 デモに関心のある人々が一堂に会してコンペティションを行ったり、技術を共有したりといったイベントをデモパーティと呼びます。

今年のTDFでは、さだきちさん（@sadakkey）とチームを組み、『WORMHOLE』（映像：gam0022 / サウンド：sadakkey）という作品を発表しました。

WORMHOLE by gam0022 & sadakkey

Windows実行ファイル形式のデモ作品のコンペティションであるCombined Demo Compoにて、本作品が1位に選ばれました！

この記事では『WORMHOLE』の映像制作技術について解説します。 ソースコードを公開していますので、ご興味のある方はそちらもご確認いただければと思います（スターください！）。

サウンド編についてはさだきちさんが解説されています。あわせてご覧ください！

作品の概要

「ワームホールによる空間移動」をコンセプトとして、 不思議な球体がワームホールを介して非現実なデジタル空間と水平線の広がる自然空間を行き来する映像を制作しました。

不思議な球体がトンネルを進んでいくと、周囲を明滅する光がだんだんとモノクロからカラフルに変わっていきます。 トンネルの最奥にあるワームホールへ近づくほど明滅はだんだんと激しくなっていき、ホワイトアウトとともにワームホールを越えると、球体は海上に出現します。 その後、球体はじわじわと歪んでいき、戦闘機へと形を変えます。

変形中の不思議な球体の上には、私が尊敬するデモシーナーの名前を表示しました。 これはグリーティングと呼ばれるデモシーンにおける慣習です。

戦闘機はパーティクルを放ちながら海上を進み、パーティクルが一瞬だけTDFのロゴを形作ります。 そして戦闘機は元の球体に変形し、突如現れたワームホールに吸い込まれるようにして冒頭のトンネルのシーンに戻っていきます。

実装ならびに制作にはUnityを利用しました。 詳細は後述しますが、Timeline, TextMeshPro, Chinemachine, PostProcessingStack v2といったUnity 2018.2の新機能も活用しています。

Read more

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

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

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

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

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

Read more

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

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

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

score遷移

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

event, demo, CG

はじめに

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

ISUCON, event

はじめに

ISUCON5の本戦に @methane さん、@koki_cheese さん、私(@gam0022)の3人で、チーム名 lily white として参加しました。 結果は fail (サーバの再起動のテストで失格しため、スコア無し)でした。

ISUCONとは、お題となるWebサービスを限界まで高速化を図るチューニングバトルです。 私は今回のISUCONに参加するまで、インフラもパフォーマンス・チューニングも経験のない全くの素人でした。 自分の実力では本戦出場は絶対に不可能でしたので、本戦まで連れていってくださったチームのみなさんには本当に感謝しています。

ISUCONの攻略に関する有益な情報は、既に他のブログに多くのエントリーがあると思いますので、 本記事では全くの素人がどんなふうにISUCONに参加したのかを振り返っていこうかと思います。 予選+本戦を振り返るため、長文になります。すみません。 チーム全体での参加の様子は、@methane さんのブログで紹介されています。

参加のきっかけは、会社の先輩でスーパーエンジニアの @methane さんがISUCONに興味のある新人を募集していたことでした。 インフラやパフォーマンス・チューニングを学習する良い機会になりそうだと考えて、参加を決意しました。 また、大学生の @koki_cheese さんが ISUCON メンバーを募集していたので、 @methane さんが自チームに引き入れ、チーム lily white が結成されました。

Read more