diff --git a/docs/examples/components/meshes/heart/frag.wgsl b/docs/examples/components/meshes/heart/frag.wgsl index 8487592..c6a21d7 100644 --- a/docs/examples/components/meshes/heart/frag.wgsl +++ b/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(1.0, 0.0, 0.0, 1.0); // 红色 +} \ No newline at end of file diff --git a/docs/examples/components/meshes/heart/options.js b/docs/examples/components/meshes/heart/options.js index 853af45..614b61c 100644 --- a/docs/examples/components/meshes/heart/options.js +++ b/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 diff --git a/docs/examples/components/meshes/heart/vert.wgsl b/docs/examples/components/meshes/heart/vert.wgsl index d644ab8..d4c57c7 100644 --- a/docs/examples/components/meshes/heart/vert.wgsl +++ b/docs/examples/components/meshes/heart/vert.wgsl @@ -1,24 +1,5 @@ -@group(0) @binding(0) var 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) -> +@builtin(position) vec4 { + return vec4(position, 0.0, 1.0); } diff --git a/docs/playground/component/composables/use-view.ts b/docs/playground/component/composables/use-view.ts index b486a85..22c584b 100644 --- a/docs/playground/component/composables/use-view.ts +++ b/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,7 +13,7 @@ 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 }) @@ -21,22 +21,31 @@ export default function useView({ [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 | 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) }