From eb19d95eeefd79549013fa509b63257da862bb64 Mon Sep 17 00:00:00 2001 From: Noelle Calliope <1581674+mekanoe@users.noreply.github.com> Date: Sun, 8 Oct 2023 00:32:46 -0400 Subject: [PATCH] optimize Behavior automounting --- html/001-platform-provenance/main.js | 2 +- html/002-webgpu-instead/main.js | 2 +- html/chunk-818093f0cbbefec3.js | 5 +++++ html/chunk-c8239659df5e5cce.js | 5 ----- src/renderer/behavior.ts | 13 ++++++------- src/renderer/mesh-renderer.ts | 6 ++++-- src/renderer/webgpu.ts | 2 +- 7 files changed, 18 insertions(+), 17 deletions(-) create mode 100644 html/chunk-818093f0cbbefec3.js delete mode 100644 html/chunk-c8239659df5e5cce.js diff --git a/html/001-platform-provenance/main.js b/html/001-platform-provenance/main.js index c374746..5e77526 100644 --- a/html/001-platform-provenance/main.js +++ b/html/001-platform-provenance/main.js @@ -1 +1 @@ -import{b as Y} from"../chunk-c8239659df5e5cce.js";class E{constructor(v){this.gl=v.gl,this.app=v,this.program=this.gl.createProgram()}attach(v,_){console.log("attaching shader",{type:v,source:_});const D=this.gl.createShader(v);if(this.gl.shaderSource(D,_),this.gl.compileShader(D),!this.gl.getShaderParameter(D,this.gl.COMPILE_STATUS))throw new Error("An error occurred compiling the shaders: "+this.gl.getShaderInfoLog(D));return this.gl.attachShader(this.program,D),this}link(){if(this.gl.linkProgram(this.program),!this.gl.getProgramParameter(this.program,this.gl.LINK_STATUS))throw new Error("Unable to initialize the shader program: "+this.gl.getProgramInfoLog(this.program));return console.log("shader linked"),this}location(v){if(v[0]==="a")return this.gl.getAttribLocation(this.program,v);else if(v[0]==="u")return this.gl.getUniformLocation(this.program,v)}updateTime(){const v=this.app.now(),_=Math.sin(v),D=Math.cos(v);this.gl.uniform1f(this.location("uTime"),v),this.gl.uniform1f(this.location("uSinTime"),_),this.gl.uniform1f(this.location("uCosTime"),D)}activate(v,_){this.gl.useProgram(this.program),this.gl.uniformMatrix4fv(this.location("uProjectionMatrix"),!1,v),this.gl.uniformMatrix4fv(this.location("uModelViewMatrix"),!1,_),this.updateTime()}}class I{constructor(v){this.gl=v.gl,this.app=v,this.vertexPositions=new Float32Array([]),this.positionBuffer=null,this.textureBuffer=null}initBuffer(v,_=this.gl.STATIC_DRAW){const D=this.gl.createBuffer();return this.gl.bindBuffer(this.gl.ARRAY_BUFFER,D),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(v),_),D}attachShader(v){return this.shader=v,this.vertexPosition=v.location("aVertexPosition"),this.textureCoord=v.location("aTextureCoord"),this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.positionBuffer),this.gl.vertexAttribPointer(this.vertexPosition,2,this.gl.FLOAT,!1,0,0),this.gl.enableVertexAttribArray(this.vertexPosition),this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.textureBuffer),this.gl.vertexAttribPointer(this.textureCoord,2,this.gl.FLOAT,!1,0,0),this.gl.enableVertexAttribArray(this.textureCoord),this}draw2D(){this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.positionBuffer),this.shader.activate(this.app.projectionMatrix,this.app.modelViewMatrix),this.gl.drawArrays(this.gl.TRIANGLE_STRIP,0,this.vertexPositions.length/2)}draw3D(){this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.positionBuffer),this.shader.activate(this.app.projectionMatrix,this.app.modelViewMatrix),this.gl.drawArrays(this.gl.TRIANGLE_STRIP,0,this.vertexPositions.length/3)}}class K extends I{constructor(v){super(v);this.vertexPositions=new Float32Array([-1,-1,1,-1,-1,1,1,1]),this.positionBuffer=this.initBuffer(this.vertexPositions),this.textureBuffer=this.initBuffer(new Float32Array([0,0,1,0,0,1,1,1])),this.app.onUpdate(()=>this.draw2D())}}class L{constructor(v={fov:45}){if(this._now=0,this.registry={onStart:[],onUpdate:[],onBeforeUpdate:[],onAfterUpdate:[]},this.config=v,this.canvas=document.querySelector("canvas"),this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.gl=this.canvas.getContext("webgl2"),this.gl===null)throw document.querySelector("main").innerHTML="
your browser didn't let me set up webgl
",new Error("Unable to initialize WebGL. Your browser or machine may not support it.");const _=this.gl,D=this.config.fov*Math.PI/180,B=_.canvas.clientWidth/_.canvas.clientHeight,G=0.1,H=100,P=glMatrix.mat4.create();glMatrix.mat4.perspective(P,D,B,G,H);const C=glMatrix.mat4.create();glMatrix.mat4.translate(C,C,[-0,0,-6]),this.projectionMatrix=P,this.modelViewMatrix=C,this.clear(),this.onBeforeUpdate(()=>this.clear()),this.telemetry=new Y(this)}clear(){const v=this.gl;v.clearColor(0,0,0,1),v.clearDepth(1),v.enable(v.DEPTH_TEST),v.depthFunc(v.LEQUAL),v.clear(v.COLOR_BUFFER_BIT|v.DEPTH_BUFFER_BIT)}onStart(v){this.registry.onStart.push(v)}onUpdate(v){this.registry.onUpdate.push(v)}onBeforeUpdate(v){this.registry.onBeforeUpdate.push(v)}onAfterUpdate(v){this.registry.onAfterUpdate.push(v)}start(){this.registry.onStart.forEach((v)=>v(this))}update(){this.registry.onBeforeUpdate.forEach((v)=>v(this)),this.registry.onUpdate.forEach((v)=>v(this)),this.registry.onAfterUpdate.forEach((v)=>v(this))}oneShot(){requestAnimationFrame((v)=>{this._now=v,this.start(),this.update()})}loop(){const v=(_)=>{this._now=_,this.update(),requestAnimationFrame(v)};requestAnimationFrame(v)}now(){return this._now}}var k="precision highp float;uniform float uTime;uniform float uSinTime;uniform float uCosTime;varying highp vec2 vTextureCoord;vec3 rgb2hsv(vec3 c){vec4 K=vec4(0.0,-1.0/3.0,2.0/3.0,-1.0);vec4 p=mix(vec4(c.bg,K.wz),vec4(c.gb,K.xy),step(c.b,c.g));vec4 q=mix(vec4(p.xyw,c.r),vec4(c.r,p.yzx),step(p.x,c.r));float d=q.x-min(q.w,q.y);float e=1.0e-10;return vec3(abs(q.z+(q.w-q.y)/(6.0*d+e)),d/(q.x+e),q.x);}vec3 hsv2rgb(vec3 c){vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);vec3 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);}void main(){float zComponent=uSinTime*0.001*0.5+0.5;vec3 hsv=rgb2hsv(vec3(vTextureCoord,zComponent));hsv.x+=uTime*0.0001;hsv.y=1.0;hsv.z=1.0;vec3 rgb=hsv2rgb(hsv);gl_FragColor=vec4(rgb,1.0);gl_FragColor=clamp(gl_FragColor,0.0,1.0);}";var q="attribute vec4 aVertexPosition;attribute vec2 aTextureCoord;uniform mat4 uModelViewMatrix;uniform mat4 uProjectionMatrix;varying highp vec2 vTextureCoord;void main(){gl_Position=uProjectionMatrix*uModelViewMatrix*aVertexPosition;vTextureCoord=aTextureCoord;}";var R=new L({fov:20}),A=R.gl,U=new E(R).attach(A.VERTEX_SHADER,q).attach(A.FRAGMENT_SHADER,k).link(),W=new K(R);W.attachShader(U);R.loop(); +import{b as Y} from"../chunk-818093f0cbbefec3.js";class E{constructor(v){this.gl=v.gl,this.app=v,this.program=this.gl.createProgram()}attach(v,_){console.log("attaching shader",{type:v,source:_});const D=this.gl.createShader(v);if(this.gl.shaderSource(D,_),this.gl.compileShader(D),!this.gl.getShaderParameter(D,this.gl.COMPILE_STATUS))throw new Error("An error occurred compiling the shaders: "+this.gl.getShaderInfoLog(D));return this.gl.attachShader(this.program,D),this}link(){if(this.gl.linkProgram(this.program),!this.gl.getProgramParameter(this.program,this.gl.LINK_STATUS))throw new Error("Unable to initialize the shader program: "+this.gl.getProgramInfoLog(this.program));return console.log("shader linked"),this}location(v){if(v[0]==="a")return this.gl.getAttribLocation(this.program,v);else if(v[0]==="u")return this.gl.getUniformLocation(this.program,v)}updateTime(){const v=this.app.now(),_=Math.sin(v),D=Math.cos(v);this.gl.uniform1f(this.location("uTime"),v),this.gl.uniform1f(this.location("uSinTime"),_),this.gl.uniform1f(this.location("uCosTime"),D)}activate(v,_){this.gl.useProgram(this.program),this.gl.uniformMatrix4fv(this.location("uProjectionMatrix"),!1,v),this.gl.uniformMatrix4fv(this.location("uModelViewMatrix"),!1,_),this.updateTime()}}class I{constructor(v){this.gl=v.gl,this.app=v,this.vertexPositions=new Float32Array([]),this.positionBuffer=null,this.textureBuffer=null}initBuffer(v,_=this.gl.STATIC_DRAW){const D=this.gl.createBuffer();return this.gl.bindBuffer(this.gl.ARRAY_BUFFER,D),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(v),_),D}attachShader(v){return this.shader=v,this.vertexPosition=v.location("aVertexPosition"),this.textureCoord=v.location("aTextureCoord"),this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.positionBuffer),this.gl.vertexAttribPointer(this.vertexPosition,2,this.gl.FLOAT,!1,0,0),this.gl.enableVertexAttribArray(this.vertexPosition),this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.textureBuffer),this.gl.vertexAttribPointer(this.textureCoord,2,this.gl.FLOAT,!1,0,0),this.gl.enableVertexAttribArray(this.textureCoord),this}draw2D(){this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.positionBuffer),this.shader.activate(this.app.projectionMatrix,this.app.modelViewMatrix),this.gl.drawArrays(this.gl.TRIANGLE_STRIP,0,this.vertexPositions.length/2)}draw3D(){this.gl.bindBuffer(this.gl.ARRAY_BUFFER,this.positionBuffer),this.shader.activate(this.app.projectionMatrix,this.app.modelViewMatrix),this.gl.drawArrays(this.gl.TRIANGLE_STRIP,0,this.vertexPositions.length/3)}}class K extends I{constructor(v){super(v);this.vertexPositions=new Float32Array([-1,-1,1,-1,-1,1,1,1]),this.positionBuffer=this.initBuffer(this.vertexPositions),this.textureBuffer=this.initBuffer(new Float32Array([0,0,1,0,0,1,1,1])),this.app.onUpdate(()=>this.draw2D())}}class L{constructor(v={fov:45}){if(this._now=0,this.registry={onStart:[],onUpdate:[],onBeforeUpdate:[],onAfterUpdate:[]},this.config=v,this.canvas=document.querySelector("canvas"),this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.gl=this.canvas.getContext("webgl2"),this.gl===null)throw document.querySelector("main").innerHTML="
your browser didn't let me set up webgl
",new Error("Unable to initialize WebGL. Your browser or machine may not support it.");const _=this.gl,D=this.config.fov*Math.PI/180,B=_.canvas.clientWidth/_.canvas.clientHeight,G=0.1,H=100,P=glMatrix.mat4.create();glMatrix.mat4.perspective(P,D,B,G,H);const C=glMatrix.mat4.create();glMatrix.mat4.translate(C,C,[-0,0,-6]),this.projectionMatrix=P,this.modelViewMatrix=C,this.clear(),this.onBeforeUpdate(()=>this.clear()),this.telemetry=new Y(this)}clear(){const v=this.gl;v.clearColor(0,0,0,1),v.clearDepth(1),v.enable(v.DEPTH_TEST),v.depthFunc(v.LEQUAL),v.clear(v.COLOR_BUFFER_BIT|v.DEPTH_BUFFER_BIT)}onStart(v){this.registry.onStart.push(v)}onUpdate(v){this.registry.onUpdate.push(v)}onBeforeUpdate(v){this.registry.onBeforeUpdate.push(v)}onAfterUpdate(v){this.registry.onAfterUpdate.push(v)}start(){this.registry.onStart.forEach((v)=>v(this))}update(){this.registry.onBeforeUpdate.forEach((v)=>v(this)),this.registry.onUpdate.forEach((v)=>v(this)),this.registry.onAfterUpdate.forEach((v)=>v(this))}oneShot(){requestAnimationFrame((v)=>{this._now=v,this.start(),this.update()})}loop(){const v=(_)=>{this._now=_,this.update(),requestAnimationFrame(v)};requestAnimationFrame(v)}now(){return this._now}}var k="precision highp float;uniform float uTime;uniform float uSinTime;uniform float uCosTime;varying highp vec2 vTextureCoord;vec3 rgb2hsv(vec3 c){vec4 K=vec4(0.0,-1.0/3.0,2.0/3.0,-1.0);vec4 p=mix(vec4(c.bg,K.wz),vec4(c.gb,K.xy),step(c.b,c.g));vec4 q=mix(vec4(p.xyw,c.r),vec4(c.r,p.yzx),step(p.x,c.r));float d=q.x-min(q.w,q.y);float e=1.0e-10;return vec3(abs(q.z+(q.w-q.y)/(6.0*d+e)),d/(q.x+e),q.x);}vec3 hsv2rgb(vec3 c){vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);vec3 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);}void main(){float zComponent=uSinTime*0.001*0.5+0.5;vec3 hsv=rgb2hsv(vec3(vTextureCoord,zComponent));hsv.x+=uTime*0.0001;hsv.y=1.0;hsv.z=1.0;vec3 rgb=hsv2rgb(hsv);gl_FragColor=vec4(rgb,1.0);gl_FragColor=clamp(gl_FragColor,0.0,1.0);}";var q="attribute vec4 aVertexPosition;attribute vec2 aTextureCoord;uniform mat4 uModelViewMatrix;uniform mat4 uProjectionMatrix;varying highp vec2 vTextureCoord;void main(){gl_Position=uProjectionMatrix*uModelViewMatrix*aVertexPosition;vTextureCoord=aTextureCoord;}";var R=new L({fov:20}),A=R.gl,U=new E(R).attach(A.VERTEX_SHADER,q).attach(A.FRAGMENT_SHADER,k).link(),W=new K(R);W.attachShader(U);R.loop(); diff --git a/html/002-webgpu-instead/main.js b/html/002-webgpu-instead/main.js index 4c1e958..518db8d 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-c8239659df5e5cce.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(this,v))}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 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}),R=new j(I,E),s=new P(F);I.start(); diff --git a/html/chunk-818093f0cbbefec3.js b/html/chunk-818093f0cbbefec3.js new file mode 100644 index 0000000..125b60f --- /dev/null +++ b/html/chunk-818093f0cbbefec3.js @@ -0,0 +1,5 @@ +class L{d;constructor(d){this.app=d;this.onStart&&d.onStart(this.onStart.bind(this)),this.onUpdate&&d.onUpdate(this.onUpdate.bind(this)),this.onAfterUpdate&&d.onAfterUpdate(this.onAfterUpdate.bind(this)),this.onBeforeUpdate&&d.onBeforeUpdate(this.onBeforeUpdate.bind(this))}}class h extends L{d;el;frameTimes=[];maxFrameTimes=100;lastFrameTime=0;constructor(d,n="#telemetry"){super(d);this.app=d;if(this.el=document.querySelector(n),this.el&&location.search.includes("telemetry"))this.el.style.display="block"}insertTime(d){if(this.frameTimes.push(d),this.frameTimes.length>this.maxFrameTimes)this.frameTimes.shift()}onStart(){this.lastFrameTime=0,this.frameTimes=[],setInterval(()=>{const d=this.frameTimes.reduce((U,c)=>U+c,0)/this.frameTimes.length,n=1000/d;this.el.innerHTML=` + ${n.toFixed(1)} FPS (${d.toFixed(3)} ms)
+ bU: ${this.app.registry.onBeforeUpdate.length} | U: ${this.app.registry.onUpdate.length} | aU: ${this.app.registry.onAfterUpdate.length} + `},1000)}onAfterUpdate(d){const n=d-this.lastFrameTime;this.insertTime(n),this.lastFrameTime=d}} +export{L as a,h as b}; diff --git a/html/chunk-c8239659df5e5cce.js b/html/chunk-c8239659df5e5cce.js deleted file mode 100644 index e5e32c8..0000000 --- a/html/chunk-c8239659df5e5cce.js +++ /dev/null @@ -1,5 +0,0 @@ -class n{U;constructor(U){this.app=U;this.onBeforeUpdate&&U.onBeforeUpdate(this.onBeforeUpdate.bind(this)),this.onUpdate&&U.onUpdate(this.onUpdate.bind(this)),this.onAfterUpdate&&U.onAfterUpdate(this.onAfterUpdate.bind(this)),this.onStart&&U.onStart(this.onStart.bind(this))}onStart(U){}onBeforeUpdate(U){}onUpdate(U){}onAfterUpdate(U){}}class k extends n{U;el;frameTimes=[];maxFrameTimes=100;lastFrameTime=0;constructor(U,h="#telemetry"){super(U);this.app=U;if(this.el=document.querySelector(h),this.el&&location.search.includes("telemetry"))this.el.style.display="block"}insertTime(U){if(this.frameTimes.push(U),this.frameTimes.length>this.maxFrameTimes)this.frameTimes.shift()}onStart(){this.lastFrameTime=0,this.frameTimes=[],setInterval(()=>{const U=this.frameTimes.reduce((L,j)=>L+j,0)/this.frameTimes.length,h=1000/U;this.el.innerHTML=` - ${h.toFixed(1)} FPS (${U.toFixed(3)} ms)
- bU: ${this.app.registry.onBeforeUpdate.length} | U: ${this.app.registry.onUpdate.length} | aU: ${this.app.registry.onAfterUpdate.length} - `},1000)}onAfterUpdate(U){const h=U-this.lastFrameTime;this.insertTime(h),this.lastFrameTime=U}} -export{n as a,k as b}; diff --git a/src/renderer/behavior.ts b/src/renderer/behavior.ts index 3d9e688..2e3cce8 100644 --- a/src/renderer/behavior.ts +++ b/src/renderer/behavior.ts @@ -1,15 +1,14 @@ import { WebGPUApp } from "./webgpu"; export abstract class Behavior { + onStart?(...args: any[]): void; + onBeforeUpdate?(...args: any[]): void; + onUpdate?(...args: any[]): void; + onAfterUpdate?(...args: any[]): void; constructor(public app: WebGPUApp) { - this.onBeforeUpdate && app.onBeforeUpdate(this.onBeforeUpdate.bind(this)); + this.onStart && app.onStart(this.onStart.bind(this)); this.onUpdate && app.onUpdate(this.onUpdate.bind(this)); this.onAfterUpdate && app.onAfterUpdate(this.onAfterUpdate.bind(this)); - this.onStart && app.onStart(this.onStart.bind(this)); + this.onBeforeUpdate && app.onBeforeUpdate(this.onBeforeUpdate.bind(this)); } - - onStart(time: number) {} - onBeforeUpdate(time: number) {} - onUpdate(time: number) {} - onAfterUpdate(time: number) {} } diff --git a/src/renderer/mesh-renderer.ts b/src/renderer/mesh-renderer.ts index 66ee15b..1e08ef0 100644 --- a/src/renderer/mesh-renderer.ts +++ b/src/renderer/mesh-renderer.ts @@ -16,9 +16,11 @@ export class MeshRenderer extends Behavior { ) { super(app); } - onStart() { + + override onStart() { console.log("hello from meshrenderer!"); console.log(`i've got a ${this.mesh.constructor.name}`); } - onUpdate(time: number) {} + + override onUpdate(time: number) {} } diff --git a/src/renderer/webgpu.ts b/src/renderer/webgpu.ts index e992052..bf0b54d 100644 --- a/src/renderer/webgpu.ts +++ b/src/renderer/webgpu.ts @@ -121,7 +121,7 @@ export class WebGPUApp { } doStart(time: number = 0) { - this.registry.onStart.forEach((handle) => handle(this, time)); + this.registry.onStart.forEach((handle) => handle(time, this)); } async oneShot(time: number = 0) {