Globe

# Globe
The original layered FBM energy sphere with translucent rim glow and depth-aware star field.

> 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code）
> 组件页：https://threeui.com/component/energy-orb · 预览动画：https://threeui.com/previews/energy-orb.webm
> 分类：Backgrounds

/* ===== src/shaders/globe/GlobeCollection.tsx (tsx) ===== */
import { lazy, Suspense } from "react";
import type { EnergyOrbProps } from "../energy-orb/EnergyOrb";
export type GlobeVariant = "energy-orb";
export type GlobeCollectionProps = EnergyOrbProps & { variant?: "energy-orb" };
const EnergyOrbVariant = lazy(() => import("../energy-orb/EnergyOrb").then((module) => ({ default: module.EnergyOrb })));
export function GlobeCollection({ variant: _variant, ...props }: GlobeCollectionProps) {
  return <Suspense fallback={<div className="threeui-background energy-orb" style={{ background: "#05030e" }} />}><EnergyOrbVariant {...props} /></Suspense>;
}

/* ===== src/shaders/energy-orb/EnergyOrb.tsx (tsx) ===== */
import { useEffect, useRef } from "react";
import { NXA_ENERGY_ORB_CONFIGURABLE_FRAGMENT_SHADER, NXA_ENERGY_ORB_VERTEX_SHADER } from "./energyOrbShaders";

export type EnergyOrbProps = {
  speed?: number;
  scale?: number;
  smokeScale?: number;
  smokeStrength?: number;
  smokeSpeed?: number;
  hue?: number;
  saturation?: number;
  glow?: number;
  starDensity?: number;
  starSpeed?: number;
  starSize?: number;
  brightness?: number;
  opacity?: number;
  className?: string;
};

export const ENERGY_ORB_DEFAULTS = {
  speed: 1,
  scale: 1,
  smokeScale: 1,
  smokeStrength: 1,
  smokeSpeed: 1,
  hue: 0,
  saturation: 1,
  glow: 1,
  starDensity: 1,
  starSpeed: 1,
  starSize: 1,
  brightness: 1,
  opacity: 1,
} as const;

type Star = { x: number; y: number; depth: number; phase: number; drift: number; size: number };

function compile(gl: WebGLRenderingContext, type: number, source: string) {
  const shader = gl.createShader(type);
  if (!shader) throw new Error("Unable to create energy-orb shader");
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    const message = gl.getShaderInfoLog(shader) ?? "Energy orb shader compilation failed";
    console.error(message);
    throw new Error(message);
  }
  return shader;
}

function seeded(index: number, salt: number) {
  return Math.abs(Math.sin(index * 91.173 + salt * 17.719) * 43758.5453) % 1;
}

function createStars(count: number): Star[] {
  return Array.from({ length: count }, (_, index) => ({
    x: seeded(index, 1),
    y: seeded(index, 2),
    depth: 0.25 + seeded(index, 3) * 0.75,
    phase: seeded(index, 4) * Math.PI * 2,
    drift: 0.35 + seeded(index, 5) * 0.65,
    size: 0.45 + seeded(index, 6) * 1.15,
  }));
}

function fract(value: number) {
  return value - Math.floor(value);
}

