From 87563cb9e374edf0fbfe5a97757e99b8a0e35305 Mon Sep 17 00:00:00 2001 From: Noelle Calliope <1581674+mekanoe@users.noreply.github.com> Date: Sun, 8 Oct 2023 23:36:54 -0400 Subject: [PATCH] ok webgpu sucks lets jump back to webgl --- README.md | 2 +- bun.lockb | Bin 55262 -> 54904 bytes hack/build.ts | 13 +- hack/convert-meshes.ts | 21 +- hack/glsl-plugin.ts | 2 +- hack/templates/work.html.txt | 6 - html/001-platform-provenance/index.html | 6 - html/001-platform-provenance/main.js | 2 +- .../index.html | 10 +- html/002-webgl-engine/main.js | 1 + html/002-webgpu-instead/main.js | 1 - html/chunk-1da54319833c650d.js | 2 + html/chunk-818093f0cbbefec3.js | 5 - html/index.html | 2 +- index.d.ts | 10 + package.json | 5 +- src/001-platform-provenance/app.js | 19 +- src/002-webgl-engine/main.ts | 43 + src/002-webgpu-instead/main.ts | 12 - src/002-webgpu-instead/rainbow-plane.wgsl | 17 - src/basic-vert.wgsl | 14 - src/color-conv.wgsl | 15 - src/common-shaders/error.frag | 5 + src/common-shaders/error.ts | 7 + src/common-shaders/error.vert | 8 + src/common-shaders/uv-rainbow.frag | 35 + src/common-shaders/uv-rainbow.ts | 7 + src/common-shaders/uv-rainbow.vert | 12 + src/meshes/plane.ts | 9 +- src/meshes/torus.ts | 6382 +---------------- src/renderer/behavior.ts | 4 +- src/renderer/mesh-renderer.ts | 232 +- src/renderer/mesh.ts | 71 +- src/renderer/oops.wgsl | 26 - src/renderer/renderable.ts | 18 + src/renderer/shader.ts | 148 +- src/renderer/telemetry.ts | 19 +- src/renderer/transform.ts | 18 + src/renderer/webgl.ts | 120 + src/renderer/webgpu.ts | 177 - src/uniforms.wgsl | 6 - 41 files changed, 587 insertions(+), 6925 deletions(-) rename html/{002-webgpu-instead => 002-webgl-engine}/index.html (53%) create mode 100644 html/002-webgl-engine/main.js delete mode 100644 html/002-webgpu-instead/main.js create mode 100644 html/chunk-1da54319833c650d.js delete mode 100644 html/chunk-818093f0cbbefec3.js create mode 100644 src/002-webgl-engine/main.ts delete mode 100644 src/002-webgpu-instead/main.ts delete mode 100644 src/002-webgpu-instead/rainbow-plane.wgsl delete mode 100644 src/basic-vert.wgsl delete mode 100644 src/color-conv.wgsl create mode 100644 src/common-shaders/error.frag create mode 100644 src/common-shaders/error.ts create mode 100644 src/common-shaders/error.vert create mode 100644 src/common-shaders/uv-rainbow.frag create mode 100644 src/common-shaders/uv-rainbow.ts create mode 100644 src/common-shaders/uv-rainbow.vert delete mode 100644 src/renderer/oops.wgsl create mode 100644 src/renderer/renderable.ts create mode 100644 src/renderer/transform.ts create mode 100644 src/renderer/webgl.ts delete mode 100644 src/renderer/webgpu.ts delete mode 100644 src/uniforms.wgsl diff --git a/README.md b/README.md index d72ad87..af87cb5 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ https://art.mekanoe.com ## Artworks - [./001-platform-provenance](https://art.mekanoe.com/001-platform-provenance) -- [./002-webgpu-instead](https://art.mekanoe.com/002-webgpu-instead) +- [./002-webgl-engine](https://art.mekanoe.com/002-webgl-engine) ## Development diff --git a/bun.lockb b/bun.lockb index d67313535019ad51429891f5890782007426ab2a..dfa1ae73dccce8a7908dfd7b335c22f359574be8 100755 GIT binary patch delta 10928 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 Ndrnt%m2=BC|2J~?$!q`s delta 11170 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 z z8h7}~H(MO&XSLxf%acnu-+C8p%!7s3zgINADb$a(j!Nbsr+Q5MhrVr;(Qg~rPqrN@ zbX)I(wYEInZ$;gSD8q20X8*qC=4WDWMiv6?*yPaik4W<22~vG{gxVr4hZ9lY4g0%xArrsw_n4>29@odw62ec-qn-Cj`e$Rnwk3U>^Fp~VBj zZdmO}`Fel-5o0xN@~ftd9J?~dos=o{E%8#;-pi4Hqicm3ricBo(-3ps@8V2weRWQvHEm%5BcfQgru*`iF1s()6DNd O4#(>V9{%bCQvVYd$`9xO diff --git a/hack/build.ts b/hack/build.ts index b34486d..309f048 100644 --- a/hack/build.ts +++ b/hack/build.ts @@ -13,19 +13,28 @@ const works = globSync("src/*/main.ts"); console.log(chalk.green`>> Building ...`); console.log(chalk.yellow(` Found ${works.length} works.`)); +console.log(chalk.yellow(` Running Bun.build()`)); -await Bun.build({ +const results = await Bun.build({ entrypoints: works, outdir: "html", splitting: true, loader: { ".glsl": "text", ".wgsl": "text", + ".vert": "text", + ".frag": "text", }, - minify: true, + minify: process.env.MINIFY === "false" ? false : true, plugins: [glslPlugin], }); +if (!results.success) { + console.error(chalk.red("XX Bun.build() Failed.")); + console.error(chalk.red(JSON.stringify(results.logs, null, 2))); + process.exit(1); +} + console.log(chalk.green`>> Generating HTML and Markdown ...`); await generate(works); diff --git a/hack/convert-meshes.ts b/hack/convert-meshes.ts index 17af076..69c90c6 100644 --- a/hack/convert-meshes.ts +++ b/hack/convert-meshes.ts @@ -9,6 +9,16 @@ export const convertMeshes = async () => { const [header, body] = ply.split("end_header"); const colorSize = header.includes("red") ? 4 : 0; + const headerLines = header.split("\n"); + const vertexCount = Number( + headerLines + .find((header) => header.startsWith("element vertex")) + ?.replace("element vertex ", "") + ); + + if (!vertexCount) { + throw new Error("couldn't get vertex count..."); + } const values: number[] = []; @@ -43,13 +53,16 @@ export const convertMeshes = async () => { import { Mesh } from "../renderer/mesh"; // prettier-ignore -const mesh = new Float32Array(${JSON.stringify(values, null, 2)}); +const mesh = new Float32Array(${JSON.stringify(values)}); export default new Mesh({ mesh, - positionSize: 4 * 4, - colorSize: ${colorSize} * 4, - uvSize: 2 * 4, + positionSize: 4, + colorSize: ${colorSize}, + uvSize: 2, + vertexCount: ${vertexCount}, + stride: ${4 + colorSize + 2}, + name: ${JSON.stringify(file)} }); `; diff --git a/hack/glsl-plugin.ts b/hack/glsl-plugin.ts index 133ff84..8e0ed76 100644 --- a/hack/glsl-plugin.ts +++ b/hack/glsl-plugin.ts @@ -1,5 +1,5 @@ import glsl from "esbuild-plugin-glsl"; export default glsl({ - minify: true, + minify: process.env.MINIFY === "false" ? false : true, }); diff --git a/hack/templates/work.html.txt b/hack/templates/work.html.txt index 876b6e9..19ee715 100644 --- a/hack/templates/work.html.txt +++ b/hack/templates/work.html.txt @@ -22,10 +22,4 @@
XX.X FPS (XX.X ms)
- diff --git a/html/001-platform-provenance/index.html b/html/001-platform-provenance/index.html index 3887477..a2be8f8 100644 --- a/html/001-platform-provenance/index.html +++ b/html/001-platform-provenance/index.html @@ -22,10 +22,4 @@
XX.X FPS (XX.X ms)
- diff --git a/html/001-platform-provenance/main.js b/html/001-platform-provenance/main.js index bef0278..77d392a 100644 --- a/html/001-platform-provenance/main.js +++ b/html/001-platform-provenance/main.js @@ -1 +1 @@ -import{b as Y} from"../chunk-818093f0cbbefec3.js";class k{constructor(v){this.gl=v.gl,this.app=v,this.program=this.gl.createProgram()}attach(v,R){console.log("attaching shader",{type:v,source:R});const _=this.gl.createShader(v);if(this.gl.shaderSource(_,R),this.gl.compileShader(_),!this.gl.getShaderParameter(_,this.gl.COMPILE_STATUS))throw new Error("An error occurred compiling the shaders: "+this.gl.getShaderInfoLog(_));return this.gl.attachShader(this.program,_),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(),R=Math.sin(v),_=Math.cos(v);this.gl.uniform1f(this.location("uTime"),v),this.gl.uniform1f(this.location("uSinTime"),R),this.gl.uniform1f(this.location("uCosTime"),_)}activate(v,R){this.gl.useProgram(this.program),this.gl.uniformMatrix4fv(this.location("uProjectionMatrix"),!1,v),this.gl.uniformMatrix4fv(this.location("uModelViewMatrix"),!1,R),this.updateTime()}}class q{constructor(v){this.gl=v.gl,this.app=v,this.vertexPositions=new Float32Array([]),this.positionBuffer=null,this.textureBuffer=null}initBuffer(v,R=this.gl.STATIC_DRAW){const _=this.gl.createBuffer();return this.gl.bindBuffer(this.gl.ARRAY_BUFFER,_),this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(v),R),_}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 C extends q{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 K{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 R=this.gl,_=this.config.fov*Math.PI/180,H=R.canvas.clientWidth/R.canvas.clientHeight,J=0.1,L=100,X=glMatrix.mat4.create();glMatrix.mat4.perspective(X,_,H,J,L);const I=glMatrix.mat4.create();glMatrix.mat4.translate(I,I,[-0,0,-6]),this.projectionMatrix=X,this.modelViewMatrix=I,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=(R)=>{this._now=R,this.update(),requestAnimationFrame(v)};requestAnimationFrame(v)}now(){return this._now}}var B="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 E="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 D=new K({fov:20}),G=D.gl,Q=new k(D).attach(G.VERTEX_SHADER,E).attach(G.FRAGMENT_SHADER,B).link(),U=new C(D);U.attachShader(Q);D.loop(); +import{b as X,c as R} from"../chunk-1da54319833c650d.js";class I{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 K{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 L extends K{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 P{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,E=_.canvas.clientWidth/_.canvas.clientHeight,G=0.1,H=100,U=R.create();R.perspective(U,D,E,G,H);const C=R.create();R.translate(C,C,[-0,0,-6]),this.projectionMatrix=U,this.modelViewMatrix=C,this.clear(),this.onBeforeUpdate(()=>this.clear()),this.telemetry=new X(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 Y="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 k=new P({fov:20}),B=k.gl,W=new I(k).attach(B.VERTEX_SHADER,q).attach(B.FRAGMENT_SHADER,Y).link(),Z=new L(k);Z.attachShader(W);k.loop(); diff --git a/html/002-webgpu-instead/index.html b/html/002-webgl-engine/index.html similarity index 53% rename from html/002-webgpu-instead/index.html rename to html/002-webgl-engine/index.html index da5bf5d..8c1c287 100644 --- a/html/002-webgpu-instead/index.html +++ b/html/002-webgl-engine/index.html @@ -1,6 +1,6 @@ -com.mekanoe.art // 002-webgpu-instead +com.mekanoe.art // 002-webgl-engine