Immersive 3D Audio and Visualization (three.js & javascript)
HTML-код
- Опубликовано: 5 окт 2024
- I'll show you how to integrate 3d positional sound in JavaScript and build an audio visualizer.
Support me on:
Patreon: / simondevyt
Follow me on:
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/sim...
I'll step through getting audio and 3d positional audio working in JavaScript using three.js, and we'll build out a couple simple audio visualizers using the AudioAnalyzer class.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.
Inigo Quilez's Site:
iquilezles.org/
Music: www.bensound.com
If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch
Or support me on patreon!: www.patreon.com/simondevyt
@simondev758 Really nice video! I can't find the code for some reason, could you send the link to the code? I am currently working on a project and have no idea how to replicate that. Thank you!
Totally useless to me (i'm not coding 3d worlds), but absolutely awesome! :)
Your series about ThreeJS is brilliant. Please do keep going!
Hah I saw the first part, and was disappointed for a second until I read the rest of your message :)
@@simondev758 Usefulness is not a top criteria for me.
I love watching great craftmanship, virtually no matter the craft. It just happens that on this one (JS) I have experience and can actually grasp the extent of the greatness :)
Please keep the three.js videos coming, I love to see how something mindblowing to me is a child game to others, very inspiring!
It is amazing how much sound impacts the feel of the world, great video as always
Three has an analyzer class? Nice, really helps those who don't have the time to fully embrace Web Audio API
As a creative and aspiring dev, watching your videos is a breath of fresh air in this oversaturated "11 things you shou..." RUclips meta
Gonna pick up some extra shifts at my job so I can buy your courses and support 🙏🏾
Thank you for the awesome content 💜 (and for showing people that JavaScript really isn't that bad 😂)
ahh oh my days, i used to work with babylon. truly do thank you simon.
Thanks for sharing, Simon. I really like the way you transform the Three.js docs in understandable concepts.
Please keep the good work. 🙏🏻
wow threejs got 3d audio. meanwhile in c++ there's no hassle free and truly free 3d audio library
Three.js is an external library. There are plenty of external and cross-platform libraries for c++ that can add audio (for example openAL)
Something a lot of positional sound systems get wrong is that the volume between what each ear hears isn't the only difference in the sound
there's the tiny delays between what one ear hears and what the other one does
plus there's things like how the EQ differs between ears depending on position, as well as how sound reflection is processed
our brains do an astronomical amount of work trying to make sure we know where a sound is coming from, so even going just part of the way there lets gives enough information for our brain to get the gist of what's going on without needing to replicate all the extra little bits
This is simply amazing... Thanks for sharing!
It'd be great to see some of your tutorials use React Three Fiber. Thanks again, rad stuff!
Sure it'd be great!
Awesome! Three.js is really handy!
Many thanks for publish the code!
This was much needed!!!! Thank you!
so many applications for the (coming soon) metaverse
Wow! Pretty easy and intuitive.
great content, you are on the way up bro 👍
DUDE This is what I was looking for
Awesome, thanks!
awesome work
Awesome stuff!
Beta Noobs: No! You can’t just make every big game on a web browser, you have to use C++ and Engine!
SimonDev: Javascript And HTML go brr
Can you make a video showing the same content but with a moving object, like an online player walking and making the sound move through the scene? Gun fires would be amazing
I'm really enjoying your videos, they are very informative and neatly condensed without any unnecessary fluff. Have you ever looked at the Godot engine? I'm asking because I really enjoy working with it and was wondering what you think about it.
Nah never tried it out. I might go fiddle with it, or Unity/Unreal one of these days.
I hate how calming your voice is.... Can you just.... make audiobooks............... Like I find myself staying up till 3am watching your videos anyway... lmao
firstly i absolutely love your tutorials ...some of the best i have encounter in the field (i come from ai / python)
if i can ask you to review your code, since when i try to run it, it gives just a black screen,
also you have a great voice, very relaxing to hear
How are you running it? Also, I don't guarantee that it continues running forever. It works when I upload it, but after that, who knows. Chrome changes frequently, and once this is a year or 2 old, it may need tweaking to get back into a working state.
Wow!
This is so good! Keep it up man! What's the name of the repo for the source code btw?
github.com/simondevyoutube/ThreeJS_Tutorial_3DSound
Space Odyssey!
hi nice work, does Three.js can embed video into the 3D world ? for example, 3D big Ed-shheran concert, and the audicance see the two big scrreen on the monitor ? thanks
Try BabylonJS too sometime in a future video.
I keep meaning to, maybe a Three.js vs BabylonJS video is in order.
excellent，is three have immersive skybox，such as cloud system。。。
Hi can you make a tutorial about text? What if one have to create a game with a lot of textual elements?
Another thing i would like to know is how would you create the in-game gui? Animated buttons maybe with gifs or other moving parts?
Creating in-world text? Or UI text & gui?
@@simondev758 All of that but mostly 3d GUI. What should i use to create 3d buttons? PlaneGeometry? What is the best way to make in-game gui (hud, menus, items names etc..)?
Can you a 3D game with support of mobile
Bro can you make a video on how to export modifier animation from blender for threejs. I tried exporting but got rigid mesh without any animation
You should make a video on how to interpret the ThreeJs documentation because it's really, really bad...
Heh, it's funny I never give that any thought, I've always found their docs had exactly what I was looking for. But there's definitely a gulf between "absolute basics" and "professional with years of experience". In a way, these videos are attempting to bridge that gap.
@@simondev758 Your videos are far beyond beginner level! lol
I mainly watch them for inspiration; knowing what is one day possible if I keep smashing my face against JavaScript.
On a good day I catch something I sort of understand.
btw, the lighting in your scene looks absolutely amazing.
And the 'bob' movement is very convincing!
Can this also create binaural audio? Sounds are changed by the shape of your ears. Special microphones are available. Check out the virtual barber on youtube. Its like you are not even wearing headphones. Is this possible to calculate on the fly?
I remember from my windows xp days that my soundcard supported EAX for virtual surround. Maybe that was something like that.
My guess as a leading industry expert is that binaural audio can be calculated by audio raytracing with a virtual ear. Though ears are soft and sound moves through them. As well as the head. But i guess each sound can be processed just once and then saved as a binaural version. This could turn immersiveness up to 11.
hm i bet the ear and head influence can be calculated just once for each frequency and then pressed into a mathemathical function. Distance also has an effect. And of course the angle.
Maybe there is an easier solution than slapping raytracing on it. Also since its soundwaves, not rays.
I bet its possible to have a 96 kHz audio simulation using fluid dynamics or something similar. Corners can be cut. I bet math can save a lot of processing time.
One thing of importance is that even if a sound comes directly from the left the right ear tends to also hear it, since we are usually in a reflective environment. Going in the worlds most silent room creates the feeling of pressure since no sound is reflected. This has to be calculated in real time though, depending on wall or object distance
Where did you learn programming?
Learned in University, degree in computer science, then just work/hobby to improve.
can unreal engine 5 do something that Three.js can't do?
This is a very serious question.)
These days you can do a lot in JS, but still doesn't hold a candle to UE5.
Can I ask what the setTimeout is for ?
So that it give me a bit of time to wander around before the music starts. Mostly so I could record the video.
@@simondev758 can't wait to try this with my "friendly" npc ruclips.net/video/tDHzJlc1JfM/видео.html
imagine you add proximity voice chat...
first