hi! im using shapediver very well.
and i almost finish my model but there is a problem.
I’m making a cube with all sides transparent.
so there are some problems because of transparency-ipenGL issues.
The top side is buried in the side rendering and disappears….
have two questions
1,Is it possible to adjust the order of object rendering
2, Is it fundamentally impossible to solve the problem in openGL?
Hello @윤성민
ok as you have already investigated, transparency is always a tricky thing in WebGL.
Could you share your model? Then we can have a closer look what can be done.
You can either share it directly here, or in a PM.
Cheers, Michael
Thanks. @MajorMeerkatThe3rd
I’ll send you a PM
with my grasshopper modeling and a image
It’s the first modeling I’ve ever made, so please understand that it’s messy and messy.
i really want my top plate back…
thank you
Hello @윤성민
we did a few imporvements to the rendering of transparency. Can you try if this works for you now?
Cheers, Michael
i’m really sorry @MajorMeerkatThe3rd
i check it now…
but all the same problems are occured since now…
even in ipad…
Hello @윤성민
Sorry about the late reply, there was some confusion about the status of this task. Thanks for letting us know about it.
The main issue is that the alphaMode of the material needs to be set to BLEND to display the transparent objects correctly. Here are the two solutions you can use to make that possible, only one of them is necessary:
In Grasshopper you can use the glTF 2.0 Display and the glTF 2.0 Material. In this material you can specify the AlphaMode as shown in the screenshot below:
If your plan has Viewer API access (starting from Designer Plus you have API access, please see this page for more information), you can change the material via the Viewer API. In the following code example I show how to that:
// create a callback that is executed whenever the session has been customized
const cb = (node: ITreeNode) => {
node.traverse(c => {
for(let i =0; i < c.data.length; i++) {
if(c.data[i] instanceof GeometryData) {
const geometry = c.data[i] as GeometryData;
// if the opacity is lower than 1, change the alphaMode and update the node
if(geometry.primitive.material.opacity < 1) {
geometry.primitive.material.alphaMode = MATERIAL_ALPHA.BLEND;
geometry.primitive.material.updateVersion();
geometry.updateVersion();
c.updateVersion();
}
}
}
})
}
// assign the callback and call it once to get immediate effects
session.updateCallback = cb;
cb(session.node!);
Let me know if you have any further questions!
Cheers, Michael
thanks for the answers.
we’ll try. if it doesn’t work we will ask again.
thank you
I tried to change the existing grasshopper using glTF Material with the previously suggested method, but the following problem continues to occur.
As you know, if you set the ALPHAMODE of the red plate to OPAQUE in the picture below, you can implement the desired render, but since some of the colors applied to the red plate must be applied with transparency, this problem seems to be solved. .
Additionally, apart from using Designer Plus, our website itself does not support API, so using API was excluded as an option.
If you suggest another way, I’ll look into it.
Thanks
Hello @윤성민 !
Just to preface this, transparency in WebGL (which is the graphics language that is used here) is never an easy topic, so in some cases, the desired outcome may not be possible without changes to the geometry or the model (or in some cases, not at all possible).
The model you shared the screenshot of is a different model than you sent on me via PM. Please post a link to the model on the platform so that we can have a closer look a this issue. You can also send me a PM with a link to that model if you don’t want to share it here in the forum.
Cheers, Michael
@MajorMeerkatThe3rd
Thank you for the reply
Once again, based on what you said, I will proceed once more and if it still does not work, I will send you a gh file by pm.
thank you
