diff --git a/index.ts b/index.ts index 1b60b5b..76aae03 100644 --- a/index.ts +++ b/index.ts @@ -3,6 +3,6 @@ import index from './index.html'; const server = Bun.serve({ routes: { '/': index - } + }, }); console.log(server.url.href); \ No newline at end of file diff --git a/main.ts b/main.ts index dd5a2dd..27994d4 100644 --- a/main.ts +++ b/main.ts @@ -36,9 +36,9 @@ fn vertex_main(@location(0) position: vec2f, @location(1) uv: vec2f, @builtin(in 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); + 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; return output; @@ -364,12 +364,6 @@ class Matrix4x4 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[ 1] = x.y; this._view[ 2] = x.z; @@ -401,8 +395,8 @@ class Matrix4x4 const a = ( right + left ) / ( right - left ); const b = ( top + bottom ) / ( top - bottom ); - const c = -( far + near ) / ( far - near ); - const d = -( 2 * far * near ) / ( far - near ); + const c = -far / (far - near); + const d = -far * near / (far - near); this._view[0 ] = x; this._view[1 ] = 0; @@ -432,9 +426,11 @@ class Matrix4x4 return this._view; } } +enum MouseButton { LEFT, MIDDLE, RIGHT }; class Inputs { static inputs: Record = {}; + static inertia: Record = { 0: { x: 0, y: 0, }, 1: { x: 0, y: 0, }, 2: { x: 0, y: 0, }}; private static _movementX = 0; private static _movementY = 0; private static _zoom = 0; @@ -492,16 +488,16 @@ class Inputs } class Camera { - pitch = 0; - yaw = 0; - distance = 25; + pitch: number; + yaw: number; + distance: number; view = new Matrix4x4(); constructor(distance?: number, yaw?: number, pitch?: number) { - this.pitch = pitch ?? 0; - this.yaw = yaw ?? 0; - this.distance = distance ?? 25; + this.pitch = pitch ?? 0.21505432128906243; + this.yaw = yaw ?? 6.0808781782733305; + this.distance = distance ?? 559.1820312499689; } 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 vertex: GPUBuffer, index: GPUBuffer; let camera: Camera, projectionMatrix = new Matrix4x4(), lastTime: DOMHighResTimeStamp; -let stats: Stats, dom: HTMLElement, gui: GUI, parameters: Record = { distance: 125, intensity: 5 }; +let stats: Stats, dom: HTMLElement, gui: GUI, parameters: Record = { distance: 500, intensity: 5 }; function clamp(x: number, min: number, max: number): number { @@ -598,6 +594,7 @@ async function init() tmpBuffer[1] = v; device!.queue.writeBuffer(uniforms, 128, tmpBuffer); }); + device!.queue.writeBuffer(uniforms, 128, tmpBuffer); camera = new Camera(); { @@ -694,7 +691,7 @@ async function init() context.configure({ device, format: navigator.gpu.getPreferredCanvasFormat(), - alphaMode: 'opaque', + alphaMode: 'premultiplied', }); dom = document.createElement('pre');