export function EnergyOrb({ className = "", ...props }: EnergyOrbProps) {
  const hostRef = useRef<HTMLDivElement>(null);
  const starCanvasRef = useRef<HTMLCanvasElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const optionsRef = useRef({ ...ENERGY_ORB_DEFAULTS, ...props });
  optionsRef.current = { ...ENERGY_ORB_DEFAULTS, ...props };

  useEffect(() => {
    const host = hostRef.current;
    const starCanvas = starCanvasRef.current;
    const canvas = canvasRef.current;
    if (!host || !starCanvas || !canvas) return undefined;

    const starContext = starCanvas.getContext("2d", { alpha: true });
    const gl = canvas.getContext("webgl", { alpha: true, premultipliedAlpha: false, antialias: true });
    if (!starContext || !gl) return undefined;

    const vertex = compile(gl, gl.VERTEX_SHADER, NXA_ENERGY_ORB_VERTEX_SHADER);
    const fragment = compile(gl, gl.FRAGMENT_SHADER, NXA_ENERGY_ORB_CONFIGURABLE_FRAGMENT_SHADER);
    const program = gl.createProgram();
    if (!program) {
      gl.deleteShader(vertex);
      gl.deleteShader(fragment);
      return undefined;
    }
    gl.attachShader(program, vertex);
    gl.attachShader(program, fragment);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
      const message = gl.getProgramInfoLog(program) ?? "Energy orb program link failed";
      console.error(message);
      throw new Error(message);
    }
    gl.useProgram(program);

    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
    const position = gl.getAttribLocation(program, "p");
    gl.enableVertexAttribArray(position);
    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);

    const uniforms = {
      time: gl.getUniformLocation(program, "uT"),
      resolution: gl.getUniformLocation(program, "uR"),
      smokeScale: gl.getUniformLocation(program, "uSmokeScale"),
      smokeStrength: gl.getUniformLocation(program, "uSmokeStrength"),
      smokeSpeed: gl.getUniformLocation(program, "uSmokeSpeed"),
      hue: gl.getUniformLocation(program, "uHue"),
      saturation: gl.getUniformLocation(program, "uSaturation"),
      glow: gl.getUniformLocation(program, "uGlow"),
    };
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.clearColor(0, 0, 0, 0);

    const stars = createStars(180);
    const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    let reducedMotion = motionQuery.matches;
    let width = 1;
    let height = 1;
    let starDpr = 1;
    let frame = 0;
    let visible = true;
    const startedAt = performance.now();

    const resize = () => {
      const bounds = host.getBoundingClientRect();
      width = Math.max(1, bounds.width);
      height = Math.max(1, bounds.height);
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      const bufferWidth = Math.max(1, Math.round(width * dpr));
      const bufferHeight = Math.max(1, Math.round(height * dpr));
      if (canvas.width !== bufferWidth || canvas.height !== bufferHeight) {
        canvas.width = bufferWidth;
        canvas.height = bufferHeight;
      }
      gl.viewport(0, 0, bufferWidth, bufferHeight);
      gl.uniform2f(uniforms.resolution, bufferWidth, bufferHeight);

      starDpr = Math.min(window.devicePixelRatio || 1, 1.5);
      const starWidth = Math.max(1, Math.round(width * starDpr));
      const starHeight = Math.max(1, Math.round(height * starDpr));
      if (starCanvas.width !== starWidth || starCanvas.height !== starHeight) {
        starCanvas.width = starWidth;
        starCanvas.height = starHeight;
      }
    };

    const drawStars = (elapsed: number) => {
      const options = optionsRef.current;
      starContext.setTransform(1, 0, 0, 1, 0, 0);
      starContext.clearRect(0, 0, starCanvas.width, starCanvas.height);
      const density = Math.max(0, options.starDensity);
      const count = Math.min(stars.length, Math.round((width * height / 4_200) * density));
      if (!count) return;

      starContext.setTransform(starDpr, 0, 0, starDpr, 0, 0);
      starContext.globalCompositeOperation = "screen";
      const particleTime = reducedMotion ? 0 : elapsed * Math.max(0, options.starSpeed);
      const colorHue = fract((252 + options.hue) / 360) * 360;
      for (let index = 0; index < count; index += 1) {
        const star = stars[index];
        const x = fract(star.x + particleTime * 0.0022 * star.drift) * width;
        const y = fract(star.y - particleTime * 0.0008 * star.depth + 1) * height;
        const twinkle = reducedMotion ? 0.78 : 0.58 + Math.sin(particleTime * (0.8 + star.depth) + star.phase) * 0.24;
        const alpha = Math.max(0.08, twinkle * (0.22 + star.depth * 0.48));
        const radius = Math.max(0.35, star.size * star.depth * Math.max(0.25, options.starSize));
        starContext.fillStyle = `hsla(${colorHue}, 84%, ${72 + star.depth * 20}%, ${alpha})`;
        starContext.beginPath();
        starContext.arc(x, y, radius, 0, Math.PI * 2);
        starContext.fill();
      }
      starContext.globalCompositeOperation = "source-over";
    };

    const render = (now: number) => {
      frame = 0;
      const options = optionsRef.current;
      const elapsed = (now - startedAt) * 0.001;
      drawStars(elapsed);
      gl.uniform1f(uniforms.time, elapsed * options.speed);
      gl.uniform1f(uniforms.smokeScale, Math.max(0.01, options.smokeScale));
      gl.uniform1f(uniforms.smokeStrength, Math.max(0, options.smokeStrength));
      gl.uniform1f(uniforms.smokeSpeed, Math.max(0, options.smokeSpeed));
      gl.uniform1f(uniforms.hue, options.hue * Math.PI / 180);
      gl.uniform1f(uniforms.saturation, Math.max(0, options.saturation));
      gl.uniform1f(uniforms.glow, Math.max(0, options.glow));
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, 3);
      if (visible && !document.hidden) frame = requestAnimationFrame(render);
    };

    const start = () => {
      if (!frame && visible && !document.hidden) frame = requestAnimationFrame(render);
    };
    const stop = () => {
      if (frame) cancelAnimationFrame(frame);
      frame = 0;
    };
    const onVisibilityChange = () => {
      if (document.hidden) stop();
      else start();
    };
    const onMotionChange = (event: MediaQueryListEvent) => {
      reducedMotion = event.matches;
    };

    const resizeObserver = new ResizeObserver(resize);
    const intersection = new IntersectionObserver(([entry]) => {
      visible = entry?.isIntersecting ?? true;
      if (visible) start();
      else stop();
    });
    resizeObserver.observe(host);
    intersection.observe(host);
    document.addEventListener("visibilitychange", onVisibilityChange);
    motionQuery.addEventListener("change", onMotionChange);
    resize();
    start();

    return () => {
      stop();
      resizeObserver.disconnect();
      intersection.disconnect();
      document.removeEventListener("visibilitychange", onVisibilityChange);
      motionQuery.removeEventListener("change", onMotionChange);
      gl.deleteBuffer(buffer);
      gl.deleteShader(vertex);
      gl.deleteShader(fragment);
      gl.deleteProgram(program);
    };
  }, []);

  const options = optionsRef.current;
  return (
    <div ref={hostRef} className={`threeui-background energy-orb${className ? ` ${className}` : ""}`} style={{ background: "#05030e" }}>
      <canvas ref={starCanvasRef} className="energy-orb__stars" aria-hidden="true" style={{ zIndex: 0, pointerEvents: "none" }} />
      <canvas ref={canvasRef} className="energy-orb__shader" aria-hidden="true" style={{ zIndex: 1, opacity: options.opacity, filter: `brightness(${options.brightness})`, transform: `scale(${options.scale})`, pointerEvents: "none" }} />
    </div>
  );
}

