diff --git a/bun.lockb b/bun.lockb
index 4a6bea4..d673135 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/html/002-webgpu-instead/main.js b/html/002-webgpu-instead/main.js
index 218dc7d..f44d96c 100644
--- a/html/002-webgpu-instead/main.js
+++ b/html/002-webgpu-instead/main.js
@@ -1 +1 @@
-import{a as D,b as z} from"../chunk-818093f0cbbefec3.js";class _{v;canvas;_adapter;_device;_context;telemetry;registry={onBeforeUpdate:[],onAfterUpdate:[],onUpdate:[],onStart:[]};constructor(v={}){this.config=v;this.config={fov:45,...v},this.canvas=document.querySelector("canvas"),this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.telemetry=new z(this),this.init().catch((x)=>{const C=document.querySelector("main");if(C)C.innerHTML="your browser didn't let me set up webgpu. firefox nightly or enable dom.webgpu.enable.
";throw new Error("Unable to initialize WebGPU. Your browser or machine may not support it.",x)})}async init(){if(!navigator.gpu)throw new Error("WebGPU not supported");if(this._adapter=await navigator.gpu.requestAdapter(),!this._adapter)throw new Error("No GPU adapter found");if(this._device=await this.adapter.requestDevice(),!this._device)throw new Error("No GPU device found");this._context=this.canvas.getContext("webgpu"),this.context.configure({device:this.device,format:"bgra8unorm",alphaMode:"premultiplied",...this.config.context})}get context(){if(!this._context)throw new Error("WebGPU context not initialized");return this._context}get adapter(){if(!this._adapter)throw new Error("WebGPU adapter not initialized");return this._adapter}get device(){if(!this._device)throw new Error("WebGPU device not initialized");return this._device}onBeforeUpdate(v){this.registry.onBeforeUpdate.push(v)}onAfterUpdate(v){this.registry.onAfterUpdate.push(v)}onUpdate(v){this.registry.onUpdate.push(v)}onStart(v){this.registry.onStart.push(v)}doUpdate(v){this.registry.onBeforeUpdate.forEach((x)=>x(v,this)),this.registry.onUpdate.forEach((x)=>x(v,this)),this.registry.onAfterUpdate.forEach((x)=>x(v,this))}doStart(v=0){this.registry.onStart.forEach((x)=>x(v,this))}async oneShot(v=0){this.doStart(v),this.doUpdate(v)}start(){this.doStart();const v=(x)=>{this.doUpdate(x),requestAnimationFrame(v)};requestAnimationFrame(v)}}class j extends D{v;x;depthTexture;uniformBuffer;texture;sampler;uniformBindGroup;renderPassDescriptor;constructor(v,x){super(v);this.app=v;this.mesh=x}onStart(){console.log("hello from meshrenderer!"),console.log(`i've got a ${this.mesh.constructor.name}`)}onUpdate(v){}}class k{v;constructor(v){this.config=v}buffer(v){const x=v.device.createBuffer({size:this.config.mesh.byteLength,usage:GPUBufferUsage.VERTEX,mappedAtCreation:!0});return new Float32Array(x.getMappedRange()).set(this.config.mesh),x.unmap(),x}pipeline(v,x,C){const q=x.module(v);return v.device.createRenderPipeline({layout:"auto",vertex:{module:q,entryPoint:"main",buffers:[{arrayStride:4,attributes:[{shaderLocation:0,offset:0,format:"float32x4"},{shaderLocation:2,offset:this.config.positionSize,format:"float32x4"},{shaderLocation:1,offset:this.config.positionSize+this.config.colorSize,format:"float32x4"}]}]},fragment:{module:q,entryPoint:"main",targets:[{format:"rgba8unorm"}]},primitive:{topology:"triangle-list",cullMode:C.cullMode??"back"},depthStencil:C.stencil&&{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}})}}var J=new Float32Array([-1,-1,0,1,1,1,1,1,0,0,1,-1,0,1,1,1,1,1,1,0,-1,1,0,1,1,1,1,1,0,1,1,1,0,1,1,1,1,1,1,1]),E=new k({mesh:J,positionSize:16,colorSize:16,uvSize:8});var F="fn rgb2hsv(vec3f c)->vec3f{vec4f K=vec4f(0.0,-1.0/3.0,2.0/3.0,-1.0);vec4f p=mix(vec4f(c.bg,K.wz),vec4f(c.gb,K.xy),step(c.b,c.g));vec4f q=mix(vec4f(p.xyw,c.r),vec4f(c.r,p.yzx),step(p.x,c.r));f32 d=q.x-min(q.w,q.y);f32 e=1.0e-10;return vec3f(abs(q.z+(q.w-q.y)/(6.0*d+e)),d/(q.x+e),q.x);}fn hsv2rgb(vec3f c)->vec3f{vec4f K=vec4f(1.0,2.0/3.0,1.0/3.0,3.0);vec3f p=abs(fract(c.xxx+K.xyz)*6.0-K.www);return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);}struct Uniforms{modelViewProjectionMatrix:mat4x4,time:f32,}@group(0)@binding(0)var uniforms:Uniforms;struct v2f{@builtin(position)position:vec4f,@location(0)color:vec4f,@location(1)uv:vec2f,}@vertex fn main(@builtin(position)position:vec4f,@location(0)color:vec4f,@location(1)uv:vec2f,)->v2f{return v2f(uniforms.modelViewProjectionMatrix*position,color,uv);}@fragment fn main(@location(0)uv:vec2f,)->@location(0)vec4f{f32 z=sin(uniforms.time)*0.001*0.5+0.5;vec3f hsv=vec3f(uv.x,uv.y,z);hsv.x+=uniforms.time*0.0001;hsv.y=1.0;hsv.z=1.0;vec3f rgb=hsv2rgb(hsv);return saturate(vec4f(rgb,1.0));}";var H="struct Uniforms{modelViewProjectionMatrix:mat4x4,time:f32,}@group(0)@binding(0)var uniforms:Uniforms;struct v2f{@builtin(position)position:vec4f,@location(0)uv:vec2f,}@vertex fn vertex_main(@builtin(position)position:vec4f,@location(0)uv:vec2f,)->v2f{return v2f(uniforms.modelViewProjectionMatrix*position,uv);}@fragment fn fragment_main(@location(0)uv:vec2f,)->vec4f{return vec4f(1.0,0.0,1.0,1.0);}";var N=new RegExp("#pragma ([a-z]+) ([a-zA-Z_0-9]+)","g");class P{_module=null;vertexMain="main";fragmentMain="main";code;constructor(...v){this.code=v.join("\n");const x=this.code.matchAll(N);for(let C of x||[])switch(C[1]){case"fragment":this.fragmentMain=C[2];break;case"vertex":this.vertexMain=C[2];break}}module(v){return this._module=this._module||(this._module=v.device.createShaderModule({code:this.code}))}}var S=new P(H);var I=new _({fov:20}),s=new j(I,E),u=new P(F);I.start();
+import{a as S0,b as Z0} from"../chunk-818093f0cbbefec3.js";class H0{G;canvas;_adapter;_device;_context;telemetry;jobsToSubmitThisFrame=[];renderOK=!1;registry={onBeforeUpdate:[],onAfterUpdate:[],onUpdate:[],onStart:[]};constructor(G={}){this.config=G;if(this.config={fov:45,...G},this.canvas=document.querySelector("canvas"),this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,location.search.includes("telemetry"))this.telemetry=new Z0(this);this.init().catch((H)=>{const J=document.querySelector("main");if(J)J.innerHTML="your browser didn't let me set up webgpu. firefox nightly or enable dom.webgpu.enable.
";throw new Error("Unable to initialize WebGPU. Your browser or machine may not support it.",H)})}async init(){if(!navigator.gpu)throw new Error("WebGPU not supported");if(this._adapter=await navigator.gpu.requestAdapter(),!this._adapter)throw new Error("No GPU adapter found");if(this._device=await this.adapter.requestDevice(),!this._device)throw new Error("No GPU device found");this._context=this.canvas.getContext("webgpu"),this.context.configure({device:this.device,format:"bgra8unorm",alphaMode:"premultiplied",...this.config.context}),this.renderOK=!0}awaitRendererReady(G=5000){const H=Date.now();return new Promise((J,K)=>{const W=setInterval(()=>{if(this.renderOK)return J(!0);if(Date.now()-H>G)return K(`Renderer was not OK within ${G}ms`)},10)})}get context(){if(!this._context)throw new Error("WebGPU context not initialized");return this._context}get adapter(){if(!this._adapter)throw new Error("WebGPU adapter not initialized");return this._adapter}get device(){if(!this._device)throw new Error("WebGPU device not initialized");return this._device}onBeforeUpdate(G){this.registry.onBeforeUpdate.push(G)}onAfterUpdate(G){this.registry.onAfterUpdate.push(G)}onUpdate(G){this.registry.onUpdate.push(G)}onStart(G){this.registry.onStart.push(G)}doUpdate(G){if(this.jobsToSubmitThisFrame=[],this.registry.onBeforeUpdate.forEach((H)=>H(G,this)),this.registry.onUpdate.forEach((H)=>H(G,this)),this.registry.onAfterUpdate.forEach((H)=>H(G,this)),this.jobsToSubmitThisFrame.length!==0)this.device.queue.submit(this.jobsToSubmitThisFrame)}doStart(G=0){this.registry.onStart.forEach((H)=>H(G,this))}async oneShot(G=0){await this.awaitRendererReady(),this.doStart(G),this.doUpdate(G)}async start(){await this.awaitRendererReady(),this.doStart();const G=(H)=>{this.doUpdate(H),requestAnimationFrame(G)};requestAnimationFrame(G)}commit(G){this.jobsToSubmitThisFrame.push(G)}}var T0=function(G){const H=Q;return Q=G,H},i=function(G,H,J){const K=new Q(3);if(G!==void 0){if(K[0]=G,H!==void 0){if(K[1]=H,J!==void 0)K[2]=J}}return K},g0=function(G,H,J,K){return K=K||new Q(3),K[0]=G,K[1]=H,K[2]=J,K},o0=function(G,H){return H=H||new Q(3),H[0]=Math.ceil(G[0]),H[1]=Math.ceil(G[1]),H[2]=Math.ceil(G[2]),H},r0=function(G,H){return H=H||new Q(3),H[0]=Math.floor(G[0]),H[1]=Math.floor(G[1]),H[2]=Math.floor(G[2]),H},z0=function(G,H){return H=H||new Q(3),H[0]=Math.round(G[0]),H[1]=Math.round(G[1]),H[2]=Math.round(G[2]),H},$0=function(G,H=0,J=1,K){return K=K||new Q(3),K[0]=Math.min(J,Math.max(H,G[0])),K[1]=Math.min(J,Math.max(H,G[1])),K[2]=Math.min(J,Math.max(H,G[2])),K},l0=function(G,H,J){return J=J||new Q(3),J[0]=G[0]+H[0],J[1]=G[1]+H[1],J[2]=G[2]+H[2],J},i0=function(G,H,J,K){return K=K||new Q(3),K[0]=G[0]+H[0]*J,K[1]=G[1]+H[1]*J,K[2]=G[2]+H[2]*J,K},c0=function(G,H){const J=G[0],K=G[1],W=G[2],C=G[0],F=G[1],j=G[2],_=Math.sqrt(J*J+K*K+W*W),U=Math.sqrt(C*C+F*F+j*j),Y=_*U,B=Y&&_0(G,H)/Y;return Math.acos(B)},v=function(G,H,J){return J=J||new Q(3),J[0]=G[0]-H[0],J[1]=G[1]-H[1],J[2]=G[2]-H[2],J},p0=function(G,H){return Math.abs(G[0]-H[0])0.00001)H[0]=J/C,H[1]=K/C,H[2]=W/C;else H[0]=0,H[1]=0,H[2]=0;return H},JG=function(G,H){return H=H||new Q(3),H[0]=-G[0],H[1]=-G[1],H[2]=-G[2],H},Q0=function(G,H){return H=H||new Q(3),H[0]=G[0],H[1]=G[1],H[2]=G[2],H},E0=function(G,H,J){return J=J||new Q(3),J[0]=G[0]*H[0],J[1]=G[1]*H[1],J[2]=G[2]*H[2],J},O0=function(G,H,J){return J=J||new Q(3),J[0]=G[0]/H[0],J[1]=G[1]/H[1],J[2]=G[2]/H[2],J},CG=function(G=1,H){H=H||new Q(3);const J=Math.random()*2*Math.PI,K=Math.random()*2-1,W=Math.sqrt(1-K*K)*G;return H[0]=Math.cos(J)*W,H[1]=Math.sin(J)*W,H[2]=K*G,H},BG=function(G){return G=G||new Q(3),G[0]=0,G[1]=0,G[2]=0,G},XG=function(G,H,J){J=J||new Q(3);const K=G[0],W=G[1],C=G[2],F=H[3]*K+H[7]*W+H[11]*C+H[15]||1;return J[0]=(H[0]*K+H[4]*W+H[8]*C+H[12])/F,J[1]=(H[1]*K+H[5]*W+H[9]*C+H[13])/F,J[2]=(H[2]*K+H[6]*W+H[10]*C+H[14])/F,J},ZG=function(G,H,J){J=J||new Q(3);const K=G[0],W=G[1],C=G[2];return J[0]=K*H[0]+W*H[4]+C*H[8],J[1]=K*H[1]+W*H[5]+C*H[9],J[2]=K*H[2]+W*H[6]+C*H[10],J},YG=function(G,H,J){J=J||new Q(3);const K=G[0],W=G[1],C=G[2];return J[0]=K*H[0]+W*H[4]+C*H[8],J[1]=K*H[1]+W*H[5]+C*H[9],J[2]=K*H[2]+W*H[6]+C*H[10],J},jG=function(G,H,J){J=J||new Q(3);const K=H[0],W=H[1],C=H[2],F=H[3]*2,j=G[0],_=G[1],U=G[2],Y=W*U-C*_,B=C*j-K*U,X=K*_-W*j;return J[0]=j+Y*F+(W*X-C*B)*2,J[1]=_+B*F+(C*Y-K*X)*2,J[2]=U+X*F+(K*B-W*Y)*2,J},_G=function(G,H){return H=H||new Q(3),H[0]=G[12],H[1]=G[13],H[2]=G[14],H},UG=function(G,H,J){J=J||new Q(3);const K=H*4;return J[0]=G[K+0],J[1]=G[K+1],J[2]=G[K+2],J},hG=function(G,H){H=H||new Q(3);const J=G[0],K=G[1],W=G[2],C=G[4],F=G[5],j=G[6],_=G[8],U=G[9],Y=G[10];return H[0]=Math.sqrt(J*J+K*K+W*W),H[1]=Math.sqrt(C*C+F*F+j*j),H[2]=Math.sqrt(_*_+U*U+Y*Y),H},DG=function(G){const H=O;return O=G,H},PG=function(G,H,J,K,W,C,F,j,_,U,Y,B,X,D,h,P){const Z=new O(16);if(G!==void 0){if(Z[0]=G,H!==void 0){if(Z[1]=H,J!==void 0){if(Z[2]=J,K!==void 0){if(Z[3]=K,W!==void 0){if(Z[4]=W,C!==void 0){if(Z[5]=C,F!==void 0){if(Z[6]=F,j!==void 0){if(Z[7]=j,_!==void 0){if(Z[8]=_,U!==void 0){if(Z[9]=U,Y!==void 0){if(Z[10]=Y,B!==void 0){if(Z[11]=B,X!==void 0){if(Z[12]=X,D!==void 0){if(Z[13]=D,h!==void 0){if(Z[14]=h,P!==void 0)Z[15]=P}}}}}}}}}}}}}}}return Z},QG=function(G,H,J,K,W,C,F,j,_,U,Y,B,X,D,h,P,Z){return Z=Z||new O(16),Z[0]=G,Z[1]=H,Z[2]=J,Z[3]=K,Z[4]=W,Z[5]=C,Z[6]=F,Z[7]=j,Z[8]=_,Z[9]=U,Z[10]=Y,Z[11]=B,Z[12]=X,Z[13]=D,Z[14]=h,Z[15]=P,Z},EG=function(G,H){return H=H||new O(16),H[0]=G[0],H[1]=G[1],H[2]=G[2],H[3]=0,H[4]=G[4],H[5]=G[5],H[6]=G[6],H[7]=0,H[8]=G[8],H[9]=G[9],H[10]=G[10],H[11]=0,H[12]=0,H[13]=0,H[14]=0,H[15]=1,H},OG=function(G,H){H=H||new O(16);const J=G[0],K=G[1],W=G[2],C=G[3],F=J+J,j=K+K,_=W+W,U=J*F,Y=K*F,B=K*j,X=W*F,D=W*j,h=W*_,P=C*F,Z=C*j,N=C*_;return H[0]=1-B-h,H[1]=Y+N,H[2]=X-Z,H[3]=0,H[4]=Y-N,H[5]=1-U-h,H[6]=D+P,H[7]=0,H[8]=X+Z,H[9]=D-P,H[10]=1-U-B,H[11]=0,H[12]=0,H[13]=0,H[14]=0,H[15]=1,H},NG=function(G,H){return H=H||new O(16),H[0]=-G[0],H[1]=-G[1],H[2]=-G[2],H[3]=-G[3],H[4]=-G[4],H[5]=-G[5],H[6]=-G[6],H[7]=-G[7],H[8]=-G[8],H[9]=-G[9],H[10]=-G[10],H[11]=-G[11],H[12]=-G[12],H[13]=-G[13],H[14]=-G[14],H[15]=-G[15],H},J0=function(G,H){return H=H||new O(16),H[0]=G[0],H[1]=G[1],H[2]=G[2],H[3]=G[3],H[4]=G[4],H[5]=G[5],H[6]=G[6],H[7]=G[7],H[8]=G[8],H[9]=G[9],H[10]=G[10],H[11]=G[11],H[12]=G[12],H[13]=G[13],H[14]=G[14],H[15]=G[15],H},RG=function(G,H){return Math.abs(G[0]-H[0])new Float32Array(12)],[Float64Array,()=>new Float64Array(12)],[Array,()=>new Array(12).fill(0)]]),CH=V0.get(Float32Array);var Q=Float32Array,q0=i,n0=v,a0=Y0,d0=j0,s0=U0,t0=h0,GG=D0,HG=P0,KG=Q0,WG=E0,FG=O0,N0=Object.freeze({__proto__:null,create:i,setDefaultType:T0,fromValues:q0,set:g0,ceil:o0,floor:r0,round:z0,clamp:$0,add:l0,addScaled:i0,angle:c0,subtract:v,sub:n0,equalsApproximately:p0,equals:x0,lerp:y0,lerpV:v0,max:b0,min:e0,mulScalar:Y0,scale:a0,divScalar:m0,inverse:j0,invert:d0,cross:x,dot:_0,length:U0,len:s0,lengthSq:h0,lenSq:t0,distance:D0,dist:GG,distanceSq:P0,distSq:HG,normalize:p,negate:JG,copy:Q0,clone:KG,multiply:E0,mul:WG,divide:O0,div:FG,random:CG,zero:BG,transformMat4:XG,transformMat4Upper3x3:ZG,transformMat3:YG,transformQuat:jG,getTranslation:_G,getAxis:UG,getScaling:hG}),O=Float32Array,LG=J0,SG=R0,wG=k0,R,k,L,bG=f0,eG=M0,y=Object.freeze({__proto__:null,setDefaultType:DG,create:PG,set:QG,fromMat3:EG,fromQuat:OG,negate:NG,copy:J0,clone:LG,equalsApproximately:RG,equals:kG,identity:L0,transpose:fG,inverse:R0,determinant:MG,invert:SG,multiply:k0,mul:wG,setTranslation:IG,getTranslation:AG,getAxis:uG,setAxis:VG,getScaling:TG,perspective:qG,ortho:gG,frustum:oG,aim:rG,cameraAim:zG,lookAt:$G,translation:lG,translate:iG,rotationX:cG,rotateX:nG,rotationY:pG,rotateY:xG,rotationZ:yG,rotateZ:vG,axisRotation:f0,rotation:bG,axisRotate:M0,rotate:eG,scaling:aG,scale:mG,uniformScaling:dG,uniformScale:sG});class K0 extends S0{G;H;J;K;depthTexture;uniformBuffer;vertexBuffer;texture;sampler;uniformBindGroup;renderPassDescriptor;pipeline;viewMatrix=y.translate(y.identity(),N0.fromValues(0,0,-4));projectionMatrix=y.perspective(2*Math.PI*0.2,1.7777777777777777,1,100);constructor(G,H,J,K){super(G);this.app=G;this.mesh=H;this.shader=J;this.textures=K}onStart(){this.projectionMatrix=y.perspective(2*Math.PI*0.2,this.app.canvas.width/this.app.canvas.height,1,100),this.depthTexture=this.app.device.createTexture({size:[this.app.canvas.width,this.app.canvas.height],format:"depth24plus",usage:GPUTextureUsage.RENDER_ATTACHMENT}),this.uniformBuffer=this.app.device.createBuffer({size:68,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),this.pipeline=this.mesh.pipeline(this.app,this.shader,{}),this.uniformBindGroup=this.app.device.createBindGroup({layout:this.pipeline.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:this.uniformBuffer}}]}),this.renderPassDescriptor={colorAttachments:[],depthStencilAttachment:{view:this.depthTexture.createView(),depthClearValue:1,depthLoadOp:"clear",depthStoreOp:"store"}},this.vertexBuffer=this.mesh.buffer(this.app)}writeUniforms(G,H){if(!this.uniformBuffer)return;const{device:{queue:J}}=this.app,K=G;J.writeBuffer(this.uniformBuffer,0,K.buffer,K.byteOffset,K.length);const W=new Float32Array([H]);J.writeBuffer(this.uniformBuffer,K.length+1,W.buffer,W.byteOffset,W.byteLength)}onUpdate(G){if(!this.renderPassDescriptor||!this.pipeline||!this.uniformBindGroup||!this.vertexBuffer)return;const H=y.multiply(this.projectionMatrix,this.viewMatrix);this.writeUniforms(H,G);const{device:J}=this.app,K=J.createCommandEncoder(),W=K.beginRenderPass(this.renderPassDescriptor);W.setPipeline(this.pipeline),W.setBindGroup(0,this.uniformBindGroup),W.setVertexBuffer(0,this.vertexBuffer),W.draw(this.mesh.config.vertexCount),W.end(),this.app.commit(K.finish())}}class W0{G;constructor(G){this.config=G}buffer(G){const H=G.device.createBuffer({size:this.config.mesh.byteLength,usage:GPUBufferUsage.VERTEX,mappedAtCreation:!0});return new Float32Array(H.getMappedRange()).set(this.config.mesh),H.unmap(),H}pipeline(G,H,J){const K=H.module(G);return G.device.createRenderPipeline({layout:"auto",vertex:{module:K,entryPoint:"main",buffers:[{arrayStride:4,attributes:[{shaderLocation:0,offset:0,format:"float32x4"},{shaderLocation:2,offset:this.config.positionSize,format:"float32x4"},{shaderLocation:1,offset:this.config.positionSize+this.config.colorSize,format:"float32x4"}]}]},fragment:{module:K,entryPoint:"main",targets:[{format:"rgba8unorm"}]},primitive:{topology:"triangle-list",cullMode:J.cullMode??"back"},depthStencil:J.stencil&&{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}})}}var tG=new Float32Array([-1,-1,0,1,1,1,1,1,0,0,1,-1,0,1,1,1,1,1,1,0,-1,1,0,1,1,1,1,1,0,1,1,1,0,1,1,1,1,1,1,1]),w0=new W0({mesh:tG,positionSize:16,colorSize:16,uvSize:8});var I0="fn rgb2hsv(vec3f c)->vec3f{vec4f K=vec4f(0.0,-1.0/3.0,2.0/3.0,-1.0);vec4f p=mix(vec4f(c.bg,K.wz),vec4f(c.gb,K.xy),step(c.b,c.g));vec4f q=mix(vec4f(p.xyw,c.r),vec4f(c.r,p.yzx),step(p.x,c.r));f32 d=q.x-min(q.w,q.y);f32 e=1.0e-10;return vec3f(abs(q.z+(q.w-q.y)/(6.0*d+e)),d/(q.x+e),q.x);}fn hsv2rgb(vec3f c)->vec3f{vec4f K=vec4f(1.0,2.0/3.0,1.0/3.0,3.0);vec3f p=abs(fract(c.xxx+K.xyz)*6.0-K.www);return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);}struct Uniforms{modelViewProjectionMatrix:mat4x4,time:f32,}@group(0)@binding(0)var uniforms:Uniforms;struct v2f{@builtin(position)position:vec4f,@location(0)color:vec4f,@location(1)uv:vec2f,}@vertex fn main(@builtin(position)position:vec4f,@location(0)color:vec4f,@location(1)uv:vec2f,)->v2f{return v2f(uniforms.modelViewProjectionMatrix*position,color,uv);}@fragment fn main(@location(0)uv:vec2f,)->@location(0)vec4f{f32 z=sin(uniforms.time)*0.001*0.5+0.5;vec3f hsv=vec3f(uv.x,uv.y,z);hsv.x+=uniforms.time*0.0001;hsv.y=1.0;hsv.z=1.0;vec3f rgb=hsv2rgb(hsv);return saturate(vec4f(rgb,1.0));}";var A0="struct Uniforms{modelViewProjectionMatrix:mat4x4,time:f32,}@group(0)@binding(0)var uniforms:Uniforms;struct v2f{@builtin(position)position:vec4f,@location(0)uv:vec2f,}@vertex fn vertex_main(@builtin(position)position:vec4f,@location(0)uv:vec2f,)->v2f{return v2f(uniforms.modelViewProjectionMatrix*position,uv);}@fragment fn fragment_main(@location(0)uv:vec2f,)->vec4f{return vec4f(1.0,0.0,1.0,1.0);}";var JH=new RegExp("#pragma ([a-z]+) ([a-zA-Z_0-9]+)","g");class G0{_module=null;vertexMain="main";fragmentMain="main";code;constructor(...G){this.code=G.join("\n");const H=this.code.matchAll(JH);for(let J of H||[])switch(J[1]){case"fragment":this.fragmentMain=J[2];break;case"vertex":this.vertexMain=J[2];break}}module(G){return this._module=this._module||(this._module=G.device.createShaderModule({code:this.code}))}}var EH=new G0(A0);var u0=new H0({fov:20}),KH=new G0(I0),MH=new K0(u0,w0,KH);u0.start();
diff --git a/package.json b/package.json
index 9fdfb2a..4a07b39 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"esbuild-plugin-glsl": "^1.2.2",
"glob": "^10.3.10",
"serve": "^14.2.1",
- "typescript": "^5.2.2"
+ "typescript": "^5.2.2",
+ "wgpu-matrix": "^2.5.0"
}
}
diff --git a/src/002-webgpu-instead/main.ts b/src/002-webgpu-instead/main.ts
index cd0e8d0..98eceee 100644
--- a/src/002-webgpu-instead/main.ts
+++ b/src/002-webgpu-instead/main.ts
@@ -6,6 +6,7 @@ import { Shader } from "../renderer/shader";
const app = new WebGPUApp({ fov: 20 });
-const renderer = new MeshRenderer(app, plane);
const shader = new Shader(rainbowPlane);
+const renderer = new MeshRenderer(app, plane, shader);
+
app.start();
diff --git a/src/renderer/mesh-renderer.ts b/src/renderer/mesh-renderer.ts
index 2f29222..671c58c 100644
--- a/src/renderer/mesh-renderer.ts
+++ b/src/renderer/mesh-renderer.ts
@@ -1,3 +1,4 @@
+import { Mat4, mat4, vec3 } from "wgpu-matrix";
import { Behavior } from "./behavior";
import { Mesh } from "./mesh";
import { Shader } from "./shader";
@@ -6,29 +7,49 @@ import { WebGPUApp } from "./webgpu";
export class MeshRenderer extends Behavior {
private depthTexture?: GPUTexture;
private uniformBuffer?: GPUBuffer;
+ private vertexBuffer?: GPUBuffer;
private texture?: GPUTexture;
private sampler?: GPUSampler;
private uniformBindGroup?: GPUBindGroup;
private renderPassDescriptor?: GPURenderPassDescriptor;
private pipeline?: GPURenderPipeline;
+ private viewMatrix = mat4.translate(
+ mat4.identity(),
+ vec3.fromValues(0, 0, -4)
+ );
+ private projectionMatrix = mat4.perspective(
+ 2 * Math.PI * 0.2,
+ 1920 / 1080,
+ 1,
+ 100
+ );
constructor(
public app: WebGPUApp,
public mesh: Mesh,
- public shader: Shader
+ public shader: Shader,
+ public textures?: any[]
) {
super(app);
}
onStart() {
+ this.projectionMatrix = mat4.perspective(
+ 2 * Math.PI * 0.2,
+ this.app.canvas.width / this.app.canvas.height,
+ 1,
+ 100
+ );
+
this.depthTexture = this.app.device.createTexture({
size: [this.app.canvas.width, this.app.canvas.height],
format: "depth24plus",
usage: GPUTextureUsage.RENDER_ATTACHMENT,
});
+ // float32x4x4 + float32
this.uniformBuffer = this.app.device.createBuffer({
- size: 4 * 4 + 4,
+ size: 4 * 16 + 4,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
});
@@ -62,7 +83,64 @@ export class MeshRenderer extends Behavior {
depthStoreOp: "store",
},
};
+
+ this.vertexBuffer = this.mesh.buffer(this.app);
}
- onUpdate(time: number) {}
+ private writeUniforms(modelViewProjection: Mat4, time: number) {
+ if (!this.uniformBuffer) {
+ return;
+ }
+
+ const {
+ device: { queue },
+ } = this.app;
+
+ const mvpBuf = modelViewProjection as Float32Array;
+ queue.writeBuffer(
+ this.uniformBuffer,
+ 0,
+ mvpBuf.buffer,
+ mvpBuf.byteOffset,
+ mvpBuf.length
+ );
+
+ const timeBuf = new Float32Array([time]);
+ queue.writeBuffer(
+ this.uniformBuffer,
+ mvpBuf.length + 1,
+ timeBuf.buffer,
+ timeBuf.byteOffset,
+ timeBuf.byteLength
+ );
+ }
+
+ onUpdate(time: number) {
+ if (
+ !this.renderPassDescriptor ||
+ !this.pipeline ||
+ !this.uniformBindGroup ||
+ !this.vertexBuffer
+ ) {
+ return;
+ }
+
+ const mvp = mat4.multiply(this.projectionMatrix, this.viewMatrix);
+ this.writeUniforms(mvp, time);
+
+ const { device } = this.app;
+
+ const commandEncoder = device.createCommandEncoder();
+ const passEncoder = commandEncoder.beginRenderPass(
+ this.renderPassDescriptor
+ );
+
+ passEncoder.setPipeline(this.pipeline);
+ passEncoder.setBindGroup(0, this.uniformBindGroup);
+ passEncoder.setVertexBuffer(0, this.vertexBuffer);
+ passEncoder.draw(this.mesh.config.vertexCount);
+ passEncoder.end();
+
+ this.app.commit(commandEncoder.finish());
+ }
}
diff --git a/src/renderer/mesh.ts b/src/renderer/mesh.ts
index eaeb130..03a149b 100644
--- a/src/renderer/mesh.ts
+++ b/src/renderer/mesh.ts
@@ -6,6 +6,7 @@ export type MeshConfig = {
positionSize: number;
colorSize: number;
uvSize: number;
+ vertexCount: number;
};
export class Mesh {
diff --git a/src/renderer/webgpu.ts b/src/renderer/webgpu.ts
index bf0b54d..1cab4e2 100644
--- a/src/renderer/webgpu.ts
+++ b/src/renderer/webgpu.ts
@@ -12,7 +12,9 @@ export class WebGPUApp {
private _adapter?: GPUAdapter;
private _device?: GPUDevice;
private _context?: GPUCanvasContext;
- public telemetry: Telemetry;
+ public telemetry?: Telemetry;
+ private jobsToSubmitThisFrame: GPUCommandBuffer[] = [];
+ private renderOK = false;
public registry: {
onBeforeUpdate: RenderHandle[];
@@ -34,7 +36,10 @@ export class WebGPUApp {
this.canvas = document.querySelector("canvas") as HTMLCanvasElement;
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
- this.telemetry = new Telemetry(this);
+
+ if (location.search.includes("telemetry")) {
+ this.telemetry = new Telemetry(this);
+ }
this.init().catch((e) => {
const main = document.querySelector("main");
@@ -72,6 +77,23 @@ export class WebGPUApp {
alphaMode: "premultiplied",
...this.config.context,
});
+
+ this.renderOK = true;
+ }
+
+ awaitRendererReady(timeout: number = 5000) {
+ const start = Date.now();
+ return new Promise((resolve, reject) => {
+ const interval = setInterval(() => {
+ if (this.renderOK) {
+ return resolve(true);
+ }
+
+ if (Date.now() - start > timeout) {
+ return reject(`Renderer was not OK within ${timeout}ms`);
+ }
+ }, 10);
+ });
}
get context() {
@@ -115,9 +137,15 @@ export class WebGPUApp {
}
doUpdate(time: number) {
+ this.jobsToSubmitThisFrame = [];
+
this.registry.onBeforeUpdate.forEach((handle) => handle(time, this));
this.registry.onUpdate.forEach((handle) => handle(time, this));
this.registry.onAfterUpdate.forEach((handle) => handle(time, this));
+
+ if (this.jobsToSubmitThisFrame.length !== 0) {
+ this.device.queue.submit(this.jobsToSubmitThisFrame);
+ }
}
doStart(time: number = 0) {
@@ -125,11 +153,15 @@ export class WebGPUApp {
}
async oneShot(time: number = 0) {
+ await this.awaitRendererReady();
+
this.doStart(time);
this.doUpdate(time);
}
- start() {
+ async start() {
+ await this.awaitRendererReady();
+
this.doStart();
const run = (time: number) => {
@@ -138,4 +170,8 @@ export class WebGPUApp {
};
requestAnimationFrame(run);
}
+
+ commit(commandEncoder: GPUCommandBuffer) {
+ this.jobsToSubmitThisFrame.push(commandEncoder);
+ }
}