狠狠撸

楽しい
ShaderToy

@gyabo
メガデモ勉強会 2013 Summer

目的

?? ShaderToyというサイトをご紹介します
?? OpenGL (GLSL )をある程度知っていると具合がいいです
?? こんな方におすすめ
o? FragmentShaderのフレームワークで手軽なのが無くて困ってる方
o? 動画処理時、思いついたShaderを試してみたいけど環境構築だるいなど
o? etc
[私]
@gyabo <Masaki Sasaki>
本業は組み込み屋さんです

もくじ

?? ShaderToyとは
?? 作品をみてみる
?? 作ってみる
?? アカウント登録
?? 作品を投稿してみる
?? ShaderToyのここがすごい
?? ShaderToyのここがこわい
?? ShaderToyの今

ShaderToyとは

h*ps://www.shadertoy.com/img/logomail.png

ShaderToyとは

ブラウザ(WebGL)でFragmentShaderを書いたり
他の人が作成した美しいShaderをコード付きで
見る事ができるソーシャルなサイト！
www.shadertoy.com

※
Beautypi(beautypi.com)が運営している

動作環境

ブラウザ + ゲームがある程度できるグラボが載ってるPCならOK
[ブラウザ]
●Chrome 23 (オススメです)
●FireFox 17
●InternetExplorer(IEWebGLのインストール必要)
●Safari 6
https://www.shadertoy.com/aboutより抜粋

サイト开くとこんな感じ

作品をみてみる


その1 : 面白そうなのを適当にクリック
見た目面白そう、ヤバそうなのを適当に選んでみる

画面の説明
ビュー数、イイネ数、コメント数
投稿した人の名前など
ShaderCode
(GLSL)
スゴイ級の方々のコメント！

その2: これまでに投稿されたShaderを見てみる
Browseをクリック！

すごいShaderがいっぱい表示される！
これは人気順(Popular), ?ほかにも最近の投稿(Newest), ?お気に入り数(Love)でソートしてみることができます

作ってみる


お手軽に試したい場合
New ?Shaderをクリック！

画面の使い方
Shaderが書ける場所
すぐ書ける！
リソースチャンネル
レンダリング結果と
経過時間とFPS

リソースチャンネルをクリックすると
プリセットが選べる(Texture, 音楽、動画、Webcam…)
選ぶと
そのチャンネルに
リソースが入る

用意してくれている鲍苍颈蹿辞谤尘変数がいくつかあります

使い方はShaderを書いたらコンパイルの繰り返し
ばしばしShaderを書いたら
ココをクリック！
※Alt ?+ ?EnterでもOK

表示される！たのしい！
リソース変えて調子をみたり
音楽にあわせて動かしたりなどで
色々具合を見る事ができます

画面はただの板ポリゴンです
立体的な画像を出すには
Raytrace, ?Raymarchng, ?FakeE?ect…
など、ある程度定番の工夫が必要です。

※
ほかの人のShaderをまねして改造するのが上達する近道！
上はただテクスチャを
表示するだけのGLSLCode

アカウント登録


Sign In をクリックする！
Sign ?滨苍をクリック！

アカウントを作成する
必要な情報を詰めて
Sign ?Upをクリック

すると
確認用メールが飛ぶ。

チェックすれば
登録完了。
一度登録したらで
再びログインできる

サインインしたら、プロフィール画面を开いてみる

作ったShaderを見たり、管理する事ができます
公開中のShader
下書中のShader
プロフ絵

作品を投稿してみる


投稿するには同じようにNew Shader選んで編集
に作品名、関連タグ、
コメントを書くのだが…

作品名などを埋めてSubmitすれば投稿できる
Publicが公開用の
設定(どっちでも良い)
Draftは下書きなどに使用する。
※一時保存でよく使う
最初はDraftで様子を見てから
Publicにして投稿するのがベスト

Publicで投稿すると、browser -> Newestに載る！
見てくれた方が感想をくれるかもしれません！

ShaderToyのここがすごい


作成したShaderに対してコメントがもらえる!
スゴイ方から
コメントもらえちゃったりします

公式Twitterで具合の良いShaderが紹介される
掲載基準はよくわからない。
単純にView数やらイイネ数かな…

非常にレベルが高いShaderが多い
アカウント登録している為か
ほどよい緊張感の為か…

プリセットが豊富(GLSL SandBoxと大きく異なる)
このリソース制限で
工夫してある
Shaderが多い。

つい最近WebCamまで
サポートされた。

ShaderToyのここがこわい


投稿した作品に
不具合があるとメールが飛んでくる！
ざっくりとした意味
「あなたが投稿したShaderはこちらでは変更しないけど
きちんと動作するように変更して再投稿してほしい」

不具合とは？
?ShaderToyのガイドラインで以下は避けてと記載
? ? ??NaNな計算
? ? ??ループ回数多すぎてコンパイル中にブラウザ上で
? ? ? ? ? ?タイムアウト発生したり
? ? ??30fps確保できていない?ものなど
? ? ? ? ? ? ?(※環境に拠ると思う)

最悪rejectされる(publicからdraftに強制的に戻る)

※最近変なの投稿していないので、
もしかしたら挙動変わってるかも

警告のおかげか
クリックしても
再生できない時
割とかなしい
作った方が懸命に直しているのか、動作しないShaderが
殆ど無い。
h*p://glsl.heroku.com/

ShaderToyの今


厂颈驳驳谤补辫丑2013で尝颈惫别颁辞诲颈苍驳するっぽい

まとめ
豊富なリソースが提供されているブラウザ環境での ?お試しShaderを
作る時などに重宝するし、なにより動いてるの投稿したりしてたのしい！

おわり ?
ご清聴ありがとうございました！

Question?

補足:遊ぶ為に知っておくといいこと

FragmentShaderの書き方(これだけ)

h*p://my.safaribooksonline.com/book/web-?‐?development/9781849691727/2dot-?‐?rendering-?‐?geometry/id286751012
Shaderはここに適用される。
用意されている入力は
今後増えるかな…

狠狠撸

楽しい厂丑补诲别谤罢辞测

More Related Content

楽しい厂丑补诲别谤罢辞测