Skip to content

Transparent rendering#975

Merged
elalish merged 24 commits intomasterfrom
gltfAlpha
Feb 3, 2020
Merged

Transparent rendering#975
elalish merged 24 commits intomasterfrom
gltfAlpha

Conversation

@elalish
Copy link
Contributor

@elalish elalish commented Jan 29, 2020

Fixes #874
Fixes #492
Fixes #182

This a possible alternative approach to #949, to avoid a second renderer, as I'm concerned about how that will complicate some upcoming performance improvement work. This pulls ideas from #949 (thank you @nicolas-daures!), but makes the singleton renderer transparent and instead fixes #381 directly.

This also does away with our background-color attribute, since with a properly transparent rendering context, the standard CSS background-color property works as expected. Also, is it just me or does this render faster?

@elalish elalish requested a review from cdata January 29, 2020 23:41
@elalish elalish self-assigned this Jan 29, 2020
@elalish elalish changed the base branch from master to r113 January 30, 2020 18:30
@elalish elalish changed the base branch from r113 to master January 31, 2020 22:32
@googlebot
Copy link

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and then comment @googlebot I fixed it.. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

@elalish elalish marked this pull request as ready for review January 31, 2020 22:33
@elalish
Copy link
Contributor Author

elalish commented Jan 31, 2020

@googlebot I fixed it.

@googlebot
Copy link

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

Copy link
Contributor

@cdata cdata left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very exciting 🙏 I hope we get to keep it

// via onBeforeCompile.toString(), so these two functions do the same thing
// but look different in order to force a proper recompile.
const oldOnBeforeCompile = material.onBeforeCompile;
clone.onBeforeCompile = (material as any).isGLTFSpecularGlossinessMaterial ?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible for both material types to use the the SpecularGlossiness path here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alas no; I tried to describe it in the comment. If the toString() version of onBeforeCompile is the same for the two materials, the second one will not be compiled and will instead try to use the first, which does not work. Took me all morning to diagnose this bug...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yah, that's a really funky way to test for shader equivalence.

It would be nice if there was a more hygienic / extensible API for patching Three.js materials. Oh well.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, though I'm just glad there's a way to patch Three.js materials at all. The onBeforeCompile method hasn't been around that long.


const widthDPR = width * dpr;
const heightDPR = height * dpr;
context.clearRect(0, 0, widthDPR, heightDPR);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

// This little hack ignores alpha for opaque materials, in order to comply
// with the glTF spec.
if (!clone.alphaTest && !clone.transparent) {
clone.alphaTest = -0.5;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does -0.5 have meaningful significance?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, any value less than zero has the same behavior.

@elalish elalish merged commit 2b3e8f4 into master Feb 3, 2020
@elalish elalish deleted the gltfAlpha branch February 3, 2020 16:53
@elalish elalish mentioned this pull request Feb 3, 2020
4 tasks
@koch-crsd
Copy link

@elalish @nicolas-daures
Thanks so much guys 👍 this is a really great solution!
tested and working fine this way for what I need :)

elalish added a commit to elalish/model-viewer that referenced this pull request Feb 4, 2020
 
Transparent rendering (google#975)

* updated three to r113

* fixes after pulling latest three

* fixed extensions

* removing special treatment of specularGlossiness

* further cleanup

* fixed transparent rendering

* pulling example

* removed background-color attribute

* updated tests

* removed background-color from docs

* updated package-lock

* updating package-lock

* addressing feedback

* merging r113

* updated package-lock

* fixed specGloss patching

* fixed specGloss more

* fixing transparency test
@cdata cdata added this to the v0.9.0 milestone Feb 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

4 participants