【Hacker News搬运】显示HN：使用WebGPU将音频波形渲染到HTML画布

[hackernews]

Title: Show HN: Render audio waveforms to HTML canvas using WebGPU

显示HN：使用WebGPU将音频波形渲染到HTML画布

Text: Hey HN. I built this quick and dirty component to render audio waveforms using WebGPU. I just published it to NPM.<p>It's the first time I use WebGPU and it's been a while since I write shaders. Feedback is very welcome!<p>GitHub: https://github.com/mrkev/webgpu-waveform

Examples: https://aykev.dev/webgpu-waveform

嘿，HN。我构建了这个快速而肮脏的组件来使用WebGPU渲染音频波形。我刚刚把它发表在NPM上<p> 它；这是我第一次使用WebGPU；我已经有一段时间没有写着色器了。非常欢迎反馈<p> GitHub:https:&#x2F&#x2F；github.com&#x2F；mrkev；webgpu波形示例：https:&#x2F&#x2F；aykev.dev&#x2F；webgpu波形

hn link

Url:

Post by: aylmao

Comments:

spankalee: For cross-framework usage it'd be great if instead of being a render callback, this was distributed as an HTML custom element. Then you could easily use it in any declarative template system, even React/JSX.<p>I tried to make a web components here:
<a href="https://lit.dev/playground/#gist=8cf935c3869bf4790653cd6fadfd2508" rel="nofollow">https://lit.dev/playground/#gist=8cf935c3869bf4790653cd6fadf...</a><p>But the webgpu-waveform module isn't loading. Looks like you have a hard-coded import of "../../react@18.2.0/index.js", which isn't going to be a portable import even for the React users. For the non-React users, they shouldn't have to install React to get the module loading.<p>Could you make two entrypoints, one for React, the other for plain JS?

spankalee: 对于跨框架使用；如果不是作为一个呈现回调，而是作为一个HTML自定义元素分发，那就太好了。然后，您可以在任何声明性模板系统中轻松使用它，甚至React&#x2F；JSX<p> 我试着在这里制作一个web组件：<a href=“https://；&#x2F；lit.dev&#x2F：操场&#x2F！#gist=8cf935c3869bf4790653cd6fadfd2508”rel=“nofollow”>https://&#x2F；lit.dev；操场&#x2F#gist=8cf935c3869bf4790653cd6fadf</a> <p>但是webgpu波形模块不是；t加载。看起来您有一个硬编码的导入“…”&#x2F&#x2F；react@18.2.0&#x2F；js”；，其是；即使对于React用户来说，它也不会是一个可移植的导入。对于非React用户，他们应该；不必安装React来加载模块<p> 你能做两个入口点吗，一个用于React，另一个用于普通JS？

PaulDavisThe1st: As a side note: Ardour doesn't use a GPU for waveform rendering and so along the way we discovered that the "find max + min values for this chunk of samples" is more or less the most expensive operation in the prepare-to-render step (so much so that we cache these values on disk). We got a notable performance improvement from using SIMD instruction sets for this computation.

PaulDavisThe1st: 作为旁注：Ardour不；t使用GPU进行波形渲染，因此在这一过程中我们发现；找到该样本块的最大值+最小值“；或多或少是准备渲染步骤中最昂贵的操作（如此之多，以至于我们将这些值缓存在磁盘上）。通过使用SIMD指令集进行此计算，我们获得了显著的性能改进。

serial_dev: Feedback: it would be great if on the example site interactive demo, the waveform offset could be increased by scrolling / swiping left and right, and the scale should also change by zooming in and out.

serial_dev: 反馈：如果在示例站点交互式演示上，波形偏移可以通过滚动增加，那就太好了；左右滑动，比例也应该通过放大和缩小来改变。

lovegrenoble: No appropriate GPUAdapter found

lovegrenoble: 找不到合适的GPU适配器

pininja: Very cool! How do you like WebGPU compared to WebGL?

pininja: 非常酷！与WebGL相比，你觉得WebGPU怎么样？