SlideShare a Scribd company logo
jeremyromanowski.com
NERDY TIME
Shader ?
Abalanche - Unity Shader Graph #1: Shader & PBR Materials
Basic rendering pipeline
Vertex Data
Vertex
Processing
Rasterizing
Display
Output
Merging
Fragment
Processing
Basic rendering pipeline
Vertex Data
Vertex
Processing
Rasterizing
Display
Output
Merging
Fragment
Processing
SHADER
SHADER
Vertex shader
Modify vertex data (mostly position)
Example: Waving flags
Displace vertices’ positions by sine wave and noise
Fragment shader
Modify pixel/fragment data (mostly color)
Example: See through / Infrared Vision
Render specific object in front of the others
A material consists of a shader and
visible parameters from that shader.
Could be considered as a shader preset.
Example: Change base texture of the
MatCap shader to create different materials
Material
PBR ?
Unlit
NOT affected by light -> very fast.
Example: 2D sprites.
Example: Anime style without light.
Lit
Affected by light.
Approximated by a math model.
Example: Phong shading.
*Image: Phong & his friends were measuring a car to render in 3D
Flat Gouraud Phong
0.0 1.0
Phong shading
Diffuse: Calculate the angle between normal vector
and light direction.
Specular: Calculate the angle between reflected
light ray and view direction.
Smaller angle means brighter color.
Cel-shading
Is a Lit shading technique !!!
Transitions between dark & light areas are
controlled by a “shading ramp” image.
Immediate
transitions
Shading ramp image
More: Daniel Ilette’s tutorial
PBR
Physically-Based Rendering.
A group of light simulation techniques.
Control by multiple images called textures.
Ref: Wikipedia
Ref: Unity’s Standard Shaders
*Image: The blue turtle
Abalanche - Unity Shader Graph #1: Shader & PBR Materials
HANDS-ON
TIME
URP Lit Shader
PBR Textures – Albedo
A base color without lighting factors (specular, shadow...).
Could be a texture (RGB), a solid color, or both.
Depend on light direction.
Other common names are main / base / diffuse textures.
More: Unity’s Albedo Color
PBR Textures – Smoothness
Smoother surface means
clearer reflection.
Smoothness = 0 Smoothness = 0.4 Smoothness = 0.7 !!!
Specular
highlight
0.0 1.0
PBR Textures:
Smoothness
Smoother surface means clearer reflection.
Could be a number / a texture.
Specular highlight depends on light and
view direction.
More: Unity's Smoothness
Smoothness = 0 Smoothness = 0.4
0.0 1.0
PBR Textures:
Normal
Normal vector is perpendicular to a tangent plane
at a surface point.
Normal vector is important in calculating light effect.
Normal vector usually points outward.
More: Wikipedia
Without Normal Map With Normal Map
Texture type must be Normal Map.
Fun: It's mostly purple.
Ref: Unity's Normal Map
PBR Textures:
Normal
PBR Textures:
Normal
Could simulate the details with a low-poly
mesh very efficiently.
Bump map is a more general map
whose values indicating the height
adjustment amount, not the direction.
Metallic parameter controls specular reflection.
*Smoothness affects specular highlight, too.
Could be a number / a texture (single channel).
More: Unity's Metallic Workflow
PBR Textures:
Metallic
More albedo More environment reflection
0.0 1.0
Environment
Reflection
Specular
Highlight
You must pick Metallic or Specular workflow.
Specular gives you more control (color, brightness,
blending with environment ...).
Could be a texture (RGB) or a solid color.
*Not recommended for newbie.
More: Unity's Specular Workflow
PBR Textures –
Specular
Abalanche - Unity Shader Graph #1: Shader & PBR Materials
Glass
Smoothness = 0.95
Metallic = 1
Golden
Smoothness = 0.75
Metallic = 1
Plastic
Smoothness = 0.75
Metallic = 0
Render both outward
and inward faces
Alpha = 0.2
Abalanche - Unity Shader Graph #1: Shader & PBR Materials
A single number might not be enough.
Different parts need different PBR configurations.
That's why we need textures for fine-control.
Varied parameters
By sharing metallic & smoothness,
WOOD looks like BRONZE
Metallic
Smoothness
Albedo
WOOD
Non-metallic & rough
Mixed physical materials
Metallic
Smoothness
PBR Textures Preprocessing
RED
GREEN
BLUE
ALPHA
Metallic (R)
Smoothness (A)
Roughness
Invert
*Details in next parts
Abalanche - Unity Shader Graph #1: Shader & PBR Materials
Other common PBR parameters
ALPHA
Control opacity of transparent object.
*For opaque object, pixels with alpha lower than a threshold would be invisible.
AMBIENT OCCLUSION
Control how much indirect light should be received (specially for cracks, intersections).
EMISSION
Control which area emitting light, and the emitted light color.
GOOGLE TIME
§ Glossiness / Roughness
§ Fresnel effect
§ Rim light
§ Height map
§ Clear coat
Summary
1
2
3
SHADER
It's the code to manipulate vertex and fragment data for rendering.
PBR SHADERS
They're flexible and powerful to create realistic materials.
ALBEDO, NORMAL, SMOOTHNESS
They're common properties essential for further study.
MAKE IT
BREAK IT
EXPAND IT
§ Shader Graph
§ UV Mapping
§ Effects (Dissolve, Hologram ...)
§ Special rendering (Grass, Water ...)
§ …
/AbalanchePage
/Abalanche /Abalanche

