📝 ~ 

GLSL|Pointを丸くしライティングをつけて立体的にする

2024.03.17
RELATED CATEGORY
TABLE OF CONTENTS

GLSLでPointを丸くしライティング(平行光源)をつけて立体的にする方法をメモしています。

1. 丸くする

// fs
vec3 n;
n.xy = gl_PointCoord * 2.0 - 1.0;  // 座標値を [0, 1] → [-1, 1] に変換する
n.z = 1.0 - dot(n.xy, n.xy);  // 1 から x と y のそれぞれの二乗和を引く
if (n.z < 0.0) discard;  // 結果が負ならフラグメントを捨てる

リファレンス:床井研究室

2.ライティング(平行光源)で立体的にする

const vec3 LIGHT = vec3(1.0, 1.0, 1.0);

float diffuse  = clamp(dot(n, LIGHT), 0.1, 1.0);

vec3 baseColor = vec3(vUv, 1.0);
vec3 color = mix(baseColor, baseColor * diffuse, 0.25);

リファレンス:平行光源によるライティング

実行結果

PICKUP ARTWORK