donmccurdy / three-gltf-viewer

Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
https://gltf-viewer.donmccurdy.com/
MIT License
2.13k stars 537 forks source link

Nice, and a suggestion on alpha cutouts #268

Closed erich666 closed 3 years ago

erich666 commented 3 years ago

This viewer works fairly well. It does have a problem with cutout images, evidently turning off the z-buffer when these are rendered. I recommend a "clamp" shader that draws to the z-buffer when the alpha test is greater than say 0.01. See https://stackoverflow.com/questions/24302152/opengl-alpha-test-how-to-replace-alphafunc-deprecated/24312267 for example.

Here's what it looks like in the viewer: image

Here's what's expected:

image

Here's the test file set: azalea_test.zip

Model downloaded from here: https://skfb.ly/o7xsS

Best of luck figuring out a solution and keep up the nice work!

donmccurdy commented 3 years ago

Hi Eric! glTF identifies alpha cutout and alpha blending as two distinct "modes", and in this case the material itself selects alpha blending. The z-buffer is turned off only in that case, and won't be disabled where alpha cutout is indicated.

I guess that's probably an issue in the Sketchfab download, but a quick way to diagnose and fix would be:

  1. Open model on https://gltf.report/
  2. Check material settings: Screen Shot 2021-09-27 at 2 43 03 PM
  3. Convert to "MASK" mode in script panel:
    for (const mat of document.getRoot().listMaterials()) {
    if (mat.getAlphaMode() === 'BLEND') {
        mat.setAlphaMode('MASK')
           .setAlphaCutoff(0.01);
    }
    }

Result: Screen Shot 2021-09-27 at 2 47 19 PM

erich666 commented 3 years ago

Ah, thanks, sounds like a Sketchfab bug, or one where I (I maintain Mineways) need to hint them more as to whether the texture is applied as a cutout or as opacity - I'll try reporting it to them.

Yeah, if it's opacity, you then have to deal with the usual z-buffer limitation that rasterization has. Some decade we'll all be ray tracing everything and it won't then matter. :)

donmccurdy commented 3 years ago

I'm almost positive I have seen a model from Sketchfab that did use alpha cutout, so I do think there's a way... no idea what that would be though sorry!