I’m attempting to recreate some of the features of the sun shown here. I’ve managed to create a dynamically changing surface using shaders. However, I’m unable to create the flares (arcs in the demo) that rise up and drop down. How would one go about adding those arcs that rise and drop down to an existing shader.

main.js:

// Vertex Shader
  const vertexShader = `
    varying vec3 vTexCoord3D;
    uniform mat3 rotationMatrix;

    void main() {
        vec3 transformed = position;
        vTexCoord3D = rotationMatrix * (modelMatrix * vec4(transformed, 1.0)).xyz;
        vec4 mvPosition = modelViewMatrix * vec4(transformed, 1.0);
        gl_Position = projectionMatrix * mvPosition;
    }
  `;

  // console.log(vertexShader);
  // Uniforms
  const uniforms = {
    'time': { value: 1.0 },
    'highTemp': { value: 7000.0 },
    'lowTemp': { value: 1000.0 },
    'rotationMatrix': { value: new THREE.Matrix3() },
    'iResolution': { value: new THREE.Vector2(width, height) }
  };

  // Shader Material
  const material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
  });

noise.glsl:

#define pi 3.14159265
#define R(p, a) p=cos(a)*p+sin(a)*vec2(p.y, -p.x)

uniform float time;
uniform vec2 iResolution;

// Noise functions
vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
  return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r) {
  return 1.79284291400159 - 0.85373472095314 * r;
}

float snoise(vec3 v) {
  const vec2 C = vec2(1.0/6.0, 1.0/3.0);
  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);

  vec3 i = floor(v + dot(v, C.yyy));
  vec3 x0 = v - i + dot(i, C.xxx);

  vec3 g = step(x0.yzx, x0.xyz);
  vec3 l = 1.0 - g;
  vec3 i1 = min(g.xyz, l.zxy);
  vec3 i2 = max(g.xyz, l.zxy);

  vec3 x1 = x0 - i1 + C.xxx;
  vec3 x2 = x0 - i2 + C.yyy;
  vec3 x3 = x0 - D.yyy;

  i = mod289(i);
  vec4 p = permute(permute(permute(
             vec4(i.z, i1.z, i2.z, 1.0))
           + vec4(i.y, i1.y, i2.y, 1.0))
           + vec4(i.x, i1.x, i2.x, 1.0));

  vec4 j = p - 49.0 * floor(p * C.z * C.z);
  vec4 x_ = floor(j * C.z);
  vec4 y_ = floor(j - 7.0 * x_);
  vec4 x = x_ * C.x + C.w;
  vec4 y = y_ * C.x + C.w;
  vec4 h = 1.0 - abs(x) - abs(y);

  vec4 b0 = vec4(x.xy, y.xy);
  vec4 b1 = vec4(x.zw, y.zw);

  vec4 s0 = floor(b0) * 2.0 + 1.0;
  vec4 s1 = floor(b1) * 2.0 + 1.0;
  vec4 sh = -step(h, vec4(0.0));

  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;

  vec3 p0 = vec3(a0.xy, h.x);
  vec3 p1 = vec3(a0.zw, h.y);
  vec3 p2 = vec3(a1.xy, h.z);
  vec3 p3 = vec3(a1.zw, h.w);

  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
  p0 *= norm.x;
  p1 *= norm.y;
  p2 *= norm.z;
  p3 *= norm.w;

  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
  m = m * m;
  return 42.0 * dot(m * m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
}

// FBM
float fpn(vec3 p) {
  return snoise(p * 0.06125) * 0.57 + snoise(p * 0.125) * 0.28 + snoise(p * 0.25) * 0.15;
}

float cosNoise(in vec2 p) {
  return 0.5 * (sin(p.x) + sin(p.y));
}

const mat2 m2 = mat2(1.6, -1.2, 1.2, 1.6);

float sdTorus(vec3 p, vec2 t) {
  return length(vec2(length(p.xz) - t.x * 1.2, p.y)) - t.y;
}

float smin(float a, float b, float k) {
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

float SunSurface(in vec3 pos) {
  float h = 0.0;
  vec2 q = pos.xz * 0.5;
  float s = 0.5;
  float d2 = 0.0;
  for (int i = 0; i < 6; i++) {
    h += s * cosNoise(q);
    q = m2 * q * 0.85;
    q += vec2(2.41, 8.13);
    s *= 0.48 + 0.2 * h;
  }
  h *= 2.0;
  float d1 = pos.y - h;

  vec3 r1 = mod(2.3 + pos + 1.0, 10.0) - 5.0;
  r1.y = pos.y - 0.1 - 0.7 * h + 0.5 * sin(3.0 * time + pos.x + 3.0 * pos.z);
  float c = cos(pos.x);
  float s1 = 1.0;
  r1.xz = c * r1.xz + s1 * vec2(r1.z, -r1.x);
  d2 = sdTorus(r1.xzy, vec2(clamp(abs(pos.x / pos.z), 0.7, 2.5), 0.20));
  return smin(d1, d2, 1.0);
}

float map(vec3 p) {
  p.z += 1.0;
  R(p.yz, -25.5);
  R(p.xz, time * 0.1);
  return SunSurface(p) + fpn(p * 50.0 + time * 25.0) * 0.45;
}

vec3 firePalette(float i) {
  float T = 1400.0 + 1300.0 * i;
  vec3 L = vec3(7.4, 5.6, 4.4);
  L = pow(L, vec3(5.0)) * (exp(1.43876719683e5 / (T * L)) - 1.0);
  return 1.0 - exp(-5e8 / L);
}

// Function to create arcs/curves on the sun
float arcPattern(vec3 p) {
  float arcHeight = 0.2 * sin(p.x * 3.0 + time * 2.0);
  float arcDistance = length(p.xz - vec2(sin(time), cos(time)) * 2.0);
  return arcHeight - arcDistance;
}

void main() {
  vec2 uv = gl_FragCoord.xy / iResolution.xy * 2.0 - 1.0;
  uv.x *= iResolution.x / iResolution.y;

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

  float t = 0.0;
  vec3 color = vec3(0.0);
  for (int i = 0; i < 100; i++) {
    vec3 p = ro + t * rd;
    float d = map(p);
    float arcD = arcPattern(p);
    d = min(d, arcD);  // Combine surface and arc distances
    if (d < 0.001) break;
    t += d;
    color += firePalette(d) * 0.1;
  }

  gl_FragColor = vec4(color, 1.0);
}

I’ve tried patching together various snippets from shadertoy and other examples of threejs I found on the web.