More Related Content

PPTX
Shader Programming With Unity
PDF
Rendering Tech of Space Marine
PPT
NVIDIA OpenGL in 2016
PDF
Rendering AAA-Quality Characters of Project A1
PPTX
FrameGraph: Extensible Rendering Architecture in Frostbite
PDF
Screen Space Decals in Warhammer 40,000: Space Marine
PPSX
Vertex Shader Tricks by Bill Bilodeau - AMD at GDC14
PDF
The Rendering Technology of 'Lords of the Fallen' (Game Connection Europe 2014)
Shader Programming With Unity
Rendering Tech of Space Marine
NVIDIA OpenGL in 2016
Rendering AAA-Quality Characters of Project A1
FrameGraph: Extensible Rendering Architecture in Frostbite
Screen Space Decals in Warhammer 40,000: Space Marine
Vertex Shader Tricks by Bill Bilodeau - AMD at GDC14
The Rendering Technology of 'Lords of the Fallen' (Game Connection Europe 2014)

What's hot (20)

PDF
Graphics Gems from CryENGINE 3 (Siggraph 2013)
PPTX
Frostbite on Mobile
PDF
The Technology of Uncharted: Drake’s Fortune
PPTX
Week 4 - Materials and Textures
PDF
유니티의 라이팅이 안 이쁘다구요? (A to Z of Lighting)
PPT
Shadow mapping 정리
PPTX
[Ndc11 박민근] deferred shading
PDF
Shaders in Unity
PPTX
Lighting the City of Glass
PPTX
Physically Based and Unified Volumetric Rendering in Frostbite
PDF
What's new in Shader Graph: ready for production – Unite Copenhagen 2019
PDF
Unity advanced computer graphics week 02
PDF
[Kgc2012] deferred forward 이창희
PDF
Motion blur
PDF
Best Practices for Shader Graph
PDF
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
PDF
Custom fabric shader for unreal engine 4
PPTX
Relic's FX System
PDF
Lighting of Killzone: Shadow Fall
PPTX
Parallel Futures of a Game Engine (v2.0)
Graphics Gems from CryENGINE 3 (Siggraph 2013)
Frostbite on Mobile
The Technology of Uncharted: Drake’s Fortune
Week 4 - Materials and Textures
유니티의 라이팅이 안 이쁘다구요? (A to Z of Lighting)
Shadow mapping 정리
[Ndc11 박민근] deferred shading
Shaders in Unity
Lighting the City of Glass
Physically Based and Unified Volumetric Rendering in Frostbite
What's new in Shader Graph: ready for production – Unite Copenhagen 2019
Unity advanced computer graphics week 02
[Kgc2012] deferred forward 이창희
Motion blur
Best Practices for Shader Graph
스크린 스페이스 데칼에 대해 자세히 알아보자(워햄머 40,000: 스페이스 마린)
Custom fabric shader for unreal engine 4
Relic's FX System
Lighting of Killzone: Shadow Fall
Parallel Futures of a Game Engine (v2.0)
Ad

Similar to Abalanche - Unity Shader Graph #1: Shader & PBR Materials (20)

