// Sun shader implementation based on:

// https://sangillee.com/2024-06-29-create-realistic-sun-with-shaders/

// Uses exact shaders from the article with 3D sphere geometry

import { useEffect, useRef, useState } from "react";

// Generate sphere geometry

function createSphere(radius: number, segments: number) {

const vertices: number[] = [];

const normals: number[] = [];

const indices: number[] = [];

for (let lat = 0; lat <= segments; lat++) {

const theta = (lat * Math.PI) / segments;

const sinTheta = Math.sin(theta);

const cosTheta = Math.cos(theta);

for (let lon = 0; lon <= segments; lon++) {

const phi = (lon * 2 * Math.PI) / segments;

const sinPhi = Math.sin(phi);

const cosPhi = Math.cos(phi);

const x = cosPhi * sinTheta;

const y = cosTheta;

const z = sinPhi * sinTheta;

vertices.push(radius * x, radius * y, radius * z);

normals.push(x, y, z);

}

}

for (let lat = 0; lat < segments; lat++) {

for (let lon = 0; lon < segments; lon++) {

const first = lat * (segments + 1) + lon;

const second = first + segments + 1;

indices.push(first, second, first + 1);

indices.push(second, second + 1, first + 1);

}

}

return { vertices, normals, indices };

}

export default function SunBackground() {

const canvasRef = useRef<HTMLCanvasElement>(null);

const glRef = useRef<WebGLRenderingContext | null>(null);

const programRef = useRef<WebGLProgram | null>(null);

const animationFrameRef = useRef<number>();

const timeRef = useRef(0);

const isVisibleRef = useRef(true);

const [showSun, setShowSun] = useState(false);

const [isDark, setIsDark] = useState(false);

useEffect(() => {

if (typeof document === "undefined") return;

const checkTheme = () => {

const theme = document.documentElement.getAttribute("data-color-theme");

setShowSun(theme === "sun");

setIsDark(document.documentElement.classList.contains("dark"));

};

checkTheme();

const observer = new MutationObserver(checkTheme);

observer.observe(document.documentElement, {

attributes: true,

attributeFilter: ["data-color-theme", "class"],

});

const handleStorageChange = () => {

checkTheme();

};

window.addEventListener("storage", handleStorageChange);

const interval = setInterval(checkTheme, 100);

return () => {

observer.disconnect();

window.removeEventListener("storage", handleStorageChange);

clearInterval(interval);

};

}, []);

useEffect(() => {

if (!showSun) return;

const canvas = canvasRef.current;

if (!canvas) return;

const gl = canvas.getContext("webgl");

if (!gl) {

console.error("WebGL not supported or context creation failed");

return;

}

glRef.current = gl;

// Vertex shader - exact from article

const vertexShaderSource = `

attribute vec3 position;

attribute vec3 normal;

uniform mat4 modelMatrix;

uniform mat4 viewMatrix;

uniform mat4 projectionMatrix;

uniform mat3 normalMatrix;

varying vec3 vPosition;

varying vec3 vPositionModel; // Original model-space position for texture

varying vec3 vNormal;

varying vec3 vNormalModel;

varying vec3 vNormalView;

void main() {

vec4 worldPosition = modelMatrix * vec4(position, 1.0);

vec4 viewPosition = viewMatrix * worldPosition;

// Use the actual sphere surface position (normalized world position)

vPosition = normalize(worldPosition.xyz);

// Keep original model-space position for texture coordinates (doesn't rotate)

vPositionModel = normalize(position);

vNormal = normalize(mat3(modelMatrix) * normal);

vNormalModel = normal;

vNormalView = normalize(normalMatrix * normal);

gl_Position = projectionMatrix * viewPosition;

}

`;

// Fragment shader - exact from article

const fragmentShaderSource = `

precision highp float;

uniform float u_time;

varying vec3 vPosition;

varying vec3 vPositionModel; // Original model-space position for texture

varying vec3 vNormal;

varying vec3 vNormalModel;

varying vec3 vNormalView;

float random (in vec3 st) {

return fract(sin(dot(st,vec3(12.9898,78.233,23.112)))*12943.145);

}

float noise (in vec3 _pos) {

vec3 i_pos = floor(_pos);

vec3 f_pos = fract(_pos);

float i_time = floor(u_time*0.2);

float f_time = fract(u_time*0.2);

// Four corners in 2D of a tile

float aa = random(i_pos + i_time);

float ab = random(i_pos + i_time + vec3(1., 0., 0.));

float ac = random(i_pos + i_time + vec3(0., 1., 0.));

float ad = random(i_pos + i_time + vec3(1., 1., 0.));

float ae = random(i_pos + i_time + vec3(0., 0., 1.));

float af = random(i_pos + i_time + vec3(1., 0., 1.));

float ag = random(i_pos + i_time + vec3(0., 1., 1.));

float ah = random(i_pos + i_time + vec3(1., 1., 1.));

float ba = random(i_pos + (i_time + 1.));

float bb = random(i_pos + (i_time + 1.) + vec3(1., 0., 0.));

float bc = random(i_pos + (i_time + 1.) + vec3(0., 1., 0.));

float bd = random(i_pos + (i_time + 1.) + vec3(1., 1., 0.));

float be = random(i_pos + (i_time + 1.) + vec3(0., 0., 1.));

float bf = random(i_pos + (i_time + 1.) + vec3(1., 0., 1.));

float bg = random(i_pos + (i_time + 1.) + vec3(0., 1., 1.));

float bh = random(i_pos + (i_time + 1.) + vec3(1., 1., 1.));

// Smooth step

vec3 t = smoothstep(0., 1., f_pos);

float t_time = smoothstep(0., 1., f_time);

// Mix 4 corners percentages

return

mix(

mix(

mix(mix(aa,ab,t.x), mix(ac,ad,t.x), t.y),

mix(mix(ae,af,t.x), mix(ag,ah,t.x), t.y),

t.z),

mix(

mix(mix(ba,bb,t.x), mix(bc,bd,t.x), t.y),

mix(mix(be,bf,t.x), mix(bg,bh,t.x), t.y),

t.z),

t_time);

}

#define NUM_OCTAVES 6

float fBm ( in vec3 _pos, in float sz) {

float v = 0.0;

float a = 0.2;

_pos *= sz;

vec3 angle = vec3(-0.001*u_time,0.0001*u_time,0.0004*u_time);

mat3 rotx = mat3(1, 0, 0,

0, cos(angle.x), -sin(angle.x),

0, sin(angle.x), cos(angle.x));

mat3 roty = mat3(cos(angle.y), 0, sin(angle.y),

0, 1, 0,

-sin(angle.y), 0, cos(angle.y));

mat3 rotz = mat3(cos(angle.z), -sin(angle.z), 0,

sin(angle.z), cos(angle.z), 0,

0, 0, 1);

for (int i = 0; i < NUM_OCTAVES; ++i) {

v += a * noise(_pos);

_pos = rotx * roty * rotz * _pos * 2.0;

a *= 0.8;

}

return v;

}

void main() {

vec3 st = vPositionModel;

vec3 q = vec3(0.);

q.x = fBm( st, 5.);

q.y = fBm( st + vec3(1.2,3.2,1.52), 5.);

q.z = fBm( st + vec3(0.02,0.12,0.152), 5.);

float n = fBm(st+q+vec3(1.82,1.32,1.09), 5.);

vec3 color = vec3(0.);

color = mix(vec3(1.,0.4,0.), vec3(1.,1.,1.), n*n);

color = mix(color, vec3(1.,0.,0.), q*0.7);

gl_FragColor = vec4(1.6*color, 1.);

// Glow effect - exact from article

float raw_intensity = max(dot(vPosition, vNormalView), 0.);

float intensity = pow(raw_intensity, 4.);

vec3 u_color = vec3(1.0, 0.8, 0.4);

vec4 glowColor = vec4(u_color, intensity);

// Fresnel effect - exact from article

//float fresnelTerm_inner = 0.2 - 0.7 * min(dot(vPosition, vNormalView), 0.0);

//fresnelTerm_inner = pow(fresnelTerm_inner, 5.0);

//float fresnelTerm_outer = 1.0 + dot(normalize(vPosition), normalize(vNormalView));

//fresnelTerm_outer = pow(fresnelTerm_outer, 2.0);

//float fresnelTerm = fresnelTerm_inner + fresnelTerm_outer;

// Combine - exact from article

//gl_FragColor = vec4(color, 0.7)*fresnelTerm + glowColor;

}

`;

// Compile shader

function createShader(

gl: WebGLRenderingContext,

type: number,

source: string

): WebGLShader | null {

const shader = gl.createShader(type);

if (!shader) return null;

gl.shaderSource(shader, source);

gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

console.error("Shader compile error:", gl.getShaderInfoLog(shader));

gl.deleteShader(shader);

return null;

}

return shader;

}

// Create program

function createProgram(

gl: WebGLRenderingContext,

vertexShader: WebGLShader,

fragmentShader: WebGLShader

): WebGLProgram | null {

const program = gl.createProgram();

if (!program) return null;

gl.attachShader(program, vertexShader);

gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {

console.error("Program link error:", gl.getProgramInfoLog(program));

gl.deleteProgram(program);

return null;

}

return program;

}

// Matrix helpers

function createIdentityMatrix(): Float32Array {

return new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);

}

function createOrthographicMatrix(

left: number,

right: number,

bottom: number,

top: number,

near: number,

far: number

): Float32Array {

return new Float32Array([

2 / (right - left),

0,

0,

0,

0,

2 / (top - bottom),

0,

0,

0,

0,

-2 / (far - near),

0,

-(right + left) / (right - left),

-(top + bottom) / (top - bottom),

-(far + near) / (far - near),

1,

]);

}

function createLookAtMatrix(

eyeX: number,

eyeY: number,

eyeZ: number,

centerX: number,

centerY: number,

centerZ: number,

upX: number,

upY: number,

upZ: number

): Float32Array {

const fx = centerX - eyeX;

const fy = centerY - eyeY;

const fz = centerZ - eyeZ;

const len = Math.sqrt(fx * fx + fy * fy + fz * fz);

const f = [fx / len, fy / len, fz / len];

const sx = fy * upZ - fz * upY;

const sy = fz * upX - fx * upZ;

const sz = fx * upY - fy * upX;

const lenS = Math.sqrt(sx * sx + sy * sy + sz * sz);

const s = [sx / lenS, sy / lenS, sz / lenS];

const ux = s[1] * f[2] - s[2] * f[1];

const uy = s[2] * f[0] - s[0] * f[2];

const uz = s[0] * f[1] - s[1] * f[0];

return new Float32Array([

s[0],

ux,

-f[0],

0,

s[1],

uy,

-f[1],

0,

s[2],

uz,

-f[2],

0,

-(s[0] * eyeX + s[1] * eyeY + s[2] * eyeZ),

-(ux * eyeX + uy * eyeY + uz * eyeZ),

f[0] * eyeX + f[1] * eyeY + f[2] * eyeZ,

1,

]);

}

function createNormalMatrix(modelMatrix: Float32Array): Float32Array {

// Extract upper-left 3x3 from model matrix

const m00 = modelMatrix[0],

m01 = modelMatrix[1],

m02 = modelMatrix[2];

const m10 = modelMatrix[4],

m11 = modelMatrix[5],

m12 = modelMatrix[6];

const m20 = modelMatrix[8],

m21 = modelMatrix[9],

m22 = modelMatrix[10];

// For rotation matrices, inverse transpose = same matrix

// Return the 3x3 rotation part

return new Float32Array([m00, m01, m02, m10, m11, m12, m20, m21, m22]);

}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);

