Steffen

Vertex based alpha blending?

Recommended Posts

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.  :)

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

@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/

 

Share this post


Link to post
Share on other sites

@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
    });
  }
};

 

alpha_old.PNG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.