![Suboptimal Engineer](/img/default-banner.jpg)
- 94
- 1 592 895
Suboptimal Engineer
United States
Приєднався 3 лип 2018
Indian software engineer interested in game development and graphics programming (Unity, C#, Shaders, TypeScript, Three.js, WebGPU, VS Code, and Vim).
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
🐦 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
Thank You
Great video! Why smoothstep/quintic fixes grid like pattern?
Hard to explain the math in a comment. I’d recommend trying out the shader and seeing why it works.
Good summary. But Dassault is pronounced “dasso”, not “dassalt”. It’s French.
Thanks for the tip, will remember for next time 🙏
really enjoyed watching this video, thanks for making it
Thanks Raz!
Great work! Thanks for sharing, very inspiring
Thanks Chris!
"vec3 lightDirection = normalize(lightSource);" confused me. I think it should be "vec3 lightDirection = normalize(lightSource - p);", although both i tried did the same work
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.
Thank you so much! Subscribed!
life changing lesson :0
Shouldn’t this be dev dependency?
Yes, it most likely should be.
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...
vim is essential for keeping yourself in focus, while typing
thank you!
can you turn computer off
As long as you turn it back on
How would it compare to BGFX though?
Never used BGFX so I can’t say.
Thank you very clear simple but enough detailed explanation especially graphics of the calculations are very useful thank you again for this great video
Glad you found it useful!
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.
Yea I wanted to minimize dependencies but still use React. Glad the tutorial was helpful!
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.
That’s an interesting point. It’s possible that in some cases, keeping it as ESC is better.
Did u switch back yet? Nuxt 3 is amazing!! Nuxt 3.12 and 4 on the way...
I’m still using react.
@@SuboptimalEng ok cool
IMO it is quite revolutionary, real crossplatform abstraction over modern GPU API'S.
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 :)
Good luck on your programming journey!
underrated tut thanks for making!
Thanks boss! I’ve seen some of your bangers as well 🔥
@@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.
@JBroadway that’s cool! Might I recommend Kishimisu, another UA-camr who makes cool shader tutorials and animations (on Instagram).
Loved it!! Thanks much
Thats incredible
Please change name from Suboptimal Engineer to Optimal Engineer. I am feeling sad to see this title.
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?
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]
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.
PLEASE ANYONE HELP ME WITH GETTING A USER's TIMEZONE IN HEROKU! I NEED HELP
Is there any way to do this without the help of an external library like tween.js?
You accent is realy good dude.
Thanks?
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.
turning unknown unknowns into known unknowns, I will hold onto that!
It's the most important part of being a game dev or software engineer!
Space-Node is preconfigured and better.
GOAT
Thanks. I'm a Vue.js and Nuxt.js developer but I have a plan to learn React.js and then Node.js
wasn't expecting to see SRK in a Boids video😆
can webspeech audio api able to visualise waveform when i speaks instead of music
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?
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.
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 :)
Why not just use Nvim
Why not use VS Code?
hi i am trying to create a shooting gun , so do i need to use raycaster for that ?
Thanks for the help, i'm using this.
Of all the videos in UA-cam, yours is only the one that helped me through
holy shit this is amazing still 3 years later
I still use the same set up too! Very minor tweaks over the last 3 years.
Bro which theme are you using the theme us so cool..
It’s a secret 🤫
Thank you so much. Really helpful!!
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?
Liked and subscribed! The most clearer explanation for this difficult topic. Super helpful. Many thanks
I made the video because I was learning phong lighting and struggled to understand it. Glad it helped!
Compare speed and size with this one: vec3 color = smoothstep(-.01,.01,vec3(sin(uv.x*10.)*sin(uv.y*10.)));
I kept my code verbose to help with the video explanation! It can easily be written better and your code is a good example 🤓
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!