Vertex based alpha blending?

[Steffen]

Hi,

I don't know how to describe or if it's the right term in the title....

I'm importing a kinematic model/hierarchy from blender (mesh with multiple submeshes) and have to change the transparency of the whole mesh. My problem is that the meshes are partially overlapping.

Here is a simple playground: http://www.babylonjs-playground.com/#NL9YJ#1

I think it's self-explanatory.  Is it possible to make Babylon use the distance vertex-camera for alpha blending and not the distance center-camera? 

[Wingnut]

Hiya @Steffen.  I am not qualified to answer this, but I can bump a topic like any pro bumper. 

Have you browsed these two documents:

http://doc.babylonjs.com/tutorials/How_to_use_Blend_Modes

http://doc.babylonjs.com/tutorials/Transparency_and_How_Meshes_Are_Rendered

Although the author(s) of these two documents did a great job, the subject is still "deep". 

Sorry it has taken so long to get a response, and my answer is not a good one, but perhaps you can find something useful in those documents.  I suggest 2 days, 1 test playground/scene, and 4 pots of coffee.    I might do it myself... so I can learn how it all works/looks.

[Steffen]

Hi @Wingnut

thanks for the links. I did not know the "how to use blend modes". Although very helpful, it did not solve my problem. I also played with some index variations.

At the moment, my workaround is to make the inner cylinder solid and only the outer one semi transparent. That works of course, but thats actually not the result my client asked for.

So if there is somebody out there, I appreciate your answers

Btw, I am porting some functions from an Threejs app, and there it works. Do they use another strategy?

[adam]

Breaking up the cylinder into three pieces might work for you:

http://www.babylonjs-playground.com/#NL9YJ#3

[Wingnut]

3 hours ago, Steffen said:

Btw, I am porting some functions from an Threejs app, and there it works. Do they use another strategy?

Hi again, guys.  I'm pinging @Deltakosh for that question.  He might know something magical. (I've seen him do wizard-like things, often) 

Seems to me... this is a webGL/openGL issue, and if it can be done in 3JS, then the same "option" can be done with BJS.  Speculation, on my part, though.  Perhaps, BJS had to do a give'n'take, giving-up one feature/option, in order to gain another.  More speculation.

Overlapping mesh, on combination-models (multi-mesh models)... and the whole model needs to go transparent or not (cloaked ship). Yep.  I could see a definite need for that to happen... and properly.  Long ago, I was a TinkerToys junkie, and if that tech is to continue (via assembling BJS primitives into cool toys)... we need cylinders inside-of/through other cylinders. 

[adam]

4 hours ago, Steffen said:

I am porting some functions from an Threejs app,

It might help if you showed us an example of this working in 3JS.

[GameMonetize]

I'm not a wizard unfortunately. I need to see original code. But you are right. If it works in 3js, there is a way to make it work with bjs

[adam]

@Steffen please keep us updated.  I could benefit from this if you find a better solution than what I suggested.  Thanks

[Steffen]

@adam sry for my late late answer. Unfortunately the alpha problematic was set some places back on my priority list. There are some major things I have to implement first (such as parallel kinematics like delta robots). But I have a note here, as soon as there is some time, I will look after the code.

Your workaround isn't what I want, so I'm still looking for a better solution - but less focused at the moment

I'll keep you updated.

[NasimiAsl]

@Deltakosh  hi 

Who we can get or set Alpha priority List any List or Array we have in BABYLON JS for that

i know we can change that runtime with 

gl.blendEquation( gl["FUNC_ADD"] )

gl.blendFunc( sourceBlendType  ,  destinationBlendType , blendEquation );

gl.enable(gl.BLEND);

gl.depthMask(false);

you can see parameter value from thire

https://msdn.microsoft.com/en-us/library/dn302371(v=vs.85).aspx

we just need list of alpha Object (for find gl Render Object ) and refresh that when we change camera position

 

http://delphic.me.uk/webglalpha.html

Demo : http://delphic.me.uk/Fury/demos/AlphaTest/

 

[Steffen]

@adam @Deltakosh 
I've looked into the "old" threejs sample and there the transparency works better but still not perfect. I've attached a picture. It is like there is no yellow behind the grey cylinder. Not perfect - but better.

I have to mention that a lib called "Ros3D" is used to load URDF models.

Here is the code for setting the new material to the whole mesh:
 

/* Urdf.js (ros3djs pckg) */
ROS3D.Urdf.prototype.setHomed = function(isHomed) {
  // [...]
  this.traverse(function(obj) {
     if(obj.material && obj.originalMaterial) {
       var newMat = obj.originalMaterial.clone();
       newMat.transparent = true;
       newMat.opacity = that.errorOpacity; 
       obj.material = newMat;  
       height = Math.max(height, obj.matrixWorld.elements[14]);
     } 
  });
};


// Maybe important (on the last line in the "Urdf.js" file of the ROS3D pckg)
ROS3D.Urdf.prototype.__proto__ = THREE.Object3D.prototype;

/* App.js (own) */
// how setHomed() is called:
robot.setHomed(msg.isHomed);

/* Ros3D.js (ros3djs pckg) */
// creates a THREE material based on given RGBA values
ROS3D.makeColorMaterial = function(r, g, b, a) {
  var color = new THREE.Color();
  color.setRGB(r, g, b);
  if (a <= 0.99) {
    return new THREE.MeshBasicMaterial({
      color : color.getHex(),
      opacity : a + 0.1,
      transparent : true,
      depthWrite : true,
      blendSrc : THREE.SrcAlphaFactor,
      blendDst : THREE.OneMinusSrcAlphaFactor,
      blendEquation : THREE.ReverseSubtractEquation,
      blending : THREE.NormalBlending
    });
  } else {
    return new THREE.MeshPhongMaterial({
      color : color.getHex(),
      opacity : a,
      blending : THREE.NormalBlending
    });
  }
};

 

[Sebavan]

Hello,

First, here is a good summary of the alpha techniques: https://www.sjbaker.org/steve/omniv/alpha_sorting.html (the page does not look good but the explanation are nice).

In BJS the current default is no depth write and back to front sorting for the transparent mesh.

In your threejs exemple you basically render to depth preventing several layer of transparency ( depthWrite : true, ) and as the grey part seems to be rendered first it explains why you are not seeing the yellow part behind. Disabling depth will end up being like BJS, rendering in the reverse order will make the grey part looking transparent but not the yellow and so on... None of the solutions are good appart from splitting your mesh here.

It is not an engine issue, this is a common 3d issue where as long as the sorting is not a per pixel one you all end up in this cases.

We could add a parameter to configure wether or not disabling depth write on the transparent pass but that would not help with your case.

[NasimiAsl]