GLSLベース

GLSLリファレンスサイト

GLSLのコードは画面上のすべての画素にも適用されます.

文書

https://thebookofshaders.com/

ネットワーク編集

http://editor.thebookofshaders.com/

GLSLには独自の内蔵変数、関数があります!

ex)abs()、sin()など...
https://thebookofshaders.com/glossary
以上のリンクから表示可能

GLSLのデータ型

float, int, bool,
vec 2(float 2個)、vec 3(float 3個)、vec 4(float 4個)
vec4(R, G, B, A)
R,G,B,A:0〜1の数字.
ex)(200、0.9、31、1)入力時(1、0.9、1、1)出力

厳格な成形遷移

void main(){
	float f = 1;
    // 1이라는 정수(integer)를 f라는 float변수(실수)에 실수화 하여 할당.
    // 오류 발생.
    
    float f = 1.;
    // glsl은 형변환에 엄격하기 때문에 1이 아니라 1.을 입력해주어야 함.
}

このように符号化する

vec3 red(){
    return vec3(1., 0., 0.);
}

void main() {
	gl_FragColor = vec4(red(),1);
}

void main2() {
	gl_FragColor = vec4(vec3(1., 1., 1.),1);
}

uniform

CPUからGPUに情報を転送する変数

uniform float u_time;
	// u_time : 애플리케이션이 경과되어가는 시간을 나타내줌

void main(){
	gl_FragColor = vec4(abs(sin(u_time)), 0.0, 0.0, 1.0);
    
    // gl_FragColor : 색을 지정하는 변수
    // sin() : -1과 1 사이를 오가는 싸인 곡선을 그려주는 함수
    // abs() : 절대값을 그려주는 함수    
}

gl_FragCoord

ピクセルが持つ座標
座標は左下角の正方向にx軸とy軸を増やします.
GLSLのコードは画面上のすべての画素にも適用されます.
->同じコードが挿入され、ピクセルの色が異なりますか?
->各画素は異なる位置にあるので、自分の位置情報に基づいて解釈し、同じコードで異なる結果(画素)を生成する.

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main(){
	ver2 st = gl_FragCoord.xy / u_resolution;
    // 픽셀의 x좌표와 y좌표 두 개의 값을 필요로 하기 때문에 ver2(float 2개)로 선언
  	gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
    
  	// 화면 해상도가 500x500이라고 할 때
  	// 화면 중앙의 픽셀을 기준이라고 치면
  	vec2 st = vec2(250./500., 250./500.);
  	vec2 st = vec2(.5, .5);
  	gl_FragColor = vec4(.5, .5, 0., 1.);
  	// 해당 픽셀에는 Red 50%, Green 50% 섞인 Yellow 컬러가 표현됨.
  
  	// 화면 최하단 우측 픽셀을 기준이라고 치면
  	vec2 st = vec2(500./500., 0./500.);
  	vec2 st = vec2(1., 0.);
  	gl_FragColor = vec4(1., 0., 0., 1.);
  	// 해당 픽셀에는 Red 100%이므로 Red 컬러가 표현됨.
}

今日はここまで...
目を閉じて...