const fragmentShader = createShader(

gl,

gl.FRAGMENT_SHADER,

fragmentShaderSource

);

if (!vertexShader || !fragmentShader) {

console.error("Failed to create shaders");

return;

}

const program = createProgram(gl, vertexShader, fragmentShader);

if (!program) {

console.error("Failed to create program");

return;

}

programRef.current = program;

// Create sphere geometry

const sphere = createSphere(0.6, 32);

const vertexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

gl.bufferData(

gl.ARRAY_BUFFER,

new Float32Array(sphere.vertices),

gl.STATIC_DRAW

);

const normalBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);

gl.bufferData(

gl.ARRAY_BUFFER,

new Float32Array(sphere.normals),

gl.STATIC_DRAW

);

const indexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

gl.bufferData(

gl.ELEMENT_ARRAY_BUFFER,

new Uint16Array(sphere.indices),

gl.STATIC_DRAW

);

const positionLocation = gl.getAttribLocation(program, "position");

const normalLocation = gl.getAttribLocation(program, "normal");

const timeLocation = gl.getUniformLocation(program, "u_time");

const modelMatrixLocation = gl.getUniformLocation(program, "modelMatrix");

const viewMatrixLocation = gl.getUniformLocation(program, "viewMatrix");

const projectionMatrixLocation = gl.getUniformLocation(

program,

"projectionMatrix"

);

