Peaceultime
/
stars
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes

This commit is contained in:
Peaceultime 2025-08-27 13:09:21 +02:00
parent 69e2be5778
commit 4f20212a07
4 changed files with 148 additions and 957103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bun.lock
View File

@ -5,6 +5,7 @@
"name": "stars",
"dependencies": {
"@webgpu/types": "^0.1.64",
"lil-gui": "^0.20.0",
"stats.ts": "^1.1.0",
},
"devDependencies": {
@ -28,6 +29,8 @@
"csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
"lil-gui": ["lil-gui@0.20.0", "", {}, "sha512-k7Ipr0ztqslMA2XvM5z5ZaWhxQtnEOwJBfI/hmSuRh6q4iMG9L0boqqrnZSzBR1jzyJ28OMl47l65ILzRe1TdA=="],
"stats.ts": ["stats.ts@1.1.0", "", {}, "sha512-mokWb6xGU0elmDlUT6Y5E4zsUs/Enlq5fpyE7pfffpJg9Lg83GlL7B9zHEPA0eDvDC3Ko0ZZ50cjIN8yYJRPoQ=="],
"typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],

957011
data/stars.json
View File

File diff suppressed because one or more lines are too long

236
main.ts
View File

@ -1,35 +1,45 @@
import untypedStars from './data/stars.json';
import untypedConstellations from './data/constellations.json';
import { Stats } from 'stats.ts';
import GUI from 'lil-gui';
const shaderCode = `
struct VertexOut {
@builtin(position) position: vec4f,
@location(0) color: vec4f
@location(1) uv: vec2f
}
struct Star {
pos: vec3f,
dec: f32,
ra: f32,
dist: f32,
lum: f32
}
struct Uniform {
_View: mat4x4f,
_Projection: mat4x4f
_Projection: mat4x4f,
_Distance: f32,
_Intensity: f32
}
@group(0) @binding(0) var<uniform> uniforms: Uniform;
@group(0) @binding(1) var<storage, read> stars: array<Star>;
@vertex
fn vertex_main(@location(0) position: vec3f, @builtin(instance_index) instance_index: u32) -> VertexOut
fn vertex_main(@location(0) position: vec2f, @location(1) uv: vec2f, @builtin(instance_index) instance_index: u32) -> VertexOut
{
var star: Star = stars[instance_index];
var output: VertexOut;
var star_pos = uniforms._View * vec4f(star.pos, 1.0);
var billboard_pos = star_pos + vec4f(position, 0.0);
var decCos: f32 = cos(star.dec);
var decSin: f32 = sin(star.dec);
var raCos: f32 = cos(star.ra);
var raSin: f32 = sin(star.ra);
var dist: f32 = uniforms._Distance;
var star_pos: vec4f = vec4f(dist * decCos * raCos, dist * decCos * raSin, dist * decSin, 1.0);
output.position = uniforms._Projection * billboard_pos;
output.color = vec4(star.lum, star.lum, star.lum, 1);
output.position = uniforms._Projection * (uniforms._View * star_pos + vec4f(position * star.lum * uniforms._Intensity, 0.0, 0.0));
output.uv = uv;
return output;
}
@ -37,20 +47,21 @@ fn vertex_main(@location(0) position: vec3f, @builtin(instance_index) instance_i
@fragment
fn fragment_main(fragData: VertexOut) -> @location(0) vec4f
{
//var dist = distance(fragData.uv, vec2f(0.5, 0.5));
//return vec4f(1 - dist, 1 - dist, 1 - dist, dist);
return vec4f(1.0, 1.0, 1.0, 1.0);
var dist = distance(fragData.uv * 2.0, vec2f(1, 1));
return vec4f(1 - dist, 1 - dist, 1 - dist, 1 - dist);
}
`;
type StarID = number;
type StarID = string;
type Star = {
id: StarID;
x: number;
y: number;
z: number;
ci: number;
lum: number;
bayer: string;
hip: string;
ra: string;
dec: string;
mag: string;
dist: string;
color: [number, number, number];
};
type Constellation = {
con: string;
@ -321,57 +332,57 @@ class Matrix4x4
return this;
}
lookat(eye: Position, target: Position): this
aim(eye: Position, target: Position, up: Position): this
{
const forward = { //zAxis
const z = {
x: eye.x - target.x,
y: eye.y - target.y,
z: eye.z - target.z
};
// Normalize
const forwardLen = Math.sqrt(forward.x * forward.x + forward.y * forward.y + forward.z * forward.z);
forward.x /= forwardLen;
forward.y /= forwardLen;
forward.z /= forwardLen;
const zLen = Math.sqrt(z.x * z.x + z.y * z.y + z.z * z.z);
z.x /= zLen;
z.y /= zLen;
z.z /= zLen;
const right = { //xAxis
x: 1 * forward.z - 0 * forward.y,
y: 0 * forward.x - 0 * forward.z,
z: 0 * forward.y - 1 * forward.x
const x = {
x: up.y * z.z - up.z * z.y,
y: up.z * z.x - up.x * z.z,
z: up.x * z.y - up.y * z.x
};
// Normalize
const rightLen = Math.sqrt(right.x * right.x + right.y * right.y + right.z * right.z);
right.x /= rightLen;
right.y /= rightLen;
right.z /= rightLen;
const xLen = Math.sqrt(x.x * x.x + x.y * x.y + x.z * x.z);
x.x /= xLen;
x.y /= xLen;
x.z /= xLen;
const up = { //yAxis
x: forward.y * right.z - forward.z * right.y,
y: forward.z * right.x - forward.x * right.z,
z: forward.x * right.y - forward.y * right.x
const y = {
x: z.y * x.z - z.z * x.y,
y: z.z * x.x - z.x * x.z,
z: z.x * x.y - z.y * x.x
};
// Normalize
const upLen = Math.sqrt(up.x * up.x + up.y * up.y + up.z * up.z);
up.x /= upLen;
up.y /= upLen;
up.z /= upLen;
const yLen = Math.sqrt(y.x * y.x + y.y * y.y + y.z * y.z);
y.x /= yLen;
y.y /= yLen;
y.z /= yLen;
this._view[ 0] = right.x;
this._view[ 1] = right.y;
this._view[ 2] = right.z;
this._view[ 0] = x.x;
this._view[ 1] = x.y;
this._view[ 2] = x.z;
this._view[ 3] = 0;
this._view[ 4] = up.x;
this._view[ 5] = up.y;
this._view[ 6] = up.z;
this._view[ 4] = y.x;
this._view[ 5] = y.y;
this._view[ 6] = y.z;
this._view[ 7] = 0;
this._view[ 8] = forward.x;
this._view[ 9] = forward.y;
this._view[10] = forward.z;
this._view[ 8] = z.x;
this._view[ 9] = z.y;
this._view[10] = z.z;
this._view[11] = 0;
this._view[12] = eye.x;
@ -382,29 +393,35 @@ class Matrix4x4
return this;
}
perspective(aspect: number, fovY: number, near: number, far: number): this
perspective(left: number, right: number, top: number, bottom: number, near: number, far: number): this
{
const f = Math.tan(Math.PI * 0.5 - 0.5 * fovY);
const rangeInv = 1 / (near - far);
const x = 2 * near / ( right - left );
const y = 2 * near / ( top - bottom );
this._view[0] = f / aspect;
this._view[1] = 0;
this._view[2] = 0;
this._view[3] = 0;
const a = ( right + left ) / ( right - left );
const b = ( top + bottom ) / ( top - bottom );
this._view[4] = 0;
this._view[5] = f;
this._view[6] = 0;
this._view[7] = 0;
const c = -( far + near ) / ( far - near );
const d = -( 2 * far * near ) / ( far - near );
this._view[8] = 0;
this._view[9] = 0;
this._view[10] = far * rangeInv;
this._view[0 ] = x;
this._view[1 ] = 0;
this._view[2 ] = 0;
this._view[3 ] = 0;
this._view[4 ] = 0;
this._view[5 ] = y;
this._view[6 ] = 0;
this._view[7 ] = 0;
this._view[8 ] = a;
this._view[9 ] = b;
this._view[10] = c;
this._view[11] = -1;
this._view[12] = 0;
this._view[13] = 0;
this._view[14] = near * far * rangeInv;
this._view[14] = d;
this._view[15] = 0;
return this;
@ -477,7 +494,7 @@ class Camera
{
pitch = 0;
yaw = 0;
distance = 25
distance = 25;
view = new Matrix4x4();
constructor(distance?: number, yaw?: number, pitch?: number)
@ -498,23 +515,23 @@ class Camera
const pitchCos = Math.cos(this.pitch), pitchSin = Math.sin(this.pitch);
const yawCos = Math.cos(this.yaw), yawSin = Math.sin(this.yaw);
this.distance = clamp(this.distance + (Inputs.zoom * elapsed * 1000), 1, 10000);
this.distance = clamp(this.distance + (Inputs.zoom * elapsed * 1000), 0.1, 10000);
const x = this.distance * yawSin * pitchCos;
const y = this.distance * yawSin * pitchSin;
const z = this.distance * yawCos;
const x = this.distance * yawCos * pitchCos;
const y = this.distance * yawCos * pitchSin;
const z = this.distance * yawSin;
device!.queue.writeBuffer(target, 0, this.view.lookat({ x, y, z }, { x: 0, y: 0, z: 0 }).view.buffer);
device!.queue.writeBuffer(target, 0, this.view.aim({ x, y, z }, { x: 0, y: 0, z: 0 }, { x: 0, y: 1, z: 0 }).invert().view.buffer);
}
}
//@ts-ignore
const stars: Star[] = untypedStars;
const constellations: Constellation[] = untypedConstellations;
//const constellations: Constellation[] = untypedConstellations;
let canvas: HTMLCanvasElement, device: GPUDevice | undefined, pipeline: GPURenderPipeline, context: GPUCanvasContext | null, bindGroup: GPUBindGroup, viewport: DOMRect, uniforms: GPUBuffer, indirect: GPUBuffer;
let vertex: GPUBuffer, index: GPUBuffer;
let camera: Camera, projectionMatrix = new Matrix4x4(), lastTime: DOMHighResTimeStamp;
let stats: Stats, dom: HTMLElement;
let stats: Stats, dom: HTMLElement, gui: GUI, parameters: Record<string, any> = { distance: 125, intensity: 5 };
function clamp(x: number, min: number, max: number): number
{
@ -530,18 +547,18 @@ function fillBuffer(buffer: ArrayBuffer)
for(let i = 0; i < stars.length; i++)
{
array[i * 5 + 0] = stars[i]!.x;
array[i * 5 + 1] = stars[i]!.y;
array[i * 5 + 2] = stars[i]!.z;
array[i * 5 + 3] = stars[i]!.lum;
//array[i * 5 + 4] = stars[i]!.ci;
const star = stars[i]!;
array[i * 5 + 0] = parseFloat(star.dec) / 180 * Math.PI;
array[i * 5 + 1] = parseFloat(star.ra) / 12 * Math.PI;
array[i * 5 + 2] = parseFloat(star.dist);
array[i * 5 + 3] = parseFloat(star.mag);
}
}
function resize()
{
viewport = document.body.getBoundingClientRect();
canvas!.width = viewport.width; canvas!.height = viewport.height;
device!.queue.writeBuffer(uniforms, 64, projectionMatrix.perspective(viewport.width / viewport.height, 60, 0.1, 2000000).view.buffer);
device!.queue.writeBuffer(uniforms, 64, projectionMatrix.perspective(-viewport.width / 2, viewport.width / 2, viewport.height / 2, -viewport.height / 2, 0.1, 10000).view.buffer);
}
async function init()
@ -552,7 +569,9 @@ async function init()
Inputs.init(canvas);
stats = new Stats();
gui = new GUI();
document.body.appendChild(stats.dom);
document.body.appendChild(gui.domElement);
const adapter = await navigator.gpu.requestAdapter({ });
device = await adapter?.requestDevice({ label: 'Device' });
@ -569,17 +588,28 @@ async function init()
fillBuffer(arrayBuffer);
device.queue.writeBuffer(buffer, 0, arrayBuffer);
uniforms = device.createBuffer({ size: 16 * 4 * 2, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, label: 'uniforms_buffer' });
uniforms = device.createBuffer({ size: 16 * 4 + 16 * 4 + 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, label: 'uniforms_buffer' });
const tmpBuffer = new Float32Array([parameters.distance, parameters.intensity]);
gui.add(parameters, 'distance', 0, 1000).onChange((v: number) => {
tmpBuffer[0] = v;
device!.queue.writeBuffer(uniforms, 128, tmpBuffer);
});
gui.add(parameters, 'intensity', 0.01, 10).onChange((v: number) => {
tmpBuffer[1] = v;
device!.queue.writeBuffer(uniforms, 128, tmpBuffer);
});
camera = new Camera();
indirect = device.createBuffer({ size: 5 * 4, usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST, label: 'indirect_buffer' });
const indirectArray = new Uint32Array([ 6, stars.length, 0, 0, 0 ]);
const indirectSignedArray = new Int32Array(indirectArray.buffer);
indirectSignedArray[3] = 0;
device.queue.writeBuffer(indirect, 0, indirectArray.buffer);
{
indirect = device.createBuffer({ size: 5 * 4, usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST, label: 'indirect_buffer' });
const indirectArray = new Uint32Array([ 6, stars.length, 0, 0, 0 ]);
const indirectSignedArray = new Int32Array(indirectArray.buffer);
indirectSignedArray[3] = 0;
device.queue.writeBuffer(indirect, 0, indirectArray.buffer);
}
vertex = device.createBuffer({ size: 3 * 4 * 4, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, label: 'vertex_buffer' });
device.queue.writeBuffer(vertex, 0, new Float32Array([ -0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.5, 0.5, 0.0, -0.5, 0.5, 0.0, ]));
vertex = device.createBuffer({ size: 4 * 4 * 4, usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, label: 'vertex_buffer' });
device.queue.writeBuffer(vertex, 0, new Float32Array([ -0.5, -0.5, 0, 0, 0.5, -0.5, 1, 0, 0.5, 0.5, 1, 1, -0.5, 0.5, 0, 1, ]));
index = device.createBuffer({ size: 6 * 2, usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, label: 'index_buffer' });
device.queue.writeBuffer(index, 0, new Uint16Array([ 0, 1, 2, 0, 2, 3 ]));
@ -604,7 +634,7 @@ async function init()
layout: bindGroupLayout,
entries: [{
binding: 0,
resource: { buffer: uniforms, }
resource: { buffer: uniforms }
}, {
binding: 1,
resource: { buffer: buffer, }
@ -620,21 +650,39 @@ async function init()
entryPoint: 'vertex_main',
buffers: [{
attributes: [{
format: 'float32x3',
format: 'float32x2',
offset: 0,
shaderLocation: 0
}, {
format: 'float32x2',
offset: 8,
shaderLocation: 1
}],
arrayStride: 4 * 3,
arrayStride: 4 * 4,
}]
},
fragment: {
targets: [{ format: navigator.gpu.getPreferredCanvasFormat() }],
targets: [{
format: navigator.gpu.getPreferredCanvasFormat(),
blend: {
color: {
operation: 'add',
srcFactor: 'one',
dstFactor: 'one'
},
alpha: {
operation: 'add',
srcFactor: 'one',
dstFactor: 'one'
},
},
}],
module: shader,
entryPoint: 'fragment_main'
entryPoint: 'fragment_main',
},
primitive: {
topology: 'triangle-list',
cullMode: 'front',
cullMode: 'none',
frontFace: 'cw'
}
});
@ -646,7 +694,7 @@ async function init()
context.configure({
device,
format: navigator.gpu.getPreferredCanvasFormat(),
alphaMode: 'premultiplied',
alphaMode: 'opaque',
});
dom = document.createElement('pre');
@ -670,7 +718,9 @@ function render(time: DOMHighResTimeStamp)
{
const elapsed = time - lastTime;
lastTime = time;
stats.begin();
const commandEncoder = device!.createCommandEncoder({ label: 'command-encoder' });
const pass = commandEncoder.beginRenderPass({ label: 'render-pass', colorAttachments: [{
loadOp: "clear",
@ -691,8 +741,8 @@ function render(time: DOMHighResTimeStamp)
pass.end();
device!.queue.submit([ commandEncoder.finish() ]);
device!.queue.onSubmittedWorkDone().then(() => stats.end());
stats.end();
requestAnimationFrame(render);
}

1
package.json
View File

@ -11,6 +11,7 @@
},
"dependencies": {
"@webgpu/types": "^0.1.64",
"lil-gui": "^0.20.0",
"stats.ts": "^1.1.0"
}
}