着色器代码
顶点

varying vec2 vUv;
varying vec3 pos;

void main() {
    pos = position;
    vUv = uv;
    vec3 myPosition = position;
    // myPosition *= sin(position.y / 3.);
    // myPosition.x *= sin((uv.y) * 3.124);
    vec4 viewPosition = modelViewMatrix * vec4(myPosition, 1.0);
    gl_Position = projectionMatrix * viewPosition;
}

片元着色器 重点

varying vec2 vUv;
uniform float iTime;
uniform vec2 iResolution;

precision highp float;

float random(in vec2 p) {
    vec3 p3 = fract(vec3(p.xyx) * .1031);
    p3 += dot(p3, p3.yzx + 33.33);
    return fract((p3.x + p3.y) * p3.z);
}

float noise(in vec2 _st) {
    vec2 i = floor(_st);
    vec2 f = fract(_st);

    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));

    vec2 u = f * f * (3. - 2.0 * f);

    return mix(a, b, u.x) +
        (c - a) * u.y * (1. - u.x) +
        (d - b) * u.x * u.y;
}

float light(in vec2 pos, in float size, in float radius, in float inner_fade, in float outer_fade) {
    float len = length(pos / size);
    return pow(clamp((1.0 - pow(clamp(len - radius, 0.0, 1.0), 1.0 / inner_fade)), 0.0, 1.0), 1.0 / outer_fade);
}

float flare(in float angle, in float alpha, in float time) {
    float t = time;
    float n = noise(vec2(t + 0.5 + abs(angle) + pow(alpha, 0.6), t - abs(angle) + pow(alpha + 0.1, 0.6)) * 7.0);
   //	n = 1.0;
    float split = (15.0 + sin(t * 2.0 + n * 4.0 + angle * 20.0 + alpha * 1.0 * n) * (.3 + .5 + alpha * .6 * n));

    float rotate = sin(angle * 20.0 + sin(angle * 15.0 + alpha * 4.0 + t * 30.0 + n * 5.0 + alpha * 4.0)) * (.5 + alpha * 1.5);

    float g = pow((2.0 + sin(split + n * 1.5 * alpha + rotate) * 1.4) * n * 4.0, n * (1.5 - 0.8 * alpha));

    g *= alpha * alpha * alpha * .5;
    g += alpha * .7 + g * g * g;
    return g;
}

#define SIZE 2.8
#define RADIUS 0.07
#define INNER_FADE .8
#define OUTER_FADE 0.02
#define SPEED .1
#define BORDER 0.21

void main() {
    // vec2 uv = (fragCoord.xy - iResolution.xy * 0.5)/iResolution.y;
    vec2 uv = vUv - 0.5;
    float f = .0;
    float f2 = .0;
    float t = iTime * SPEED;
    float alpha = light(uv, SIZE, RADIUS, INNER_FADE, OUTER_FADE);
    float angle = atan(uv.x, uv.y);
    float n = noise(vec2(uv.x * 20. + iTime, uv.y * 20. + iTime));

    float l = length(uv);
    if(l < BORDER) {
        t *= .8;
        alpha = (1. - pow(((BORDER - l) / BORDER), 0.22) * 0.7);
        alpha = clamp(alpha - light(uv, 0.2, 0.0, 1.3, .7) * .55, .0, 1.);
        f = flare(angle * 1.0, alpha, -t * .5 + alpha);
        f2 = flare(angle * 1.0, alpha * 1.2, ((-t + alpha * .5 + 0.38134)));

    } else if(alpha < 0.001) {
        f = alpha;
    } else {
        f = flare(angle, alpha, t) * 1.3;
    }
    gl_FragColor = vec4(vec3(f * (1.0 + sin(angle - t * 4.) * .3) + f2 * f2 * f2, f * alpha + f2 * f2 * 2.0, f * alpha * 0.5 + f2 * (1.0 + sin(angle + t * 4.) * .3)), 1.0);

    if(length(uv) > 0.3 && gl_FragColor.r < 0.3) {
        // gl_FragColor.a = 0.;
        gl_FragColor.a = gl_FragColor.r;
        if(gl_FragColor.r < 0.2) {
            gl_FragColor.a = gl_FragColor.r * gl_FragColor.r;
        }
    }
}

threejs 代码

/*
 * @Author: hongbin
 * @Date: 2022-11-16 19:35:37
 * @LastEditors: hongbin
 * @LastEditTime: 2022-11-17 10:42:55
 * @Description: 太阳粒子
 */
import * as THREE from "three";
import { SUNMaterial } from "../shader/SunPoints/Sun";

export const SunPoints = () => {
    return new THREE.Mesh(new THREE.PlaneGeometry(10, 10, 5, 5), SUNMaterial);
};

import * as THREE from "three";
import fragmentShader from "./fs.glsl";
import vertexShader from "./vt.glsl";

const uniforms = {
    iTime: { value: 1 },
    iResolution: { value: new THREE.Vector2(300, 300) },
    iMouse: { value: new THREE.Vector3(0, 0, 0) },
};

export const SUNMaterial = new THREE.ShaderMaterial({
    uniforms,
    vertexShader,
    fragmentShader,
    transparent: true,
});