Suboptimal Engineer
Suboptimal Engineer
  • 94
  • 1 592 895
What is WebGPU?
In this video, we will go over everything you need to know about WebGPU. We’ll start with a history lesson on the state of 3D computer graphics. Then, we will learn what WebGPU is and how it’s different from WebGL. After that, we will look at how big tech companies like Adobe, AutoDesk, Apple, Google, and OpenAI are investing in WebGPU. Finally, we go over how you can start learning WebGPU today.
🐦 Twitter - SuboptimalEng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Tutorials:
WebGPU Fundamentals - webgpufundamentals.org/
Learn WebGPU with JavaScript - codelabs.developers.google.com/your-first-webgpu-app
General:
History of WebGPU - cohost.org/mcc/post/1406157-i-want-to-talk-about-webgpu
From WebGL to WebGPU - developer.chrome.com/blog/from-webgl-to-webgpu
Brandon Jones’ WebGPU Talk - ua-cam.com/video/Hm2_bH_8j3k/v-deo.html
WebGPU Compute Shaders Tutorial - developer.chrome.com/docs/capabilities/web-apis/gpu-compute
Building a Professional Design Tool on the Web - www.figma.com/blog/building-a-professional-design-tool-on-the-web/
Building WebGPU with Rust - ua-cam.com/video/utcjlg6Q6JU/v-deo.html
WebGL Water Demo - madebyevan.com/webgl-water/
Figma WebGL Blog Post - www.figma.com/blog/building-a-professional-design-tool-on-the-web/
Shadertoy - www.shadertoy.com/
Shadertoy Award - practitioner.siggraph.org/post/2022-acm-siggraph-practitioner-award-recipients-pol-jeremias-and-inigo-quilez
BioDigital - www.biodigital.com/
OnShape - www.onshape.com/en/
== [ Timestamps ] ==
00:00 Intro to WebGPU
00:58 History of 3D Graphics
03:21 What is WebGPU?
04:34 WebGPU vs WebGL
05:29 WebGPU in a Nutshell
06:09 2D Design Tools
07:35 Computer-Aided Design
08:59 Health Technology
09:39 WebGPU at Google
10:06 AI + ML with WebGPU
11:15 Computer Graphics Research
12:20 How to Learn WebGPU?
12:52 Future of WebGPU
== [ Tags ] ==
#suboptimal #webgl #webgpu
Переглядів: 58 582

Відео

