SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
シェーダーアート 
(呼び方は安定してない模様) 
GPUのシェーダーを活用して描く絵 
Shader Art / Shadertoy / Shader Effect / etc… 
いずれも 
表示ポリゴン数1 
3D演算なし 
しかし 
GPU必死
Shaderis 何 
頂点情報 
Vertex Shader 
頂点情報を 
線や面に展開 
面の1ピクセルごとに 
色を塗ったり 
絵を張り付ける 
Fragment Shader 
GPU 
プログラム コード 
GPUの中で、 
頂点情報を受け取ってから 
色をつけるまでの処理をする部分
3DCGの「陰影」や「反射」等の光学的視覚効果は 
そういう図形や画像を用意して貼っているわけではなく、 
Fragment Shaderが光具合に応じた色の塗り方を計算している 
上に近い部分ほど 
白く塗るシェーダー 
オリジナルのシェーダーを作って 
模様を描ける! 
Fragment Shaderの処理 
フラットシェーダー 
(ベタ塗り)
シェーダーアートの特徴 
・Fragment Shaderは色を塗るためのものなので 
図形を直接描きこむ機能は無い 
・画面に広げた四角いポリゴンをキャンバスにして、 
Fragment Shaderで色を塗る 
・すべてのピクセル(フラグメント)の色が、 
同じプログラムで決められる 
点や線の概念に縛られない 
滑らかな表現が可能
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の範囲に変換して格納する 
ココをいじってみる 
全てのピクセルが、同じプログラムで計算された色で塗られる
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
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
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
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
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
GEMでGLSLを使う 
Pdで生成した数値をシェーダーに送りこめる! 
sandboxから移植してきてコントロールするだけで楽しい! 
uniform float siginput; 
Shader 
・・・ 
・・・・・・・・・・ 
Pd patch 
サンプルhttp://goo.gl/XPKOaZ
Fragment Shaderのみプログラムする場合 
Vertex ShaderとFragments Shaderがリンクしてはじめて画像ができる。(P.2参照) 
Vertex Shaderもプログラムする場合 
GEMでGLSLを使う(詳細)
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 
おわり

Más contenido relacionado

La actualidad más candente

OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみたOpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみたTakahiro Miyaura
 
プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造Takuya Akiba
 
BRDFモデルの変遷
BRDFモデルの変遷BRDFモデルの変遷
BRDFモデルの変遷Teppei Kurita
 
Substance勉強会 in Osaka
Substance勉強会 in OsakaSubstance勉強会 in Osaka
Substance勉強会 in OsakaAiko Shinohara
 
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについてカスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについてalwei
 
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~Hirokazu Onomichi
 
つぶやきGLSLとは
つぶやきGLSLとはつぶやきGLSLとは
つぶやきGLSLとはGearsRenard
 
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介Drecom Co., Ltd.
 
色々なダイクストラ高速化
色々なダイクストラ高速化色々なダイクストラ高速化
色々なダイクストラ高速化yosupo
 
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集Kei Mesuda
 
プログラミングコンテストでの動的計画法
プログラミングコンテストでの動的計画法プログラミングコンテストでの動的計画法
プログラミングコンテストでの動的計画法Takuya Akiba
 
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!historia_Inc
 
画像認識の初歩、SIFT,SURF特徴量
画像認識の初歩、SIFT,SURF特徴量画像認識の初歩、SIFT,SURF特徴量
画像認識の初歩、SIFT,SURF特徴量takaya imai
 
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXRHoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXRTakashi Yoshinaga
 
【Unity】 Behavior TreeでAIを作る
 【Unity】 Behavior TreeでAIを作る 【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作るtorisoup
 
HoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとりHoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとり聡 大久保
 
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境RustによるGPUプログラミング環境
RustによるGPUプログラミング環境KiyotomoHiroyasu
 

La actualidad más candente (20)

明日使えないすごいビット演算
明日使えないすごいビット演算明日使えないすごいビット演算
明日使えないすごいビット演算
 
OpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみたOpenVRやOpenXRの基本的なことを調べてみた
OpenVRやOpenXRの基本的なことを調べてみた
 
プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造プログラミングコンテストでのデータ構造
プログラミングコンテストでのデータ構造
 
BRDFモデルの変遷
BRDFモデルの変遷BRDFモデルの変遷
BRDFモデルの変遷
 
Substance勉強会 in Osaka
Substance勉強会 in OsakaSubstance勉強会 in Osaka
Substance勉強会 in Osaka
 
カスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについてカスタムメモリマネージャと高速なメモリアロケータについて
カスタムメモリマネージャと高速なメモリアロケータについて
 
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
VRChatとシリアル通信、現実と仮想を結ぶ ~UdonとPythonによる仮想COMポートのつくり方~
 
つぶやきGLSLとは
つぶやきGLSLとはつぶやきGLSLとは
つぶやきGLSLとは
 
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
CEDEC 2016 Metal と Vulkan を用いた水彩画レンダリング技法の紹介
 
ROSでつながるVRChat
ROSでつながるVRChatROSでつながるVRChat
ROSでつながるVRChat
 
UnityとROSの連携について
UnityとROSの連携についてUnityとROSの連携について
UnityとROSの連携について
 
色々なダイクストラ高速化
色々なダイクストラ高速化色々なダイクストラ高速化
色々なダイクストラ高速化
 
GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集GLSLtech2018 レイマーチングで半歩差のつく小技集
GLSLtech2018 レイマーチングで半歩差のつく小技集
 
プログラミングコンテストでの動的計画法
プログラミングコンテストでの動的計画法プログラミングコンテストでの動的計画法
プログラミングコンテストでの動的計画法
 
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
【出張ヒストリア2019】COLORSプロジェクトフォトグラメトリに挑戦してみた!
 
画像認識の初歩、SIFT,SURF特徴量
画像認識の初歩、SIFT,SURF特徴量画像認識の初歩、SIFT,SURF特徴量
画像認識の初歩、SIFT,SURF特徴量
 
HoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXRHoloLens2とMeta QuestではじめるWebXR
HoloLens2とMeta QuestではじめるWebXR
 
【Unity】 Behavior TreeでAIを作る
 【Unity】 Behavior TreeでAIを作る 【Unity】 Behavior TreeでAIを作る
【Unity】 Behavior TreeでAIを作る
 
HoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとりHoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとり
 
RustによるGPUプログラミング環境
RustによるGPUプログラミング環境RustによるGPUプログラミング環境
RustによるGPUプログラミング環境
 

Último

2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~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___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)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~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___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」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?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技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)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 おわり