PDF
Shaders - Claudia Doppioslash - Unity With the Best
PPTX
Shaders & Standard Shader In Unity
PDF
[UniteKorea2013] The Unity Rendering Pipeline
PPTX
Substanceshanghaippt repacked
PPT
Gpu presentation
PDF
Unite2014: Mastering Physically Based Shading in Unity 5
PDF
Shader editor
PDF
Rendering basics
PPT
Advanced Lighting Techniques Dan Baker (Meltdown 2005)
PPTX
Real-time lightmap baking
PDF
Clean architecture for shaders unite2019
PPT
Rendering: Vertices, Indices, UVs and Shaders
PPTX
Mikhail Kyyashko "PBR (physically based rendering) for artists and programmers"
PPTX
GDC 2016 End-to-End Approach to Physically Based Rendering
PDF
Smedberg niklas bringing_aaa_graphics
PPTX
Around the World in 80 Shaders
DOCX
Basic of maya
PDF
ENEI16 - WebGL with Three.js
PPTX
Grapics debugging with RenderDoc
PPTX
Penn graphics
Shaders - Claudia Doppioslash - Unity With the Best
Shaders & Standard Shader In Unity
[UniteKorea2013] The Unity Rendering Pipeline
Substanceshanghaippt repacked
Gpu presentation
Unite2014: Mastering Physically Based Shading in Unity 5
Shader editor
Rendering basics
Advanced Lighting Techniques Dan Baker (Meltdown 2005)
Real-time lightmap baking
Clean architecture for shaders unite2019
Rendering: Vertices, Indices, UVs and Shaders
Mikhail Kyyashko "PBR (physically based rendering) for artists and programmers"
GDC 2016 End-to-End Approach to Physically Based Rendering
Smedberg niklas bringing_aaa_graphics
Around the World in 80 Shaders
Basic of maya
ENEI16 - WebGL with Three.js
Grapics debugging with RenderDoc
Penn graphics
Ad

More from Phuong Hoang Vu (11)

PDF
Introduce phaser
PDF
Unity Visual Effect Graph
PDF
ECS (Part 1/3) - Introduction to Data-Oriented Design
PPTX
[UX Series] 6 - Animation principles
PPTX
[UX Series] 5 - Navigation
PPTX
[UX Series] 4 - Contrast in design
PPTX
[UX Series] 2 - Clean design. Less is more
PPTX
[UX Series] 3 - User behavior patterns and design principles
PPTX
[UX Series] 1b - 12 standard screen layouts
PPTX
[UX Series] 1 - UX Introduction
PDF
Cross platform mobile approaches
Introduce phaser
Unity Visual Effect Graph
ECS (Part 1/3) - Introduction to Data-Oriented Design
[UX Series] 6 - Animation principles
[UX Series] 5 - Navigation
[UX Series] 4 - Contrast in design
[UX Series] 2 - Clean design. Less is more
[UX Series] 3 - User behavior patterns and design principles
[UX Series] 1b - 12 standard screen layouts
[UX Series] 1 - UX Introduction
Cross platform mobile approaches

Recently uploaded (20)

PDF
Model Code of Practice - Construction Work - 21102022 .pdf
PPTX
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
PPTX
Geodesy 1.pptx...............................................
PPTX
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
PPTX
Current and future trends in Computer Vision.pptx
PDF
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
PDF
TFEC-4-2020-Design-Guide-for-Timber-Roof-Trusses.pdf
PPTX
CYBER-CRIMES AND SECURITY A guide to understanding
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
PDF
PPT on Performance Review to get promotions
PPT
Project quality management in manufacturing
PDF
The CXO Playbook 2025 – Future-Ready Strategies for C-Suite Leaders Cerebrai...
PPTX
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
PPTX
Artificial Intelligence
PDF
Unit I ESSENTIAL OF DIGITAL MARKETING.pdf
PDF
Digital Logic Computer Design lecture notes
PPTX
Sustainable Sites - Green Building Construction
PPT
Mechanical Engineering MATERIALS Selection
PPT
introduction to datamining and warehousing
PPT
Introduction, IoT Design Methodology, Case Study on IoT System for Weather Mo...
Model Code of Practice - Construction Work - 21102022 .pdf
MET 305 2019 SCHEME MODULE 2 COMPLETE.pptx
Geodesy 1.pptx...............................................
CARTOGRAPHY AND GEOINFORMATION VISUALIZATION chapter1 NPTE (2).pptx
Current and future trends in Computer Vision.pptx
keyrequirementskkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
TFEC-4-2020-Design-Guide-for-Timber-Roof-Trusses.pdf
CYBER-CRIMES AND SECURITY A guide to understanding
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
PPT on Performance Review to get promotions
Project quality management in manufacturing
The CXO Playbook 2025 – Future-Ready Strategies for C-Suite Leaders Cerebrai...
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
Artificial Intelligence
Unit I ESSENTIAL OF DIGITAL MARKETING.pdf
Digital Logic Computer Design lecture notes
Sustainable Sites - Green Building Construction
Mechanical Engineering MATERIALS Selection
introduction to datamining and warehousing
Introduction, IoT Design Methodology, Case Study on IoT System for Weather Mo...

