My Dude! This makes me want to write a game, thank you!
@visionary_3_d11 ай бұрын
I’m honoured. Thank you!
@marko-lazic11 ай бұрын
This is amazing. I use Bevy and Rust and want to learn shading with WebGPU. Thanks!
@RootsterAnon10 ай бұрын
Hello gentleman (nods), it's nice to see you all here! 🧐
@adam-the-dev10 ай бұрын
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.
@visionary_3_d10 ай бұрын
@@adam-the-dev He is 😄
@NicolaGuerrera10 ай бұрын
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!
@visionary_3_d10 ай бұрын
Nice. More will be coming soon.
@maxkofler783110 ай бұрын
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
@visionary_3_d10 ай бұрын
It is absolutely amazing!
@staubsauger230510 ай бұрын
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).
@maxkofler783110 ай бұрын
@@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
@staubsauger230510 ай бұрын
@@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').
@vitalysuper319310 ай бұрын
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
@tomkatdev10 ай бұрын
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.
@theubiquitousanomaly511211 ай бұрын
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 😊
@visionary_3_d11 ай бұрын
Thanks for watching!
@w花b9 ай бұрын
Does that mean websites can mine bitcoin on my computer now?
@HenkHeidstra11 ай бұрын
Well done mate, truly amazing how well you explain concepts through visualisation so well. It’s time to create awe-mazing things!
@visionary_3_d11 ай бұрын
Let’s go 🔥
@gamefun25259 ай бұрын
awwwmazing things
@IndigoCode11 ай бұрын
Great video! WebGPU is _such_ a game changer for browser graphics, but it's not an easy topic to cover.
@visionary_3_d11 ай бұрын
That’s right sir 😇 Thanks 🙏
@yoanhg4218 ай бұрын
Underrated ASMR video, It tickles my ears.
@visionary_3_d8 ай бұрын
haha. I was really close to the microphone when I was recording the audio file...
@danielb.287311 ай бұрын
Awesome, saved. Thanks! Looking forward to seeing the next episodes.
@visionary_3_d11 ай бұрын
Glad to hear it!
@oglothenerd10 ай бұрын
You can have a square with 4 vertices. The magic is in the indices.
@sanjaux10 ай бұрын
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
@visionary_3_d10 ай бұрын
We're probably gonna have a video on that. Don't wanna spoil anything. But thanks for the detailed comment.
@alinmathuo401810 ай бұрын
There is no way that this channel is just 7 months and it's that Goood!
@visionary_3_d10 ай бұрын
I appreciate the compliment. Thanks!
@yash115210 ай бұрын
2:10 wowww super nice visual design & delivery. awesome.
@visionary_3_d10 ай бұрын
Thanks. Glad you liked it!
@realitydreaming41118 ай бұрын
Moss typing with his desk in fire when JavaScript was mentioned. Accurate.
@opupilo7087 ай бұрын
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!
@visionary_3_d7 ай бұрын
Glad you liked it
@scottcourtney88789 ай бұрын
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.
@SmiterG10 ай бұрын
0:29 the way you said that "looong time" makes me remember of GlaDOS in Portal 2 for some reason
@TheRedAstro8 ай бұрын
That is a great start for some very much needed content :) Will follow through with rust + wgpu. Nice work!
@visionary_3_d8 ай бұрын
Thanks for the kind words. 😇
@fojico12348 ай бұрын
I'm excited!
@vladyslav00710 ай бұрын
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.
@visionary_3_d10 ай бұрын
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.
@nickcarvajal11 ай бұрын
Great explanation!
@visionary_3_d11 ай бұрын
Glad you think so!
@SuboptimalEng11 ай бұрын
Nice to see some good WebGPU tutorials pop up in my recommended! Subscribed 🤓
@visionary_3_d11 ай бұрын
Glad you liked it 😉
@ThePouetman8 ай бұрын
Fantastic video! I finally understand the webgpu syntax a bit better.
@visionary_3_d8 ай бұрын
Glad you found it useful 😄
@irfansaeedkhan72427 ай бұрын
wow, i was just getting started 3D, and i found the better alternative
@JesseSep.9 ай бұрын
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
@visionary_3_d9 ай бұрын
Thanks for the tip !
@prestonbourne4 ай бұрын
Would love a more in depth series on this…it seems like it’s just a new syntax, what makes this one better?
@233k7 ай бұрын
Thanks!
@visionary_3_d7 ай бұрын
Thank You! I really appreciate this ♥
@elvispalace6 ай бұрын
I'm lost. But, it's ok, I'm not a 3D developer. I really like this video
@barameg_9 ай бұрын
Amazing content, very informative
@sakinobashi16816 күн бұрын
0:38 even Vulkan isn't totally considered as a "replacement" to OpenGL , people still uses OpenGL in their old/new project (if it's not much graphic demanding) bcoz Vulkan being more low level is too verbose and kinda tougher compared to OpenGL
@visionary_3_d16 күн бұрын
You're right!
@zebedie28 ай бұрын
It's only really available in chrome at the moment, not fully implemented in firefox or safari at this point
@qnprogrammer10 ай бұрын
Which plugin are you using for that cool highlight?
@visionary_3_d10 ай бұрын
It's a custom node I've built with some lua code in Davinci Resolve.
@calderarox11 ай бұрын
this is such a good content!
@visionary_3_d11 ай бұрын
I appreciate the kind words 🙏
@naeemulhoque177710 ай бұрын
your visualizations looks so good, how do you make these presentation?
@visionary_3_d10 ай бұрын
Thank You. I use Davinci Resolve, blender, and sometimes code.
@UliTroyo11 ай бұрын
I'm down! Let's learn some WebGPU. I have uses for it.
@malthe29629 ай бұрын
Hella awesome video dude, I will definitely subscribe keep it up!
@visionary_3_d9 ай бұрын
🙏
@disgruntledtoons6 ай бұрын
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.
@visionary_3_d6 ай бұрын
Well, that's fair. To me they are the same. But I'll make sure I say "Typescript" in future videos.
@tolubaijalilov80099 ай бұрын
Awesome
@r-i-ch11 ай бұрын
Good content. (A few too many “We’ll talk about this/You’ll see about that in a moment” statements, but great topic!
@visionary_3_d11 ай бұрын
Haha. You’re right 😂
@thanatosor11 ай бұрын
Wgsl look so much nicer than classic shader
@visionary_3_d11 ай бұрын
I agree. It is very rust like 😋
@yashguma10 ай бұрын
Instant subscribe
@visionary_3_d10 ай бұрын
Thanks
@Achilles11 ай бұрын
great vid
@visionary_3_d11 ай бұрын
Glad you liked it 😊
@yoskokleng36588 ай бұрын
So, it is mean in the future we will have game which run on browser? and it is fast as desktop game?
@visionary_3_d8 ай бұрын
That’s the plan 🤞
@nikilk7 ай бұрын
What are the practical applications of this from a web technology point of view ? Like building marketing webpages on the web ?
@visionary_3_d7 ай бұрын
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 )
@nikilk7 ай бұрын
@@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.
@aleph05409 ай бұрын
Triangles are the past old man! The future is circles!
@guillaumenavion764911 ай бұрын
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! :)
@visionary_3_d11 ай бұрын
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 😃
@literallyshane430610 ай бұрын
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
@sanazesna859010 ай бұрын
Perfect
@tapendrashahi209710 ай бұрын
Part 2 coming anytime soon?
@visionary_3_d10 ай бұрын
Yes, I'm on it already.
@VaibhavShewale10 ай бұрын
it would take lot of time to be adapted by everyone!
@visionary_3_d10 ай бұрын
True, but that applies to any new tech.
@Soulis987 ай бұрын
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.
@visionary_3_d7 ай бұрын
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...
@waynr7 ай бұрын
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.
@muhammadsadri187210 ай бұрын
Great
@adriancoanda92278 ай бұрын
ypu can use also quadrants in shaders. it is easier in 3d
@Reigh9929 ай бұрын
I dont understand, but I'm intrigued
@ankk989 ай бұрын
subscribed
@visionary_3_d9 ай бұрын
Thanks
@cglike10 ай бұрын
4:10 Six ? Isn’t index buffer used to keep 4 ?
@visionary_3_d10 ай бұрын
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.
@ldelmar38759 ай бұрын
Is there something like three.js or babylon to have easier access to webgpu?
@meandyours8 ай бұрын
4:09 mathematically, it's still 4 vertices, but 6 edges
@visionary_3_d8 ай бұрын
That’s right 👍
@peppebck10 ай бұрын
The 3d data to render must be tranferred to the client? I guess so. Thanks a lot
@MichaelPohoreski10 ай бұрын
3:55 _The primitive topology type in 3D graphics is still a triangle._ *Shows house with quads.* /s
@visionary_3_d10 ай бұрын
Good find haha 😂
@tutkodev10 ай бұрын
How much easier would it be to start with the framework like Babylon.js instead of trying to understand the WebGPU technology?
@visionary_3_d10 ай бұрын
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.
9 ай бұрын
Wish this was in Flutter
@Cheesecake99YearsAgo10 ай бұрын
Can it run minesweeper at 4K 144fps?
@gorhelorprez37639 ай бұрын
Does this preserve the drawing buffer when finished rendering, I am sick of trying to screenshot webGL canvas
@evgenymikheev446210 ай бұрын
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)
@visionary_3_d10 ай бұрын
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.
@matthewexline65899 ай бұрын
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.
@visionary_3_d9 ай бұрын
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.
@yashguma10 ай бұрын
👹 get ready for a new world
@ChimpanzeeUltra10 ай бұрын
6:09 - 16:32 What is that for?
@chayanpant160711 ай бұрын
do you think there will be a three.js (WebGL) like JavaScript library for WebGPU?
@visionary_3_d11 ай бұрын
100% Three.js is already building it.
@mr_clean5758 ай бұрын
a better alternative = replacement
@visionary_3_d8 ай бұрын
That's right 🤣 But better is always relative.
@mr_clean5758 ай бұрын
@@visionary_3_d 😉
@animedreamz200911 ай бұрын
Looks scary, all the group, and location stuff. Idk how hard is the transition from glsl
@visionary_3_d11 ай бұрын
It's not that difficult actually if you know glsl already. You'll have to try it tho to know...
@szmarczak10 ай бұрын
alternative = substitution = replacement
@visionary_3_d10 ай бұрын
probably in 1-2 years...
@jedxu696010 ай бұрын
🎯 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
@gubatenkov8 ай бұрын
more videos please
@visionary_3_d8 ай бұрын
Roger that!
@andrewsolomon98779 ай бұрын
Link based GPU Bombs incoming.
@danherzl11 ай бұрын
thanks for the video! friend, where can I learn javascript? I want to focus on web design, create awesome websites similar to awwwards websites
@visionary_3_d11 ай бұрын
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.
@judasthepious149910 ай бұрын
next we can download more ram 😌
@CoryTheSimmons11 ай бұрын
Can I plop this into React Native or Flutter?
@visionary_3_d11 ай бұрын
I have no idea. Probably not ( my guess ), because this is a fairly new API.
10 ай бұрын
I'm JS junior and i understand nothing ... 😅
@googlengineer10 ай бұрын
What about Web Mining with that GPU
@gcxs9 ай бұрын
html gaming in the future
@AvalancheGameArt10 ай бұрын
with 200+ ms of RTT, nice
@johncastillo978210 ай бұрын
What neovim setup are you using
@visionary_3_d10 ай бұрын
It’s a highly customised version of vscode.
@truth-12345.9 ай бұрын
Can we use TypeScript in it?
@visionary_3_d9 ай бұрын
Ofc.
@planktonfun110 ай бұрын
Its not compatible to all browser at this time sadly its good for prototypes but still not production ready
@visionary_3_d10 ай бұрын
True!
@Anas_Alaqeel9 ай бұрын
Javascript haters will pass out at this video
@StefaNoneD10 ай бұрын
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++.
@visionary_3_d10 ай бұрын
Good point. I think I agree with you.
@kjvisual711 ай бұрын
Thanks. Buy Yikes, we really have to wait for 1000 likes?
@visionary_3_d11 ай бұрын
Haha 😄 Don't worry, I'll make another video on WebGPU this next month anyways.
@hageldave9 ай бұрын
so webgpu is simply full-fledged opengl?
@visionary_3_d9 ай бұрын
Something like that but better. Based on my experience at least.
@clonedmosquito10 ай бұрын
can you use some audio software to fix ur short tonque voice. voice shoud not limit your views.
@visionary_3_d10 ай бұрын
Oh thanks for the suggestion. However I didn't really understand what you meant here. Can you elaborate ?
@FlareGunDebate11 ай бұрын
you're beautiful. thank you.
@usher-p11 ай бұрын
lol
@kvn95ss10 ай бұрын
So… instead of game installers we can have an electron app to play games? I guess that could be an application for it
@thegrandnil7648 ай бұрын
opengl is still commonly used my homie. Vulkan is a pain to use, and is only preffered by larger projects and engines.
@visionary_3_d8 ай бұрын
I agree 👌👌
@Rikonardo8 ай бұрын
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
@InteractiveDNA10 ай бұрын
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?
@visionary_3_d10 ай бұрын
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.
@InteractiveDNA10 ай бұрын
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
@franciscocreatorstargazer61659 ай бұрын
the voice over is ai?
@visionary_3_d9 ай бұрын
nope
@geelemo11 ай бұрын
Not beginner friendly i got lost
@visionary_3_d11 ай бұрын
Which part ? WebGPU is not beginner friendly but I'll try to explain it better next time.
@r-i-ch11 ай бұрын
@@visionary_3_dthis isn’t beginner material so don’t dumb it down too hard
@daleblackwell355119 күн бұрын
Lol. Noone uses Vulcan.
@visionary_3_d19 күн бұрын
@@daleblackwell3551 well yea 😂
@jojolafrite909 ай бұрын
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.
@procactus91098 ай бұрын
Don't use java anything on a PC or phone. Leave that for microwaves and breadmakers.
@stefantomas9 ай бұрын
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.