如何绘制一片完美的动态星空

// 创建粒子系统
const particleSystem = new ParticleSystem("particles", 1500, scene);

// 设置粒子贴图
particleSystem.particleTexture = new Texture(
  "/assets/textures/star.jpg",
  scene,
);

// 设置粒子尺寸
particleSystem.minSize = 0.2;
particleSystem.maxSize = 0.5;

// 设置粒子颜色范围
particleSystem.color1 = new Color4(134 / 255, 13 / 255, 255 / 255, 1);
particleSystem.color2 = new Color4(8 / 255, 255 / 255, 214 / 255, 1);

// 设置粒子生命周期
particleSystem.minLifeTime = 20;
particleSystem.maxLifeTime = 20;

// 设置发射速率，即每秒生成多少粒子
particleSystem.emitRate = 75;

// 创建发射器，前两个参数为粒子的速度向量范围，后两个参数为粒子的生成坐标范围
const boxEmitter = particleSystem.createBoxEmitter(
  new Vector3(0, 2.5, 0),
  new Vector3(0, 2.5, 0),
  new Vector3(-50, 0, -30),
  new Vector3(50, 0, 30),
);

// 预热，使得页面加载完成后便有大量粒子（绯红之王效果）
particleSystem.preWarmCycles = 50;
particleSystem.preWarmStepOffset = 30;

particleSystem.start();

/**
 * 缓动函数，需要注意缓动比率要根据画面帧率来计算
 * 否则在不同刷新率的显示设备上表现不一致
 *
 * @param from 旧位置
 * @param to   新位置
 * @param rate 缓动比率
 * @returns 缓动处理后的新位置
 */
transtitionAnimation(from: number, to: number, rate = 0.025) {
  return from + (to - from) * Math.min(rate, 1) // 防止帧率过小导致计算的缓动比率大于1的情况
}

// 添加新的顶点着色器和片元着色器，着色器代码略
Effect.ShadersStore["cloudsVertexShader"] = /* glsl */ "这里传入顶点着色器代码";
Effect.ShadersStore["cloudsFragmentShader"] =
  /* glsl */ "这里传入片元着色器代码";

// 加载云彩纹理
const cloudTexture = new Texture("/assets/textures/clouds.jpg", scene);

// 创建着色器材质
const shaderMat = new ShaderMaterial(
  "cloudsShader",
  scene,
  {
    // 顶点着色器和片元着色器名称，和我们上面添加的着色器名称相对应
    vertex: "clouds",
    fragment: "clouds",
  },
  {
    attributes: ["position", "normal", "uv"],
    uniforms: [
      "world",
      "worldView",
      "worldViewProjection",
      "view",
      "projection",
      "textureSampler",
    ],
    needAlphaBlending: true,
  },
);

// 将纹理添加到着色器中
shaderMat.setTexture("textureSampler", cloudTexture);

// 导入模型
SceneLoader.ImportMeshAsync(["cone"], "/assets/models/", "cone.glb", scene)
  .then((result) => {
    // 从根网格中获取圆锥体网格模型
    const cone = result.meshes[0].getChildMeshes()[0];
    // 设置材质
    cone.material = cloudsMat;
  })
  .catch((err) => {
    console.log(err);
  });

// vertex
attribute vec2 uv;
attribute vec3 position;
attribute vec3 normal;
varying vec2 vUv; // varying关键字声明的变量会传递到片元着色器中
uniform mat4 worldViewProjection;

void main(void) {
  vUv = uv;
  gl_Position = worldViewProjection * vec4(position, 1.0);
}

// fragment
varying vec2 vUv;
uniform sampler2D textureSampler;

vec3 palette(float t) {
  // [[0.300 0.460 0.830] [0.240 0.158 0.298] [1.000 1.000 1.000] [0.710 1.323 0.788]]
  vec3 a = vec3(0.300, 0.460, 0.830);
  vec3 b = vec3(0.240, 0.158, 0.298);
  vec3 c = vec3(1.000, 1.000, 1.000);
  vec3 d = vec3(0.710, 1.323, 0.788);

  return a + b * cos(6.28318 * (c * t + d));
}

void main(void) {
  vec4 textureColor = texture2D(textureSampler, vUv);
  float alpha = textureColor.r;
  vec3 color = palette(vUv.x + vUv.y);
  gl_FragColor = vec4(color, alpha);
}

// 创建着色器材质
const shaderMat = new ShaderMaterial(
  ...// 其他部分不变
  {
    attributes: ["position", "normal", "uv"],
    uniforms: [
      "world",
      "worldView",
      "worldViewProjection",
      "view",
      "projection",
      "textureSampler",
      "time",
    ], // 在这里添加time，这样才能在着色器内引入time变量
    needAlphaBlending: true,
  },
);

let time = 0.0;

// onBind函数每帧都会运行一次
shaderMat.onBind = function () {
  time += scene.getEngine().getDeltaTime() * 0.00002; // 不想让星云飞太快
  shaderMat.setFloat("time", time); // 设置time变量
};

// fragment
varying vec2 vUv;
uniform sampler2D textureSampler;
uniform float time; // 引入time变量

// 省略palette函数代码

void main(void) {
  // 传入uv时让y值加上时间变量（要根据模型uv方向来确定）
  vec4 textureColor = texture2D(textureSampler, vec2(vUv.x, vUv.y + time));
  float alpha = textureColor.r;
  vec3 color = palette(vUv.x + vUv.y + time); // 让颜色也随着时间变化
  gl_FragColor = vec4(color, alpha);
}

import math
from PIL import Image

def get_color(x, y, w=256, h=256):
    # 从边缘到中心渐变，亮度呈指数型变化
    max_dis_side =  w / 2
    dis_center = math.sqrt((x - w / 2) ** 2 + (y - h / 2) ** 2)
    rate = max(max_dis_side - dis_center, 0) / max_dis_side * 2
    ans = int(round(255 * (math.exp(rate - 1.9)), 0)) - 40

    # X对角线上的点也要变亮
    if (abs(x - (256 - y)) % 256 < 100 or abs(x - y) % 256 < 100):
        tmp = max(100 - (abs(x - (256 - y)) % 256) * 5, 100 - (abs(x - y) % 256) * 5)
        ans = max(tmp + ans - math.floor(dis_center / 3), ans)

    return ans

# 生成带X光带的星星图片
def gen_shining_star():
    image = Image.new('L', (256, 256)) // 生成一张灰度图
    for x in range(256):
        for y in range(256):
            color = get_color(x, y)
            image.putpixel((x, y), color)
    image.save('./star.jpg', quality=85)

if __name__ == '__main__':
    gen_shining_star()

// fragment
varying vec2 vUV;
varying vec4 vColor;
uniform sampler2D diffuseSampler;

void main(void) {
  vec4 textureColor = texture2D(diffuseSampler, vUV);
  // 将粒子颜色与亮黄色进行混合，比例基于星星纹理的亮度
  vec3 color = mix(vColor.rgb, vec3(1.0, 0.8, 0.3), textureColor.r);
  gl_FragColor = vec4(color, 1.0);
}