From 89759068e5b99042720c3890e5a4b5ed112b8497 Mon Sep 17 00:00:00 2001 From: Noelle Calliope <1581674+mekanoe@users.noreply.github.com> Date: Sun, 8 Oct 2023 00:01:11 -0400 Subject: [PATCH] ok really im close now --- bun.lockb | Bin 54484 -> 54909 bytes build.ts => hack/build.ts | 2 + convert-meshes.ts => hack/convert-meshes.ts | 0 generate.ts => hack/generate.ts | 0 hack/glsl-plugin.ts | 5 ++ {templates => hack/templates}/README.md.txt | 0 {templates => hack/templates}/index.html.txt | 0 {templates => hack/templates}/work.html.txt | 0 html/001-platform-provenance/main.js | 47 +------------------ html/002-webgpu-instead/main.js | 2 +- package.json | 3 +- src/002-webgpu-instead/main.ts | 3 +- src/002-webgpu-instead/rainbow-plane.wgsl | 43 ++--------------- src/basic-vert.wgsl | 14 ++++++ src/color-conv.wgsl | 15 ++++++ src/uniforms.wgsl | 6 +++ 16 files changed, 53 insertions(+), 87 deletions(-) rename build.ts => hack/build.ts (94%) rename convert-meshes.ts => hack/convert-meshes.ts (100%) rename generate.ts => hack/generate.ts (100%) create mode 100644 hack/glsl-plugin.ts rename {templates => hack/templates}/README.md.txt (100%) rename {templates => hack/templates}/index.html.txt (100%) rename {templates => hack/templates}/work.html.txt (100%) create mode 100644 src/basic-vert.wgsl create mode 100644 src/color-conv.wgsl create mode 100644 src/uniforms.wgsl diff --git a/bun.lockb b/bun.lockb index 01d3de194f3e29f0e494a20c2a87f6ab35a2bd9b..4a6bea461afb086f8e5aa1a66315d1629278997a 100755 GIT binary patch delta 10475 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 delta 10066 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 diff --git a/build.ts b/hack/build.ts similarity index 94% rename from build.ts rename to hack/build.ts index 71f353b..b34486d 100644 --- a/build.ts +++ b/hack/build.ts @@ -3,6 +3,7 @@ import { generate } from "./generate"; import { globSync } from "glob"; import { rmSync, mkdirSync, cpSync } from "node:fs"; import { convertMeshes } from "./convert-meshes"; +import glslPlugin from "./glsl-plugin"; console.log(chalk.green`>> Cleaing up ./html ...`); rmSync("html", { recursive: true, force: true }); @@ -22,6 +23,7 @@ await Bun.build({ ".wgsl": "text", }, minify: true, + plugins: [glslPlugin], }); console.log(chalk.green`>> Generating HTML and Markdown ...`); diff --git a/convert-meshes.ts b/hack/convert-meshes.ts similarity index 100% rename from convert-meshes.ts rename to hack/convert-meshes.ts diff --git a/generate.ts b/hack/generate.ts similarity index 100% rename from generate.ts rename to hack/generate.ts diff --git a/hack/glsl-plugin.ts b/hack/glsl-plugin.ts new file mode 100644 index 0000000..133ff84 --- /dev/null +++ b/hack/glsl-plugin.ts @@ -0,0 +1,5 @@ +import glsl from "esbuild-plugin-glsl"; + +export default glsl({ + minify: true, +}); diff --git a/templates/README.md.txt b/hack/templates/README.md.txt similarity index 100% rename from templates/README.md.txt rename to hack/templates/README.md.txt diff --git a/templates/index.html.txt b/hack/templates/index.html.txt similarity index 100% rename from templates/index.html.txt rename to hack/templates/index.html.txt diff --git a/templates/work.html.txt b/hack/templates/work.html.txt similarity index 100% rename from templates/work.html.txt rename to hack/templates/work.html.txt diff --git a/html/001-platform-provenance/main.js b/html/001-platform-provenance/main.js index 90b9619..c374746 100644 --- a/html/001-platform-provenance/main.js +++ b/html/001-platform-provenance/main.js @@ -1,46 +1 @@ -import{b as Y} from"../chunk-c8239659df5e5cce.js";class E{constructor(C){this.gl=C.gl,this.app=C,this.program=this.gl.createProgram()}attach(C,D){console.log("attaching shader",{type:C,source:D});const R=this.gl.createShader(C);if(this.gl.shaderSource(R,D),this.gl.compileShader(R),!this.gl.getShaderParameter(R,this.gl.COMPILE_STATUS))throw new Error("An error occurred compiling the shaders: "+this.gl.getShaderInfoLog(R));return this.gl.attachShader(this.program,R),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(C){if(C[0]==="a")return this.gl.getAttribLocation(this.program,C);else if(C[0]==="u")return this.gl.getUniformLocation(this.program,C)}updateTime(){const C=this.app.now(),D=Math.sin(C),R=Math.cos(C);this.gl.uniform1f(this.location("uTime"),C),this.gl.uniform1f(this.location("uSinTime"),D),this.gl.uniform1f(this.location("uCosTime"),R)}activate(C,D){this.gl.useProgram(this.program),this.gl.uniformMatrix4fv(this.location("uProjectionMatrix"),!1,C),this.gl.uniformMatrix4fv(this.location("uModelViewMatrix"),!1,D),this.updateTime()}}class I{constructor(C){this.gl=C.gl,this.app=C,this.vertexPositions=new Float32Array([]),this.positionBuffer=null,this.textureBuffer=null}initBuffer(C,D=this.gl.STATIC_DRAW){const R=this.gl.createBuffer();return this.gl.bindBuffer(this.gl.ARRAY_BUFFER,R),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(C),D),R}attachShader(C){return this.shader=C,this.vertexPosition=C.location("aVertexPosition"),this.textureCoord=C.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(C){super(C);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(C={fov:45}){if(this._now=0,this.registry={onStart:[],onUpdate:[],onBeforeUpdate:[],onAfterUpdate:[]},this.config=C,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 D=this.gl,R=this.config.fov*Math.PI/180,G=D.canvas.clientWidth/D.canvas.clientHeight,H=0.1,J=100,P=glMatrix.mat4.create();glMatrix.mat4.perspective(P,R,G,H,J);const q=glMatrix.mat4.create();glMatrix.mat4.translate(q,q,[-0,0,-6]),this.projectionMatrix=P,this.modelViewMatrix=q,this.clear(),this.onBeforeUpdate(()=>this.clear()),this.telemetry=new Y(this)}clear(){const C=this.gl;C.clearColor(0,0,0,1),C.clearDepth(1),C.enable(C.DEPTH_TEST),C.depthFunc(C.LEQUAL),C.clear(C.COLOR_BUFFER_BIT|C.DEPTH_BUFFER_BIT)}onStart(C){this.registry.onStart.push(C)}onUpdate(C){this.registry.onUpdate.push(C)}onBeforeUpdate(C){this.registry.onBeforeUpdate.push(C)}onAfterUpdate(C){this.registry.onAfterUpdate.push(C)}start(){this.registry.onStart.forEach((C)=>C(this))}update(){this.registry.onBeforeUpdate.forEach((C)=>C(this)),this.registry.onUpdate.forEach((C)=>C(this)),this.registry.onAfterUpdate.forEach((C)=>C(this))}oneShot(){requestAnimationFrame((C)=>{this._now=C,this.start(),this.update()})}loop(){const C=(D)=>{this._now=D,this.update(),requestAnimationFrame(C)};requestAnimationFrame(C)}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 A=`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 _=new L({fov:20}),B=_.gl,U=new E(_).attach(B.VERTEX_SHADER,A).attach(B.FRAGMENT_SHADER,k).link(),W=new K(_);W.attachShader(U);_.loop(); +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(); diff --git a/html/002-webgpu-instead/main.js b/html/002-webgpu-instead/main.js index 816afec..064463d 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 _{S;canvas;_adapter;_device;_context;telemetry;registry={onBeforeUpdate:[],onAfterUpdate:[],onUpdate:[],onStart:[]};constructor(S={}){this.config=S;this.config={fov:45,...S},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(S){this.registry.onBeforeUpdate.push(S)}onAfterUpdate(S){this.registry.onAfterUpdate.push(S)}onUpdate(S){this.registry.onUpdate.push(S)}onStart(S){this.registry.onStart.push(S)}doUpdate(S){this.registry.onBeforeUpdate.forEach((x)=>x(S,this)),this.registry.onUpdate.forEach((x)=>x(S,this)),this.registry.onAfterUpdate.forEach((x)=>x(S,this))}doStart(S=0){this.registry.onStart.forEach((x)=>x(this,S))}async oneShot(S=0){this.doStart(S),this.doUpdate(S)}start(){this.doStart();const S=(x)=>{this.doUpdate(x),requestAnimationFrame(S)};requestAnimationFrame(S)}}class j extends D{S;x;depthTexture;uniformBuffer;texture;sampler;uniformBindGroup;renderPassDescriptor;constructor(S,x){super(S);this.app=S;this.mesh=x}onStart(){console.log("hello from meshrenderer!"),console.log(`i've got a ${this.mesh.constructor.name}`)}onUpdate(S){}}class k{S;constructor(S){this.config=S}buffer(S){const x=S.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(S,x,C){const q=x.module(S);return S.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 H=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:H,positionSize:16,colorSize:16,uvSize:8});var F=new _({fov:20}),X=new j(F,E);F.start(); +import{a as o,b as k} from"../chunk-c8239659df5e5cce.js";class C{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 k(this),this.init().catch((S)=>{const x=document.querySelector("main");if(x)x.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.",S)})}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((S)=>S(v,this)),this.registry.onUpdate.forEach((S)=>S(v,this)),this.registry.onAfterUpdate.forEach((S)=>S(v,this))}doStart(v=0){this.registry.onStart.forEach((S)=>S(this,v))}async oneShot(v=0){this.doStart(v),this.doUpdate(v)}start(){this.doStart();const v=(S)=>{this.doUpdate(S),requestAnimationFrame(v)};requestAnimationFrame(v)}}class _ extends o{v;S;depthTexture;uniformBuffer;texture;sampler;uniformBindGroup;renderPassDescriptor;constructor(v,S){super(v);this.app=v;this.mesh=S}onStart(){console.log("hello from meshrenderer!"),console.log(`i've got a ${this.mesh.constructor.name}`)}onUpdate(v){}}class c{v;constructor(v){this.config=v}buffer(v){const S=v.device.createBuffer({size:this.config.mesh.byteLength,usage:GPUBufferUsage.VERTEX,mappedAtCreation:!0});return new Float32Array(S.getMappedRange()).set(this.config.mesh),S.unmap(),S}pipeline(v,S,x){const j=S.module(v);return v.device.createRenderPipeline({layout:"auto",vertex:{module:j,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:j,entryPoint:"main",targets:[{format:"rgba8unorm"}]},primitive:{topology:"triangle-list",cullMode:x.cullMode??"back"},depthStencil:x.stencil&&{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}})}}var E=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]),q=new c({mesh:E,positionSize:16,colorSize:16,uvSize:8});var z="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 D=new C({fov:20}),$=new _(D,q);console.log({rainbowPlane:z});D.start(); diff --git a/package.json b/package.json index dd72e8e..9fdfb2a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "noeidelon", "type": "module", - "main": "./build.ts", + "main": "./hack/build.ts", "scripts": { "build": "bun $BUNFLAGS .", "build:watch": "BUNFLAGS=--watch bun run build", @@ -19,6 +19,7 @@ }, "dependencies": { "chalk": "^5.3.0", + "esbuild-plugin-glsl": "^1.2.2", "glob": "^10.3.10", "serve": "^14.2.1", "typescript": "^5.2.2" diff --git a/src/002-webgpu-instead/main.ts b/src/002-webgpu-instead/main.ts index 0b6b20e..02e34f4 100644 --- a/src/002-webgpu-instead/main.ts +++ b/src/002-webgpu-instead/main.ts @@ -1,9 +1,10 @@ import { WebGPUApp } from "../renderer/webgpu"; import { MeshRenderer } from "../renderer/mesh-renderer"; import plane from "../meshes/plane"; +import rainbowPlane from "./rainbow-plane.wgsl"; const app = new WebGPUApp({ fov: 20 }); const renderer = new MeshRenderer(app, plane); - +console.log({ rainbowPlane }); app.start(); diff --git a/src/002-webgpu-instead/rainbow-plane.wgsl b/src/002-webgpu-instead/rainbow-plane.wgsl index 8222306..3691afa 100644 --- a/src/002-webgpu-instead/rainbow-plane.wgsl +++ b/src/002-webgpu-instead/rainbow-plane.wgsl @@ -1,30 +1,13 @@ -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) uv : vec2f, -) -> v2f { - return v2f(uniforms.modelViewProjectionMatrix * position, uv); -} +#include "../color-conv.wgsl" +#include "../uniforms.wgsl" +#include "../basic-vert.wgsl" @fragment fn main( @location(0) uv : vec2f, ) -> @location(0) vec4f { - f32 zComponent = sin(uniforms.time) * 0.001 * 0.5 + 0.5; - vec3f hsv = vec3f(uv.x, uv.y, zComponent); + 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; @@ -32,19 +15,3 @@ fn main( return saturate(vec4f(rgb, 1.0)); } - -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); -} \ No newline at end of file diff --git a/src/basic-vert.wgsl b/src/basic-vert.wgsl new file mode 100644 index 0000000..67c190e --- /dev/null +++ b/src/basic-vert.wgsl @@ -0,0 +1,14 @@ +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); +} diff --git a/src/color-conv.wgsl b/src/color-conv.wgsl new file mode 100644 index 0000000..04da2d0 --- /dev/null +++ b/src/color-conv.wgsl @@ -0,0 +1,15 @@ +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); +} \ No newline at end of file diff --git a/src/uniforms.wgsl b/src/uniforms.wgsl new file mode 100644 index 0000000..4a7c235 --- /dev/null +++ b/src/uniforms.wgsl @@ -0,0 +1,6 @@ +struct Uniforms { + modelViewProjectionMatrix: mat4x4, + time: f32, +} + +@group(0) @binding(0) var uniforms: Uniforms; \ No newline at end of file