Odd Issue with blending [SOLVED]

Questions
1

I am hitting a VERY strange issue with blending that I can not produce via fiddle for some odd reason.

Basically, I have attributes that contain color information. I’m providing the color info to the vertex

precision highp float;
attribute vec4 color;

I have the material set to:

{
premultipliedAlpha: false,
transparent: true
};

I hand the vertex color via varying to the fragment shader:

varying vec4 vertexColor;

When there are not too many attributes the blending works fine where alpha values are 0.0 - 1.0. If I add more attributes suddenly the blending changes to something weird where the alpha values operate between 0.0 - 0.1!!!

Any alpha value above 0.1 suddenly is blended in like a 1.0 value!

Again, the only thing I change between tests in my application is number of attributes.

I’ll continue to work on the fiddle example. I’m starting this here just in case someone has seen this blending issue or if they recognize it as a scenario where I’m being completely stupid.

Thanks for any input.

NOTE: I have ABSOLUTELY confirmed the values for the alpha flowing to the shader are indeed correct (using conditionals to alter color based on the value in the alpha component)

2

Yeah, a fiddle would be nice^^. In many cases, the bug is found during the creation of an isolated test case by the OP :+1:

3

This turns out to have been a wondrous case of rubber ducky debugging :slight_smile:

As irritating as it is that my issue was something else, I’m glad to have found it.

My buffers were getting filled with multiple copies of the same geometry. So when the buffer rendered, each instance was rendering several repeats of the same geometry in one location, this gave the illusion the alpha channel was not being respected properly.

Thus cleaning up the buffer down to a single instance as it was supposed to be, cleaned up this issue for me.

For any interested on how I debugged this:

I took my scene, used scene.toJSON() on it and retrieved the materials, objects, and geometries.

I then uploaded that json to myjson.com using their API:

fetch('https://api.myjson.com/bins', {
  method: 'post',
  body: JSON.stringify(json),
  headers: {
    "Content-Type": "application/json; charset=utf-8",
  }
}).then(function(response) {
  console.log('RESPONSE', response);
  return response.json();
}).then(function(data) {
  console.log('Saved JSON:', data);
});

Then I used this fiddle: https://jsfiddle.net/ubcsawft/2/

Inside the fiddle I worked on matching up my settings to how my project was set up.

You’ll notice in the fiddle I had to manually parse the InstancedBufferGeometry objects as the Three provided parser fails. (It also failed on parsing the Objects)

Upon seeing some of my results, I started looking closer at my buffers and realized the position buffer (which should have been very small) was very large. And thus, my issue was found.

Pretty obscure issue as I’m using Three as a very thin abstraction layer. But this may help someone find a tricky problem possibly :slight_smile:

1 Like