search

oframe / ogl

Minimal WebGL Library
https://oframe.github.io/ogl/examples
3.61k stars 206 forks source link

GLTF Alpha blend material issues #222

Closed monolithMktg closed 1 month ago

monolithMktg commented 1 month ago

I have a Blender exported simple bottle glb model where there is some transparency applied, through the Alpha value in material, and Blend Mode is set to Alpha Blend.

Viewing the gltf in OGL's gltf example and Three's ( GLTF Viewer ) shows a big difference. OGL displays some artifacts on the model whereas Three JS shows the model's transparency correctly. Is this a bug with OGL?

The images for both the viewers as well as the Blender file is attached with this issue. Hopefully, someone will help.

GLB File: https://easyupload.io/3afe54

capture_366 eXkFwE4jnJ

monolithMktg commented 1 month ago

Another example of weird gltf with alpha artifacts. This time, the default Blender cylinder. Works perfectly in Thee JS. What could be the issue? capture_368

monolithMktg commented 1 month ago

I could really use some help here. Is there something wrong or needs to be adjusted in the blendFunc?

With the program's transparent value set to gltf.alphaMode === 'BLEND', this is the blendFunc value: Object { src: 770, dst: 771, srcAlpha: undefined, dstAlpha: undefined }

Does something needs to be manually set for srcAlpha and dstAlpha?

The renderer has no options passed in to it: premultipliedAlpha and alpha both are set to default value of false.

gordonnl commented 1 month ago

If you add depthWrite: false to the Program definition, it will appear as per the threejs example

monolithMktg commented 1 month ago

If you add depthWrite: false to the Program definition, it will appear as per the threejs example

Thank you so much @gordonnl !

Would love to see the greyed out examples also completed so I can learn new things in Webgl through OGL. :D