Fix maths

This commit is contained in:
Clément Pons 2025-08-27 16:36:44 +02:00
parent 4f20212a07
commit 2eff5bb874
2 changed files with 16 additions and 19 deletions

View File

@ -3,6 +3,6 @@ import index from './index.html';
const server = Bun.serve({ const server = Bun.serve({
routes: { routes: {
'/': index '/': index
} },
}); });
console.log(server.url.href); console.log(server.url.href);

33
main.ts
View File

@ -36,9 +36,9 @@ fn vertex_main(@location(0) position: vec2f, @location(1) uv: vec2f, @builtin(in
var raSin: f32 = sin(star.ra); var raSin: f32 = sin(star.ra);
var dist: f32 = uniforms._Distance; var dist: f32 = uniforms._Distance;
var star_pos: vec4f = vec4f(dist * decCos * raCos, dist * decCos * raSin, dist * decSin, 1.0); var star_pos: vec4f = uniforms._View * vec4f(dist * decCos * raCos, dist * decCos * raSin, dist * decSin, 1.0);
output.position = uniforms._Projection * (uniforms._View * star_pos + vec4f(position * star.lum * uniforms._Intensity, 0.0, 0.0)); output.position = uniforms._Projection * (star_pos + vec4f(position * star.lum * uniforms._Intensity, 0.0, 0.0));
output.uv = uv; output.uv = uv;
return output; return output;
@ -364,12 +364,6 @@ class Matrix4x4
z: z.x * x.y - z.y * x.x z: z.x * x.y - z.y * x.x
}; };
// Normalize
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] = x.x; this._view[ 0] = x.x;
this._view[ 1] = x.y; this._view[ 1] = x.y;
this._view[ 2] = x.z; this._view[ 2] = x.z;
@ -401,8 +395,8 @@ class Matrix4x4
const a = ( right + left ) / ( right - left ); const a = ( right + left ) / ( right - left );
const b = ( top + bottom ) / ( top - bottom ); const b = ( top + bottom ) / ( top - bottom );
const c = -( far + near ) / ( far - near ); const c = -far / (far - near);
const d = -( 2 * far * near ) / ( far - near ); const d = -far * near / (far - near);
this._view[0 ] = x; this._view[0 ] = x;
this._view[1 ] = 0; this._view[1 ] = 0;
@ -432,9 +426,11 @@ class Matrix4x4
return this._view; return this._view;
} }
} }
enum MouseButton { LEFT, MIDDLE, RIGHT };
class Inputs class Inputs
{ {
static inputs: Record<string, boolean> = {}; static inputs: Record<string, boolean> = {};
static inertia: Record<MouseButton, { x: number, y: number}> = { 0: { x: 0, y: 0, }, 1: { x: 0, y: 0, }, 2: { x: 0, y: 0, }};
private static _movementX = 0; private static _movementX = 0;
private static _movementY = 0; private static _movementY = 0;
private static _zoom = 0; private static _zoom = 0;
@ -492,16 +488,16 @@ class Inputs
} }
class Camera class Camera
{ {
pitch = 0; pitch: number;
yaw = 0; yaw: number;
distance = 25; distance: number;
view = new Matrix4x4(); view = new Matrix4x4();
constructor(distance?: number, yaw?: number, pitch?: number) constructor(distance?: number, yaw?: number, pitch?: number)
{ {
this.pitch = pitch ?? 0; this.pitch = pitch ?? 0.21505432128906243;
this.yaw = yaw ?? 0; this.yaw = yaw ?? 6.0808781782733305;
this.distance = distance ?? 25; this.distance = distance ?? 559.1820312499689;
} }
update(elapsed: number, target: GPUBuffer) update(elapsed: number, target: GPUBuffer)
{ {
@ -531,7 +527,7 @@ const stars: Star[] = untypedStars;
let canvas: HTMLCanvasElement, device: GPUDevice | undefined, pipeline: GPURenderPipeline, context: GPUCanvasContext | null, bindGroup: GPUBindGroup, viewport: DOMRect, uniforms: GPUBuffer, indirect: GPUBuffer; 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 vertex: GPUBuffer, index: GPUBuffer;
let camera: Camera, projectionMatrix = new Matrix4x4(), lastTime: DOMHighResTimeStamp; let camera: Camera, projectionMatrix = new Matrix4x4(), lastTime: DOMHighResTimeStamp;
let stats: Stats, dom: HTMLElement, gui: GUI, parameters: Record<string, any> = { distance: 125, intensity: 5 }; let stats: Stats, dom: HTMLElement, gui: GUI, parameters: Record<string, any> = { distance: 500, intensity: 5 };
function clamp(x: number, min: number, max: number): number function clamp(x: number, min: number, max: number): number
{ {
@ -598,6 +594,7 @@ async function init()
tmpBuffer[1] = v; tmpBuffer[1] = v;
device!.queue.writeBuffer(uniforms, 128, tmpBuffer); device!.queue.writeBuffer(uniforms, 128, tmpBuffer);
}); });
device!.queue.writeBuffer(uniforms, 128, tmpBuffer);
camera = new Camera(); camera = new Camera();
{ {
@ -694,7 +691,7 @@ async function init()
context.configure({ context.configure({
device, device,
format: navigator.gpu.getPreferredCanvasFormat(), format: navigator.gpu.getPreferredCanvasFormat(),
alphaMode: 'opaque', alphaMode: 'premultiplied',
}); });
dom = document.createElement('pre'); dom = document.createElement('pre');