WebGPU :: Rendering the future in Real-Time
ฝัง
- เผยแพร่เมื่อ 12 พ.ค. 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.
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
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.
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?
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 🙏
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 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.
That is a great start for some very much needed content :) Will follow through with rust + wgpu. Nice work!
Thanks for the kind words. 😇
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
Great explanation!
Glad you think so!
You can have a square with 4 vertices. The magic is in the indices.
your visualizations looks so good, how do you make these presentation?
Thank You.
I use Davinci Resolve,
blender,
and sometimes code.
Awesome, saved. Thanks! Looking forward to seeing the next episodes.
Glad to hear it!
Hella awesome video dude, I will definitely subscribe
keep it up!
🙏
There is no way that this channel is just 7 months and it's that Goood!
I appreciate the compliment. Thanks!
2:10 wowww super nice visual design & delivery. awesome.
Thanks. Glad you liked it!
0:29 the way you said that "looong time" makes me remember of GlaDOS in Portal 2 for some reason
this is such a good content!
I appreciate the kind words 🙏
Amazing content, very informative
Nice to see some good WebGPU tutorials pop up in my recommended! Subscribed 🤓
Glad you liked it 😉
Fantastic video! I finally understand the webgpu syntax a bit better.
Glad you found it useful 😄
The 3d data to render must be tranferred to the client? I guess so. Thanks a lot
do you think there will be a three.js (WebGL) like JavaScript library for WebGPU?
100%
Three.js is already building it.
Moss typing with his desk in fire when JavaScript was mentioned. Accurate.
Underrated ASMR video, It tickles my ears.
haha.
I was really close to the microphone when I was recording the audio file...
Can it run minesweeper at 4K 144fps?
great vid
Glad you liked it 😊
Perfect
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.
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 !
Is there something like three.js or babylon to have easier access to webgpu?
I'm excited!
Thanks!
Thank You! I really appreciate this ♥
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.
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.
Can I plop this into React Native or Flutter?
I have no idea.
Probably not ( my guess ), because this is a fairly new API.
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 🤞
Does this preserve the drawing buffer when finished rendering, I am sick of trying to screenshot webGL canvas
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
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.
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.
wow, i was just getting started 3D, and i found the better alternative
Would love a more in depth series on this…it seems like it’s just a new syntax, what makes this one better?
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...
Which code editor you use?
VsCode.
With Vim.
What neovim setup are you using
It’s a highly customised version of vscode.
Wgsl look so much nicer than classic shader
I agree. It is very rust like 😋
6:09 - 16:32 What is that for?
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...
Instant subscribe
Thanks
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 😂
Awesome
Can we use TypeScript in it?
Ofc.
I'm down! Let's learn some WebGPU. I have uses for it.
Part 2 coming anytime soon?
Yes, I'm on it already.
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
3:55 _The primitive topology type in 3D graphics is still a triangle._
*Shows house with quads.* /s
Good find haha 😂
I'm lost. But, it's ok, I'm not a 3D developer. I really like this video
ypu can use also quadrants in shaders. it is easier in 3d
it would take lot of time to be adapted by everyone!
True, but that applies to any new tech.
Great
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.
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.
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.
subscribed
Thanks
What about Web Mining with that GPU
with 200+ ms of RTT, nice
I dont understand, but I'm intrigued
alternative = substitution = replacement
probably in 1-2 years...
more videos please
Roger that!
Wish this was in Flutter
Triangles are the past old man! The future is circles!
4:09 mathematically, it's still 4 vertices, but 6 edges
That’s right 👍
I'm JS junior and i understand nothing ... 😅
so webgpu is simply full-fledged opengl?
Something like that but better.
Based on my experience at least.
👹 get ready for a new world
next we can download more ram 😌
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.
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.
Link based GPU Bombs incoming.
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 ?
a better alternative = replacement
That's right 🤣
But better is always relative.
@@visionary_3_d 😉
So… instead of game installers we can have an electron app to play games? I guess that could be an application for it
you're beautiful. thank you.
lol
html gaming in the future
Its not compatible to all browser at this time sadly its good for prototypes but still not production ready
True!
Javascript haters will pass out at this video
the voice over is ai?
nope
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
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.
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
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.
Video would have been better if your mic wasn’t so loud. It sounds as if it was boosted to the max and it’s unnecessary. Good content otherwise.
Got it. Thanks for the feedback!
cant wait for three js webgpu
Me tooo
"datas" hahahahahahahahahaha
WebGPU is not elegant and is not a better alternative than Vulkan...
Ok.