Suboptimal Engineer
Suboptimal Engineer
  • Видео 95
  • Просмотров 1 658 024
How to Code a Piano Shader | Learning Computer Graphics
In this video, we go over my journey of learning computer graphics in 6 months by self-studying 2 semesters of courses taught by Professor Cem Yuksel. Then we will go over what volume rendering is and see how it can load MRIs and CT scans. After that, we will look at a slime mold simulation in TypeScript and WebGPU. Finally, we will go over how to code a 3D piano in a GLSL shader with ray marching.
📖 Code - github.com/SuboptimalEng/shader-tutorials
🐦 Twitter - SuboptimalEng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Inigo Quilez - iquilezles.org/articles/distfunctions/
Will Usher’s Blog Post - www.willusher.io/webgl/2019/01/13/volume-renderi...
Просмотров: 773

Видео

What is WebGPU?14:09What is WebGPU?
What is WebGPU?
Просмотров 63 тыс.7 месяцев назад
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 toda...
What is Gaussian Blur?7:30What is Gaussian Blur?
What is Gaussian Blur?
Просмотров 6 тыс.9 месяцев назад
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...
Checkerboard Shader Tutorial | Graphics Programming Interview Question5:26Checkerboard Shader Tutorial | Graphics Programming Interview Question
Checkerboard Shader Tutorial | Graphics Programming Interview Question
Просмотров 1,7 тыс.10 месяцев назад
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 Simulation8:30Coding a Slime Simulation
Coding a Slime Simulation
Просмотров 3,6 тыс.11 месяцев назад
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 Simulation9:00Coding a Boids Flocking Simulation
Coding a Boids Flocking Simulation
Просмотров 8 тыс.Год назад
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 Days6:10Learning Unity Game Development in 30 Days
Learning Unity Game Development in 30 Days
Просмотров 3,6 тыс.Год назад
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...
What is Ray Marching?10:57What is Ray Marching?
What is Ray Marching?
Просмотров 17 тыс.Год назад
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...
Noise Functions: Fractional Brownian Motion, Domain Warping, Calculating Normals5:57Noise Functions: Fractional Brownian Motion, Domain Warping, Calculating Normals
Noise Functions: Fractional Brownian Motion, Domain Warping, Calculating Normals
Просмотров 6 тыс.Год назад
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?7:49What is Perlin Noise?
What is Perlin Noise?
Просмотров 14 тыс.Год назад
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?6:38What is Voronoi Noise?
What is Voronoi Noise?
Просмотров 8 тыс.Год назад
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?7:55What is Value Noise?
What is Value Noise?
Просмотров 4,3 тыс.Год назад
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 Fields9:00Introduction to Signed Distance Fields
Introduction to Signed Distance Fields
Просмотров 26 тыс.Год назад
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 Lighting9:44Introduction to Phong Lighting
Introduction to Phong Lighting
Просмотров 15 тыс.Год назад
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 Code4:59How to Write GLSL Shaders in VS Code
How to Write GLSL Shaders in VS Code
Просмотров 21 тыс.Год назад
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 JavaScript4:46I Coded Snake but with Portals in JavaScript
I Coded Snake but with Portals in JavaScript
Просмотров 4,3 тыс.2 года назад
I Coded Snake but with Portals in JavaScript
Three.js + Cannon.js Tutorial (part 2/2) | Rigid Vehicle Physics Example9:55Three.js + Cannon.js Tutorial (part 2/2) | Rigid Vehicle Physics Example
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 JavaScript7:53Three.js + Cannon.js Tutorial (part 1/2) | Intro to Physics with JavaScript
Three.js + Cannon.js Tutorial (part 1/2) | Intro to Physics with JavaScript
Просмотров 16 тыс.2 года назад
Three.js Cannon.js Tutorial (part 1/2) | Intro to Physics with JavaScript
Three.js + Tween.js Tutorial | How to Animate 3D Objects6:54Three.js + Tween.js Tutorial | How to Animate 3D Objects
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 Groups5:45Three.js Groups Tutorial | How to Organize Code with Three.js Groups
Three.js Groups Tutorial | How to Organize Code with Three.js Groups
Просмотров 3,9 тыс.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 JavaScript4:35Three.js Shader Extension in VS Code | How to Import GLSL Shaders in JavaScript
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 Varying7:18Three.js Shaders Tutorial (part 2/2) | GLSL Shaders with Uniforms and Varying
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 Shaders7:25Three.js Shaders Tutorial (part 1/2) | Intro to GLSL Vertex and Fragment Shaders
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.js3:34Three.js Raycaster Tutorial | How to Handle Mouse Input in Three.js
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 Minutes6:356 Months of Learning JavaScript Game Dev in 6 Minutes
6 Months of Learning JavaScript Game Dev in 6 Minutes
Просмотров 121 тыс.2 года назад
6 Months of Learning JavaScript Game Dev in 6 Minutes
Coding a Physics Game with JavaScript + Three.js4:11Coding a Physics Game with JavaScript + Three.js
Coding a Physics Game with JavaScript + Three.js
Просмотров 1,6 тыс.2 года назад
Coding a Physics Game with JavaScript Three.js
Three.js Font Loader Tutorial | How to Load Fonts in a Three.js Scene4:36Three.js Font Loader Tutorial | How to Load Fonts in a Three.js Scene
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.js6:59Three.js Importing Models Tutorial | How to Import GLTF Models in Three.js
Three.js Importing Models Tutorial | How to Import GLTF Models in Three.js
Просмотров 62 тыс.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 Geometry6:40Three.js Texture Mapping Tutorial | How to Add Textures to 3D Geometry
Three.js Texture Mapping Tutorial | How to Add Textures to 3D Geometry
Просмотров 28 тыс.2 года назад
Three.js Texture Mapping Tutorial | How to Add Textures to 3D Geometry
Three.js Lighting Tutorial with Examples5:24Three.js Lighting Tutorial with Examples
Three.js Lighting Tutorial with Examples
Просмотров 16 тыс.2 года назад
Three.js Lighting Tutorial with Examples