WebGLを使ったシェーダープログラミング入門

glsl.md

WebGLを使ったシェーダープログラミング入門

言語 GLSL

• OpenGL ES のシェーダーを書く言語
• C言語っぽいやつ
• だけどポインタはない

シェーダーとは

• OpenGL ESでは2つのシェーダーを設定
• バーテックスシェーダー
  • ワールド座標変換
  • ビュー座標変換
  • 射影変換
• フラグメントシェーダー
  • テクスチャ探索
  • デプステスト
  • ブレンディング

こいつらの処理を定義するプログラム

詳しくは、こちら

シェーダー簡単に言うと

• 時間情報や位置情報使って場所と色を定義するやつ

こんなの作った

https://sifue.github.io/webgl-study/

書いたシェーダーはこれ

• コード全体はこちら
• HTMLの中にscriptタグで書いたりする

フラグメントシェーダー

precision mediump float;
uniform float time;
uniform vec2  mouse;
uniform vec2  resolution;
	
void main(void){
		vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);
		vec2 color = (vec2(mouse) + p.xy) * 0.5;
		gl_FragColor = vec4(color, 0.0, time / 5.0);
}

• マウス位置とか時間とか解像位置を取れるよ
• vec2は浮動小数点数の2要素ベクトル、vec4は4要素

バーテックスシェーダー

attribute vec3 position;

void main(void){
		gl_Position = vec4(position, 1.0);
}

• 位置はなにもいじってないよ

オンラインの GLSL editor がとても便利

このデフォルトで見えてるのはジュリア集合というフラクタル画像。シェーダーはフラクタル書くのが楽らしい...。そういうのを書くセンスがない...。

GLSL editor

GLSL の細かい文法、結局リファレンスか！ただ良いQiita記事も

• OpenGL ES Shading Language (GLSL ES) Reference Pages
  • 誰か〜日本語に訳してくれ〜
• 型だけ日本語にまとめたページ、助かる
  • GLSL～4.1 基本の型
• このQiita記事がGLSLについて学べる神チュートリアルでした
  • [連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１）
• プリントデバッグとか甘えたものはありません！
  • 色デバッグの仕方