WebGPU :: Rendering the future in Real-Time
Вставка
- Опубліковано 8 лип 2024
- Check out Part 2:
• WebGPU :: Javascript a...
WebGPU is finally here, ready to be used.
And it's going to change EVERYTHING.
In this video we'll take a look at the basics of WebGpu.
This is part 1 of our new WebGpu series.
Subscribe so you don't miss out our next videos.
CODE:
github.com/visionary-3d/webgp...
Chapters:
00:00 Intro
00:25 WebGL Replacement ?
01:10 Why WebGPU Is Better
02:10 Chapter 1 : Shaders
04:36 Chapter 1.5 : Compute Shaders
05:08 WebGPU Pipeline
06:10 Chapter 2 : Code Structure
07:25 Chapter 3 : Uniforms
12:02 Chapter 4 : Fullscreen Shader
15:38 Chapter 5 : Final Code
16:33 Outro
--------------------
Visionary 3D:
Follow me:
x.com/visionary_3_d
Discord Community:
/ discord
Shaders Crash Course:
• Three.js Shaders (GLSL...
My Shaders Playlist:
• Shaders
#webgpu
#computeshaders
#compute_shader
#shaders
#threejs
#3d
#3danimation
#glsl
My Dude! This makes me want to write a game, thank you!
I’m honoured. Thank you!
This is amazing. I use Bevy and Rust and want to learn shading with WebGPU. Thanks!
Hello gentleman (nods), it's nice to see you all here! 🧐
30s in and all I could think of was how much the video structure and script reminded me of NoBoilerplate videos. Pretty cool to see your comment, I'd guess that you're an inspiration for this channel.
@@adam-the-dev He is 😄
Wow, you managed to condense all the things I learned in many days of banging my head on the wgpu docs in just a few minutes. Thank you so much, I really loved the easy explanation - looking forward to new episodes!
Nice. More will be coming soon.
I've been using threeJs and three fiber for the last 12 months building web stuff with my 3d projects out of cinema4d. Really cool to learn about webGPU. I'm really excited to see where 3d experiences on the future web end up. Thanks for this awesome intro / breakdown.
The cool thing about WebGPU is that it abstracts away the underlying API, be it Vulkan, DX12, Metal… so it gives you platform-independence for free, really nice
It is absolutely amazing!
Oh, you mean like OpenGL did ? that is why OpenGL is criticized as slow on weak CPUs, because it abstracts the hardware (if the CPU is powerful then the overhead is little problem).
@@staubsauger2305 No, OpenGL is the graphics API that gets implemented by the driver but OpenGL assumes lots of things about memory and buffer layout, etc… New APIs like DX, Vulkan, Metal are more verbose but not cross platform (except Vulkan for Win/Linux)… That‘s why WebGPU is so cool, it brings all those APIs under one hat and uses the best API below, even OpenGL if necessary
@@maxkofler7831 the OpenGL model is that the driver implementer knows more about the hardware than the average developer. The hardware is abstracted and the application developer has a more limited ability to control execution so some optimizations are not available, except through the extension mechanism. In contrast, lower-level APIs give more ability for the appplication developer to optimize at the cost of greater development time, greater risk of bugs and the app developer has to do more work for performance on each architecture. It's a trade-off as everything is. WebGPU is a return to OpenGL in the sense that it is a higher level of abstraction than the underlying layers - which means many of the things moaned about in OpenGL must necessarily return - which is ok but folks have to be real about it instead if merely 'teh nu shiny'. That's all I'm saying. And platform-independence is a must, devices are becoming more heterogenous rather than less (eg. the 3. 3 billion devices running the Linux and Java flavors branded 'Android').
The biggest problem for us was absence of support for IOS. We wanted to make true web cross platform game, otherwise it is just much simpler to desktop applications
Well done mate, truly amazing how well you explain concepts through visualisation so well. It’s time to create awe-mazing things!
Let’s go 🔥
awwwmazing things
Thank you so much for covering something like this. It’s very hard to find beginner friendly tutorials especially when it comes to graphics. WebGPU is only going to make this field more accessible, so all the more important we have content like yours 😊
Thanks for watching!
Does that mean websites can mine bitcoin on my computer now?
Thanks for this. I've written a fair number of shaders in HLSL and had very little trouble following along to broaden my knowledge (at least, to begin doing so) into this new area.
Great video! WebGPU is _such_ a game changer for browser graphics, but it's not an easy topic to cover.
That’s right sir 😇
Thanks 🙏
That is a great start for some very much needed content :) Will follow through with rust + wgpu. Nice work!
Thanks for the kind words. 😇
There is no way that this channel is just 7 months and it's that Goood!
I appreciate the compliment. Thanks!
Thank you sooo much, i came from Nik Lever glsl course but i cant understand if i dont visualize, it was really hard to find out without a good analogy in his videos, but you completely nail it. nice job!
Glad you liked it
You can have a square with 4 vertices. The magic is in the indices.
Awesome, saved. Thanks! Looking forward to seeing the next episodes.
Glad to hear it!
2:10 wowww super nice visual design & delivery. awesome.
Thanks. Glad you liked it!
Amazing content, very informative
Great explanation!
Glad you think so!
Fantastic video! I finally understand the webgpu syntax a bit better.
Glad you found it useful 😄
0:29 the way you said that "looong time" makes me remember of GlaDOS in Portal 2 for some reason
Hella awesome video dude, I will definitely subscribe
keep it up!
🙏
Underrated ASMR video, It tickles my ears.
haha.
I was really close to the microphone when I was recording the audio file...
Moss typing with his desk in fire when JavaScript was mentioned. Accurate.
Great explanation! For me, anything that has to deal with the GPU for UI always ends up being super complex and oddly verbose, I wonder if I'll ever be able to learn that. I always felt like it could be simpler but I'm sure it's like this for a reason
We're probably gonna have a video on that.
Don't wanna spoil anything.
But thanks for the detailed comment.
Nice to see some good WebGPU tutorials pop up in my recommended! Subscribed 🤓
Glad you liked it 😉
this is such a good content!
I appreciate the kind words 🙏
I'm excited!
Thanks!
Thank You! I really appreciate this ♥
wow, i was just getting started 3D, and i found the better alternative
12:50 - "there we have a variable, that makes sense, because it changes"
No it's not. In DirectX and HLSL it's called a constant buffer. In Metal API it's just declared as a "const & name". Uniform buffers are not meant to be "variables". It's mostly always a read-only data. Unless we talk about more generic cases of exposing direct GPU buffer addresses in shader and writing to them.
You're 100% right!
Thanks for pointing this out.
I think when I was describing this I meant:
"it changes from the outside"
and uniforms update frequently.
But technically your description is correct.
Perfect
Awesome
great vid
Glad you liked it 😊
your visualizations looks so good, how do you make these presentation?
Thank You.
I use Davinci Resolve,
blender,
and sometimes code.
Nice vid. Just a quick tip; make sure you cut off all the low end of your voice recording, this will make your voice a lot clearer and not be super bassy for people who listen on headphones
Thanks for the tip !
I'm lost. But, it's ok, I'm not a 3D developer. I really like this video
Instant subscribe
Thanks
I'm down! Let's learn some WebGPU. I have uses for it.
Is there something like three.js or babylon to have easier access to webgpu?
do you think there will be a three.js (WebGL) like JavaScript library for WebGPU?
100%
Three.js is already building it.
Would love a more in depth series on this…it seems like it’s just a new syntax, what makes this one better?
Great
Wgsl look so much nicer than classic shader
I agree. It is very rust like 😋
Which plugin are you using for that cool highlight?
It's a custom node I've built with some lua code in Davinci Resolve.
It's only really available in chrome at the moment, not fully implemented in firefox or safari at this point
The 3d data to render must be tranferred to the client? I guess so. Thanks a lot
it would take lot of time to be adapted by everyone!
True, but that applies to any new tech.
Does this preserve the drawing buffer when finished rendering, I am sick of trying to screenshot webGL canvas
3:55 _The primitive topology type in 3D graphics is still a triangle._
*Shows house with quads.* /s
Good find haha 😂
Good content. (A few too many “We’ll talk about this/You’ll see about that in a moment” statements, but great topic!
Haha. You’re right 😂
4:10 Six ? Isn’t index buffer used to keep 4 ?
You are correct!
However I didn't want to make the explanation complicated.
you can use the drawIndexed function in your renderpass in WebGPU to make that happen.
So, it is mean in the future we will have game which run on browser? and it is fast as desktop game?
That’s the plan 🤞
I dont understand, but I'm intrigued
What are the practical applications of this from a web technology point of view ?
Like building marketing webpages on the web ?
Better, more complex experiences on the web.
WebGPU has a massive potential for increasing compute power.
This means that you're gonna be able to do many things faster (most of these things are graphics related).
If you're interested you can search for Applications Of Compute Shaders. ( On Google )
@@visionary_3_d can we write algorithmic functions and have them evaluated on the gpu using compute shaders ? If so it’s applications could extend beyond just graphics, provided there exists a performance benefit.
subscribed
Thanks
The one drawback is that you start out saying that the viewer only needs to know JavaScript. Then the first piece of code we see is TypeScript. The two are not the same.
Well, that's fair.
To me they are the same.
But I'll make sure I say "Typescript" in future videos.
Triangles are the past old man! The future is circles!
What neovim setup are you using
It’s a highly customised version of vscode.
Looks scary, all the group, and location stuff. Idk how hard is the transition from glsl
It's not that difficult actually if you know glsl already.
You'll have to try it tho to know...
Which code editor you use?
VsCode.
With Vim.
Ok. But How can I learn WebGPU?
Onlie curses, documentation, communities, etc.
I''ll appreciate it someone could tell me where or how to start.
Best way for now is to read the webgpu fundumentals series ( series of articles ).
But I'm making new content on this so stay tuned for that...
How much easier would it be to start with the framework like Babylon.js instead of trying to understand the WebGPU technology?
I have looked at babylon and here's my recommendation.
Babylon is fantastic for creating more complex projects compared to raw WebGPU.
However learning WebGPU first provides huge advantages in the long run, since you understand what's happening under the hood.
I don't think it's that much easier to learn Babylon first, since the layer of abstraction that Babylon provides is thin, IMO.
Part 2 coming anytime soon?
Yes, I'm on it already.
This is the first time I've heard a fragment shader called a pixel shader. If the goal is to teach without confusion iwould stick with defining and using conventional terms.
Can it run minesweeper at 4K 144fps?
ypu can use also quadrants in shaders. it is easier in 3d
Can I plop this into React Native or Flutter?
I have no idea.
Probably not ( my guess ), because this is a fairly new API.
Wish this was in Flutter
thanks for the video! friend, where can I learn javascript?
I want to focus on web design, create awesome websites similar to awwwards websites
You learn by doing.
Try to recreate the websites that you like.
Start with easy ones.
You'll learn javascript and every other thing you'll need along the way.
Great video, but you've lost me in the middle. Would be good to explain in more details for those who are brand new to shaders (like me)
Thanks for the honest feedback.
I agree that the explanation could've been a bit more beginner friendly for the second part of the video.
more videos please
Roger that!
with 200+ ms of RTT, nice
6:09 - 16:32 What is that for?
cant wait for three js webgpu
Me tooo
Can we use TypeScript in it?
Ofc.
alternative = substitution = replacement
probably in 1-2 years...
Great video, thanks! I was just wondering what exactly are the advantages of WebGPU vs ThreeJS+WebGL ?
In three you can declare the vertex and the fragment as strings in your js script and send them to a ShaderMaterial. It seems that the result with WebGPU will be quite the same, right?
Performance, maybe?
Thanks! :)
Fantastic question.
You are 99% right. Mostly what you can create with WebGPU vs WebGL are the same.
There can be some advantages which I'll explain (these are my opinion):
1. Biggest one in my opinion is compute shaders. Compute shaders allow you to run you shader in parallel on the gpu but they're way more flexible and more general purposed than VS and FS shaders.
Before, you could do what you can do in compute shaders in normal Fragment shaders, but that was much more difficult to do. So ease of use is a key factor.
2. IDK if you have worked with raw WegGL before. It's an ugly mess. WebGPU is a fantastic upgrade and has a way simpler API.
3. Better performance with having more control over how things work in your application. ( this requires you to know the WebGPU api well )
4. WebGPU is built on top of Vulkan ( for windows ) and Metal ( for mac ) I beleive.
Vulkan has some really nice features for Raytracing as far as I'm aware of and so, we're going to have a RayTracingPipeline further down the line.
In terms of what you can build with it we're going to have more videos on the channel. so stay tuned 😃
First off, great video, thank you! Secondly, I was thinking "this looks a lot like Metal" so interesting to see this confirmed. Thanks again. Looking forward to more videos@@visionary_3_d
What about Web Mining with that GPU
4:09 mathematically, it's still 4 vertices, but 6 edges
That’s right 👍
👹 get ready for a new world
next we can download more ram 😌
Link based GPU Bombs incoming.
a better alternative = replacement
That's right 🤣
But better is always relative.
@@visionary_3_d 😉
Thanks. Buy Yikes, we really have to wait for 1000 likes?
Haha 😄
Don't worry, I'll make another video on WebGPU this next month anyways.
I'm JS junior and i understand nothing ... 😅
Vulkan is no replacement for OpenGL, because it competes in an another area; in the low level area. It's like saying that Assembly is a replacement for C++.
Good point. I think I agree with you.
html gaming in the future
Javascript haters will pass out at this video
so webgpu is simply full-fledged opengl?
Something like that but better.
Based on my experience at least.
So… instead of game installers we can have an electron app to play games? I guess that could be an application for it
can you use some audio software to fix ur short tonque voice. voice shoud not limit your views.
Oh thanks for the suggestion.
However I didn't really understand what you meant here.
Can you elaborate ?
Weird video. Talks vaguely about vulkan vs opengl vs webgl then suddenly it's shaders and programming. I mean, that's like giving a geography class like "here's your desk, here's the hallway, here's the bathroom,... out there, that's the Sun, and we're in the Milkay Way..." like bro you skipped all of the important stuff. Like for starters, where does WebGPU code even run? What are the options? Is it all in the browser? Can it be server-based? Can this be used for native mobile or desktop apps? Like really, you skipped literally all of the basics.
Hmmm.
You're actually right.
Since I'm a developer I have the answers to all of those questions in my head already but for the viewer, those are important details.
In my next video I'll mention these things.
Thanks for the precious feedback.
Its not compatible to all browser at this time sadly its good for prototypes but still not production ready
True!
you're beautiful. thank you.
lol
opengl is still commonly used my homie. Vulkan is a pain to use, and is only preffered by larger projects and engines.
I agree 👌👌
OpenGL (especially on latest versions) is good enough, but it still doesn't expose some specific modern GPU APIs. It's enough for 2d and basic 3d rendering, but when building a 3d game, you'd probably want to use various hardware acceleration APIs.
Also, because OpenGL is considered legacy, modern GPUs are gradually dropping hardware implementations for some OpenGL-specific stuff, moving it to software driver implementations, using CPU to translate old OpenGL commands to a new format used by modern APIs
the voice over is ai?
nope
Amazing that Flash back in 2016 was doing this already but 1000% better. The web is really slow today, ugly websites and there is not more innovations because there is an app for that. In 2023 and this is what we get?
In 2023 you're getting the foundation of the technology that's going to power AAA games in the future. ( This is just my opinion )
But I agree that flash was super cool back in the day and I also agree that there could be much more innovations in this space.
My hope is that WebGPU is going to give us more power to make that happen.
Back in 2006 I did things with Flash that no HTML5 and webGPU is capable today or tomorrow, the problem is that innovations on the web died with flash, today ALL websites takes forever to load, ugly, videos don't have Alpha, it is true mess. Websites are a thing from the past, Apps is here to replace websites because they are just used for data or text re-source. People did not know that Flash was a platform that you could create super fast applications in minutes vs months and it works 100% every time if you knoew how to use and code right (Just look at Fox news and CNN website, what a horrible experience with Ads all over and videos/ui that does not work in both PC and Mobile. And today we have very fast internet and every site takes forever to load@@visionary_3_d
Not beginner friendly i got lost
Which part ?
WebGPU is not beginner friendly but I'll try to explain it better next time.
@@visionary_3_dthis isn’t beginner material so don’t dumb it down too hard
🎯 Key Takeaways for quick navigation:
00:00 🌐 Web GPU是现代3D应用程序历史上的一次革命，它为Web上的3D体验提供了全新的渲染API，让我们能够创建原生般的游戏。
01:06 🚀 Web GPU是WebGL的替代品，更加优雅、简单和高性能。
02:17 🎮 Shaders在Web GPU渲染中起着至关重要的作用，有像像素着色器、顶点着色器等多种类型的着色器，用于渲染不同的对象。
05:15 📡 Web GPU中的CPU和GPU之间通过指令传递数据，这个系统称为"管道"，其中包括Uniforms，Uniforms是在着色器之间共享的数据。
11:53 🖥️ 使用Web GPU编写着色器代码时，需要了解wgsl（Web GPU的着色器语言）的基本结构，包括顶点着色器和片段着色器的编写方式。
Made with HARPA AI
"datas" hahahahahahahahahaha
I am a little concerned though. so far, all websites/web games have been usable on anything that can run a browser. With this, some sites/games will now care what hardware you have.
That is correct.
Some games will prioritize stability and performance across all devices, while some won't.
Oh, good. It's open source, of course, it goes without saying, right? Because you know, OPEN gl has OPEN in the name, and that's why it was much better than whatever this is.
So weird that he literally does not even mention under what kind of licence it is. Or what corporations want to make this standard and why they really want it. It's M1cr0s0ft, Mozilla, Google and I don't remember the other one. Less under commercial licence crappy standardized crap, and more open source things and less standardized, please.