💬 wip: use-view format

docs/examples/components/meshes/heart/frag.wgsl

@@ -1,5 +1,4 @@
 @fragment
-fn fragmentMain(input : VertexOutput) -> @location(0) vec4f {
-  let grid = vec2f(22, 12);
-  return vec4f(input.cell / grid, 0, 1);
-}
+fn fragmentMain() -> @location(0) vec4f {
+  return vec4<f32>(1.0, 0.0, 0.0, 1.0); // 红色
+}

docs/examples/components/meshes/heart/options.js

@@ -41,7 +41,6 @@
   }
   const vertices = generateHeartVertices()
   const normalVertices = normalizeArrayToCenterRange(vertices)
-  console.log(normalVertices)
   return {
     instanceCount: 22 * 12,
     vertices: normalVertices

docs/examples/components/meshes/heart/vert.wgsl

@@ -1,24 +1,5 @@
-@group(0) @binding(0) var<uniform> grid : vec2f;
-struct VertexOutput {
-  @builtin(position) pos : vec4f,
-  @location(0) cell : vec2f
-};
-
 @vertex
-fn vertexMain(@location(0) pos : vec2 < f32>, @builtin(instance_index) instance : u32) ->
-VertexOutput {
-  //网格大小：12*12
-  let grid = vec2f(22, 12);
-  //第一个单元格下标
-  let i = f32(instance);
-  let cell = vec2f(i % grid.x, floor(i / grid.x));
-  //将左边系从-1,1转换成0,2
-  let convertPos = pos + 1;
-  //计算偏移量
-  let cellOffset = cell / grid * 2;
-  let gridPos = convertPos / grid - 1 + cellOffset;
-  var output : VertexOutput;
-  output.pos = vec4f(gridPos, 0, 1);
-  output.cell = cell;
-  return output;
+fn vertexMain(@location(0) position: vec2<f32>) ->
+@builtin(position) vec4<f32> {
+  return vec4<f32>(position, 0.0, 1.0);
 }

docs/playground/component/composables/use-view.ts

@@ -1,7 +1,7 @@
+import { _throttle } from './../utils'
 import { onMounted, ref, Ref, ShallowRef, watch } from 'vue'
 import GPUMesh from '../../../../src/index'
 import { DataMap } from '../index'
-import { _throttle } from '../utils'
 
 export default function useView({
   el,
@@ -13,30 +13,39 @@ export default function useView({
   const loading = ref(false)
   onMounted(async () => {
     await GPUMesh.Mesh.loadDevice()
-    const observer = new ResizeObserver(renderGPUMesh)
+    const observer = new ResizeObserver(_throttleRenderGPUMesh)
     observer.observe(el.value!)
     loading.value = true
   })
   watch(
     [dataMap, el, loading],
     () => {
       if (!loading.value) return
-      renderGPUMesh()
+      if (timer) {
+        clearInterval(timer)
+        timer = null
+      }
+      _throttleRenderGPUMesh()
     },
     { deep: true, immediate: true, flush: 'pre' }
   )
 
-  const WAIT_TIME = 600
-  const renderGPUMesh = _throttle(() => {
+  let timer: ReturnType<typeof setInterval> | null = null
+  const _renderGPUMesh = () => {
     if (!el.value) return
     el.value.innerHTML = ''
     const options = eval(dataMap.value.options)
-    console.log(dataMap.value)
-    console.log(options)
     new GPUMesh.Mesh(el.value, {
       vertex: dataMap.value.vertex,
       fragment: dataMap.value.fragment,
       options
     })
-  }, WAIT_TIME)
+    if (options.timeout && timer == null) {
+      timer = setInterval(() => {
+        _renderGPUMesh()
+      }, options.timeout)
+    }
+  }
+  const WAIT_TIME = 600
+  const _throttleRenderGPUMesh = _throttle(_renderGPUMesh, WAIT_TIME)
 }