Enviar búsqueda
Cargar
GLSLによるシェーダーアートことはじめ
•
32 recomendaciones
•
9,274 vistas
Yoichi Hirata
Seguir
シェーダーアートの解説 for Pdの民
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 13
Descargar ahora
Descargar para leer sin conexión
Recomendados
衝突判定
衝突判定
Moto Yan
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
Sho Hosoda
つぶやきGLSLのススメ
つぶやきGLSLのススメ
notargs
BRDF レンダリングの方程式
BRDF レンダリングの方程式
康弘 等々力
プログラムを高速化する話
プログラムを高速化する話
京大 マイコンクラブ
中級グラフィックス入門~シャドウマッピング総まとめ~
中級グラフィックス入門~シャドウマッピング総まとめ~
ProjectAsura
なぜなにリアルタイムレンダリング
なぜなにリアルタイムレンダリング
Satoshi Kodaira
楽しいShaderToy
楽しいShaderToy
Masaki Sasaki
Más contenido relacionado
La actualidad más candente
明日使えないすごいビット演算
明日使えないすごいビット演算
京大 マイコンクラブ
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
Takahiro Miyaura
プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造
Takuya Akiba
BRDFモデルの変遷
BRDFモデルの変遷
Teppei Kurita
Substance勉強会 in Osaka
Substance勉強会 in Osaka
Aiko Shinohara
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについて
alwei
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
Hirokazu Onomichi
つぶやきGLSLとは
つぶやきGLSLとは
GearsRenard
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
Drecom Co., Ltd.
ROSでつながるVRChat
ROSでつながるVRChat
Hirokazu Onomichi
UnityとROSの連携について
UnityとROSの連携について
UnityTechnologiesJapan002
色々なダイクストラ高速化
色々なダイクストラ高速化
yosupo
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
Kei Mesuda
プログラミングコンテストでの動的計画法
プログラミングコンテストでの動的計画法
Takuya Akiba
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
historia_Inc
画像認識の初歩、SIFT,SURF特徴量
画像認識の初歩、SIFT,SURF特徴量
takaya imai
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
Takashi Yoshinaga
【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
torisoup
HoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとり
聡 大久保
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境
KiyotomoHiroyasu
La actualidad más candente
(20)
明日使えないすごいビット演算
明日使えないすごいビット演算
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造
BRDFモデルの変遷
BRDFモデルの変遷
Substance勉強会 in Osaka
Substance勉強会 in Osaka
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについて
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
つぶやきGLSLとは
つぶやきGLSLとは
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
ROSでつながるVRChat
ROSでつながるVRChat
UnityとROSの連携について
UnityとROSの連携について
色々なダイクストラ高速化
色々なダイクストラ高速化
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
プログラミングコンテストでの動的計画法
プログラミングコンテストでの動的計画法
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
画像認識の初歩、SIFT,SURF特徴量
画像認識の初歩、SIFT,SURF特徴量
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
HoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとり
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境
Último
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
2024 03 CTEA
2024 03 CTEA
arts yokohama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
Último
(11)
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
2024 03 CTEA
2024 03 CTEA
2024 04 minnanoito
2024 04 minnanoito
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
GLSLによるシェーダーアートことはじめ
1.
シェーダーアート (呼び方は安定してない模様) GPUのシェーダーを活用して描く絵
Shader Art / Shadertoy / Shader Effect / etc… いずれも 表示ポリゴン数1 3D演算なし しかし GPU必死
2.
Shaderis 何 頂点情報
Vertex Shader 頂点情報を 線や面に展開 面の1ピクセルごとに 色を塗ったり 絵を張り付ける Fragment Shader GPU プログラム コード GPUの中で、 頂点情報を受け取ってから 色をつけるまでの処理をする部分
3.
3DCGの「陰影」や「反射」等の光学的視覚効果は そういう図形や画像を用意して貼っているわけではなく、 Fragment
Shaderが光具合に応じた色の塗り方を計算している 上に近い部分ほど 白く塗るシェーダー オリジナルのシェーダーを作って 模様を描ける! Fragment Shaderの処理 フラットシェーダー (ベタ塗り)
4.
シェーダーアートの特徴 ・Fragment Shaderは色を塗るためのものなので
図形を直接描きこむ機能は無い ・画面に広げた四角いポリゴンをキャンバスにして、 Fragment Shaderで色を塗る ・すべてのピクセル(フラグメント)の色が、 同じプログラムで決められる 点や線の概念に縛られない 滑らかな表現が可能
5.
GLSL (OpenGL Shading
Language)の基礎の基礎 #ifdef GL_ES precision mediump float; #endif uniform float time; uniform vec2 mouse; uniform vec2 resolution; void main( void ) { vec2 pos = ( gl_FragCoord.xy / resolution.xy ); float col = pos.x; gl_FragColor = vec4(col, 0.0, 0.0, 1.0 ); } GLSL sandboxで作ってみる http://glslsandbox.com/e#21788.0 シェーダの外部から 与えられる変数 時刻(ミリ秒) ポインタの位置(x, y)0.0~1.0 ウィンドウサイズ(x,y) おまじない pos.x, pos.y に、今見ているピクセルの座標を0.0~1.0の範囲に変換して格納する ココをいじってみる 全てのピクセルが、同じプログラムで計算された色で塗られる
6.
GLSL (OpenGL Shading
Language)の基礎の基礎 比例関数y=xの yを色に割り当ててみる 今見ているピクセルのX座標(0~1) 今見ているピクセルに塗る色 濃い 薄い R G B A (0,0) (1,0) (0,1) (1,1) gl_FragColor = vec4(col, 0.0, 0.0, 1.0); float col = pos.x; 例1
7.
GLSL (OpenGL Shading
Language)の基礎の基礎 反比例の式を横に0.5スライドさせた絶対値 gl_FragColor = vec4(col, 0.0, 0.0, 1.0); float col = abs( 0.1 / (pos.x-0.5)); 濃い 薄い (0,0) (1,0) (0,1) (1,1) 0.5 ここの数値を変えると…? y = | 0.1 / (x-0.5) | 例2
8.
GLSL (OpenGL Shading
Language)の基礎の基礎 この式に近いほど色を濃くする y = 0.5sin(2πx)+0.5 (0,0) (1,0) (0,1) (1,1) 0.5 1.0 0 1.0 gl_FragColor = vec4(0.0, col, 0.0, 1.0); float col= abs( 0.1 / (sin(2.0 * 3.14 * pos.x) * 0.5 + 0.5 -pos.y ) ); 今見ているピクセルのY座標(0~1) 例3
9.
GLSL (OpenGL Shading
Language)の基礎の基礎 時間の要素を加えると動くよ! gl_FragColor = vec4(0.0, col, 0.0, 1.0); float col= abs( 0.1 / (sin(2.0 * 3.14* pos.x + time ) * 0.5 + 0.5 -pos.y ) ); 時刻(ミリ秒) 例4
10.
GLSL (OpenGL Shading
Language)の基礎の基礎 式のカッコを1つ付け忘れたら、何やら謎の模様に gl_FragColor = vec4(0.0, col, 0.0, 1.0); float col= abs( 0.1 / sin(2.0 * 3.14 * pos.x + time) * 0.5 + 0.5-pos.y ); (0,0) (1,0) (0,1) (1,1) 例5
11.
GEMでGLSLを使う Pdで生成した数値をシェーダーに送りこめる! sandboxから移植してきてコントロールするだけで楽しい!
uniform float siginput; Shader ・・・ ・・・・・・・・・・ Pd patch サンプルhttp://goo.gl/XPKOaZ
12.
Fragment Shaderのみプログラムする場合 Vertex
ShaderとFragments Shaderがリンクしてはじめて画像ができる。(P.2参照) Vertex Shaderもプログラムする場合 GEMでGLSLを使う(詳細)
13.
http://glslsandbox.comGLSL sandbox http://shadertoy.comShadertoy
http://pixelshaders.com/PIXELSHADERS http://www.demoscene.jp/?p=1147DEMOSCENE.JPの解説 http://wgld.org/d/glsl/g001.htmlwgld| GLSLだけでレンダリング https://www.khronos.org/files/opengles_shading_language.pdf GLSL ESの仕様書 おすすめサイト http://tkrkapps.blogspot.jp おわり
Descargar ahora