const normalMatrixLocation = gl.getUniformLocation(program, "normalMatrix");

gl.enable(gl.DEPTH_TEST);

gl.enable(gl.BLEND);

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

const resizeCanvas = () => {

const container = canvas.parentElement;

if (container) {

const rect = container.getBoundingClientRect();

const width = Math.max(rect.width, window.innerWidth);

const height = Math.max(rect.height, window.innerHeight);

canvas.width = width;

canvas.height = height;

gl.viewport(0, 0, canvas.width, canvas.height);

} else {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

gl.viewport(0, 0, canvas.width, canvas.height);

}

};

resizeCanvas();

setTimeout(resizeCanvas, 100);

window.addEventListener("resize", resizeCanvas);

const handleVisibilityChange = () => {

isVisibleRef.current = !document.hidden;

};

const handleWindowBlur = () => {

isVisibleRef.current = false;

};

const handleWindowFocus = () => {

isVisibleRef.current = true;

};

document.addEventListener("visibilitychange", handleVisibilityChange);

window.addEventListener("blur", handleWindowBlur);

window.addEventListener("focus", handleWindowFocus);

isVisibleRef.current = !document.hidden && document.hasFocus();

const render = () => {

if (!isVisibleRef.current) {

animationFrameRef.current = requestAnimationFrame(render);

return;

}

if (!gl || !program) return;

timeRef.current += 0.016;

gl.useProgram(program);

gl.clearColor(0, 0, 0, 1);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Set up matrices with aspect ratio correction

const aspect = canvas.width / canvas.height;

// Rotate around vertical Y axis through time

const rotationY = timeRef.current * 0.15;

const cosY = Math.cos(rotationY);

const sinY = Math.sin(rotationY);

// Rotation matrix around Y axis (vertical)

const modelMatrix = new Float32Array([

cosY,

0,

sinY,

0,

0,

1,

0,

0,

-sinY,

0,

cosY,

0,

0,

0,

0,

1,

]);

// Recalculate normal matrix for the rotated model

const m00 = modelMatrix[0],

m01 = modelMatrix[1],

m02 = modelMatrix[2];

const m10 = modelMatrix[4],

m11 = modelMatrix[5],

m12 = modelMatrix[6];

const m20 = modelMatrix[8],

m21 = modelMatrix[9],

m22 = modelMatrix[10];

const normalMatrix = new Float32Array([

m00,

m01,

m02,

m10,

m11,

m12,

m20,

m21,

m22,

]);

const viewMatrix = createLookAtMatrix(0, 0, 2, 0, 0, 0, 0, 1, 0);

// Use perspective projection

const fov = Math.PI / 4;

const near = 0.1;

const far = 10;

const f = 1.0 / Math.tan(fov / 2);

const range = 1.0 / (near - far);

const projectionMatrix = new Float32Array([

f / aspect,

0,

0,

0,

0,

f,

0,

0,

0,

0,

(near + far) * range,

-1,

0,

0,

near * far * range * 2,

0,

]);

// Set uniforms

if (timeLocation) gl.uniform1f(timeLocation, timeRef.current);

if (modelMatrixLocation)

gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);

