並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 35 件 / 35件

新着順 人気順

GLSLの検索結果1 - 35 件 / 35件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

GLSLに関するエントリは35件あります。 glslWebGL音楽 などが関連タグです。 人気エントリには 『リアルタイムグラフィックスの数学 ―GLSLではじめるシェーダプログラミング』などがあります。
  • リアルタイムグラフィックスの数学 ―GLSLではじめるシェーダプログラミング

    2022年8月31日紙版発売 2022年8月29日電子版発売 巴山竜来 著 B5変形判/144ページ 定価2,860円(本体2,600円+税10%) ISBN 978-4-297-13034-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 本書はリアルタイムグラフィックスの基本を理解するための解説書です。 リアルタイムグラフィックス,つまり「即時に生成される」グラフィックスはいまやゲームからビデオチャットまで広く利用されており,多くの方が目にするものになっています。 この技術の根本には数学があり,数学的知識を身につけることで,多様なグラフィックスを生み出すコード

      リアルタイムグラフィックスの数学 ―GLSLではじめるシェーダプログラミング
    • ●●WebGL(PIXI.js + glsl)と物理演算(matter.js)で可愛い絵本風タピオカ作ったので解説●● - Qiita

      こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます(スマホ未対応): https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaScriptの描画エンジンの定番の一つであるPIXI.jsと、物理演算ライブラリのmatter.jsを使って、タピオカを可愛くふわふわさせる表現のアプローチとポイントを解説します。 物理エンジンと描画エンジンの連携方法 シェーダーによるオリジナルの表現 物理演算で表現したいものを作るためのチップスいくつか シェーダー(glsl)周りは結構独特なので別途もうちょっとちゃんとした解説記事を書く予定です。この記事はどちらかというと駆け足のネタ記事になっ

        ●●WebGL(PIXI.js + glsl)と物理演算(matter.js)で可愛い絵本風タピオカ作ったので解説●● - Qiita
      • GLSLで音を作るために 番外編 - らくとあいすの備忘録

        こんにちは。らくとあいすです。 「GLSLで音を作るために」第二回の前にしてさっそく番外編となってしまいました。 今回は5/30に twigl.app及びVRChat上のクラブで配信したGLSLサウンドを用いたDJについて、記憶の新しいうちに書いておきます。 性質上、ここでは1mixしか聴けませんがライブ時に使用したURLを載せておきます。 これ自体を解読することはあまりオススメしませんが...。 twigl.app やったこと GLSLを用いて、僕の好きな曲や自分の曲を作りこみ、そしてそれをライブで繋いだり混ぜたりするDJのような形式で発表しました*1。 これは、1. 各トラックの作りこみ、2. 作ったトラックを使ったDJ風プレイの大きく二つの工程に分けられます。1については、書くことが膨大過ぎる上にケースバイケースなので、本記事では概略に触れるに留めます*2。2については、GLSL特有

          GLSLで音を作るために 番外編 - らくとあいすの備忘録
        • GitHub - google/swissgl: SwissGL is a minimalistic wrapper on top of WebGL2 JS API. It's designed to reduce the amount of boilerplate code required to manage GLSL shaders, textures and framebuffers when making procedural visualizations or simulations.

          You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

            GitHub - google/swissgl: SwissGL is a minimalistic wrapper on top of WebGL2 JS API. It's designed to reduce the amount of boilerplate code required to manage GLSL shaders, textures and framebuffers when making procedural visualizations or simulations.
          • tangramでWEB GLSL地図入門 - Qiita

            こんにちは 本日は12月10日のはずです ところで皆様、tangramというWEB GISライブラリーをご存知でしょうか? 実は私はつい最近まで知りませんでした AmazonLocationServiceのチュートリアルにあったのが気になりまして調べてみたのですが なんと、GLSLがガンガン使える、とてもマニアックな地図ライブラリーのようです GLSL好きの私にピッタリではないですか、、むしろ今までなぜ知らなかったのだろう ということで触ってみたのですが 日本語の情報が ほとんど無いという、、、 ちなみに英語のドキュメントは以下です ということで、今回はまず地図を出すくらいまでを解説したいと思います 導入 最初、ゼロから構築したいなと思って色々やってみたのですが、なかなか手強く、公式で紹介している方法でお伝えします まずはじめに、以下のリポジトリをCloneします 次に以下より、Nextz

              tangramでWEB GLSL地図入門 - Qiita
            • つぶやきGLSLで今すぐ使えるシェーダーminifyテクニック11選! - のたぐすブログ

              最近、1ツイート(280文字)内にシェーダーをおさめる つぶやきGLSL というものが流行っています。 一見「もうこれ以上詰められないよ~」となってしまっても、よくよく探すと意外なところを削れることがあったります。 この記事では、自分が使っている、つぶやきGLSLで文字を詰めるためのテクニックをチートシートとしてまとめてみました。 つぶやきGLSLの作例 #つぶやきGLSL void main(){vec3 p;for(int i=0;i<32;++i)p+=vec3((gl_FragCoord.xy*2.-r)/r.y,1)*(length(cos(p))-length(sin(t/.1+p/.2))*.6*s)*.5;gl_FragColor=vec4(5./p.z*s);} vec2 mainSound(float t){int i=int(t*=1e3);return vec2((

                つぶやきGLSLで今すぐ使えるシェーダーminifyテクニック11選! - のたぐすブログ
              • GLSL に変換できるシェーダ言語を作った

                欲しかったので作ってしまいました。HGSL 開発リポジトリはこちら。Haxe の環境を VSCode に導入すれば誰でも使えます。 以下開発経緯や言語の特長、技術的解説、苦労した話などが続きます。 なぜ作ろうと思ったか AltGLSL が欲しかったからです。Works にあるように以前から WebGL を用いた作品で GLSL を書いてきましたが、 GPGPU のような複雑なロジックを書こうとするとなかなかしんどい 実行したときにブラウザ上でエラーが判明するのがしんどい int から float への暗黙の型変換すら存在しないのがしんどい [1] typo がその場で判明しないのがしんどい など様々な不満が毎日少しずつ蓄積していきました。文字列としてプログラムに埋め込んでいるのが悪いと言えば悪いのですが、メインのプログラムと uniform 変数の名前を揃える必要性もあり、String を

                  GLSL に変換できるシェーダ言語を作った
                • GLSLで音を作る - らくとあいすの備忘録

                  こんにちは、らくとあいすです。 つぶやきGLSLというというTwitterハッシュタグをご存じでしょうか?詳しくはハッシュタグを実際に見てもらうか、ブタジエンさんの記事*1をみると雰囲気をつかめると思いますが、簡単に言えば1ツイートの中に収まるGLSLシェーダーを書き、生成されたGIF画像と共にツイートする遊びです。 さて、普通シェーダーは絵作りのために用いられるものですが実は音を作ることも出来ます(?) 正確には、音の波形を表す配列(=テクスチャ)を生成するのにシェーダーを用い、それを読み取って音を出す仕組みが提供されています*2。ここではこのようにGLSLシェーダーを用いて作られた音楽のことをGLSLサウンドと呼びます。 最近このGLSLサウンドをつぶやきGLSLでやってみたところ、ありがたいことに多くの反応を頂けたのでその解説やGLSLサウンドの初歩的なところを書いていこうと思います

                    GLSLで音を作る - らくとあいすの備忘録
                  • GLSLで物理ベースシェーディング - Qiita

                    GLSLで物理ベースシェーディングを試すために、いろいろなBRDFを実装してみました。 サンプルを以下においておきました。マクロで使用するBRDFを変更することができます。 http://glslsandbox.com/e#54592.0 マウス位置のx方向でroughnessパラメータを、y方向でmetallicパラメータを変更することができます。 下準備 BRDFを定義する際に使用する変数です。 \begin{eqnarray} \rho_{d}&:& 拡散リフレクタンス\\ \rho_{s}&:& 鏡面リフレクタンス\\ \vec{n}&:& 法線(normal)ベクトル\\ \vec{v}&:& 視線(view)ベクトル\\ \vec{l}&:& 光源(light)ベクトル\\ \vec{r}&:& 反射(reflect)ベクトル\\ \vec{h}&:& ハーフ(half)ベクト

                      GLSLで物理ベースシェーディング - Qiita
                    • 【WebGL / GLSL】シェーダー100本ノック 〜 ディストーションエフェクト - Qiita

                      たいそうなタイトルから始まりましたが。。 自分のGLSL力を向上させるために本企画始動しました。 (一回で終わらないようにしないとな) 「これいいな〜」と思った表現を、 コピペではなくソースコードを見ながら理解していきたい!という趣旨の、 超個人的学習記録です。 みなさま、お手柔らかにお願いします。。 ちなみに5月くらいからシェーダーを少しずつ勉強してまして、 下記が学習の記録です。 合わせてご覧いただけると嬉しいです。 【WebGL / GLSL】デザイナーにモテるためのWebGL入門(概念編) 【WebGL / GLSL】ド文系だけど、行列とかラスタライズとか頑張って理解する 【WebGL / GLSL】「The Book of Shaders」のサンプルを、WebGL APIいじるところから頑張って再現する 【WebGL / GLSL】GLSLはconsole.log()なんてできな

                        【WebGL / GLSL】シェーダー100本ノック 〜 ディストーションエフェクト - Qiita
                      • Tokyo Demo Fest 2021のGLSL Graphics Compo優勝作品の解説 | gam0022.net

                        これはKLab Engineer Advent Calendar 2021の20日目の記事です。 12月11日~12日にオンラインで開催されたTokyo Demo Fest 2021(以下、TDF)に参加しました。 TDFは、日本国内で唯一のデモパーティです。 リアルタイムに映像や音楽を生成するプログラムを「デモ」と言い、デモを鑑賞したり完成度を競ったりして楽しむイベントを「デモパーティ」と言います。 「デモシーン」はデモやデモパーティを中心としたコンピューターのサブカルチャーです。 今年のTDFでは、『Alien Spaceship』という作品を発表しました。 Released "Alien Spaceship" at GLSL Graphics compo, #TokyoDemoFest 2021 It's running on #GLSLSandbox Only 1Pass Shad

                          Tokyo Demo Fest 2021のGLSL Graphics Compo優勝作品の解説 | gam0022.net
                        • GLSLをHLSLに書き換える - さやちゃんぐbotスクラップス

                          GLSLでは定数でPIを定義しているコードがよくみられる。UnityではUnityCG.cgincのUNITY_PIを利用することができる。

                            GLSLをHLSLに書き換える - さやちゃんぐbotスクラップス
                          • 【連載】#1 twigl.app で始める GLSL クリエイティブコーディング! まずは GLSL の基本を理解しよう - WebGL 総本山

                            top 2020 年 05 月 【連載】#1 twigl.app で始める GLSL クリエイティブコーディング! まずは GLSL の基本を理解しよう まずは気軽に始めてみよう 今回から、いつもとは少し趣向を変えて GLSL のチュートリアル記事を連載形式で書いていこうかなと思います。 きっかけは、最近にわかに(ごく限られた界隈で)話題になっていた #つぶやきGLSL というハッシュタグつきの一連のツイートです。 このハッシュタグが付けられたツイートは、GLSL のソースコードを1つのツイートに収まる長さで記述して、そのキャプチャ画像(主に GIF アニメーション)と一緒にツイートするというもので、日本国内だけでなく、海外の GLSL を嗜む人々によってたくさんの GLSL 作品が投稿されました。 一部の界隈ですごく話題になったということもあり、これら一連のツイートで初めて GLSL の

                              【連載】#1 twigl.app で始める GLSL クリエイティブコーディング! まずは GLSL の基本を理解しよう - WebGL 総本山
                            • GLSLで超リアルなエフェクトを実装してみよう!実例10選 - Workship MAGAZINE(ワークシップマガジン)

                              Web上で3DCGを表示できるWebGL。そのWebGLの豊かな三次元表現を可能にしているのがGLSL(Graphics Library Shader Language)です。 今回はこのGLSLに焦点を当て、リアルな表現が特徴の作品を10選ご紹介します。 1. 窓に滴る水滴 Stefan Werkは、GLSLを活用して窓に滴る雨を再現しました。このエフェクトにはJavaScriptも使われていますが、GLSLも質感や光の屈折の表現に一役買っています。 See the Pen Waterdroplet WebGL Shader by Stefan Weck (@stefanweck) on CodePen. Waterdroplet WebGL Shader 2. 穏やかな海面 今回ご紹介する作品のうちでも、とくに印象的なのがこのJonathan BlairとDavid Hartleyによ

                                GLSLで超リアルなエフェクトを実装してみよう!実例10選 - Workship MAGAZINE(ワークシップマガジン)
                              • つぶやきGLSL テクニック集 - Qiita

                                はじめに この記事を読んでくださった方へ つぶやきGLSLをやりましょう! もうしている方へ テクニック集をください! 切に願っております… テクニック つぶやきGLSLのテクニックをコード短縮とそれ以外に分けてまとめていきます(随時更新) また、全てのテクニックはTwiglのgeekest(300es)を想定しています コード短縮 floatの短縮

                                  つぶやきGLSL テクニック集 - Qiita
                                • 【WebGL / GLSL】デザイナーにモテるためのWebGL入門(概念編) - Qiita

                                  TBS火曜ドラマ「わたし、定時で帰ります」第4話より カワイイデザイナー: 「メインの花火、WebGLですよね!?よく実装したなって。」 冴えないエンジニア: 「え、まあ。。」 視聴者ぼく: 「!!!」 デザイナー: 「こんなのできるエンジニアと組めたらなって、ずっと憧れてたんで♡」 エンジニア: 「...」 視聴者ぼく: 「!!!!!!」 WebGLを勉強すれば何かいいことがありそうだと閃いてしまったので、 全力で勉強しようと思います。 ちなみにドラマ設定同様、自分も広告制作会社のエンジニアです。 そのためクライアントワークにWebGLを使用することを目標としています。 すべてはcanvasからはじまる。 私はAwwwards - Website Awards - Best Web Design Trendsを見るのが大好きです。 ここでsite of the DAYを受賞しているような

                                    【WebGL / GLSL】デザイナーにモテるためのWebGL入門(概念編) - Qiita
                                  • 【感想】巴山竜来『リアルタイムグラフィックスの数学―GLSLではじめるシェーダプログラミング』 - Technically, technophobic.

                                    この本を数か月前に読んで面白かったです。2022年に読んだ技術書の中でベストだったので、紹介しよう。と思って書き始めたら、なんか前置きが長いだけの謎文章になってしまったけど公開します。。 この本を読むと、こんなのが作れるようになります。 8章。レイマーチング完全に理解した。 #リアルタイムグラフィックスの数学 pic.twitter.com/VDYhxIlar3— Hiroaki Yutani (@yutannihilation) 2022年9月12日 ちなみに私はGLSLじゃなくてRustとWGSLでやってたんですが、もし興味あればここにメモとコードを公開しています。 メモ: https://zenn.dev/yutannihilation/articles/d7fe746f4bce38 コード: https://github.com/yutannihilation/math_of_re

                                      【感想】巴山竜来『リアルタイムグラフィックスの数学―GLSLではじめるシェーダプログラミング』 - Technically, technophobic.
                                    • 第1回 GLSLで音を作るために - らくとあいすの備忘録

                                      こんにちは。らくとあいすです。 以前「GLSLで音を作る」という記事を書いたところ、ありがたいことに色々と反響をいただきました。 raku-phys.hatenablog.com せっかくなので、より詳しい記事を書いていこうと思ったのですが、私も始めたばかりということもあって日々色々なやり方が変わっていきます。 なので、長編の記事として、「これを読めばわかる」といったようなものが書きづらいといった状況にあります。 そこで今回から、GLSLサウンドに関連したちょっとしたお話を何回かに分けて(思いついたときに...)書いていこうと思います。(続くことは保証しません) 例によって今回も twigl.app のサウンドシェーダーを開きつつ読み進んでいただければと思います。 GLSLサウンドにおける時間の捉え方 GLSLサウンドでは、あらゆる部分が時間の関数となります。 GLSLで絵を作る場合は、縦

                                        第1回 GLSLで音を作るために - らくとあいすの備忘録
                                      • つぶやきGLSLのススメ

                                        SAMURAI JACK開発事例:海外むけアクションゲームをオーソドックスに作ってみた UNREAL FEST EXTREME 2021 SUMMERエピック・ゲームズ・ジャパン Epic Games Japan

                                          つぶやきGLSLのススメ
                                        • GLSL Shaderを扱う際の基本的な用語のメモ|okazu

                                          ※追加編集2020/12/20/00:00 間違ってたり、こっちの方が便利等ありましたらぜひ教えて下さい。 厳密なことは、Referencesのサイトに乗っています。 かなり感覚的な、ざっくりとしたメモです。 ここでは、私は、openFrameworksやp5.js、GLSLエディター等でのクリエイティブコーディング、ライブコーディング、ジェネレイティブ系での用途でshaderを使いたい目線での記入をしていく GLSL自体のプログラミングについてはあまり触れない。 そこに興味がないからだ。 shader周りの情報についてメモしていく。 GLSL / OpenGL versionGLSLないし、OpenGLのバージョンで用語、書き方みたいのが変わってくる。 大事だと思ったこと OpenGLそのものを使っていく、 processing、p5.js, openFrameWorks ...etc

                                            GLSL Shaderを扱う際の基本的な用語のメモ|okazu
                                          • 2019年度GLSLお役立ちシート - Qiita

                                            はじめに shaderを書くことに仕事にして2年が経過しました。前回記事 2017年度GLSLお役立ちシート もだいぶ古くなったのでアップデートしたいと思います。 glslがどんなものかについては、2016年のAdvent Calenderで@doxasさんがまとめていますので、ここでは要点のみまとめています。 詳細について知りたい方は去年の@doxasさんの記事を見ると良いでしょう。 GLSL で暖を取るための準備をしよう! GLSL お役立ちマニュアル glslとは glslをものすごくザックリ言うと、3Dグラフィックの規格であるOpenGLの規格の中で、GPUでポリゴンの影の色や頂点の位置の計算を行うためのshaderと言われる言語です。 WebGLはOpenGL ES 2.0をWebで扱えるようにしたものですので、WebGLで使えるshader言語はglslと言ってもいいでしょう。

                                              2019年度GLSLお役立ちシート - Qiita
                                            • p5.jsでのシェーダー(GLSL)入門(1)描画してみる - ギンの備忘録

                                              この記事はp5.jsは知っている、使ったことがあるけど、シェーダーとかGLSLは扱ったことがないという人に向けて書いていきます。 p5.jsを知らないという方は、調べてみて下さい。 p5.jsはクリエイティブ・コーディング用のJavaScriptライブラリで、様々なコンピュータグラフィックス描画できます。 p5.jsではWebGLに対応しているため、シェーダー言語のGLSLを用いた描画表現が可能です。 今回、この記事ではp5.js上でGLSLを扱った描画方法を紹介していきます。 GLSL自体はかなり奥が深く、筆者自身も初学者で誤った理解などあるかもしれません。ご了承下さい。 まず、「シェーダー」、「WebGL」、「GLSL」とは何かを簡単に抑えてから、p5.jsでGLSLを扱う方法を説明していきます。 用語 シェーダー WebGL GLSL シェーダーを試す 色を指定する グラデーション

                                                p5.jsでのシェーダー(GLSL)入門(1)描画してみる - ギンの備忘録
                                              • Extending three.js materials with GLSL

                                                MeshStandardMaterial extended with specular/gloss + instancing +map transformations. See demo.Material in three.js is a high level abstraction to low level systems both WebGL and Three.js. Three.js materials all share a common base in order to be able to work with the entire rendering system. All of them share some common properties that work with low level three.js and webgl concepts (including 2

                                                  Extending three.js materials with GLSL
                                                • The AutoCorrelation Function | GLSL & Sound

                                                  The AutoCorrelation Function Autocorrelation is used to compare a signal with a time-delayed version of itself. If a signal is periodic, then the signal will be perfectly correlated with a version of itself if the time-delay is an integer number of periods. That fact, along with related experiments, has implicated autocorrelation as a potentially important part of signal processing in human hearin

                                                  • がむ on Twitter: ". @zozuar さんの #つぶやきGLSL シェーダーがあまりにも凄すぎたので、コードリーディングをして簡単に日本語コメントをつけてみました。 自分の勘違いも含まれていそうなので、参考程度にお願いします。… https://t.co/RMuF1jWN3N"

                                                    . @zozuar さんの #つぶやきGLSL シェーダーがあまりにも凄すぎたので、コードリーディングをして簡単に日本語コメントをつけてみました。 自分の勘違いも含まれていそうなので、参考程度にお願いします。… https://t.co/RMuF1jWN3N

                                                      がむ on Twitter: ". @zozuar さんの #つぶやきGLSL シェーダーがあまりにも凄すぎたので、コードリーディングをして簡単に日本語コメントをつけてみました。 自分の勘違いも含まれていそうなので、参考程度にお願いします。… https://t.co/RMuF1jWN3N"
                                                    • Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

                                                      どうも!かけちまるです! Three.jsで画像をテクスチャとして使うときにGLSLでテクスチャをbackground-size: cover;のような見た目にする方法を解説します。 背景画像をテクスチャにしたい時などに使えそうですね。 これでテクスチャをレスポンシブに対応させることができます。 この記事では、 ・テクスチャをbackground-size: cover;のようにする方法 がわかります。 今回のテンプレート 次のコードを元に実装していきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/cs

                                                        Three.jsテクスチャをGLSLでbacground-size: cover;のようにする
                                                      • Vulkanで3Dグラフィックスを描くには GLSLの例で見るシェーダの扱い方

                                                        Kernel/VM探検隊は、カーネルやVM、およびその他なんでもIT技術の話題ジャンルについて誰でも何でも発表してワイワイ盛り上がろうという会です。fadis氏は、3DグラフィックスAPIであるVulkanの近況を解説しました。全4回。2回目は、シェーダコードの書き方について解説しました。前回はこちら。 簡単なGLSLの例を解説 fadis氏:簡単なGLSL(OpenGL Shading Language)の例を見てみましょう。ここでバッファを宣言しています。スレッドIDからバッファのどこに書くかを決定し、各スレッドが自分が担当するバッファの要素をインクリメントします。 ここでGLSLのソースコードは「bindingが1のバッファをoutput_dataに結びつけよ」といっていますが、bindingが1のバッファとはどのバッファのことでしょうか。 VulkanのAPIで作ったいくつものオブ

                                                          Vulkanで3Dグラフィックスを描くには GLSLの例で見るシェーダの扱い方
                                                        • 【WebGL / GLSL】GLSLはconsole.log()なんてできないから、「色デバッグ」をするらしい - Qiita

                                                          Help us understand the problem. What are the problem?

                                                            【WebGL / GLSL】GLSLはconsole.log()なんてできないから、「色デバッグ」をするらしい - Qiita
                                                          • 【GLSL(シェーダー)】でよく使う関数とユーザー関数のまとめ【計算編】※随時更新

                                                            GLSL(シェーダー)でよく使う関数 三角関数 const float PI = 3.14159; // 度数法[degree]から弧度法[rad]へ vec4 a = radians(vec4(180)); // => vec4(PI) // 弧度法[rad]から度数法[degree]へ vec4 b = degrees(vec4(PI)); // => vec4(180) // サインコサインタンジェント vec4 c = sin(vec4(PI / 2)); // => vec4(1.0) vec4 d = cos(vec4(0.0)); // => vec4(1.0) vec4 e = tan(vec4(PI / 4)); // => vec4(1.0) //逆三角関数 アークサインアークコサインアークタンジェント vec4 f = asin(vec4(0.5)); // => v

                                                              【GLSL(シェーダー)】でよく使う関数とユーザー関数のまとめ【計算編】※随時更新
                                                            • GLSL最短チャレンジ #つぶやきGLSL

                                                              この記事は Akatsuki Advent Calendar 19日目の記事です。 前回はShader Errorさんの「UnityでRenderer Feature使ってみたい」でした。 #つぶやきGLSL #つぶやきGLSLというチャレンジをご存知でしょうか。 Twitter上で行われている、GLSLシェーダーをできる限り短く書いて作品を投稿するハッシュタグです。ツイートしなければいけないので半角で280文字(-ハッシュタグ文字数)しか使えないという制限があります。 最近このつぶやきGLSLにハマっているのでアドカレのネタにしようと思います。 GLSLの実行 今回GLSLはtwigl.appというサイトを使って記述&実行します。 表示されるエディタに以下のコードをコピペすると、レイマーチングによって球体が大量に並んだグラフィックが表示されるはずです。 precision highp f

                                                                GLSL最短チャレンジ #つぶやきGLSL
                                                              • 【GLSL】【シェーダー】文系で数学なんもわからんエンジニアだって、シェーダー完全に理解したい!!〜レイマーチング入門編①〜 - めーぷるのおもちゃばこ

                                                                はじめに 最近GLSLにハマっているのですが、今回はレイマーチングを完全に理解したくてモクモクしたので、最初の第一歩、やり方を備忘録としてまとめようと思います🐼 こんな感じでやってみました↓↓ これを作りながら完全に理解だぜ🐼 レイマーチング第一歩 ※今回の記事ではShaderToyでのプログラムになります。glsl fanやveda、 GLSL editor などプラットフォームによってresolutionなどの表記が変わるので注意してください。 はじめに レイマーチングとは とは レイマーチングのやり方 実際にやってみよう〜レイマーチング第一歩〜 ①最初の設定をするんだぜ🐼 カメラの位置 スクリーン平面をどれだけカメラに近づけるか Rayの方向 ②レイを進めよう🐼 距離関数について レイの進め方 解説 レイを進めるために必要な変数 レイのポジション オブジェクトまでの距離 レイ

                                                                  【GLSL】【シェーダー】文系で数学なんもわからんエンジニアだって、シェーダー完全に理解したい!!〜レイマーチング入門編①〜 - めーぷるのおもちゃばこ
                                                                • GLSL : don't use "if"|Nobu|note

                                                                  Shader記述時の注意点* for文のループ回数を動的に出来ない。 * if文はあまり使わない方がいいらしい (処理負荷が高い) * 基本bit演算は使えない。将来のために予約はされている。拡張を使えば使える。 * 配列も基本的には使わない方がいい ifの分岐を避ける> 3項演算子vec3 BLACK = vec3(0.0); vec3 WHITE = vec3(1.0); vec3 color; // こんなif文は、 if (x < 0.5) { color = WHITE; } else { color = BLACK; } // こんな三項演算子に置き換える color = (x < 0.5) ? WHITE : BLACK;こんな感じでif/else構文を避けていくわけですが、この方法の欠点はベクトルの要素を使って一度に条件分岐することができない事です。 step関数とmix関

                                                                    GLSL : don't use "if"|Nobu|note
                                                                  • 【GLSL】【シェーダー】文系で数学なんもわからんエンジニアだって、シェーダー完全に理解したい!!〜レイマーチング入門編②〜 - めーぷるのおもちゃばこ

                                                                    はじめに この記事は、レイマーチングを完全に理解する記事の続きです🐼 レイマーチングを完全に理解するにはまず最初にこちらの記事をご覧いただければと思います! www.wwwmaplesyrup-cs6.work はじめに 実際にやってみよう〜立体感を出そう〜 立体感を出すには? ①法線の取得 ②ライトの定義 ③法線とライトの向きの内積 発展編 量を増やそう 色をつけよう 動かそう 実際にやってみよう〜立体感を出そう〜 前回の記事ではここまで作りました🐼 前回の記事レイマーチングの第一歩ができました! でもこのままだとなんだかのっぺりしていて立体感がないですね。 今度は立体感を出しましょう。 立体感を出すには? 立体感を出すには、 ①法線を求める ②ライトの位置を決める ③法線とライトの内積を算出する の3ステップです。 つまり、法線とライトの向き(ベクトル)をもとに、影を計算します。

                                                                      【GLSL】【シェーダー】文系で数学なんもわからんエンジニアだって、シェーダー完全に理解したい!!〜レイマーチング入門編②〜 - めーぷるのおもちゃばこ
                                                                    • GLSLでフラグメントシェーダーを書く場合のメモ - のぐそんブログ

                                                                      フラグメントシェーダーを使った描画についてのメモです。 ちなみに頂点シェーダーを考慮すると難易度が高くなって私には理解できなくなるので、一旦下記のツールを使う前提で書いていきます。 http://glslsandbox.com/ gl_FragColorの使い方 gl_FragColorは描画用の組み込み変数なので、定義が不要です。 方はvec4になります。 定義の仕方は下記です。設定する値の型はfloatになります。 //RGBAで設定 gl_FragColor = vec4(0.5,0.5,0.5,0.5); gl_FragCoordの使い方 gl_FragCoordはピクセル座標の組み込み変数です。 型はvec4になります。 //gl_FragCoordを利用して色をしていする float c = gl_FragCoord.x /resolution.x; gl_FragColor

                                                                        GLSLでフラグメントシェーダーを書く場合のメモ - のぐそんブログ
                                                                      • GLSLのコーディング環境はKodeLifeで決まり! - Qiita

                                                                        GLSLでちょっとお絵描きしたいな、って時にみなさんはどういう環境でコーディングしてますか? 代表的なコーディング環境 よく使われるのは以下のようなブラウザベースの環境ではないでしょうか。 インストール不要で、ササッと書いて確認できる便利な環境ですよね。 Shadertoy GLSL Sandbox glslfan NEORT ※コーディング環境っていうより配信プラットフォームの色が強い? 個人的な不満点 でも個人的には上記環境でのコーディングには不満があるんですよ。ってのが以下。 GITで管理したい ちまちまと書いたコードをちゃんと管理したいんですよね。 いちいちテキストエディタにコピペしてファイル保存すれば管理できるものの、その一手間がちょっと面倒くさい。 それにブラウザだと場合によってはいきなりプロセスごと落ちたりして、編集途中のものをロストするのがやだな、と。 MIDIコントローラ

                                                                          GLSLのコーディング環境はKodeLifeで決まり! - Qiita
                                                                        1

                                                                        新着記事