Abalanche - Unity Shader Graph #1: Shader & PBR Materials

  • 4. Basic rendering pipeline Vertex Data Vertex Processing Rasterizing Display Output Merging Fragment Processing
  • 5. Basic rendering pipeline Vertex Data Vertex Processing Rasterizing Display Output Merging Fragment Processing SHADER SHADER
  • 6. Vertex shader Modify vertex data (mostly position) Example: Waving flags Displace vertices’ positions by sine wave and noise
  • 7. Fragment shader Modify pixel/fragment data (mostly color) Example: See through / Infrared Vision Render specific object in front of the others
  • 8. A material consists of a shader and visible parameters from that shader. Could be considered as a shader preset. Example: Change base texture of the MatCap shader to create different materials Material
  • 10. Unlit NOT affected by light -> very fast. Example: 2D sprites. Example: Anime style without light.
  • 11. Lit Affected by light. Approximated by a math model. Example: Phong shading. *Image: Phong & his friends were measuring a car to render in 3D
  • 12. Flat Gouraud Phong 0.0 1.0 Phong shading Diffuse: Calculate the angle between normal vector and light direction. Specular: Calculate the angle between reflected light ray and view direction. Smaller angle means brighter color.
  • 13. Cel-shading Is a Lit shading technique !!! Transitions between dark & light areas are controlled by a “shading ramp” image. Immediate transitions Shading ramp image More: Daniel Ilette’s tutorial
  • 14. PBR Physically-Based Rendering. A group of light simulation techniques. Control by multiple images called textures. Ref: Wikipedia Ref: Unity’s Standard Shaders *Image: The blue turtle
  • 17. PBR Textures – Albedo A base color without lighting factors (specular, shadow...). Could be a texture (RGB), a solid color, or both. Depend on light direction. Other common names are main / base / diffuse textures. More: Unity’s Albedo Color
  • 18. PBR Textures – Smoothness Smoother surface means clearer reflection. Smoothness = 0 Smoothness = 0.4 Smoothness = 0.7 !!! Specular highlight 0.0 1.0
  • 19. PBR Textures: Smoothness Smoother surface means clearer reflection. Could be a number / a texture. Specular highlight depends on light and view direction. More: Unity's Smoothness Smoothness = 0 Smoothness = 0.4 0.0 1.0
  • 20. PBR Textures: Normal Normal vector is perpendicular to a tangent plane at a surface point. Normal vector is important in calculating light effect. Normal vector usually points outward. More: Wikipedia
  • 21. Without Normal Map With Normal Map Texture type must be Normal Map. Fun: It's mostly purple. Ref: Unity's Normal Map PBR Textures: Normal
  • 22. PBR Textures: Normal Could simulate the details with a low-poly mesh very efficiently. Bump map is a more general map whose values indicating the height adjustment amount, not the direction.
  • 23. Metallic parameter controls specular reflection. *Smoothness affects specular highlight, too. Could be a number / a texture (single channel). More: Unity's Metallic Workflow PBR Textures: Metallic More albedo More environment reflection 0.0 1.0 Environment Reflection Specular Highlight
  • 24. You must pick Metallic or Specular workflow. Specular gives you more control (color, brightness, blending with environment ...). Could be a texture (RGB) or a solid color. *Not recommended for newbie. More: Unity's Specular Workflow PBR Textures – Specular
  • 26. Glass Smoothness = 0.95 Metallic = 1 Golden Smoothness = 0.75 Metallic = 1 Plastic Smoothness = 0.75 Metallic = 0 Render both outward and inward faces Alpha = 0.2
  • 28. A single number might not be enough. Different parts need different PBR configurations. That's why we need textures for fine-control. Varied parameters By sharing metallic & smoothness, WOOD looks like BRONZE
  • 30. Metallic Smoothness PBR Textures Preprocessing RED GREEN BLUE ALPHA Metallic (R) Smoothness (A) Roughness Invert *Details in next parts
  • 32. Other common PBR parameters ALPHA Control opacity of transparent object. *For opaque object, pixels with alpha lower than a threshold would be invisible. AMBIENT OCCLUSION Control how much indirect light should be received (specially for cracks, intersections). EMISSION Control which area emitting light, and the emitted light color.
  • 33. GOOGLE TIME § Glossiness / Roughness § Fresnel effect § Rim light § Height map § Clear coat
  • 34. Summary 1 2 3 SHADER It's the code to manipulate vertex and fragment data for rendering. PBR SHADERS They're flexible and powerful to create realistic materials. ALBEDO, NORMAL, SMOOTHNESS They're common properties essential for further study.
  • 36. § Shader Graph § UV Mapping § Effects (Dissolve, Hologram ...) § Special rendering (Grass, Water ...) § …