/* ===== src/shaders/energy-orb/energyOrbShaders.ts (typescript) ===== */
export const NXA_ENERGY_ORB_VERTEX_SHADER = "attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}";

export const NXA_ENERGY_ORB_FRAGMENT_SHADER = [
  "precision highp float;",
  "uniform float uT;uniform vec2 uR;",
  "float hash(vec3 p){p=fract(p*0.3183099+vec3(0.1,0.2,0.3));p*=17.0;return fract(p.x*p.y*p.z*(p.x+p.y+p.z));}",
  "float noise(vec3 x){vec3 i=floor(x);vec3 f=fract(x);f=f*f*(3.0-2.0*f);",
  " return mix(mix(mix(hash(i),hash(i+vec3(1,0,0)),f.x),mix(hash(i+vec3(0,1,0)),hash(i+vec3(1,1,0)),f.x),f.y),",
  " mix(mix(hash(i+vec3(0,0,1)),hash(i+vec3(1,0,1)),f.x),mix(hash(i+vec3(0,1,1)),hash(i+vec3(1,1,1)),f.x),f.y),f.z);}",
  "float fbm(vec3 p){float v=0.0;float a=0.5;for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.03+vec3(1.7);a*=0.5;}return v;}",
  "void main(){",
  " vec2 uv=(gl_FragCoord.xy-0.5*uR)/min(uR.x,uR.y);",
  " float r=length(uv);",
  " float R=0.31;",
  " vec3 col=vec3(0.0);float alpha=0.0;",
  " if(r<R){",
  "   float z=sqrt(R*R-r*r);",
  "   vec3 n=normalize(vec3(uv,z));",
  "   float ca=uT*0.15;",
  "   mat3 rot=mat3(cos(ca),0.,sin(ca),0.,1.,0.,-sin(ca),0.,cos(ca));",
  "   vec3 sp=rot*n;",
  "   float f1=fbm(sp*2.6+vec3(0.0,uT*0.12,0.0));",
  "   float f2=fbm(sp*4.5-vec3(uT*0.08,0.0,uT*0.05)+f1*1.8);",
  "   float veil=smoothstep(0.35,0.75,f2);",
  "   vec3 deep=vec3(0.04,0.02,0.12);",
  "   vec3 mid=vec3(0.22,0.16,0.55);",
  "   vec3 bright=vec3(0.62,0.60,0.98);",
  "   col=mix(deep,mid,f1*1.2);",
  "   col=mix(col,bright,veil*0.65);",
  "   float fres=pow(1.0-z/R,2.2);",
  "   col+=vec3(0.55,0.55,1.0)*fres*1.1;",
  "   float top=pow(max(dot(n,normalize(vec3(0.0,0.7,0.7))),0.0),3.0);",
  "   col+=vec3(0.45,0.42,0.9)*top*0.35;",
  "   alpha=1.0;",
  " }",
  " float glow=exp(-(r-R)*14.0);",
  " if(r>=R){",
  "   glow=clamp(glow,0.0,1.0);",
  "   col=vec3(0.55,0.52,1.0)*glow*0.8;",
  "   alpha=glow*0.85;",
  " } else {",
  "   float rim=smoothstep(R-0.03,R,r);",
  "   col+=vec3(0.6,0.58,1.0)*rim*0.6;",
  " }",
  " gl_FragColor=vec4(col,alpha);",
  "}",
].join("n");