What is Gaussian Blur?
Переглядів 4,7 тис.7 місяців тому
In this shader tutorial, we will go over two common image processing techniques: box blur and Gaussian blur. We start by understanding the algorithm for box blur. Then we learn how to create a Gaussian blur by adjusting the weights in the kernel. Finally, we learn how to code both the box blur effect and the Gaussian blur effect, in a GLSL shader. Code - github.com/SuboptimalEng/shader-tutoria...
Graphics Programming Interview Question | Checkerboard Shader Tutorial
Переглядів 1,5 тис.7 місяців тому
In this shader tutorial, we will go over how to write a GLSL shader that produces a checkerboard pattern. This is a common interview question for graphics programmers. We will start by implementing a suboptimal approach that uses for-loops. Then we will optimize the shader using domain repetition. Code - github.com/SuboptimalEng/shader-tutorials 🐦 Twitter - SuboptimalEng 💻 GitHub -...
Coding a Slime Mold Simulation
Переглядів 3,2 тис.9 місяців тому
In this video, we go over the process of creating a Physarum slime mold simulation in Unity. The code for this project, and links to any references I used, are available in my GitHub repository. Code - github.com/SuboptimalEng/slime-sim 🐦 Twitter - SuboptimalEng 💻 GitHub - github.com/SuboptimalEng 🌎 Website - suboptimaleng.com [ Resources ] Jeff Jones’ Physarum Research Paper - uwe...
Coding a Boids Flocking Simulation
Переглядів 7 тис.10 місяців тому
Boids is an algorithm developed by Craig Reynolds in 1986. It aims to emulate the flocking behavior of birds by applying three simple rules: separation, alignment, and cohesion. In this video, we go over the process of building a boids simulation in Unity. The code for this project, and links to any references I used, are available in my GitHub repository. Code - github.com/SuboptimalEng/boids...
Learning Unity Game Development in 30 Days
Переглядів 3,5 тис.11 місяців тому
In this video, we go over the 10 games I made to learn Unity game development in 1 month. Huge thanks to Game Maker’s Toolkit, Coding in Flow, and Sebastian Lague for their amazing free game dev tutorials. Code - github.com/SuboptimalEng/learning-unity 🐦 Twitter - SuboptimalEng 💻 GitHub - github.com/SuboptimalEng 🌎 Website - suboptimaleng.com [ Resources ] Game Maker’s Toolkit - ww...
Introduction to Ray Marching
Переглядів 15 тис.Рік тому
In this shader tutorial, we will go over the basics of Ray Marching with Signed Distance Fields. We start by understanding the theory behind the algorithm. Then we implement a simple ray marcher in GLSL. After that, we calculate the normals and add lighting to the scene. Then we run the ray march algorithm again to calculate shadows. Finally, we learn how to blend to SDFs using the smooth union...
Fractional Brownian Motion, Domain Warping, and Calculating Normals
Переглядів 4,9 тис.Рік тому
In this GLSL shader tutorial, we will go over techniques you can apply to noise functions such as fractional Brownian motion, domain warping, and the central differences method. Code - github.com/SuboptimalEng/shader-tutorials 🐦 Twitter - SuboptimalEng 💻 GitHub - github.com/SuboptimalEng 🌎 Website - suboptimaleng.com [ Resources ] Inigo Quilez’s Articles - iquilezles.org/articles T...
What is Perlin Noise?
Переглядів 12 тис.Рік тому
In this GLSL shader tutorial, we will go over Perlin noise. We start by setting up a GLSL shader in VS Code. Then we create a grid of cells and generate random gradients at the corner of each grid cell. Afterward, we generate a vector for each pixel coordinate and calculate the dot product to generate Perlin noise. Finally, we learn about Perlin noise variants like billow noise and ridged noise...
What is Voronoi Noise?
Переглядів 7 тис.Рік тому
In this GLSL shader tutorial, we will go over Worley (or Voronoi) noise. We start by setting up a GLSL shader in VS Code. Then we create a grid of cells and get the distance to the edge of each cell to display a uniformly distributed Voronoi shader. Then we randomize the points on each cell to display an organic cell-like structure. Finally, we invert the shader to make it look like clouds. Co...
What is Value Noise?
Переглядів 3,8 тис.Рік тому
In this GLSL shader tutorial, we will go over the basics of value noise. We start by setting up a GLSL shader in VS Code. Then we create a white noise function and add a grid layer on top of it. After that, we find the edges of the grid and perform bilinear interpolation to generate a primitive version of value noise. Finally, we smooth out the noise by running the grid UV coordinates through a...
Introduction to Signed Distance Fields
Переглядів 24 тис.Рік тому
In this GLSL shader tutorial, we will go over the basics of Signed Distance Fields (SDFs). We will start by setting up a GLSL shader in VS Code with proper UV coordinates. Then we will draw a circle using the SDF function available on Inigo Quilez’s website. Finally, we will add some visuals to help us understand how the SDF works. Code - github.com/SuboptimalEng/shader-tutorials 🐦 Twitter - t...
Introduction to Phong Lighting
Переглядів 13 тис.Рік тому
In this GLSL shader tutorial, we will go over the basics of Phong lighting. We start off by understanding the importance of lighting in computer graphics. Then we will look at the intuition behind the Phong lighting equation. Finally, we add ambient, diffuse, and specular lighting to our GLSL fragment shader. Code - github.com/SuboptimalEng/shader-tutorials 🐦 Twitter - SuboptimalEn...
How to Write GLSL Shaders in VS Code
Переглядів 19 тис.Рік тому
In this video, we go over the two extensions that make it easy to write GLSL shaders in Visual Studio Code: WebGL Editor, and GLSL Canvas. Code - github.com/SuboptimalEng/dotfiles 🐦 Twitter - SuboptimalEng 💻 GitHub - github.com/SuboptimalEng 🌎 Website - suboptimaleng.com [ Timestamps ] 00:00 What are Shaders? 01:25 WebGL GLSL Editor 02:21 GLSL Canvas 03:02 Format GLSL Files on Save...
I Coded Snake but with Portals in JavaScript
Переглядів 4,2 тис.Рік тому
In this game dev experiment, I coded a snake game with portals using Three.js and JavaScript. Check out the playable demo on my website and let me know what you think! Code - github.com/SuboptimalEng/three-js-games 🐦 Twitter - SuboptimalEng 💻 GitHub - github.com/SuboptimalEng 🌎 Website - suboptimaleng.com [ Timestamps ] 00:00 Coding Snake 00:23 Adding Portals 00:54 Portal GLSL Shad...
Three.js + Cannon.js Tutorial (part 2/2) | Rigid Vehicle Physics Example
Переглядів 12 тис.2 роки тому
Three.js Cannon.js Tutorial (part 2/2) | Rigid Vehicle Physics Example
Three.js + Cannon.js Tutorial (part 1/2) | Intro to Physics with JavaScript
Переглядів 15 тис.2 роки тому
Three.js Cannon.js Tutorial (part 1/2) | Intro to Physics with JavaScript
Three.js + Tween.js Tutorial | How to Animate 3D Objects
Переглядів 12 тис.2 роки тому
Three.js Tween.js Tutorial | How to Animate 3D Objects
Three.js Groups Tutorial | How to Organize Code with Three.js Groups
Переглядів 3,7 тис.2 роки тому
Three.js Groups Tutorial | How to Organize Code with Three.js Groups
Three.js Shader Extension in VS Code | How to Import GLSL Shaders in JavaScript
Переглядів 6 тис.2 роки тому
Three.js Shader Extension in VS Code | How to Import GLSL Shaders in JavaScript
Three.js Shaders Tutorial (part 2/2) | GLSL Shaders with Uniforms and Varying
Переглядів 12 тис.2 роки тому
Three.js Shaders Tutorial (part 2/2) | GLSL Shaders with Uniforms and Varying
Three.js Shaders Tutorial (part 1/2) | Intro to GLSL Vertex and Fragment Shaders
Переглядів 17 тис.2 роки тому
Three.js Shaders Tutorial (part 1/2) | Intro to GLSL Vertex and Fragment Shaders
Three.js Raycaster Tutorial | How to Handle Mouse Input in Three.js
Переглядів 15 тис.2 роки тому
Three.js Raycaster Tutorial | How to Handle Mouse Input in Three.js
6 Months of Learning JavaScript Game Dev in 6 Minutes
Переглядів 115 тис.2 роки тому
6 Months of Learning JavaScript Game Dev in 6 Minutes
Coding a Physics Game with JavaScript + Three.js
Переглядів 1,5 тис.2 роки тому
Coding a Physics Game with JavaScript Three.js
Three.js Font Loader Tutorial | How to Load Fonts in a Three.js Scene
Переглядів 10 тис.2 роки тому
Three.js Font Loader Tutorial | How to Load Fonts in a Three.js Scene
Three.js Importing Models Tutorial | How to Import GLTF Models in Three.js
Переглядів 58 тис.2 роки тому
Three.js Importing Models Tutorial | How to Import GLTF Models in Three.js
Three.js Texture Mapping Tutorial | How to Add Textures to 3D Geometry
Переглядів 27 тис.2 роки тому
Three.js Texture Mapping Tutorial | How to Add Textures to 3D Geometry
Three.js Lighting Tutorial with Examples
Переглядів 15 тис.2 роки тому
Three.js Lighting Tutorial with Examples
How to Optimize Performance in Visual Studio Code
Переглядів 18 тис.2 роки тому
How to Optimize Performance in Visual Studio Code