if (viewMatrixLocation)

gl.uniformMatrix4fv(viewMatrixLocation, false, viewMatrix);

if (projectionMatrixLocation)

gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

if (normalMatrixLocation)

gl.uniformMatrix3fv(normalMatrixLocation, false, normalMatrix);

// Set up attributes

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

gl.enableVertexAttribArray(positionLocation);

gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);

gl.enableVertexAttribArray(normalLocation);

gl.vertexAttribPointer(normalLocation, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

gl.drawElements(

gl.TRIANGLES,

sphere.indices.length,

gl.UNSIGNED_SHORT,

0

);

animationFrameRef.current = requestAnimationFrame(render);

};

render();

return () => {

window.removeEventListener("resize", resizeCanvas);

document.removeEventListener("visibilitychange", handleVisibilityChange);

window.removeEventListener("blur", handleWindowBlur);

window.removeEventListener("focus", handleWindowFocus);

if (animationFrameRef.current) {

cancelAnimationFrame(animationFrameRef.current);

}

if (program) {

gl.deleteProgram(program);

}

if (vertexShader) {

gl.deleteShader(vertexShader);

}

if (fragmentShader) {

gl.deleteShader(fragmentShader);

}

};

}, [showSun, isDark]);

if (!showSun) return null;

return (

<canvas

ref={canvasRef}

className="absolute inset-0 w-full h-full pointer-events-none"

/>

);

}