2017-10-19 36 views
0

le problème que j'ai est quand j'ai un maillage où seulement certaines des faces de ce maillage devraient être semi-transparentes tandis que le reste de l'objet devrait être opaque. Quelqu'un at-il une idée sur la façon dont je devrais résoudre ce problème?comment rendre des maillages partiellement semi-transparents?

Voici une description plus détaillée du problème pour plus de clarté: Dans notre visionneuse, nous fusionnons plusieurs maillages si elles ont les mêmes propriétés matérielles.

Ensuite, si l'utilisateur clique sur l'objet fusionné, nous trouvons la surface qui a été cliquée et l'identifiant d'origine de l'objet de ce visage. Ensuite, nous ne mettons en évidence les faces de cet objet qu'avec nos propres shaders personnalisés.

un objet sélectionné
one object selected

Maintenant, la question est que si nous faisons le matériau transparent (si la partie sélectionnée est semi-transparent) puis l'ensemble maille fusionnée est transparente et la partie opaque du modèle est rendu comme transparent.

Vous pouvez voir quelques-unes des questions visuelles dans cette image:

problèmes visuels pour objet partiellement transparent
visual issues for partially transparent object

j'ai eu plusieurs idées sur la façon dont nous pourrions résoudre ce problème, mais ils ont tous augmenterions la mémoire la consommation et de la complexité:

  1. fragments de rejet qui doit être transparent puis créer une nouvelle maille avec les faces sélectionnées et des matériaux transparents.

  2. Créez une copie de tout le maillage fusionné qui est transparent, puis restituez uniquement les faces des objets sélectionnés dans l'objet transparent et supprimez les fragments dans le maillage non transparent d'origine.

Quelqu'un a-t-il eu une meilleure idée?

en utilisant trois r84.

+0

avez-vous '.transparent = true' pour toutes les cases? – prisoner849

+0

toutes les boîtes sont une maille dans cet exemple donc en mettant le matériau à transparent afin que je puisse montrer certaines faces transparentes feront en sorte que toutes les boîtes soient transparentes. – Krigsdal

+1

En utilisant le peeling en profondeur, vous pouvez réaliser ce que vous voulez, mais je pense que trois.js ne l'implémente pas nativement. Votre meilleure stratégie, je pense, est de diviser votre "maillage groupé" en plusieurs mailles et de traiter chaque "boîte" indépendamment. La transparence n'est jamais un problème trivial dans le rendu 3D. –

Répondre

0

Je n'arrive pas à comprendre pourquoi vous ne voulez pas utiliser des maillages séparés, car il serait plus facile de gérer la transparence de chacun d'entre eux.

Mais si vous voulez utiliser une seule géométrie, j'ai trouvé une approche d'utilisation de deux matériaux, .materialIndex et une géométrie dynamique. L'approche repose sur this SO answer.

var materials = [ 
    new THREE.MeshLambertMaterial({ color: "white" }), 
    new THREE.MeshLambertMaterial({ color: "white", transparent: true, opacity: 0.5}) 
]; 

. . . 

var cloneGeom = new THREE.Geometry(); 

var oldBoxIndex = 0; 

function setBoxTransparent(boxIndex) { 
    cloneGeom = mesh.geometry.clone(); 
    setBoxMaterial(oldBoxIndex, 0); 
    setBoxMaterial(boxIndex, 1); 
    mesh.geometry.dispose(); 
    mesh.geometry = cloneGeom; 
    oldBoxIndex = boxIndex; 
} 

function setBoxMaterial(boxIndex, materialIndex) { 
    for (let i = 0; i < 12; i++) { 
    cloneGeom.faces[12 * boxIndex + i].materialIndex = materialIndex; 
    } 
} 

jsfiddle exemple r87.

+0

Parce que les mailles de cases séparées signifieraient qu'au lieu d'avoir 1 appel mesh = 1 draw, vous auriez 50k cases = 50 000 appels draw qui signifieraient un FPS vraiment bas, ou est-ce que je ne comprends pas ce que vous voulez dire? Aussi j'utilise BufferGeometry et customShaders donc je devrais l'adapter pour l'utiliser. Même avec l'utilisation de materialIndex, cela augmenterait le nombre d'appels de rendu puisque chaque groupe est appelé une fois si j'ai bien compris la fonction de rendu, mais ce ne serait que des appels de rendu double pour les objets sélectionnés. Merci de prendre votre temps et de regarder de plus près pour voir si l'utilisation des groupes pourrait fonctionner! – Krigsdal

+0

De rien) Mais vous devriez avoir mentionné plus de 50k cases (ou complexité de la scène) et des shaders personnalisés dans votre question) Au lieu de cela, vous montrez une image avec seulement 256 cases, ce qui n'est pas si important – prisoner849

+1

Oui vous avez raison à ce sujet :) J'ai utilisé les boîtes pour montrer facilement le concept, mais l'application réelle de celui-ci est de grands modèles CAD. – Krigsdal