シェーダー芸人になりたかった6か月前の自分に教えてあげたいリンク集 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は、KLab Engineer Advent Calendar 2018 10日目の記事です。 はじめに 今月頭の12/1から12/2にかけて、日本で唯一のデモパーティであるTokyo Demo Fest 2018が開催されました。 デモパーティをご存じではない方のために、公式サイトから引用します。 デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティション(コンポ)やセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深めら
glslfan.com - shader live beta
glslfan is a platform that can broadcast the live coding of GLSL shaders.
「Unityシェーダープログラミングの教科書 ShaderLab言語解説編」本文サンプル公開＆ＢＯＯＴＨでＰＤＦ版頒布開始しました - 土屋つかさのテクノロジーは今か無しか
１０月２２日に開催される技術書オンリー即売会「技術書典３」にて、「Unityシェーダープログラミングの教科書 ShaderLab言語解説編」を初頒布します。表紙は盟友のふゆの春秋さんに描いて頂きました。「若者（学生）が武器（Unity）を手にした」というモチーフとのことです。 また、「地方で技術書典に参加できないが欲しい」という要望を多数いただいたので、ＢＯＯＴＨにてＰＤＦ版の頒布を行うことにしました（期間限定の予定です。終了日は今のところ未定）。こちらは先行して公開を開始しており、下記サイトで購入＆ＤＬできます。 https://s-games.booth.pm/items/660001 何度か書いていますが、シェーダープログラミングは前提として必要な知識が非常に多く、それもあって本書は初心者向きとは言い難いです。また、読み終えたらすぐにシェーダープログラミングが出来るようになるという類
AtomでVJできるパッケージを作った #GLSL #livecoding - マルシテイア
GLSLでVJやライブコーディングができるAtomパッケージを作りました。 その名も VEDA !!! atom.io この記事では、VEDAの使い方や機能を説明します。 目次 このパッケージでできること 機能一覧 インストール glslangValidatorのインストール VEDA本体のインストール 使い方 今後の開発 このパッケージでできること AtomでこんなVJができちゃいます！ My first VJ live coding pic.twitter.com/j66MFGZfFO— amagi (@amagitakayosi) 2017年7月31日 この動画は、先日僕が VEDA を使ってVJした時のものです。 動画素材や画像素材をロードしつつ、GLSLで加工したり動きを付けたりしています。 動画素材をロードしてMIDIコントローラーで操作きるので、コードをほぼ書かずにVJするこ
TouchDesignerでGLSL入門 - Qiita
#この記事 VJでTouchDesigner初心者のわたくし、さのかずや（Twitter:@sanokazuya0306）が、TouchDesignerでGLSLを書く場合どんな感じになるんや、ということを書き記します。 日本語リファレンスがなかったので。ほぼ公式の動画やリファレンスの翻訳＋要約です。 GLSLはほとんど書いたことありません。uniformとかvec4とかをかろうじて知ってるくらい。 シェーダープログラミングについて詳しく知りたい方はAyumu Nagamatsu兄さんの記事がとっても勉強になりますので一読をオススメ。 シェーダープログラミングの意義とその実装 | 永松 歩 | Ayumu Nagamatsu 環境はTouchDesigner 099、MacBook Pro Mid 2014を使用。 #まずいじる GLSL in Touch Designer - Lesso
The Book of Shaders
by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Contents About this book Getting started What is a shader? “Hello world!” Uniforms Running your shader Algorithmic drawing Shaping functions Colors Shapes Matrices Patterns Generative designs Random Noise Cellular noise Fractional brownian motion Fractals Image
The Book of Shaders
Patricio Gonzalez Vivo、Jen Lowe著 この本はフラグメントシェーダーについてのガイドブックです。難解で複雑なフラグメントシェーダーの世界を、一歩一歩わかりやすくご案内します。 翻訳について この文書はPatricio Gonzalez VivoのThe Book of Shaderの日本語訳です。 技術的な内容はできる限り正確に伝えるように心がけていますが、その他の部分では言葉を補ったり簡略化したり、表現を変えている部分もあります。英語が得意な方はぜひ原文もお読みください。 フィードバックにはgithubのレポジトリをご利用ください。 目次 イントロダクション 初めの一歩 シェーダーとは？ ハロー・ワールド！ ユニフォーム変数 シェーダーを使う アルゴリズムで絵を描く シェイピング関数 色について 形について 二次元行列 パターン Generative desi
毎日GLSLでアニメーションを作ってる - マルシテイア
最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。 4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。 以前から気になっていたBRDG/VRDG方面のイベントらしい。 会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。 そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。 先週末に開催したチャネル#16 のライブ映像を公開しました。 https://t.co/YgpC3YYC0B #unity3d #tidal #maxmsp #tokyo #BRDG #livecoding #kodelife pic.twitter.com/rWaHodipUA— BRDG / VRDG (@toky
GLSLで描くCircle Inversion Fractals - 心鏡曼荼羅
qiita.com GPUで暖を取りたい人のためのGLSL Advent Calendar 2016，25日目の記事です． 前回の記事で紹介した円の反転という操作を用いてフラクタルを描いてみます． まずはこの画像のような４つの円板とその反転を考えます．それぞれの円の反転は自分以外の円板を自分の内側に移します．よって，それぞれの円の内側には３つの円が移され，１２個の円ができています．次に，ショットキー円の反転を新たに現れた小円にも適用することを繰り替えすと，以下のように円が入れ子状に続いていきます． 円が接するときには，このような美しいネックレス上の構造を見ることができます．これらの円列をショットキー円の軌道(Orbit)，円列の極限を極限集合と呼びます． この処理はJavaScriptで書くと以下のような感じになります． let orbits = []; orbits.push(schot
GLSLレイマーチング研究_距離関数について勉強してみた16(Heartの関数を作ってみた_その2) - Qiita
\begin{align} &(x^2+\frac{9}{4}y^2+z^2)^3 - (x^2+\frac{9}{80}y^2)z^3 = 0 \\ &((x^2+\frac{9}{4}y^2+z^2) - (x^2+\frac{9}{80}y^2)^\frac{1}{3}z)((x^2+\frac{9}{4}y^2+z^2)^2 + (x^2+\frac{9}{4}y^2+z^2)(x^2+\frac{9}{80}y^2)^\frac{1}{3}z+((x^2+\frac{9}{80}y^2)^\frac{1}{3}z)^2) = 0 \\ &ここで,((x^2+\frac{9}{4}y^2+z^2) - (x^2+\frac{9}{80}y^2)^\frac{1}{3}z) = 0 の方のみを採用して考え行く \\ &((x^2+\frac{9}{4}y^2+z^2) - (x^2+
GLSL作曲入門 - Qiita
自己紹介 名前: notargs 作ったもの LGTM Shaders CRT Shader 今回話す内容 ?「Game Jamでプログラマーのみのチームになってしまった…」 ?「Game Jamでプログラマーのみのチームになってしまった…」 ?「音楽素材どうしよう…」 ?「Game Jamでプログラマーのみのチームになってしまった…」 ?「音楽素材どうしよう…」 @「それ、シェーダーで作れますよ！！」 メリット プログラマーだけで楽曲制作が完結できる OpenGLとPCMにさえ対応していれば動くため、移植性が高い プロシージャルなので圧縮率が高い デメリット 高度な知識と実装力が必要 めんどくさい 手法 ##Transform Feedback 頂点シェーダでの計算結果を頂点バッファオブジェクトに再度格納する機能 CPUからアクセス可能 ##Transform Feedback 頂点シェ
ジオメトリを変形させる - Qiita
概要 Grimoire.jsをつかってジオメトリを作って変形させる話。 Grimoire.jsについての基本的なことは他の記事を参照ください。 シェーダーに関する説明はあまりしません。 できたもの↓ 新しいジオメトリを作る 今回は板(ita)ジオメトリを作ります。変形させるためにポリゴンの分割数(div)を指定できるようにします。 ジオメトリの登録 ジオメトリをタグから使えるようにするためにはGeometryFactory.addType()を用います。 GeometryFactory.addType("ita", { div: { converter: 'Vector3', defaultValue: '2,2,2', }, }, (gl, attrs) => { const geo = new Geometry; // // ジオメトリの実装 // return geo; });
Three.jsのGPGPUのサンプルが難しすぎるから解体して勉強してみる - Qiita
概要 本エントリーはGPUパーティクルを飛ばすために筆者が勉強した軌跡です。 本エントリーの対象者 シェーダーが何なのかは知ってる ちょっとくらいならGLSL書いたことある だけどGPUに演算をさせるのはやったことない サンプルのスクリプトがわけわからん こんな人を想定して書いてます。 GLSLについての基本中の基本については解説しません。 そこらへんがまだわからない方は本エントリーについてはさらっと目をとおして、 初心者向けの学習資料を読み漁ってください！ GPGPUでパーティクルたくさん飛ばしたいからサンプルを覗いてみる three.jsの素晴らしいサンプル達 https://threejs.org/examples/webgl_gpgpu_birds.html https://threejs.org/examples/webgl_gpgpu_protoplanet.html http
20行以下のコードで楽しむ簡単GLSL - Qiita
Shader Art好きなGLSLビギナーですが、記事を書いてみます。 今回行うこと GLSLは難しいイメージですが、時折予想できない結果が出てくるところが面白いと思います。今回は以下の2つの点を踏まえたデモを3つ掲載します。 20行以下のコードである 圧縮せずに可読性を保つ コードからは実行結果が予想しづらい デモ1:光る玉 void main( void ) { vec2 p = (gl_FragCoord.xy*2.0-resolution) / min(resolution.x, resolution.y); float l = 0.3/length(p); gl_FragColor = vec4( vec3( 1.0, 1.0, 1.0 ) * l, 1.0 ); }
GLSL で暖を取るための準備をしよう！ GLSL お役立ちマニュアル - Qiita
はじめに 本稿は、WebGL で GLSL を使って暖を取るために個人的にまとめたもので、もしかしたら仕様と異なるような表記や勘違いがあるかもしれません。そういうの見つけたときはぜひ教えてください。🔥🔥🔥 GLSL やシェーダに気軽に触れてみてほしい、楽しく取り組んでみてほしいという観点からやや崩れた文体で、イメージのしやすさ優先で書いてます。そういうの苦手な人は公式の仕様を見ましょうね。 GLSL について知る GLSL がなんであるかは、たぶんこの記事を読んでいる方には説明不要かと思いますが、あえて簡単に説明します。 まず、PC などのコンピュータを用いて二次元、あるいは三次元のグラフィックスを描画するための世界標準の規格として OpenGL という API が存在します。その名のとおり、オープンな規格として策定されている OpenGL は、OpenCL や Vulkan などと
iOS/MetalのシェーダをWebGL/GLSLから移植する - その後のその後
Metalでグラフィック処理を行うにしろ並列演算を行うにしろ、GPUに処理をさせるためのシェーダを書かないといけないわけですが、これがまだ情報が少なくて、「こういうシェーダを書きたいんだけど、誰かもう書いてないかな・・・」というときに参考になる近いものとかはそうそう都合よく出てこないわけです。 ただ、WebGL/GLSLの情報はググると山ほどあって、GLSL Sandbox という、Web上で編集できてプレビューできてシェアできるサイトもあり、何がどうなってそうなるのか理解できない難しそうなものから、ただの円といったシンプルなものまで、既に偉大な先人たちのサンプルがたくさんアップされています Metalのシェーダというのは正しくは Metal Shading Language といいまして、C++をベースとする独自言語なのですが、まー概ねGLSLと一緒です。 実際にやってみたところ、GLS
Rapid Prototyping in JavaScript • Matt DesLauriers
March 8, 2015 Rapid Prototyping in JavaScript Twitter: @mattdesl In this post I’ll outline a simple workflow for quick prototyping and creative development with JavaScript. It’s the workflow I’ve been using for some years now, and it is how I build most of my libraries, demos and client projects. Some examples of libraries/projects using this workflow: Audiograph color-wander webgl-wireframes pers
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gmork.in
gmork.in
GLSL Sandbox Gallery