Three.jsシェーダー・（平面ジオメトリでの実装・3D）

void main() {
 vec2 uv = (vUv * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
 // レイの起点: z軸上でカメラを少し後ろに
 vec3 ro = vec3(0.5, 0.0, -1.0);
 // レイの方向: スクリーンがz=0.0の平面上にあると仮定してカメラから見たスクリーン上の各点までの実際の方向
 vec3 rd = normalize(vec3(uv, 0.0)-ro);

 vec3 p = vec3(0.0, 0.0, 0.2 + sin(uTime));
//点pとレイroとの最短距離
 float d = DistLine(ro, rd, p);

 d = smoothstep(0.1, 0.09, d);
 gl_FragColor = vec4(vec3(d), 1.0);
}

//struct キーワードを用いて構造体を定義
struct ray {
    vec3 o;  // レイの原点
    vec3 d;  // レイの方向
};

ray CameraSetup(vec2 uv, vec3 camPos, vec3 lookAt, vec3 up, float zoom) {
    ray cam;
    //レイの原点
    cam.o = camPos;
    //カメラのxyz軸（f、r、u）を計算
    vec3 f = normalize(lookAt - cam.o);
    vec3 r = normalize(cross(up, f));
    vec3 u = normalize(cross(f, r));

    //視野平面の中心点
    vec3 c = cam.o + f * zoom;
    //視野内のスクリーン上の点i
    vec3 i = c + uv.x * r + uv.y * u;
    //レイの方向
    cam.d = normalize(i - cam.o);
    return cam;
}

void main() {
    vec2 uv = (vUv * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
    float zoom = 1.0;
    vec3 camPos = vec3(0.0 + sin(uTime), 0.0, -2.0 + sin(uTime));
    vec3 lookAt = vec3(0.0);
/*
カメラのアップベクトル:カメラの「上」方向が常にY軸方向
 vec3(0.0, 1.0, 0.0)
例えば、カメラを45度傾ける場合のアップベクトル
vec3(0.707, 0.707, 0.0); // X軸とY軸45度
*/
    vec3 up = vec3(0.0, 1.0, 0.0);

    ray r = CameraSetup(uv, camPos, lookAt, up, zoom);

    float d = DistLine(r.o, r.d, vec3(0.0, 0.0, 0.0));
    float d2 = DistLine(r.o, r.d, vec3(0.5, 0.5, 0.0));
    float d3 = DistLine(r.o, r.d, vec3(-0.5, -0.5, 0.0));
    float d4 = DistLine(r.o, r.d, vec3(0.5, -0.5, 0.0));
    float d5 = DistLine(r.o, r.d, vec3(-0.5, 0.5, 0.0));

    d = smoothstep(0.1, 0.09, d);
    d += smoothstep(0.1, 0.09, d2);
    d += smoothstep(0.1, 0.09, d3);
    d += smoothstep(0.1, 0.09, d4);
    d += smoothstep(0.1, 0.09, d5);

    gl_FragColor = vec4(vec3(d), 1.0);
}

float remap01(float a, float b, float t){
    return (t-a)/(b-a);
}

void main() {
    vec2 uv = (vUv * 2.0 - 1.0) * vec2(uResolution.x / uResolution.y, 1.0);
    vec3 col = vec3(0.0);

    vec3 ro = vec3(0.0);
    vec3 rd = normalize(vec3(uv, 1.0));

    vec3 s = vec3(0.0, 0.0, 4.0);
    float r = 1.5; 

    float t = dot(s - ro, rd);
/*
備考：外積を使ってレイに対する垂線の長さを計算
float y = DistLine(ro, rd, s);
*/
    vec3 p = ro + rd * t;
    float y = length(s - p);

    // レイが球と交差しているかを判定
    if (y < r) {
        // 交差している場合
        // 交差点の距離を計算
        float x = sqrt(r * r - y * y);
        // レイが球に入る点と出る点のパラメータを計算
        float t1 = t - x;
        float t2 = t + x;
        // 球のZ座標に基づいて色をリマップ : c=t1なら白
        float c = remap01(s.z, s.z - r, t1);
        col = vec3(c);
    }

     gl_FragColor = vec4(col, 1.0);
}

mat2 Rot(float a) {
	float s=sin(a), c=cos(a);
    return mat2(c,-s,s,c);
}


vec3 col = vec3(0.0);
vec3 ro = vec3(0.0, 0.0, 0.0);
vec3 rd = normalize(vec3(uv, 1.0));
vec3 s = vec3(0.0, 0.0, 3.0);
float r = 1.0;

float t = dot(s - ro, rd);
vec3 p = ro + rd * t;
float y = length(s - p);

if (y < r) {
        float x = sqrt(r*r - y * y);
        float t1 = t - x;
        float t2 = t + x;
        //t1とt2の球体の中心sに対して相対的な位置
        vec3 posF = ro + rd * t1 - s;
        vec3 posB = ro + rd * t2 - s;

        // 回転
        posF.xz *= Rot(uTime);

        //球体表面の交差点の座標と、その座標を基にしたUVマッピング座標を計算
        vec2 uvF = vec2(atan( posF.x,  posF.z),  posF.y);
        vec2 uvB = vec2(atan( posB.x,  posB.z),  posB.y);

        //前面のマッピング座標
        float d =  length(uvF);
        float m = smoothstep(0.5,0.6, d);
        col = vec3(m);
    }

gl_FragColor = vec4(col, 1.0);