2 lines
No EOL
6.3 KiB
HTML
2 lines
No EOL
6.3 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta property="og:title" content="WebGPU | Andras Schmelczer"/><meta property="og:description" content="Discover my projects."/><meta property="og:url" content="https://schmelczer.dev"/><meta property="og:image:width" content="1920"/><meta property="og:image:height" content="1920"/><meta property="og:image" content="https://schmelczer.dev/og-image.jpg"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" href="favicon.ico" type="image/x-icon"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/site.webmanifest"/><meta name="description" content="I'm Andras Schmelczer, and this is my portfolio. Discover some of my projects. I'm passionate about solving challenging problems and designing large-scale systems, especially in the context of machine learning."/><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"/><meta name="theme-color" content="#b7455e"/><title>WebGPU | Andras Schmelczer</title><style>html,body{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:#000;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
|
|
</style></head><body><noscript>JavaScript is required for this website.</noscript><script>(()=>{var e={222:(e,t,i)=>{i.r(t)},607:function(e,t,i){var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),i(222);const n=r(i(419)),s=document.getElementById("gfx");s.width=s.height=640;new n.default(s).start()},419:function(e,t,i){var r=this&&this.__awaiter||function(e,t,i,r){return new(i||(i=Promise))((function(n,s){function o(e){try{c(r.next(e))}catch(e){s(e)}}function a(e){try{c(r.throw(e))}catch(e){s(e)}}function c(e){var t;e.done?n(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(o,a)}c((r=r.apply(e,t||[])).next())}))},n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});const s=n(i(168)),o=n(i(915)),a=new Float32Array([1,-1,0,-1,-1,0,0,1,0]),c=new Float32Array([1,0,0,0,1,1,1,0,1]),u=new Uint16Array([0,1,2]);t.default=class{constructor(e){this.render=()=>{this.colorTexture=this.context.getCurrentTexture(),this.colorTextureView=this.colorTexture.createView(),this.encodeCommands(),requestAnimationFrame(this.render)},this.canvas=e}start(){return r(this,void 0,void 0,(function*(){(yield this.initializeAPI())&&(this.resizeBackings(),yield this.initializeResources(),this.render())}))}initializeAPI(){return r(this,void 0,void 0,(function*(){try{const e=navigator.gpu;if(!e)return!1;this.adapter=yield e.requestAdapter(),this.device=yield this.adapter.requestDevice(),this.queue=this.device.queue}catch(e){return console.error(e),!1}return!0}))}initializeResources(){return r(this,void 0,void 0,(function*(){const e=(e,t)=>{const i={size:e.byteLength+3&-4,usage:t,mappedAtCreation:!0},r=this.device.createBuffer(i);return(e instanceof Uint16Array?new Uint16Array(r.getMappedRange()):new Float32Array(r.getMappedRange())).set(e),r.unmap(),r};this.positionBuffer=e(a,GPUBufferUsage.VERTEX),this.colorBuffer=e(c,GPUBufferUsage.VERTEX),this.indexBuffer=e(u,GPUBufferUsage.INDEX);const t={code:o.default};this.vertModule=this.device.createShaderModule(t);const i={code:s.default};this.fragModule=this.device.createShaderModule(i);const r={attributes:[{shaderLocation:0,offset:0,format:"float32x3"}],arrayStride:12,stepMode:"vertex"},n={attributes:[{shaderLocation:1,offset:0,format:"float32x3"}],arrayStride:12,stepMode:"vertex"},d={layout:this.device.createPipelineLayout({bindGroupLayouts:[]}),vertex:{module:this.vertModule,entryPoint:"main",buffers:[r,n]},fragment:{module:this.fragModule,entryPoint:"main",targets:[{format:"bgra8unorm"}]},primitive:{frontFace:"cw",cullMode:"none",topology:"triangle-list"},depthStencil:{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus-stencil8"}};this.pipeline=this.device.createRenderPipeline(d)}))}resizeBackings(){if(!this.context){this.context=this.canvas.getContext("webgpu");const e={device:this.device,format:"bgra8unorm",usage:GPUTextureUsage.RENDER_ATTACHMENT|GPUTextureUsage.COPY_SRC,alphaMode:"opaque"};this.context.configure(e)}const e={size:[this.canvas.width,this.canvas.height,1],dimension:"2d",format:"depth24plus-stencil8",usage:GPUTextureUsage.RENDER_ATTACHMENT|GPUTextureUsage.COPY_SRC};this.depthTexture=this.device.createTexture(e),this.depthTextureView=this.depthTexture.createView()}encodeCommands(){const e={colorAttachments:[{view:this.colorTextureView,clearValue:{r:0,g:0,b:0,a:1},loadOp:"clear",storeOp:"store"}],depthStencilAttachment:{view:this.depthTextureView,depthClearValue:1,depthLoadOp:"clear",depthStoreOp:"store",stencilClearValue:0,stencilLoadOp:"clear",stencilStoreOp:"store"}};this.commandEncoder=this.device.createCommandEncoder(),this.passEncoder=this.commandEncoder.beginRenderPass(e),this.passEncoder.setPipeline(this.pipeline),this.passEncoder.setViewport(0,0,this.canvas.width,this.canvas.height,0,1),this.passEncoder.setScissorRect(0,0,this.canvas.width,this.canvas.height),this.passEncoder.setVertexBuffer(0,this.positionBuffer),this.passEncoder.setVertexBuffer(1,this.colorBuffer),this.passEncoder.setIndexBuffer(this.indexBuffer,"uint16"),this.passEncoder.drawIndexed(3,1),this.passEncoder.end(),this.queue.submit([this.commandEncoder.finish()])}}},168:e=>{e.exports="@fragment\nfn main(@location(0) inColor: vec3<f32>) -> @location(0) vec4<f32> {\n return vec4<f32>(inColor, 1.0);\n}"},915:e=>{e.exports="struct VSOut {\n @builtin(position) Position: vec4<f32>,\n @location(0) color: vec3<f32>,\n };\n\n@vertex\nfn main(@location(0) inPos: vec3<f32>,\n @location(1) inColor: vec3<f32>) -> VSOut {\n var vsOut: VSOut;\n vsOut.Position = vec4<f32>(inPos, 1.0);\n vsOut.color = inColor;\n return vsOut;\n}"}},t={};function i(r){var n=t[r];if(void 0!==n)return n.exports;var s=t[r]={exports:{}};return e[r].call(s.exports,s,s.exports,i),s.exports}i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};i(607)})();</script></body></html> |