event, CG, レイマーチング, TokyoDemoFest, WebGL, GLSL, 発表資料, 登壇
昨日の2/14（バレンタインデー）に開催されたThe Tokyo Demo Fest team presents: メガデモ勉強会2021に参加しました。

私は「64KBのWebGLデモを実装する技術とデモ制作から得た『学びと発見』」というタイトルで発表を行いました。

発表スライドはこちらです。

Read more

シェーダー, event, GLSL, Unity
ネームカード

9/8～9/12に開催されたKLab Expert Camp（KEC）の第2回にメンターとして参加しました。

今回のKLab Expert Campは「シェーダー」がテーマでした。

5日間（平日4日間＋土曜日に成果発表＆懇親会）の日程でひたすらシェーダーを書き続けるという、エクストリームかつ珍しい内容の技術系インターンです。

当日の様子はハッシュタグ #KLabExpertCamp から確認できます。

Read more

CG, レイマーチング, Revision, WebGL, GLSL, TypeScript, JavaScript, TokyoDemoFest, Unity
CGWORLD vol.266（2020年10月号）に「デモシーンを支えるプロシージャル技術」という記事を寄稿しました

9/10（木）発売のCGWORLD vol.266（2020年10月号）に「デモシーンを支えるプロシージャル技術」という記事を寄稿しました。

デモシーンの魅力や、64KB制限で映像作品を創るための3Dモデルやテクスチャのプロシージャル生成について解説しています。

この記事をきっかけにCGWORLD読者の方々にもデモシーンに興味をもっていただき、国内のデモシーンが盛り上がっていくことを願っています。

もちろん自分の活動を知っている方々もお手に取っていただければとても嬉しいです！

Read more

event, CG, レイマーチング, Revision, WebGL, GLSL, TypeScript, JavaScript
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』を紹介したいと思います。

resimulated-collage

Read more

event, CG, Slide, レイマーチング, TokyoDemoFest, GLSL
2019/11/28にデジタルハリウッド大学で開催された近未来教育フォーラムの 「The Real Time Live & Reception リアルタイムグラフィックスの世界とVTuberが牽引する新たな人類」というイベントに登壇しました。

@FL1NEさんと一緒にデモシーンについて話しました。 私は簡単なシェーダーライブコーディングをしながらプログラミングによる形状のモデリングについて解説しました。

シェーダーライブコーディング（初期）

Read more

GLSL, 小ネタ, レイマーチング, Shadertoy, GLSL Snadbox, NEORT
更新履歴

  • 2021-11-16 backbufferとマウスの対応
  • 2023-05-02 twigl(classic 300es)について追記

ShadertoyのコードをGLSL Sandboxに一発で移植するコードを思いつきました。

以下のコードをShadertoyのコードの先頭にコピペするだけで、元のコードには一切手を加えずにGLSL Sandbox用のコードに変換できます。

// BEGIN: shadertoy porting template
// https://gam0022.net/blog/2019/03/04/porting-from-shadertoy-to-glslsandbox/
precision highp float;

uniform vec2 resolution;
uniform float time;
uniform vec2 mouse;
uniform sampler2D backbuffer;

#define iResolution resolution
#define iTime time
#define iMouse (vec4(mouse, 0.5, 0.5) * resolution.xyxy)
#define iChannel0 backbuffer
#define texture texture2D

void mainImage(out vec4 fragColor, in vec2 fragCoord);

void main(void) {
    vec4 col;
    mainImage(col, gl_FragCoord.xy);
    gl_FragColor = col;
}
// END: shadertoy porting template

Shadertoyのマルチパスやテクスチャ機能をつかったShaderの移植はできませんが、普通の1パスのShaderなら移植できると思います。

ぜひ使ってみてください！

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, 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

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

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

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

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

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

Read more