ok really im close now

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 ...`);

hack/glsl-plugin.ts

@@ -0,0 +1,5 @@
+import glsl from "esbuild-plugin-glsl";
+
+export default glsl({
+  minify: true,
+});

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="<div><i>your browser didn't let me set up webgpu. firefox nightly or enable <code>dom.webgpu.enable</code>.</i></div>";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="<div><i>your browser didn't let me set up webgpu. firefox nightly or enable <code>dom.webgpu.enable</code>.</i></div>";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<f32>,time:f32,}@group(0)@binding(0)var<uniform> 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();

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"

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();

src/002-webgpu-instead/rainbow-plane.wgsl

@@ -1,30 +1,13 @@
-struct Uniforms {
-  modelViewProjectionMatrix: mat4x4<f32>,
-  time: f32,
-}
-
-@group(0) @binding(0) var<uniform> 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);
-}

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);
+}

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);
+}

src/uniforms.wgsl

@@ -0,0 +1,6 @@
+struct Uniforms {
+  modelViewProjectionMatrix: mat4x4<f32>,
+  time: f32,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;