Processing＆シェーダーと振り返る2019年
本記事はProcessing Advent Calendar 2019の３日目の記事です。
2019年もそろそろ終わり。今年はProcessingでシェーダーに挑戦して、いろいろ新しいことができるようになった年でした。
というわけでこの記事は、私はこんな風にシェーダーの勉強して遊んだ！という自分語りです。技術的な情報は少なめなので、なんか楽しそう、くらいに見ていただければ幸い。
シェーダーって？
使ったことのない方のためにざっくり説明すると（Processingのfilter()関数で使う）シェーダーは、画面の全ピクセル書き換えを高速に行うことができる仕組みです。
専用の言語GLSLを用いて、並列処理を行うことで高速表示しているとのこと。
ほんとはもっと色々なことができるのでしょうけれど、私はもっぱらこの用途で使ってます。
アドカレのネタにしようと、Processing点描とシェーダーの速度比較。右がシェーダー。速い！ pic.twitter.com/ApBBtsc9gz
— ryotako (@ryotakob) December 1, 2019
これを使ってどんなものができるかというと...
こんなのや、
こんなのや、
こんなのや、
こんなの。いろいろできます！
シェーダーとの出会い
今年の１月。なにやら「シェーダー」というすごいものがあるらしい、と意識したきっかけは水落さんのシェーダーガチャでした。
水落さん(@_mizumasa)のシェーダーガチャやってみた！シェーダー使うの初めてだけど、すごいなぁこれ。
— ryotako (@ryotakob) January 3, 2019
あとシェーダー速い！Processingだけでこんな全ピクセル書き換えなんてやったらすっごい時間かかりそう。
実行する度にシェーダーを生成する数式ガチャつくってみた https://t.co/jdb2HIAMDZ pic.twitter.com/cxBEYCwOEr
このときはコレがなんなのかよく分からず、コピペしたコードを動かすとすごい速さで画面が更新されていくのにただびっくりしていました。
シェーダーに興味を持ったものの、水落さんのコードはシェーダーを自動生成するようになっていて解読が大変そう。もっとシンプルな例はないかしら... と思っていたところに出会ったのがritocoさんの記事でした。
#PCD2019 までにシェーダーの勉強をすべく、ritocoさんの記事を参考にさっそく挑戦！
— ryotako (@ryotakob) January 7, 2019
動いた、けどエラーメッセージも出ちゃったのが不穏。ググったらmac bookに特有のエラーらしい。むむむ
【２０１９】あけましておめでとうございます - ritocoがナニかやってます。 https://t.co/lW7Y1Ywz1x pic.twitter.com/KCPtwFGvke
エラーが出るけど、とりあえず動いた！
さらに、上のツイートでも少し触れていますが、この時期ちょうどProcessing Communitiy Day Tokyo 2019が開催されました。ウェブサイトを見ると、なんとシェーダーを用いたワークショップ(by FMS_Catさん)があるじゃないですか！
せっかくの機会なので出てみたい... でも私なんかが参加して大丈夫か...? シェーダー触り始めたばかりなんだけど... と思いつつも、思い切って参加登録！
なめらかCatとは...? #PCD2019 pic.twitter.com/FStaIyFpNA
— ryotako (@ryotakob) February 2, 2019
ワークショップ楽しかった！いろいろ出来ることとやりたいことが増えたぞ！ #PCD2019
— ryotako (@ryotakob) February 2, 2019
ワークショップも他の講演もすごく楽しかったです。講師の皆さん、運営の皆さんありがとう...!
で、自分でも少しずつ作れるようになってきたので、作品をTwitterに上げたり、ちょうどサービスが始まったNEORTに上げたり、はぅ君さんのつぶやきProcessing（Advent Calenderの昨日の記事を参照！）にシェーダーをねじ込んだりしました。
size(360, 360, P2D)
— ryotako (@ryotakob) August 10, 2019
clear()
f = open("a", "w")
f.write("void main(){vec2 p=gl_FragCoord.xy/36-5;gl_FragColor=vec4((sin(dot(p, p.yx))));}")
f.close()
filter(loadShader("a")) #つぶやきProcessing pic.twitter.com/s9rQCNlt9S
本日のシェーダーガチャ #glsl pic.twitter.com/3lNfEy3hRo
— ryotako (@ryotakob) October 2, 2019
本日のシェーダーガチャその２！
— ryotako (@ryotakob) October 8, 2019
いいぞ、すごくよくわからない感じだ！ #glsl pic.twitter.com/UooOJ8ZSfP
これあまり意識してなかったんですが、「本日のシェーダーガチャ」で作品を上げるのは水落さんの「今日のシェーダーガチャ」の影響をすごい受けてますね。
まとめ＆これから
「図形を並べる」感じのこれまでのProcessingと違って、「模様を描く」みたいな、また別の楽しさがあるシェーダー。
振り返ってみると、ほんと色々な方の記事を参考にさせてもらってます。
これまではProcessingのfilter()関数で画面全体を書き換えることが多かったんですが、実は立体図形に効果を貼り付けたりもできるらしいです。
（よく分かっていないのですが...）
お休みなのでごろごろしている #Processing pic.twitter.com/QdCYGqrpuv
— ryotako (@ryotakob) August 14, 2019
あと、レイトレーシング（レイマーチング？）という凄い何か（漠然）があるらしいので、来年はこれも勉強したい...!
Processing＆シェーダー、素敵な一年をありがとう。来年もよろしく！
この記事が気に入ったらサポートをしてみませんか？