Revision2020 PC 64K Intro 優勝作品『RE: SIMULATED』の技術解説 | gam0022.net
4月10日～4月13日に世界最大のデモパーティRevision 2020に参加しました。 Revision 2020内で開催されたコンペのうち、PC 64K Introという64KBの容量制約のある部門で『RE: SIMULATED by gam0022 & sadakkey』という作品を発表しました。 Tokyo Demo Fest 2018に続き、私（@gam0022）が映像を、さだきちさん（@sadakkey）が音楽を制作しました。 ……なんと、本作品が参加者投票により1位に選ばれました！ 日本人のチームがPC 64K Intro部門で優勝するのは Revision 史上初です。とても嬉しいです！ 本記事では、技術解説をメインに、『RE: SIMULATED by gam0022 & sadakkey』を紹介したいと思います。 作品へのリンク WebGLとWebAudioによる64K
レイトレ合宿7でレイマーチング対応のGPUパストレーサーを実装しました！ | gam0022.net
9月7日(土)～9月8日(日)に猪苗代湖で開催されたレイトレ合宿7に参加しました。 自作のレンダラーでこんな画像を 60秒の制限時間 でレンダリングして4位をいただきました！ ちなみに4K解像度（3840x2160）です！ 事前に本番環境で動作確認できなかったこともあり、よく見ると意図しないアーティファクトが発生しているのですが、許容レベルに収まったのはラッキーでした。 レイトレ合宿とは レイトレ合宿は完全自作のレイトレーサーを走らせて画像の美しさを競うイベントです。 参加者はレンダラーを自作する必要がある！というだけで面白いイベントなのですが、レンダリングの制限時間が毎年どんどん短縮されているのも注目ポイントです。 第1回のレンダリング合宿では制限時間が1時間だったのですが、第7回となる今年は60秒制限でした。 この制限時間はレンダラーを起動してから画像を保存するまでの時間なので、シーン
[Unity] Y軸ビルボードシェーダーの実装と解説 | gam0022.net
改訂版の記事を書きました（2021-12-23） この記事の方法は古いので、改訂版を参考にしてください。 [Unity][URP] Y軸ビルボードシェーダー | gam0022.net こんな感じのY軸のビルボードをC#スクリプトを使わずに、シェーダーだけで実装しました（Unity 2018.3.12f1）。 GitHubリポジトリ: gam0022/unity-legacy-render-pipeline-experiments/blob/master/Assets/Experiments/Billboard この記事の要約 頂点シェーダーでView行列の回転（カメラに応じた回転）をスキップすれば、ビルボードができる Unityは左手系座標だが、 View空間では右手系座標 なので、View変換をスキップするときには自前でZの符号を反転する必要がある Y軸のビルボードが必要なら、View
![[Unity] Y軸ビルボードシェーダーの実装と解説 | gam0022.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/52b734626dc1d594f2fa2232f1ebaa847a6375e2/height=288;version=1;width=512/https%3A%2F%2Fgam0022.net%2Fimages%2Fposts%2F2019-07-22-unity-y-axis-billboard-shader%2Fthumbnail_up.jpg)
GLSL Compoに役立つ！GLSL Sandbox互換のVSCode拡張『Shader Toy』の紹介 | gam0022.net
GLSL Compoに役立つ！GLSL Sandbox互換のVSCode拡張『Shader Toy』の紹介 これはWebGL Advent Calendar 2018の24日目の記事です。 みなさんはGLSL Sandboxのシェーダーをローカルで編集したりgitで管理したいと思ったことはありませんか？ VSCodeの拡張機能の『Shader Toy』をインストールすれば簡単に実現できます。 Shader Toy - Visual Studio Marketplace 本拡張はShadertoyとGLSL Sandboxの互換性を備えており、 どちらのコードも修正なしにそのまま動作できます！ WindowsとMacの両方に対応しています。 次の画像はTraveler2 by kaneta（Tokyo Demo Fest 2018 GLSL Compo優勝作品）をVSCode上で動作させた様
Tokyo Demo Fest 2018のDemo Compo優勝作品の解説（グラフィック編） | gam0022.net
これはKLab Engineer Advent Calendar 2018の12日目の記事です。 12月1日～12月2日に秋葉原で開催されたTokyo Demo Fest 2018（以下、TDF）に参加しました。 TDFは、日本国内で唯一のデモパーティです。 コンピュータを用いて作成された楽曲や映像作品をデモと呼び、 デモに関心のある人々が一堂に会してコンペティションを行ったり、技術を共有したりといったイベントをデモパーティと呼びます。 今年のTDFでは、さだきちさん（@sadakkey）とチームを組み、『WORMHOLE』（映像：gam0022 / サウンド：sadakkey）という作品を発表しました。 Windows実行ファイル形式のデモ作品のコンペティションであるCombined Demo Compoにて、本作品が1位に選ばれました！ この記事では『WORMHOLE』の映像制作技術に
レイトレ合宿6 参加報告 前編（準備編） | gam0022.net
これはレイトレ合宿6の参加報告の記事の前編です。 記事が長くなったので、前編と後編の2つに分けました。 この記事では前編（準備編）ということで、自作レンダラーに実装した機能や手法の紹介を行います。 後編（当日編）はこちらです。 レイトレ合宿6 参加報告 Part2（当日編） | gam0022.net 9月1日(土)～9月2日(日)に神津島で開催されたレイトレ合宿6に参加しました。 レイトレ合宿は完全自作のレイトレーサーを走らせて画像の美しさを競うイベントです。 参加者の中には、Arnold RendererやRadeon ProRenderといった商用のレンダラーの開発者、 SIGGRAPH 2017で発表された研究者など、グラフィック分野の最先端で活躍されている方々もいらっしゃり、大変刺激を受けました。 私は今年で3回目の参加になります。過去の参加報告はこちらです。 レイトレ合宿5‽に
Unityでメガデモ制作に挑戦（uRaymarchingとTimelineを試す） | gam0022.net
これは Unity #2 Advent Calendar 2017 21日目の記事です。 デモシーン界隈では、美しいCGアニメーションをリアルタイムに生成するプログラムを「デモ」と呼びます。 今回はUnityを使ったデモの制作に初挑戦しました。 13秒の短い無音の動画です。 作品の解説 「レイマーチングで動的に生成したモデル」と「ポリゴンメッシュのモデル」を混在させた作品です。 ロボットは通常の3Dモデルですが、床や柱のモデルはレイマーチングでプロシージャルに生成しました。 レイマーチングにはuRaymarchingというAssetを利用しました。 映像作品と相性が良さそうなので、Unity2017のTimelineも利用しました。 今回は試作という意味から、uRaymarchingとTimelineの他にも様々なアセットを試しました。 色々と試行錯誤をしたので、この記事ではそのノウハウを
カメラ行列からレイトレ用のレイを生成する | gam0022.net
これはKLab Advent Calendar 2017の11日目の記事です。 はじめに 先日、three.jsのexamples（公式サンプル集）で紹介されている「raymarching / reflect」に関して、2つのPRを送ってマージされました。 Improve raymarching example by gam0022 · Pull Request #12792 · mrdoob/three.js Improve raymarching example v2 by gam0022 · Pull Request #12801 · mrdoob/three.js 内部的なリファクタリングですので、目に見える変化はまったくありません。 レイトレーシングやレイマーチングでは、レイを生成する処理が必要です。 そのレイの生成処理を改良しました。 上記のPRでは、カメラ行列（モデル行列 +
ISUCON7予選で81位でした | gam0022.net
会社の同期（@kanetaaaaa）とチーム「アロマゲドン」を結成して、ISUCON7予選に参加しました。 ISUCONは、お題となるWebサービスに対して、決められたレギュレーションの中で高速化を図るチューニングバトルです。 チーム名のアロマゲドンは、TVアニメ『プリパラ』に登場する白玉みかんさんと黒須あろまさんの2人組アイドルユニットの名前をお借りしました。 本チームでは、白玉みかんさん役を私が、黒須あろまさん役をkanetaaaaaさん（以下、あろま）が務めました。 予選結果は、407チーム中81位で、最終スコアは46,461でした。 アプリのチューニングはある程度はできたのですが、GET /iconsの帯域問題に対処できなかったのが敗因でした。 来年の予選突破に向けて、反省と感想を残そうと思います。 事前準備 私は過去にISUCON5に参加していますが、あろまはISUCON初参加だ
レイトレ合宿5‽に参加して、Rustでパストレーシングを実装しました！ | gam0022.net
9月9日(土)～9月10日(日)に諏訪湖で開催されたレイトレ合宿5‽に参加しました！ レイトレ合宿は完全自作のレイトレーサーを走らせて画像の美しさを競うイベントです。 去年に初参加させていただき、今年で2回目の参加になります。去年の参加報告はこちらです。 私はRustでパストレーサ（Hanamaruレンダラー）を実装して、こんな感じの画像をレンダリングしました。 今年は16人中9位なので、去年の13人中10位よりは進歩しました！ ↑リンクをクリックするとオリジナルの可逆圧縮の画像になります。 ソースコードはGitHubに公開しています（スターください）。 https://github.com/gam0022/hanamaru-renderer/ こちらは合宿当日のプレゼン資料です。 今年もレンダリング分野の最先端で活躍されている方々がたくさん参加されていました。 趣味でRedqueenレン
正解するカドの「カド」をレイマーチングでリアルタイム描画する | gam0022.net
今夜はアニメ「正解するカド」の最終回ですね。 フラクタル図形（カド）や折り紙（ワム）が重要な要素になっていて、個人的にとても刺さるアニメでした。 最終回は楽しみですが、今日で終わってしまうと思うと寂しくも感じます。 さて、レイマーチング（スフィアトレーシング）は「カド」のようなフラクタル図形の描画がとても得意です。 そこで、WebGLによるレイマーチングでカドのレンダリングに挑戦しました！！ レイマーチングでカド(MandelBox)を描画した結果です。 次のリンクからブラウザ上から動かすこともできます。 http://gam0022.net/webgl/#raymarching_kado PauseをOFFにすると、カドがアニメーションします（負荷注意）。 描画の負荷が重たすぎる場合には、Pixel Ratioを1/2xか1/4xにしてください。 解説 制作における工夫点や参考資料を紹介
WebGLパストレーシングを技術書典2のためにブラッシュアップ | gam0022.net
4/9（日）にアキバ・スクエアで開催される技術書典2に参加します。 技術書典は技術書のみを扱うコミケようなイベントです。 去年に引き続き、技術サークルTechBoosterのWeb本の著者のひとりとして参加します。 今回は『Think Web』の『第6章 まるで実写！？GPUパストレーシングのWebGL実装』を担当しました。 Think Web | TechBooster in TBF02 技術書典２（2017/4/9） あ-01,02 パストレーシングとは？ パストレーシングは3Dの描画手法のひとつで、現実世界に近い光の振る舞いをシミュレートすることで、大域照明を考慮した写実的なレンダリングを可能にします。 実際にハリウッド映画などの写実的なCGの多くには、パストレーシングやパストレーシングを発展した手法が採用されています。 写実的なレンダリングができる反面、処理時間が膨大にかかるという
距離関数のfold（折りたたみ）による形状設計 | gam0022.net
レイマーチング（別名 Sphere Tracing）とは、距離関数と呼ばれる数式で定義したシーンに対して、レイの衝突判定を行って絵を出す手法です。 この距離関数に対し、fold（折りたたみ）の操作を行うと、万華鏡のような美しい形状や、フラクタルのような複雑な形状の設計が可能です。 先日のTokyoDemoFest2017でも、このfoldを用いた作品を投稿しました。 #TokyoDemoFest 2017 の GLSL Graphics Compo で3位入賞！ | gam0022.net Fusioned Bismuth | gam0022.net Fusioned Bismuth | Shadertoy この記事では、距離関数のfoldについて、解説していきます。 2Dのfold 分かりやすさのために、まずは2Dの例から説明します。 2Dのfoldの分かりやすい例は「鏡文字」です。 ア
#TokyoDemoFest 2017 の GLSL Graphics Compo で3位入賞！ | gam0022.net
2017年2月18日(土)・19日(日)の2日間に開催されたTokyo Demo Fest 2017に参加しました。 去年に引き続き、2回目の参加でした。去年の記事はこちらです。 #TokyoDemoFest 2016 の GLSL Graphics Compo で3位入賞！ Tokyo Demo Fest(TDF)とは、こんなイベントです（公式サイトからの引用）。 Tokyo Demo Fest は日本で唯一のデモパーティです。 デモパーティは、コンピュータを用いたプログラミングとアートに興味のある人々が日本中、世界中から一堂に会し、デモ作品のコンペティション(コンポ)やセミナーなどを行います。また、イベント開催中は集まった様々な人たちとの交流が深められます。 今年は、なんと私の勤め先であるKLab株式会社もTDFにパートナーという形で参加させていただきました！ 去年の様子を紹介したこと
gam0022.net - gam0022.net
細田 翔 / Sho Hosoda @gam0022 ソフトウェアエンジニア / グラフィックスエンジニア KLab株式会社 略歴 / Biography 群馬県出身、東京在住。グラフィック特化型のUnityエンジニア。 中学生時代（2007年頃）にHSPと出会いゲームプログラミングに熱中する。 中学生ながら開発したゲームが2度もWindows100%に掲載される。 2011年に筑波大学情報学群情報科学類へ入学。 在学中にはTwinCalという筑波大学に特化した時間割のWebアプリケーションを開発する。TwinCalは在学生に広く利用され、学生のためのアプリ開発コンテストのファイナリストにも採択される（後輩に運用を引き継ぎ、現在も運用されている！）。計算幾何学とグラフィックス研究室に所属し紙模型に特化したCADに関する研究を行い、その業績を評価され筑波大学情報学群長表彰を受賞する。 さらに
OctopressからHugoへ移行する方法 | gam0022.net
当サイトはOctopressを使って生成していたのですが、このたびHugoに移行することにしました。 この記事ではHugoに移行した経緯と、Hugoへの移行手順についてまとめます。 なおローカル環境はMac OS Xです。 Octopressを辞めた理由 Octopressを辞めた理由は、記事数の増加に伴い、サイトの生成に時間がかかるようになってしまったからです。 HugoではOctopressに比べてサイトの生成時間が短いことから、Hugoに移行することにしました。 現在の記事数でのサイトの生成時間は、Octpress(rake generateコマンド)で 20.39秒、Hugo(hugoコマンド)では 2.66秒でした！ 他にも、Octpressは直近のコミットが半年前のもので、活発にメンテナンスされていないと感じたことも、Hugoへ移行した理由の1つです。 Hugoのインストール
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
先頭にコピペするだけ！Shadertoy → GLSL Sandbox / NEORT の移植用ヘッダーコードの紹介 | gam0022.net
レイトレ合宿6 参加報告 後編（当日編） | gam0022.net
Let's EncryptでHTTPS対応しました | gam0022.net
ServersMan@VPSからConoHaに引っ越しました | gam0022.net