[CLOSED] Implement physically-based renderer

[ngokevin]

Issue by jcarpenter Friday Sep 04, 2015 at 17:27 GMT Originally opened as https://github.com/aframevr/aframe-core/issues/73

---

Enables developer to specify the visual (eg lighting and material) properties of their scene using a physically-based renderer (PBR).

[ngokevin]

Comment by nickdesaulniers Friday Sep 04, 2015 at 17:34 GMT

---

:+1: :yellow_heart: :slot_machine: :moneybag: :heavy_dollar_sign:

[ngokevin]

Comment by dmarcos Friday Sep 04, 2015 at 17:41 GMT

---

Linking to current work on three.js: https://github.com/mrdoob/three.js/issues/5847

[ngokevin]

Comment by kearwood Friday Sep 04, 2015 at 21:12 GMT

---

The implementation of the shader in ThreeJS is made more complicated than necessary due to the lack of textureCubeLod in our WebGL implementation. Perhaps the selection of the workaround and compromises it brings is adding friction to landing Physically Based lighting in ThreeJS.

For Gecko, we have a bug (with a patch) to enable textureCubeLod in WebGL: https://bugzilla.mozilla.org/show_bug.cgi?id=1111689

This has not been landed in m-c yet, although the patch was r+'ed several months ago. Last update was on July 7th, with an intent to land.

[ngokevin]

Comment by kearwood Friday Sep 04, 2015 at 21:33 GMT

---

We won't need all of the functionality in bhouston's shader, such as anisotropic specular, at this stage of vr-markup. As a placeholder until the final shader is ready in ThreeJS, we could use a simpler shader such as the one in this demo:

http://www.alexandre-pestana.com/webgl/PBRViewer.html

[ngokevin]

Comment by dmarcos Tuesday Sep 08, 2015 at 06:47 GMT

---

Implemented basic PBR approach based on the example provided by @kearwood

[ngokevin]

Comment by dmarcos Tuesday Sep 08, 2015 at 16:33 GMT

---

Outstanding issues.

1. How to properly expose the reflection cubemaps to the user. What’s a sensible default? falling back to black as you mentioned?
2. Lights. The light position is hard coded. Is it fair to include a default light in the scene? Where should it be positioned? Camera location? How would this work with multiple lights?
3. Perf. How can we give a boost to the current shader to make sure is as fast as it can be 4 Transparency: How do we make transparent stuff? Glass?

[ngokevin]

Comment by dmarcos Tuesday Sep 08, 2015 at 16:36 GMT

---

For anyone with shaders mad skills this is where our shader lives at: https://github.com/MozVR/vr-markup/blob/dev/src/shaders/pbr.js

[ngokevin]

Comment by jcarpenter Friday Sep 11, 2015 at 16:45 GMT

---

The implementation plan, per discussions between @kearwood and @dmarcos:

1. Make it work — end of september
2. Draw front to back — end of september, if just a flag to flip
3. Switch to Deferred Lighting — End of Q4, approx.
4. Do batching — Q1 2016

Per @kearwood:

That order increases in complexity. #2 onwards reduces the overhead that would differentiate performance of Blinn-Phong from PBR. ThreeJS has most of this done already.

I’d recommend we stay with #1 for our current milestone / until end of september

If #2 is already in ThreeJS (very likely), we can just flip a flag and it will work without changes on our end or PBR specific stuff

3 is already done by ThreeJS, but needs to be updated for PBR. I’d recommend that in our next milestone, perhaps coordinating with the Clara.io guys that may have already done it

4 might not be on the radar for a long time. Would have the greatest effect for mobile.

[ngokevin]

Comment by ngokevin Tuesday Oct 27, 2015 at 18:18 GMT

---

Couple weeks ago, three.js landed their MeshPhysicalMaterial on dev. I'm working on getting rid of our custom PBR shader and lighting system and just use three's.

Check it out in action: https://github.com/mrdoob/three.js/blob/master/examples/webgl_shading_physical.html

[ngokevin]

Comment by ngokevin Saturday Oct 31, 2015 at 01:11 GMT

---

using three.js meshphysicalmaterial and lights now