Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

楽しいShaderToy

4,742 views

Published on

Shaderで遊べる楽しいサイト、ShaderToyを勝手に紹介します。

https://www.shadertoy.com/

  • Be the first to comment

楽しいShaderToy

  1. 1. 楽しい ShaderToy @gyabo メガデモ勉強会 2013 Summer
  2. 2. 目的 •  ShaderToyというサイトをご紹介します •  OpenGL (GLSL )をある程度知っていると具合がいいです •  こんな方におすすめ o  FragmentShaderのフレームワークで手軽なのが無くて困ってる方 o  動画処理時、思いついたShaderを試してみたいけど環境構築だるいなど o  etc [私] @gyabo <Masaki Sasaki> 本業は組み込み屋さんです
  3. 3. もくじ •  ShaderToyとは •  作品をみてみる •  作ってみる •  アカウント登録 •  作品を投稿してみる •  ShaderToyのここがすごい •  ShaderToyのここがこわい •  ShaderToyの今
  4. 4. ShaderToyとは h*ps://www.shadertoy.com/img/logomail.png
  5. 5. ShaderToyとは ブラウザ(WebGL)でFragmentShaderを書いたり 他の人が作成した美しいShaderをコード付きで 見る事ができるソーシャルなサイト! www.shadertoy.com ※ Beautypi(beautypi.com)が運営している
  6. 6. 動作環境 ブラウザ + ゲームがある程度できるグラボが載ってるPCならOK [ブラウザ] ●Chrome 23 (オススメです) ●FireFox 17 ●InternetExplorer(IEWebGLのインストール必要) ●Safari 6 https://www.shadertoy.com/aboutより抜粋
  7. 7. サイト開くとこんな感じ
  8. 8. 作品をみてみる h*ps://www.shadertoy.com/img/logomail.png
  9. 9. その1 : 面白そうなのを適当にクリック 見た目面白そう、ヤバそうなのを適当に選んでみる
  10. 10. 画面の説明 ビュー数、イイネ数、コメント数 投稿した人の名前など ShaderCode (GLSL) スゴイ級の方々のコメント!
  11. 11. その2: これまでに投稿されたShaderを見てみる Browseをクリック!
  12. 12. すごいShaderがいっぱい表示される! これは人気順(Popular),  ほかにも最近の投稿(Newest),  お気に入り数(Love)でソートしてみることができます
  13. 13. 作ってみる h*ps://www.shadertoy.com/img/logomail.png
  14. 14. お手軽に試したい場合 New  Shaderをクリック!
  15. 15. New Shaderひらいた画面
  16. 16. 画面の使い方 Shaderが書ける場所 すぐ書ける! リソースチャンネル レンダリング結果と 経過時間とFPS
  17. 17. リソースチャンネルをクリックすると プリセットが選べる(Texture, 音楽、動画、Webcam…) 選ぶと そのチャンネルに リソースが入る
  18. 18. 用意してくれているUniform変数がいくつかあります
  19. 19. 使い方はShaderを書いたらコンパイルの繰り返し ばしばしShaderを書いたら ココをクリック! ※Alt  +  EnterでもOK
  20. 20. 表示される!たのしい! リソース変えて調子をみたり 音楽にあわせて動かしたりなどで 色々具合を見る事ができます
  21. 21. 画面はただの板ポリゴンです 立体的な画像を出すには Raytrace,  Raymarchng,  FakeEffect… など、ある程度定番の工夫が必要です。 ※ ほかの人のShaderをまねして改造するのが上達する近道! 上はただテクスチャを 表示するだけのGLSLCode
  22. 22. アカウント登録 h*ps://www.shadertoy.com/img/logomail.png
  23. 23. Sign In をクリックする! Sign  Inをクリック!
  24. 24. アカウントを作成する 必要な情報を詰めて Sign  Upをクリック すると 確認用メールが飛ぶ。 チェックすれば 登録完了。 一度登録したら で 再びログインできる
  25. 25. サインインしたら、プロフィール画面を開いてみる
  26. 26. 作ったShaderを見たり、管理する事ができます 公開中のShader 下書中のShader プロフ絵
  27. 27. 作品を投稿してみる h*ps://www.shadertoy.com/img/logomail.png
  28. 28. 投稿するには同じようにNew Shader選んで編集 に作品名、関連タグ、 コメントを書くのだが…
  29. 29. 作品名などを埋めてSubmitすれば投稿できる Publicが公開用の 設定(どっちでも良い) Draftは下書きなどに使用する。 ※一時保存でよく使う 最初はDraftで様子を見てから Publicにして投稿するのがベスト
  30. 30. Publicで投稿すると、browser -> Newestに載る! 見てくれた方が感想をくれるかもしれません!
  31. 31. ShaderToyのここがすごい h*ps://www.shadertoy.com/img/logomail.png
  32. 32. 作成したShaderに対してコメントがもらえる! スゴイ方から コメントもらえちゃったりします
  33. 33. 公式Twitterで具合の良いShaderが紹介される 掲載基準はよくわからない。 単純にView数やらイイネ数かな…
  34. 34. 非常にレベルが高いShaderが多い アカウント登録している為か ほどよい緊張感の為か…
  35. 35. プリセットが豊富(GLSL SandBoxと大きく異なる) このリソース制限で 工夫してある Shaderが多い。 つい最近WebCamまで サポートされた。
  36. 36. ShaderToyのここがこわい h*ps://www.shadertoy.com/img/logomail.png
  37. 37. 投稿した作品に 不具合があるとメールが飛んでくる! ざっくりとした意味 「あなたが投稿したShaderはこちらでは変更しないけど きちんと動作するように変更して再投稿してほしい」
  38. 38. 不具合とは?  ShaderToyのガイドラインで以下は避けてと記載      ・NaNな計算      ・ループ回数多すぎてコンパイル中にブラウザ上で            タイムアウト発生したり      ・30fps確保できていない?ものなど              (※環境に拠ると思う) 最悪rejectされる(publicからdraftに強制的に戻る) ※最近変なの投稿していないので、 もしかしたら挙動変わってるかも
  39. 39. ガイドラインは?
  40. 40. 警告のおかげか クリックしても 再生できない時 割とかなしい 作った方が懸命に直しているのか、動作しないShaderが 殆ど無い。 h*p://glsl.heroku.com/
  41. 41. ShaderToyの今 h*ps://www.shadertoy.com/img/logomail.png
  42. 42. Siggraph2013でLiveCodingするっぽい
  43. 43. まとめ 豊富なリソースが提供されているブラウザ環境での  お試しShaderを 作る時などに重宝するし、なにより動いてるの投稿したりしてたのしい!
  44. 44. おわり   ご清聴ありがとうございました! Question?
  45. 45. 補足:遊ぶ為に知っておくといいこと FragmentShaderの書き方(これだけ) h*p://my.safaribooksonline.com/book/web-­‐‑development/9781849691727/2dot-­‐‑rendering-­‐‑geometry/id286751012 Shaderはここに適用される。 用意されている入力は 今後増えるかな…

×