# PBR: A better understanding of the theory

**URL:** <https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014>\
**Category:** Questions\
**Tags:** pbr\
**Created:** [May 8, 2020, 11:26am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014 "2020-05-08T11:26:01Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 8, 2020, 11:26am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/1 "2020-05-08T11:26:02Z")

</div>

Hi there.

At the moment I’m doing a lot of research. I’m trying to get a better theoretical understanding of whats happening “behind the scenes” of three.js.  
These are topics like how does PBR work with its equations and so on. I’ve seen the article that three.js mentions when explaining PBR, but I’m looking for a more mathematical approach. Some deeper detail.

To get this started -\> [https://learnopengl.com/PBR/Theory](https://learnopengl.com/PBR/Theory)

is this link a step into the right direction?  
I know there is a lot on the internet but I dont want to confuse the things that three.js does with things it doesnt.

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [May 8, 2020, 12:04pm UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/2 "2020-05-08T12:04:35Z")

</div>

Are you asking for the reference material used to create the three.js PBR materials?

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 8, 2020, 12:12pm UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/3 "2020-05-08T12:12:47Z")

</div>

Yes, kind of.  
To be more precise -\> how does the look of the metalness in the metalness-attribut gets generated. Is there a general equation or something similar? I just want a deeper understanding of the origin of this concept.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 8, 2020, 12:20pm UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/4 "2020-05-08T12:20:51Z")

</div>

> [@Kelle](#):
>
> is this link a step into the right direction?

Yes. I suggest you also read the resources from the “Further reading” section. There are many papers, books and blog post about PBR so it shouldn’t be too complicated to find appropriate reading material.

> [@Kelle](#):
>
> how does the look of the metalness in the metalness-attribut gets generated.

Understanding metalness is only half of the story. You also have to understand its relation to roughness and the underlying concept of microfacets.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 8, 2020, 12:24pm UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/5 "2020-05-08T12:24:21Z")

</div>

Okay, I’ll give it a try!  
Thank you!

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [May 8, 2020, 1:22pm UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/6 "2020-05-08T13:22:06Z")

</div>

I think the three.js MeshStandardMaterial was originally based, at least partially, on this paper.

> **[course\_notes\_moving\_frostbite\_to\_pbr\_v32.pdf](https://seblagarde.files.wordpress.com/2015/07/course_notes_moving_frostbite_to_pbr_v32.pdf)**
>
> 52.11 MB

I could be wrong about that, but in any case this PDF is a good overview of the theory.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 8, 2020, 1:36pm UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/7 "2020-05-08T13:36:54Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 9, 2020, 11:02am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/8 "2020-05-09T11:02:37Z")

</div>

In addition to this I have another question: Is the bump-mapping used in three.js a classic height field bump-mapping? I had trouble while researching this.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 9, 2020, 11:11am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/9 "2020-05-09T11:11:13Z")

</div>

The technique is based on this paper:

> **[mm\_sfgrad\_bump.pdf](https://jbit.net/~sparky/sfgrad_bump/mm_sfgrad_bump.pdf)**
>
> 13.66 MB

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 9, 2020, 11:19am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/10 "2020-05-09T11:19:00Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![sciecode](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sciecode/32/5623_2.png) [@sciecode](https://discourse.threejs.org/u/sciecode)\
**Post date:** [May 9, 2020, 4:27pm UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/11 "2020-05-09T16:27:30Z")

</div>

Naty Hoffman’s introduction to “Physically Based Shading” course on SIGGRAPH university offers a really good overview of the basic theory in PBR.

[![](https://img.youtube.com/vi/j-A0mwsJRmk/hqdefault.jpg "SIGGRAPH University - Introduction to "Physically Based Shading in Theory and...") ](https://www.youtube.com/watch?v=j-A0mwsJRmk)

I suggest taking a look at it, if you haven’t done it already.

Personally, having visual cues about the subject helped me a lot when learning it, and makes it so that reading papers of related subject doesn’t feel so disconnect. As many papers assumes previous knowledge of some concepts for a clear understanding.

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 9, 2020, 7:26pm UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/12 "2020-05-09T19:26:38Z")

</div>

Okay, I’ll check it out!  
Thank you 🙂

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 13, 2020, 10:53am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/13 "2020-05-13T10:53:24Z")

</div>

As I dont want do open another discussion I have a short additional question: What kind of antialiasing is the default WebGL-Renderer using, if the antialias value is set to true?

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [May 13, 2020, 11:00am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/14 "2020-05-13T11:00:41Z")

</div>

MSAA (multisample anti-aliasing)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 13, 2020, 11:20am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/15 "2020-05-13T11:20:36Z")

</div>

@Kelle Earlier on this day 🙂 [What AA method does antialias = true use?](https://discourse.threejs.org/t/what-aa-method-does-antialias-true-use/15146)

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 13, 2020, 11:27am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/16 "2020-05-13T11:27:19Z")

</div>

Thank you! 🙂

---

<div class="post-metadata">

**Author:** ![Kelle](https://avatars.discourse-cdn.com/v4/letter/k/41988e/32.png) [@Kelle](https://discourse.threejs.org/u/Kelle)\
**Post date:** [May 13, 2020, 11:28am UTC](https://discourse.threejs.org/t/pbr-a-better-understanding-of-the-theory/15014/17 "2020-05-13T11:28:25Z")

</div>

Oh :D, what a coincidence. Thank you 🙂