タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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で音を作るために」第二回の前にしてさっそく番外編となってしまいました。 今回は5/30に twigl.app及びVRChat上のクラブで配信したGLSLサウンドを用いたDJについて、記憶の新しいうちに書いておきます。 性質上、ここでは1mixしか聴けませんがライブ時に使用したURLを載せておきます。 これ自体を解読することはあまりオススメしませんが...。 twigl.app やったこと GLSLを用いて、僕の好きな曲や自分の曲を作りこみ、そしてそれをライブで繋いだり混ぜたりするDJのような形式で発表しました*1。 これは、1. 各トラックの作りこみ、2. 作ったトラックを使ったDJ風プレイの大きく二つの工程に分けられます。1については、書くことが膨大過ぎる上にケースバイケースなので、本記事では概略に触れるに留めます*2。2については、GLSL特有
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
こんにちは 本日は12月10日のはずです ところで皆様、tangramというWEB GISライブラリーをご存知でしょうか？ 実は私はつい最近まで知りませんでした AmazonLocationServiceのチュートリアルにあったのが気になりまして調べてみたのですが なんと、GLSLがガンガン使える、とてもマニアックな地図ライブラリーのようです GLSL好きの私にピッタリではないですか、、むしろ今までなぜ知らなかったのだろう ということで触ってみたのですが 日本語の情報が ほとんど無いという、、、 ちなみに英語のドキュメントは以下です ということで、今回はまず地図を出すくらいまでを解説したいと思います 導入 最初、ゼロから構築したいなと思って色々やってみたのですが、なかなか手強く、公式で紹介している方法でお伝えします まずはじめに、以下のリポジトリをCloneします 次に以下より、Nextz
最近、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((
欲しかったので作ってしまいました。HGSL 開発リポジトリはこちら。Haxe の環境を VSCode に導入すれば誰でも使えます。 以下開発経緯や言語の特長、技術的解説、苦労した話などが続きます。 なぜ作ろうと思ったか AltGLSL が欲しかったからです。Works にあるように以前から WebGL を用いた作品で GLSL を書いてきましたが、 GPGPU のような複雑なロジックを書こうとするとなかなかしんどい 実行したときにブラウザ上でエラーが判明するのがしんどい int から float への暗黙の型変換すら存在しないのがしんどい [1] typo がその場で判明しないのがしんどい など様々な不満が毎日少しずつ蓄積していきました。文字列としてプログラムに埋め込んでいるのが悪いと言えば悪いのですが、メインのプログラムと uniform 変数の名前を揃える必要性もあり、String を
こんにちは、らくとあいすです。 つぶやきGLSLというというTwitterハッシュタグをご存じでしょうか？詳しくはハッシュタグを実際に見てもらうか、ブタジエンさんの記事*1をみると雰囲気をつかめると思いますが、簡単に言えば１ツイートの中に収まるGLSLシェーダーを書き、生成されたGIF画像と共にツイートする遊びです。 さて、普通シェーダーは絵作りのために用いられるものですが実は音を作ることも出来ます(？) 正確には、音の波形を表す配列(=テクスチャ)を生成するのにシェーダーを用い、それを読み取って音を出す仕組みが提供されています*2。ここではこのようにGLSLシェーダーを用いて作られた音楽のことをGLSLサウンドと呼びます。 最近このGLSLサウンドをつぶやきGLSLでやってみたところ、ありがたいことに多くの反応を頂けたのでその解説やGLSLサウンドの初歩的なところを書いていこうと思います
これは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
GLSLでは定数でPIを定義しているコードがよくみられる。UnityではUnityCG.cgincのUNITY_PIを利用することができる。
top 2020 年 05 月 【連載】#1 twigl.app で始める GLSL クリエイティブコーディング！ まずは GLSL の基本を理解しよう まずは気軽に始めてみよう 今回から、いつもとは少し趣向を変えて GLSL のチュートリアル記事を連載形式で書いていこうかなと思います。 きっかけは、最近にわかに（ごく限られた界隈で）話題になっていた #つぶやきGLSL というハッシュタグつきの一連のツイートです。 このハッシュタグが付けられたツイートは、GLSL のソースコードを１つのツイートに収まる長さで記述して、そのキャプチャ画像（主に GIF アニメーション）と一緒にツイートするというもので、日本国内だけでなく、海外の GLSL を嗜む人々によってたくさんの GLSL 作品が投稿されました。 一部の界隈ですごく話題になったということもあり、これら一連のツイートで初めて GLSL の
この本を数か月前に読んで面白かったです。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をやりましょう！ もうしている方へ テクニック集をください！ 切に願っております… テクニック つぶやきGLSLのテクニックをコード短縮とそれ以外に分けてまとめていきます(随時更新) また、全てのテクニックはTwiglのgeekest(300es)を想定しています コード短縮 floatの短縮
こんにちは。らくとあいすです。 以前「GLSLで音を作る」という記事を書いたところ、ありがたいことに色々と反響をいただきました。 raku-phys.hatenablog.com せっかくなので、より詳しい記事を書いていこうと思ったのですが、私も始めたばかりということもあって日々色々なやり方が変わっていきます。 なので、長編の記事として、「これを読めばわかる」といったようなものが書きづらいといった状況にあります。 そこで今回から、GLSLサウンドに関連したちょっとしたお話を何回かに分けて(思いついたときに...)書いていこうと思います。(続くことは保証しません) 例によって今回も twigl.app のサウンドシェーダーを開きつつ読み進んでいただければと思います。 GLSLサウンドにおける時間の捉え方 GLSLサウンドでは、あらゆる部分が時間の関数となります。 GLSLで絵を作る場合は、縦
※追加編集2020/12/20/00:00 間違ってたり、こっちの方が便利等ありましたらぜひ教えて下さい。 厳密なことは、Referencesのサイトに乗っています。 かなり感覚的な、ざっくりとしたメモです。 ここでは、私は、openFrameworksやp5.js、GLSLエディター等でのクリエイティブコーディング、ライブコーディング、ジェネレイティブ系での用途でshaderを使いたい目線での記入をしていく GLSL自体のプログラミングについてはあまり触れない。 そこに興味がないからだ。 shader周りの情報についてメモしていく。 GLSL / OpenGL versionGLSLないし、OpenGLのバージョンで用語、書き方みたいのが変わってくる。 大事だと思ったこと OpenGLそのものを使っていく、 processing、p5.js, openFrameWorks ...etc
22. ベクトル型 - vec2 - vec3 - vec4 これらはベクトル型 vec2ならxyの2個、vec4ならxyzwの4個のfloat型が組み合わさった値 向き、長さ、座標などを示すことができる （ベクトルとは何か、については割愛）
この記事はp5.jsは知っている、使ったことがあるけど、シェーダーとかGLSLは扱ったことがないという人に向けて書いていきます。 p5.jsを知らないという方は、調べてみて下さい。 p5.jsはクリエイティブ・コーディング用のJavaScriptライブラリで、様々なコンピュータグラフィックス描画できます。 p5.jsではWebGLに対応しているため、シェーダー言語のGLSLを用いた描画表現が可能です。 今回、この記事ではp5.js上でGLSLを扱った描画方法を紹介していきます。 GLSL自体はかなり奥が深く、筆者自身も初学者で誤った理解などあるかもしれません。ご了承下さい。 まず、「シェーダー」、「WebGL」、「GLSL」とは何かを簡単に抑えてから、p5.jsでGLSLを扱う方法を説明していきます。 用語 シェーダー WebGL GLSL シェーダーを試す 色を指定する グラデーション
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
どうも！かけちまるです！ 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
. @zozuar さんの #つぶやきGLSL シェーダーがあまりにも凄すぎたので、コードリーディングをして簡単に日本語コメントをつけてみました。 自分の勘違いも含まれていそうなので、参考程度にお願いします。… https://t.co/RMuF1jWN3N
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のインストールが必要です． 本記事の目的 偏光（Polarization）とは、電場および磁場の振動方向が規則的な光のことを指します． 偏光の理論の解説はこちらで非常に詳しく解説されているので，本稿では省略します． 残念ながら人間の目には入射した偏光であるかどうかを識別する能力はありません．しかし，偏光計測は従来の光計測より多くの情報量を持っており，近年偏光の情報を使うことで現実物体の形(法線)や反射率(BRDF)が従来より高精度に取れるということが分かってきました[1, 2]． その流れを受けて，有名な物理ベースレンダラーMitsuba2では，偏光を使ってレンダリングを行う機能が追加されています． Mitsuba2は素晴らしいレンダラーであることは結果を見ても明らかですが，普段シェーダーを書く人間か
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
この記事は Akatsuki Advent Calendar 19日目の記事です。 前回はShader Errorさんの「UnityでRenderer Feature使ってみたい」でした。 #つぶやきGLSL #つぶやきGLSLというチャレンジをご存知でしょうか。 Twitter上で行われている、GLSLシェーダーをできる限り短く書いて作品を投稿するハッシュタグです。ツイートしなければいけないので半角で280文字（-ハッシュタグ文字数）しか使えないという制限があります。 最近このつぶやきGLSLにハマっているのでアドカレのネタにしようと思います。 GLSLの実行 今回GLSLはtwigl.appというサイトを使って記述&実行します。 表示されるエディタに以下のコードをコピペすると、レイマーチングによって球体が大量に並んだグラフィックが表示されるはずです。 precision highp f
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関
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? GLSLでちょっとお絵描きしたいな、って時にみなさんはどういう環境でコーディングしてますか？ 代表的なコーディング環境 よく使われるのは以下のようなブラウザベースの環境ではないでしょうか。 インストール不要で、ササッと書いて確認できる便利な環境ですよね。 Shadertoy GLSL Sandbox glslfan NEORT ※コーディング環境っていうより配信プラットフォームの色が強い？ 個人的な不満点 でも個人的には上記環境でのコーディングには不満があるんですよ。ってのが以下。 GITで管理したい ちまちまと書いたコードをちゃんと管
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
