Introduction to Signed Distance Fields

Показать описание

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.

== [ Resources ] ==

== [ Timestamps ] ==
00:00 Intro to SDFs
01:08 GLSL Shader Setup
02:03 UV Coordinates
03:23 Signed Distance Field
04:47 Exponential Shadow
06:04 Sin Waves
07:00 Smoothstep Border

== [ Tags ] ==
#suboptimal #glsl #shaders

Рекомендации по теме

Комментарии

Great video.
The fact that you had different commented-out lines ready to be uncommented one by one in order visualize the math, helped me quite a lot in grasping the concept.
Thank you very much, Suboptimal!

countessanise

May be use variable save result abs() function, calculate ony 1 time.

Please show how color versión show from 0:11 to 0:14 of video por favor.

FengXingFengXing

Thank you very much. The best explanation !!!

ДаниилНосов-хб

love it! more of shader gooodies needed! :)

emteiks

This is a pretty high quality tutorial! I'm surprised there aren't any comments yet

janus

You set the center to 0, 0 and subtract the UV from that? Why?

WomboBraker

thanks for video, do you know how make dashed outline for rounded rectangle ?

deadbit

great video dude imma save it and come back

Demixroxic

hi, how can i debug shaders like you are in visual stuido?

glebaltfromrovia

Love it, thanks for your great introduction and explanation!
I wonder, can this technique be used on internal corners and edges to calcular a kind of ambient occlusion? Just like the idea of messing with the parameters and seeing what happens!

suvetar

I still don't understand how the whole screen is updated without a loop or update function.

axMfqTI

I don't use webGL, but I'm learning openGL and I think GLSL should be the same for both(?) Came from some youtube comment, but this is pretty well made so subbed

Hobbes

Bro can you teach how we make a perfect game It's Magic Engine? this works in mobile

Shortom_Boy

+1 I really liked the way you asked for a sub and would like to be asked again :P

Lee-qjhk

why are you all asking for liking your video at the bery beginning? we dont even know if it is good or bad erh

drendelous

Introduction to Signed Distance Fields

Introduction to Signed Distance Fields

introduction to Signed Distance Fields

SDF (signed distance function)

Signed Distance Functions & Ray-Marching

Ray Marching, and making 3D Worlds with Math

Glyphs, shapes, fonts, signed distance fields.

Coding Adventure: Ray Marching

Signed Distance Function Explained by a Kid

After Crossing Over, She Uses Modern Knowledge to Open Up Land and Farm, Establishing a New Nation!

An introduction to Raymarching

Graphics 3 [9]: Signed Distance Function Part 1

SDF (Signed Distance Field) on GPU - 8SSEDT @ 60fps

Dynamic Signed Distance Fields (SDF) -- Now In Unity -- What They Are And Why You Should Care!

Signed Distance Fields (SDF) Animation

Abyss - SDF (Signed Distance Fields) Animation

CSC2547 DeepSDF Learning Continuous Signed Distance Functions for Shape Representation

iSDF | RSS 2022 Talk | Real-Time Neural Signed Distance Fields for Robot Perception

Information Theoretic Exploration in Signed Distance Fields

Signed distance field (SDF) collisions in MuJoCo

What is Ray Marching?

Signed Distance Field

Learning Models as Functionals of Signed-Distance Fields for Manipulation Planning

Raytracer - Fun with Signed Distance Field (SDF)

Ray marching In a nutshell - Signed Distance Function