search

DrSensor / nusa

incremental runtime that bring both simplicity and power into webdev (buildless, cross-language, data-driven)
MIT License
4 stars 0 forks source link

Bind shader into `<canvas>` #24

Open DrSensor opened 1 year ago

DrSensor commented 1 year ago 
<render-scope>
  <link rel="modulepreload" as="script" href="parametric-color.js">

  <canvas :context="webgpu" :config="msaa.js" class="z-0">
    <link rel="prefetch" type="text/wgsl" as="vertex" href="triangle.wgsl">
    <link rel="prefetch" type="text/wgsl" as="fragment" href="rainbow.wgsl" primary-color:="color">
  </canvas>

  <input type="range" min="0" max="255" on:input="changeColor" class="z-1">
</render-scope>
// rainbow.wgsl

var<uniform> primaryColor: f32

...

Note: logic should run in OffscreenCanvas to support multiple <canvas> across <render-scope>