nowfound

Life & fun · August 8, 2022

RV

Realtime visualization of 3D spectrogram with THREEJS shaders

I've been working with 2D spectrograms for a while now while working with Speech recognition. It had always fascinated me how speech and words had such distinct features. Looking at spectrograms is essentially like hearing with your eyes. Over the weekend i built a tool to visualize your own audio into a spectrogram in 3D. I used threeJS with shaders and vanilla JS/Html. Play with it here : https://spectrogram-threejs.vercel.app/ I hope it brings you as much joy as it does for me.

Realtime visualization of 3D spectrogram with THREEJS shaders launched on August 8, 2022 with 11 votes, #938 of 3,307 launches that month and more than 75% of that year's launches.

Alternatives

In plain words

This tool converts audio into an interactive 3D spectrogram visualization using THREE.js and WebGL shaders. Users can upload their own audio files to see frequency patterns and speech characteristics rendered as three-dimensional landscapes. Built with vanilla JavaScript and HTML, it transforms how spectrograms are typically viewed, making audio analysis more intuitive and visually engaging for anyone interested in sound visualization or speech recognition.

written from the facts on this page · September 2026

Does a similar job

all alternatives →
  • IV
    I've built a spectrogram analyzer web app2023 · webfft.net · ▲244
  • RA
    Render audio waveforms to HTML canvas using WebGPU2024 · ▲160

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

  • AS
    A spectrogram app in less than 100 lines of HTML and JavaScript2019 · simplespectrogram.app · ▲21
  • Volume rendering 3D data in Three.js and GLSL2024 · github.com · ▲108

    I've been going through Cem Yuksel's "Introduction to Computer Graphics" course and thought that writing a volume renderer would be a good way to test my knowledge. It is a common technique used to render 3D medical data. Works by ray marching a specific step size, reading a 3D texture (e.g. MRI data), and calculating opacity values. Code should be easy to get started with for anyone familiar with the JS ecosystem. Questions for the HN community: I spent 20-25% of the entire time just setting up the project and fighting issues with the JavaScript ecosystem. This experience has made me…

  • Audiocube – A 3D DAW for Spatial Audio2025 · audiocube.app · ▲253

    I’ve recently released my solo project Audiocube I wanted to make a 3D DAW, where spatial audio, physics, and virtual acoustics are all directly integrated into the engine. This makes it easy to create music in 3D, and experiment with new techniques which aren’t possible in traditional DAWs and plugins. I’d love to get any feedback on this software (Mac/Windows) to make it better. You can download it for free through the website. Thanks, Noah

  • IA
    Instrumenting and visualizing JavaScript with d3.js2012 · latentflip.github.com · ▲105

More life & fun this month

the category →

Source: Show HN post ↗

Launched alongside, August 2022

the whole month →
  • Xnapper▲1,517

    Take beautiful screenshots instantly

    Work · 2022 · xnapper.com

  • Gamma▲1,169

    Auto-generate decks, docs & social posts inside any workflow

    Work · 2022 · gamma.app

  • Threado▲921

    The command center for community builders

    Life & fun · 2022

  • Remotebase▲744

    Build remote engineering teams in 24 hours

    Dev tools · 2022 · remotebase.com

  • DhiWise 2.0▲740

    Convert Figma designs into Flutter 3.0 & React code rapidly

    Dev tools · 2022 · dhiwise.com

  • PA
    Pornpen.ai – AI-Generated Porn▲711

    Hey HN, I've been working on https://pornpen.ai, a site for generating adult images. Please only visit the site if you are 18+ and willing to look at NSFW images. This site is an experiment using newer text-to-image models. I explicitly removed the ability to specify custom text to avoid harmful imagery from being generated. New tags will be added once the prompt-engineering algorithm is fine-tuned further. If the servers are overloaded, take a look at the feed and search pages to look through past results. For comments/suggestions/feedback please visit…

    AI · 2022 · pornpen.ai