GraphtoyGraphtoy v0.4 by Inigo Quilez (feedback from Rafæl Couto, Florian Mosleh, Nicholas Ralabate, Rich Eakin and Jason Tully). If you find Graphtoy useful, please consider supporting it through Patreon or PayPal.
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
テッセレーションシェーダ - Qiita
はじめに テッセレーションシェーダに関する日本語の記述サイトがほぼなかったので 備忘録もかねて記述していこうとおもいます。主に基礎的な部分なので、曲面どうのこうのということは今回は見送ります。 opengl4.0では、新たにテッセレーションシェーダを扱うことができるようになっている。 ポリゴンを自動で分割してくれる便利なシェーダだ。現状4角形と3角形でできることを確認しているけど今回は主に3角形での説明にする。 テッセレーションシェーダの主な役割はこんな感じ テッセレーション制御シェーダ：1パッチの分割数を決める。 テッセレーション評価シェーダ：分割したポリゴンの頂点位置等を決定する 図1 このポリゴンモデルを 図2 このように分割してくれたりする。 シェーダの処理される順番としては、 1.バーテックスシェーダ 2.テッセレーション制御シェーダ --------ポリゴン分割--------
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
GLSL-Projectron | fenomas.com
Or to be technical, I made a thing that makes things like that thing. (If your device doesn’t render it, it looks like this.) Backstory: a month and a half ago I left my job to make an indie game. One of the many things on my to-do list was “Learn shader programming”, and around that time I ran across this blog post by Roger Alsing about using genetic algorithms to create images. So I tried the sa
Filters | 面白法人カヤック
「Filters」は、カメラフィルターを自作して投稿・共有できるカメラフィルターのプラットフォームアプリです。 コーディングしたオリジナルのカメラフィルターをアプリに投稿し、他のユーザーと共有することができます。投稿されたフィルターはアプリ内に蓄積されるため、常にオリジナリティある新しいフィルターが無限に増えていき、これまでにないスマートフォンカメラの楽しみ方が体験できます。 ●フィルターをつかおうモザイク、ミラー、アート、3D、ソフト、ビンテージ、マンガ風など、すでにつくられたフィルターや、毎日新しくつくられるフィルターを使って、写真や動画を撮りましょう。 ●フィルターをつくろうエンジニアの方は、専用PCサイト上（http://filters.kayac.com/edit）でコーディングしてオリジナルのフィルターをつくりましょう。開発言語はGLSL（OpenGL Shading Lang
Shadertoy BETA
Build and Share your best shaders with the world and get Inspired Latest contributions: "Drawing a circle again bruh" by defnixx 22 minutes ago, "RWMusic toolbox" by RoosterWho 57 minutes ago, "Iridescent Spirals" by anej 57 minutes ago, "vortex knot flow field" by Boogaloo 1 hour ago, "Gaussian-ish airglow approx." by FordPerfect 1 hour ago
Inigo Quilez
Intro Here you will find the distance functions for basic primitives, plus the formulas for combining them together for building more complex shapes, as well as some distortion functions that you can use to shape your objects. Hopefully this will be useful for those rendering scenes with raymarching. You can see some of the results you can get by using these techniques in the raymarching distance
アドビの新プロジェクト：JavaScript で WebGL シェーダを記述できる ShaderDSL.js - akihiro kamijo
アドビの新しいオープンソースプロジェクトが公開されました。WebGL のシェーダを JavaScript で記述できるよう開発されたフレームワーク ShaderDSL.js です。 WebGL の場合は、シェーダーの記述に使用される言語は GLSL が一般的です。そのため、一般的な Web 開発者にとっては、WebGL を使うには、機能だけでなく、新しい言語を学ぶという手間も発生します。 また、複数のの言語を使って Web ページを記述するのは、メンテ等も大変そうです。そこで、JavaScript で WebGL のシェーダーが記述できたたらよいね！と思ったアドビが新しいフレームワークの開発に着手したというお話です。 （なぜアドビがこんなフレームワークを開発しているのか妄想してみると楽しいかもです） ShaderDSL.js は、内部的に Gladder と RiverTrail を利用し
四元数(クォータニオン)でモデルを回転
四元数（クォータニオン）でトーラスを回転 なかなかGLSLのサンプルに到達できないのですが、GLSLの前に、モデルをグリグリ動かすことはやっておいた方がいいと思い、四元数（クォータニオン）でモデルを回転するサンプルを作成しました。クォータニオンについては、ネット上にいろいろ解説がでており、私はそれよりもきちんと説明できる自信はないのですが、簡単に紹介します。 クォータニオンは、一つの実数部と三つの虚数部（みたいなもの）i, j, kから成る数で、次のように表記します。 ここで、i2 = j2 = k2 = ijk = -1 が成り立ちます。3次元の座標(x, y, z)は、クォータニオンを使用して次のように表現します。 また、任意軸 (ax, ay, az) 回りのθ回転は、次のように表すことができます。 この時、3次元座標pの任意軸回りの回転qは、次のような計算が成り立ちます。 ここで、
GLSL Sandbox Gallery
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAgAElEQVR4Xry9B5idV3Wvv496l6b3mTMzmlGZkWY00siS1UbVtiRbrpJs2bIs29iWjbFDMUbGFsWATTMlgKimmZjQEgLEJAFDKAmEUBISckkxCfcmhJQbSG/n/757n2/OOVOkGfJ/7n6erTOjOd/+vm+XtX7rt9ZeOxdCKFBHSy4XQueyENqXhtC6JISWJdWhbUldyC9rCD3VzaG3oTWEjs4QBrtCWPNPXHd18JqsnBgM4fjA3rCz74IQ1vaFsLExhKq/4c+PUb9MvYX6zuI1z+fnNdTjobsqhD/5+1fz82rq26m/VP5Y5/158dwQzox0
GLSLシェーダによるカートゥーンレンダリング
今日は、GLSLによるカートゥーンを紹介しようと思います。割と簡単にでき、それなりに見栄えがするからです。その応用として、輪郭線も描画します。 カートゥーンの原理 カートゥーンはセルアニメ調のレンダリングです。左下の図に示すように、頂点vにおいて、法線と光源ベクトル（頂点から光源へのベクトル）との内積（照度）を、右下の図のようなテクスチャのs座標に当てはめることで簡単に実現できます。 更に、次の図の左のように、視線ベクトルと法線の内積を考えると、輪郭となる部分はほぼ0になります。そのため、その内積をt座標に割り当てることで、輪郭線を実現できます。 s座標もt座標も単位ベクトル同士の内積で計算できますが、その範囲は-1～1になるため、テクスチャマッピング（glTexParameterによる指定）をクランプに設定する必要があります。 バーテックスシェーダ（頂点シェーダ） 今回は、頂点シェーダで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フラグメントシェーダの実装チュートリアルや小さなデモが多数公開されているブログ xdPixel - WebGL 総本山
Lebarba