Profilo carattere forma complessa

Question

Dire che ho questo carattere e voglio consentire all'utente di selezionarlo, quindi quando viene selezionato voglio mostrare un contorno attorno ad esso.

il carattere è un object3D con alcune maglie. Ho provato a clonare e impostare un materiale sul retro, ma NON ha funzionato, il problema era che ogni cubo nella forma è stato renderizzato separatamente con il retro, quindi il contorno era sbagliato.

ho bisogno di creare un'altra maglia per il contorno, c'è un modo più semplice?

Answer 1

Cosa @spassvolgel scritto è corretto;

Quello che sospetto deve essere fatto è qualcosa di simile: 1. In primo luogo il fondo ha bisogno di essere reso 2. Poi, uno strato trasparente a parte, il modello di personaggio con un colore piatto, leggermente più grande rispetto all'originale 3. Su un altro livello trasparente il personaggio con il suo materiale/consistenza normale 4.Infine, lo strato di carattere ha bisogno di andare in cima alla strato di contorno e li combinato bisogno di essere messi in bg

basta creare più scene e combinarle con passaggi di rendering sequenziali:

renderer.autoClear = false; 
. . . 

renderer.render(scene, camera); // the entire scene 
renderer.clearDepth(); 
renderer.render(scene2, camera); // just the selected item, larger, in a flat color 
renderer.render(scene3, camera); // the selected item again 

Ecco un violino realizzato con GPU picking, ma potrebbe altrettanto facilmente essere implementato con il più familiare Raycaster:

Fiddle: http://jsfiddle.net/Tcb3z/

three.js.r.66

Answer 2

Una soluzione generica che si applica alle geometrie di qualsiasi complessità potrebbe essere l'applicazione di uno shader di frammenti tramite lo ShaderMaterial class in three.js. Non sei sicuro di quale sia il tuo livello di esperienza, ma se ne hai bisogno, puoi trovare un'introduzione agli shader here.

Un buon esempio in cui si utilizzano gli ombreggiatori per evidenziare le geometrie è here. Nella loro vertex, calcolano il normale per un vertice e un parametro utilizzato per indicare l'intensità di un effetto di incandescenza:

uniform vec3 viewVector; 
uniform float c; 
uniform float p; 
varying float intensity; 
void main() 
{ 
    vec3 vNormal = normalize(normalMatrix * normal); 
    vec3 vNormel = normalize(normalMatrix * viewVector); 
    intensity = pow(c - dot(vNormal, vNormel), p); 

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
} 

Questi parametri vengono passati allo shader frammento dove vengono utilizzati per modificare i valori di colore dei pixel circonda la geometria:

uniform vec3 glowColor; 
varying float intensity; 
void main() 
{ 
    vec3 glow = glowColor * intensity; 
    gl_FragColor = vec4(glow, 1.0); 
} 

Answer 3

non ho ancora trovato la risposta ma voluto dimostrare cosa succede quando creo più mesh, e mettere un'altra maglia dietro ciascuno di questi maglie con

side: THREE.BackSide 

http://jsfiddle.net/GwS9c/8/

come potete vedere, non è l'effetto desiderato. Vorrei un contorno pulito dietro TUTTE le tre mesh, che non si sovrappongono. Il mio livello di shaders di programmazione è davvero inesistente, ma sulla maggior parte delle risorse online le persone dicono di usare questo approccio per la clonazione delle mesh.

Answer 4

Ho trovato qualcosa su gamedev.stackexchange.com/ che potrebbe essere utile. Parlano di un buffer stencil. Non ho idea su come applicare questo per Three.js però ..

https://gamedev.stackexchange.com/questions/59361/opengl-get-the-outline-of-multiple-overlapping-objects