feat: wgsl to latest version, webpack to vite

demo/BasicTestApp.ts

@@ -72,7 +72,7 @@ export default class BasicTestApp {
     //   new Uint16Array([0, 1, 2, 2, 1, 3]),
     //   6
     // );
-    const texture = await H.resource.load({type: 'texture', name: 'uv-debug.tex', src: require('./assets/textures/uv-debug.png')});
+    const texture = await H.resource.load({type: 'texture', name: 'uv-debug.tex', src: './demo/assets/textures/uv-debug.png'});
     // const effect = new H.Effect('test', {
     //   vs: require('./assets/shaders/test/vertex.vert.wgsl'),
     //   fs: require('./assets/shaders/test/fragment.frag.wgsl'),

demo/RayTracingApp.ts

@@ -8,7 +8,7 @@ import 'select-pure/dist/index.js';
 import * as H from '../src/index';
 import {DebugInfo, debugRay, debugRayShadow, debugRayShadows, sampleCircle} from './debugCs';
 
-const MODEL_SRC = '/assets/models/walls/scene.gltf';
+const MODEL_SRC = './demo/assets/models/walls/scene.gltf';
 const MAX_SAMPLERS = 256;
 
 function addSelect(onChange: (options: string) => void) {
@@ -73,7 +73,7 @@ export default class RayTracingApp {
     ));
     this._camera.pos.set([0, 0, 6]);
 
-    this._noiseTex = await H.resource.load({type: 'texture', name: 'noise.tex', src: '/assets/textures/noise-rgba.webp'});
+    this._noiseTex = await H.resource.load({type: 'texture', name: 'noise.tex', src: './demo/assets/textures/noise-rgba.webp'});
     const model = this._model = await H.resource.load({type: 'gltf', name: 'scene.gltf', src: MODEL_SRC});
     if (model.cameras.length) {
       this._camera = model.cameras[0];

demo/SuperSimpleApp.ts

@@ -5,6 +5,7 @@
  * @Date   : 6/25/2021, 12:02:19 AM
  */
 import * as H from '../src/index';
+import simpleVert from './simple.wgsl';
 
 export default class BasicTestApp {
   public pipeline: GPURenderPipeline;
@@ -40,56 +41,34 @@ export default class BasicTestApp {
 
       vertex: {
         module: device.createShaderModule({
-          code: `
-struct VertexOutput {
-  [[builtin(position)]] position: vec4<f32>;
-};
-
-let pos : array<vec2<f32>, 6> = array<vec2<f32>, 6>(
-  vec2<f32>(-1.0, -1.0),
-  vec2<f32>(1.0, -1.0),
-  vec2<f32>(-1.0, 1.0),
-  vec2<f32>(-1.0, 1.0),
-  vec2<f32>(1.0, -1.0),
-  vec2<f32>(1.0, 1.0)
-);
-
-[[stage(vertex)]]
-fn main([[builtin(vertex_index)]] VertexIndex : u32) -> VertexOutput {
-  var output: VertexOutput;
-
-  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
-
-  return output;
-}
-          `,
+          code: simpleVert,
         }),
         entryPoint: 'main',
       },
       fragment: {
         module: device.createShaderModule({
           code: `${H.renderEnv.shaderPrefix}
   struct VertexOutput {
-    [[builtin(position)]] position: vec4<f32>;
+    @builtin(position) position: vec4<f32>;
   };
 
-  [[block]] struct UB0 {
+  struct UB0 {
     color: vec4<f32>;
   };
-  [[group(1), binding(0)]] var<uniform> ub0: UB0;
+  @group(1) @binding(0) var<uniform> ub0: UB0;
 
-  [[block]] struct UB1 {
+  struct UB1 {
     color: vec4<f32>;
   };
-  [[group(2), binding(0)]] var<uniform> ub1: UB1;
+  @group(2) @binding(0) var<uniform> ub1: UB1;
 
-  [[block]] struct UB2 {
+  struct UB2 {
     color: vec4<f32>;
   };
-  [[group(3), binding(0)]] var<uniform> ub2: UB2;
+  @group(3) @binding(0) var<uniform> ub2: UB2;
   
-  [[stage(fragment)]]
-  fn main(vo: VertexOutput) -> [[location(0)]] vec4<f32> {
+  @stage(fragment)
+  fn main(vo: VertexOutput) -> @location(0) vec4<f32> {
     return ub0.color + ub1.color + ub2.color;
   }          
           `,
@@ -119,7 +98,7 @@ fn main([[builtin(vertex_index)]] VertexIndex : u32) -> VertexOutput {
       colorAttachments: [
         {
           view: textureView,
-          loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+          loadOp: 'clear',
           storeOp: 'store' as GPUStoreOp,
         },
       ],
@@ -131,7 +110,7 @@ fn main([[builtin(vertex_index)]] VertexIndex : u32) -> VertexOutput {
     });
     passEncoder.setPipeline(this.pipeline);
     passEncoder.draw(6, 1, 0, 0);
-    passEncoder.endPass();
+    passEncoder.end();
 
     device.queue.submit([commandEncoder.finish()]);
   }

demo/assets/shaders/test/fragment.frag.wgsl

@@ -1,11 +1,11 @@
 struct VertexOutput {
-  [[builtin(position)]] Position: vec4<f32>;
-  [[location(0)]] v_texcoord_0: vec2<f32>;
-  [[location(1)]] testOrth: vec4<f32>;
+  @builtin(position) Position: vec4<f32>;
+  @location(0) v_texcoord_0: vec2<f32>;
+  @location(1) testOrth: vec4<f32>;
 };
 
-[[stage(fragment)]]
-fn main(vo: VertexOutput) -> [[location(0)]] vec4<f32> {
+@stage(fragment)
+fn main(vo: VertexOutput) -> @location(0) vec4<f32> {
   let color: vec4<f32> = textureSample(u_texture, u_sampler, vo.v_texcoord_0.xy);
   return vec4<f32>(color.rgb * material.u_color, color.a);
 }

demo/assets/shaders/test/vertex.vert.wgsl

@@ -1,11 +1,11 @@
 struct VertexOutput {
-  [[builtin(position)]] Position: vec4<f32>;
-  [[location(0)]] v_texcoord_0: vec2<f32>;
-  [[location(1)]] testOrth: vec4<f32>;
+  @builtin(position) Position: vec4<f32>;
+  @location(0) v_texcoord_0: vec2<f32>;
+  @location(1) testOrth: vec4<f32>;
 };
 
-[[stage(vertex)]]
-  fn main(attrs: Attrs) -> VertexOutput {
+@stage(vertex)
+fn main(attrs: Attrs) -> VertexOutput {
   var output: VertexOutput;
 
   output.Position = global.u_vp * mesh.u_world * vec4<f32>(attrs.position, 1.);

demo/index.ts

@@ -34,7 +34,7 @@ async function update(dt: number) {
 }
 
 async function main() {
-  await H.init(document.querySelector<HTMLCanvasElement>('canvas#mainCanvas'));
+  await H.init((document.querySelector<HTMLCanvasElement>('canvas#mainCanvas')!));
   await app.init();
 
   let t = 0;

demo/simple.wgsl

@@ -0,0 +1,19 @@
+struct VertexOutput {
+  @builtin(position) position: vec4<f32>;
+};
+
+let pos : array<vec2<f32>, 6> = array<vec2<f32>, 6>(
+  vec2<f32>(-1.0, -1.0),
+  vec2<f32>(1.0, -1.0),
+  vec2<f32>(-1.0, 1.0),
+  vec2<f32>(-1.0, 1.0),
+  vec2<f32>(1.0, -1.0),
+  vec2<f32>(1.0, 1.0)
+);
+
+@stage(vertex)
+fn main(@builtin(vertex_index) VertexIndex : u32) -> VertexOutput {
+  var output: VertexOutput;
+  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
+  return output;
+}

demo/index.html → index.html

@@ -30,5 +30,6 @@
       console.log(e.clientX, e.clientY);
     })
   </script>
+  <script type="module" src="/demo/index.ts"></script>
 </body>
 </html>

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "lib/index.js",
   "devDependencies": {
+    "@rollup/plugin-typescript": "^8.3.1",
     "bluebird": "^3.7.2",
     "html-webpack-plugin": "^4.5.0",
     "json-schema-ref-parser": "^9.0.9",
@@ -13,12 +14,15 @@
     "ts-loader": "^9.2.2",
     "typescript": "^3.9.5",
     "url-loader": "^2.1.0",
+    "vite": "^2.8.6",
+    "vite-plugin-glsl": "^0.0.9",
+    "vite-plugin-string": "^1.1.2",
     "webpack": "^5.11.0",
     "webpack-cli": "^4.3.0",
     "webpack-dev-server": "^3.11.0"
   },
   "scripts": {
-    "dev": "webpack serve --config webpack.config.js"
+    "dev": "vite"
   },
   "author": {
     "name": "dtysky",
@@ -27,8 +31,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@webgpu/types": "^0.1.6",
-    "gl-matrix": "^3.3.0",
+    "@webgpu/types": "^0.1.13",
+    "gl-matrix": "^3.4.3",
     "select-pure": "^2.1.1-alpha.1"
   }
 }