КОМЕНТАРІ

  • @juncando
    @juncando 17 годин тому

    Thank You

  • @tatrix
    @tatrix 2 дні тому

    Great video! Why smoothstep/quintic fixes grid like pattern?

    • @SuboptimalEng
      @SuboptimalEng 2 дні тому

      Hard to explain the math in a comment. I’d recommend trying out the shader and seeing why it works.

  • @bubbakittee5388
    @bubbakittee5388 3 дні тому

    Good summary. But Dassault is pronounced “dasso”, not “dassalt”. It’s French.

    • @SuboptimalEng
      @SuboptimalEng 2 дні тому

      Thanks for the tip, will remember for next time 🙏

  • @RazCodes404
    @RazCodes404 4 дні тому

    really enjoyed watching this video, thanks for making it

  • @chrisanderson687
    @chrisanderson687 5 днів тому

    Great work! Thanks for sharing, very inspiring

  • @hortonmark6793
    @hortonmark6793 7 днів тому

    "vec3 lightDirection = normalize(lightSource);" confused me. I think it should be "vec3 lightDirection = normalize(lightSource - p);", although both i tried did the same work

  • @hiimdaisy946
    @hiimdaisy946 9 днів тому

    wait how did you get your first job but you still havent learned to prep for job interviews? i thought you were already suppose to know interviews to get your first job.

  • @loisnyx
    @loisnyx 9 днів тому

    Thank you so much! Subscribed!

  • @susussususuususuusuuususussusu
    @susussususuususuusuuususussusu 9 днів тому

    life changing lesson :0

  • @mr.random8447
    @mr.random8447 11 днів тому

    Shouldn’t this be dev dependency?

  • @Cyberfoxxy
    @Cyberfoxxy 13 днів тому

    I've been struggling to find information on gl_FragCoord. According to Threejs source code BoxGeometry does have default uv's set up. Yet somehow, gl_FragCoord remains uninitiazlied in the shader and my object is black...

  • @drewberchtolzthofen886
    @drewberchtolzthofen886 14 днів тому

    vim is essential for keeping yourself in focus, while typing

  • @felfar197
    @felfar197 18 днів тому

    thank you!

  • @mikwns3722
    @mikwns3722 23 дні тому

    can you turn computer off

  • @tempname8263
    @tempname8263 23 дні тому

    How would it compare to BGFX though?

  • @Coding_and_Gaming
    @Coding_and_Gaming 24 дні тому

    Thank you very clear simple but enough detailed explanation especially graphics of the calculations are very useful thank you again for this great video

  • @Tifidy
    @Tifidy 26 днів тому

    Let me tell you why this content is golden over react three fiber is cuz r3f happens to conflict with material ui (Box) which is what I have and I dont want to go through workarounds to force my code look sort of ridicilious. So I am taking route of implementing three this way. Thank you.

    • @SuboptimalEng
      @SuboptimalEng 12 днів тому

      Yea I wanted to minimize dependencies but still use React. Glad the tutorial was helpful!

  • @danielratiu4318
    @danielratiu4318 26 днів тому

    As for using Esc to enter visual, I think some default key binding should not change because one might connect to some remote machines, and access vim there and that would make work a hell ( because of muscle memory ). My 2 cents.

    • @SuboptimalEng
      @SuboptimalEng 26 днів тому

      That’s an interesting point. It’s possible that in some cases, keeping it as ESC is better.

  • @offgridvince
    @offgridvince 29 днів тому

    Did u switch back yet? Nuxt 3 is amazing!! Nuxt 3.12 and 4 on the way...

  • @syntaxed2
    @syntaxed2 29 днів тому

    IMO it is quite revolutionary, real crossplatform abstraction over modern GPU API'S.

  • @polandsilver3419
    @polandsilver3419 Місяць тому

    Thank you for this explanation! I'm new into programing (although I programmed in scratch when I was really young). That's realy good piece of knowledge :)

    • @SuboptimalEng
      @SuboptimalEng 12 днів тому

      Good luck on your programming journey!

  • @JBroadway
    @JBroadway Місяць тому

    underrated tut thanks for making!

    • @SuboptimalEng
      @SuboptimalEng Місяць тому

      Thanks boss! I’ve seen some of your bangers as well 🔥

    • @JBroadway
      @JBroadway Місяць тому

      @@SuboptimalEng Thanks! I'm trying to integrate more visual components to my music and a lot of that has been learning Touch Designer and then eventually GLSL so tuts like this have been really helpful.

    • @SuboptimalEng
      @SuboptimalEng Місяць тому

      @JBroadway that’s cool! Might I recommend Kishimisu, another UA-camr who makes cool shader tutorials and animations (on Instagram).

  • @rajqsl5525
    @rajqsl5525 Місяць тому

    Loved it!! Thanks much

  • @kushyglowy8409
    @kushyglowy8409 Місяць тому

    Thats incredible

  • @user-xn5do6xc1u
    @user-xn5do6xc1u Місяць тому

    Please change name from Suboptimal Engineer to Optimal Engineer. I am feeling sad to see this title.

  • @user-xr9lx9ui7l
    @user-xr9lx9ui7l Місяць тому

    Hey what would happen if all boids are following the same target and the target isn't moving? I want the boids to stop and surround the target and not jitter until the target is stationary is that possible?

  • @3niknicholson
    @3niknicholson Місяць тому

    Wow, excellent find, way above the baseline egoist YT-nixers! Thanks for a brain-food vid and for not having a pointless moving picture of a stationary yourself in the bottom right-hand corner (no offence meant)[EDIT:liked&subbed]

  • @princeofexcess
    @princeofexcess Місяць тому

    Does this setup allows you to search with / and ? As well as highlight things that are output by the terminal not only what you are editing. I tried to setup vim without the oh my zsh in iterm2 but i cant search or jump to things that are output by the terminal only my own input works as vim I would really like to keep the setup as light weight as possible for this.

  • @kelseywalsh9719
    @kelseywalsh9719 Місяць тому

    PLEASE ANYONE HELP ME WITH GETTING A USER's TIMEZONE IN HEROKU! I NEED HELP

  • @lih3391
    @lih3391 Місяць тому

    Is there any way to do this without the help of an external library like tween.js?

  • @Demonicbuilds8
    @Demonicbuilds8 Місяць тому

    You accent is realy good dude.

  • @carljosephyounger
    @carljosephyounger Місяць тому

    The `whiteNoise2x1` function uses this line to initialize the `random` variable: float random = dot(p, vec2(12., 78.)); This will generate obvious patterns at higher resolutions. Using the more precise values (from the comment) fixes the issue: float random = dot(p, vec2(12.9898, 78.233)); All good.

  • @paulo1940
    @paulo1940 Місяць тому

    turning unknown unknowns into known unknowns, I will hold onto that!

    • @SuboptimalEng
      @SuboptimalEng Місяць тому

      It's the most important part of being a game dev or software engineer!

  • @JfreNLGames
    @JfreNLGames Місяць тому

    Space-Node is preconfigured and better.

  • @manibaghdadi725
    @manibaghdadi725 Місяць тому

    GOAT

  • @seyedmojtabahayatolgheib9853
    @seyedmojtabahayatolgheib9853 Місяць тому

    Thanks. I'm a Vue.js and Nuxt.js developer but I have a plan to learn React.js and then Node.js

  • @user-xr9lx9ui7l
    @user-xr9lx9ui7l Місяць тому

    wasn't expecting to see SRK in a Boids video😆

  • @ChatGPT4-sg5ft
    @ChatGPT4-sg5ft Місяць тому

    can webspeech audio api able to visualise waveform when i speaks instead of music

  • @Ken_Machine-iu8je
    @Ken_Machine-iu8je Місяць тому

    Having mapped k j to esc to enter normal mode from insert mode, then how do u type k j as characters in insert mode?

    • @SuboptimalEng
      @SuboptimalEng Місяць тому

      You can set a time limit so that if you type the characters together slowly, the command does not get run and instead the characters get written.

    • @tomaszgora4353
      @tomaszgora4353 15 днів тому

      You can apply when conditions to bindings in the json. Read the docs i.e "when": "inputFocus && vim.mode == 'Normal'". I have bindings remapped and conditioned per mode i.e leader leader to enter visual line (V). Currently building new profile to fit new workflows trained on nvim :)

  • @1..1..1..1H
    @1..1..1..1H Місяць тому

    Why not just use Nvim

  • @dhruvyadav3492
    @dhruvyadav3492 Місяць тому

    hi i am trying to create a shooting gun , so do i need to use raycaster for that ?

  • @aeonplaymusic
    @aeonplaymusic 2 місяці тому

    Thanks for the help, i'm using this.

  • @TheCoder009
    @TheCoder009 2 місяці тому

    Of all the videos in UA-cam, yours is only the one that helped me through

  • @zachariahtatman7381
    @zachariahtatman7381 2 місяці тому

    holy shit this is amazing still 3 years later

    • @SuboptimalEng
      @SuboptimalEng 2 місяці тому

      I still use the same set up too! Very minor tweaks over the last 3 years.

  • @DilipKumar-ou2pn
    @DilipKumar-ou2pn 2 місяці тому

    Bro which theme are you using the theme us so cool..

  • @sul-dev
    @sul-dev 2 місяці тому

    Thank you so much. Really helpful!!

  • @MrMariozzz78
    @MrMariozzz78 2 місяці тому

    i use opegl in dev c++ gl library i guess it pre 2.0 so it dont use GLSL ...can i use phong light with 2.0 pre.version?

  • @JackLeiLing
    @JackLeiLing 2 місяці тому

    Liked and subscribed! The most clearer explanation for this difficult topic. Super helpful. Many thanks

    • @SuboptimalEng
      @SuboptimalEng 2 місяці тому

      I made the video because I was learning phong lighting and struggled to understand it. Glad it helped!

  • @alexfrozen
    @alexfrozen 2 місяці тому

    Compare speed and size with this one: vec3 color = smoothstep(-.01,.01,vec3(sin(uv.x*10.)*sin(uv.y*10.)));

    • @SuboptimalEng
      @SuboptimalEng 2 місяці тому

      I kept my code verbose to help with the video explanation! It can easily be written better and your code is a good example 🤓

  • @Milan23_
    @Milan23_ 2 місяці тому

    Please help, I don't get it, how to set a new command for selecting the current page URL with ALT+/ instead OF CTRL+L ? which is Chrome's default. Thanks!