// The canonical source above remains byte-for-byte intact for provenance checks.
// This host variant replaces only source constants with uniforms whose defaults
// reproduce the authored rendering exactly.
export const NXA_ENERGY_ORB_CONFIGURABLE_FRAGMENT_SHADER = [
  "precision highp float;",
  "uniform float uT;uniform vec2 uR;",
  "uniform float uSmokeScale;uniform float uSmokeStrength;uniform float uSmokeSpeed;",
  "uniform float uHue;uniform float uSaturation;uniform float uGlow;",
  "float hash(vec3 p){p=fract(p*0.3183099+vec3(0.1,0.2,0.3));p*=17.0;return fract(p.x*p.y*p.z*(p.x+p.y+p.z));}",
  "float noise(vec3 x){vec3 i=floor(x);vec3 f=fract(x);f=f*f*(3.0-2.0*f);",
  " return mix(mix(mix(hash(i),hash(i+vec3(1,0,0)),f.x),mix(hash(i+vec3(0,1,0)),hash(i+vec3(1,1,0)),f.x),f.y),",
  " mix(mix(hash(i+vec3(0,0,1)),hash(i+vec3(1,0,1)),f.x),mix(hash(i+vec3(0,1,1)),hash(i+vec3(1,1,1)),f.x),f.y),f.z);}",
  "float fbm(vec3 p){float v=0.0;float a=0.5;for(int i=0;i<5;i++){v+=a*noise(p);p=p*2.03+vec3(1.7);a*=0.5;}return v;}",
  "vec3 gradeColor(vec3 color){",
  " float luminance=dot(color,vec3(0.2126,0.7152,0.0722));",
  " color=mix(vec3(luminance),color,uSaturation);",
  " vec3 axis=normalize(vec3(1.0));",
  " return max(vec3(0.0),color*cos(uHue)+cross(axis,color)*sin(uHue)+axis*dot(axis,color)*(1.0-cos(uHue)));",
  "}",
  "void main(){",
  " vec2 uv=(gl_FragCoord.xy-0.5*uR)/min(uR.x,uR.y);",
  " float r=length(uv);",
  " float R=0.31;",
  " vec3 col=vec3(0.0);float alpha=0.0;",
  " if(r<R){",
  "   float z=sqrt(R*R-r*r);",
  "   vec3 n=normalize(vec3(uv,z));",
  "   float ca=uT*0.15;",
  "   mat3 rot=mat3(cos(ca),0.,sin(ca),0.,1.,0.,-sin(ca),0.,cos(ca));",
  "   vec3 sp=rot*n;",
  "   float smokeTime=uT*uSmokeSpeed;",
  "   float f1=fbm(sp*(2.6*uSmokeScale)+vec3(0.0,smokeTime*0.12,0.0));",
  "   float f2=fbm(sp*(4.5*uSmokeScale)-vec3(smokeTime*0.08,0.0,smokeTime*0.05)+f1*1.8);",
  "   float veil=smoothstep(0.35,0.75,f2);",
  "   vec3 deep=vec3(0.04,0.02,0.12);",
  "   vec3 mid=vec3(0.22,0.16,0.55);",
  "   vec3 bright=vec3(0.62,0.60,0.98);",
  "   col=mix(deep,mid,f1*1.2);",
  "   col=mix(col,bright,clamp(veil*0.65*uSmokeStrength,0.0,1.0));",
  "   float fres=pow(1.0-z/R,2.2);",
  "   col+=vec3(0.55,0.55,1.0)*fres*1.1*uGlow;",
  "   float top=pow(max(dot(n,normalize(vec3(0.0,0.7,0.7))),0.0),3.0);",
  "   col+=vec3(0.45,0.42,0.9)*top*0.35*uGlow;",
  "   alpha=1.0;",
  " }",
  " float glow=exp(-(r-R)*14.0);",
  " if(r>=R){",
  "   glow=clamp(glow,0.0,1.0);",
  "   col=vec3(0.55,0.52,1.0)*glow*0.8*uGlow;",
  "   alpha=glow*0.85;",
  " } else {",
  "   float rim=smoothstep(R-0.03,R,r);",
  "   col+=vec3(0.6,0.58,1.0)*rim*0.6*uGlow;",
  " }",
  " col=gradeColor(col);",
  " gl_FragColor=vec4(col,alpha);",
  "}",
].join("n");