Oggetto contorno (scala normale + maschera stencil) three.js

Per un po ‘di tempo, ho cercato di capire come fare una struttura di selezione degli oggetti nel mio gioco. (Quindi il giocatore può vedere l’object sopra ogni altra cosa, al passaggio del mouse)

Ecco come dovrebbe apparire il risultato:

inserisci la descrizione dell'immagine qui

La soluzione che vorrei utilizzare è la seguente:

  1. Livello 1: Disegna il modello con ombreggiatura regolare.
  2. Livello 2: Disegna una copia in rosso, ridimensionata lungo le normali usando vertex shader.
  3. Maschera: Disegna un colore piatto nero / bianco del modello per utilizzarlo come maschera stencil per il secondo livello, per hide le parti interne e mostrare il livello 1.

E qui arriva il problema. Non riesco davvero a trovare alcun buon materiale didattico sulle maschere. Posso sottrarre gli interni dalla forma del contorno? Che cosa sto facendo di sbagliato?

Non riesco a capire come impilare i miei passaggi di rendering per far funzionare la maschera. 🙁

Ecco una demo di jsfiddle

renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters) composer = new THREE.EffectComposer(renderer, renderTarget) // composer = new THREE.EffectComposer(renderer) normal = new THREE.RenderPass(scene, camera) outline = new THREE.RenderPass(outScene, camera) mask = new THREE.MaskPass(maskScene, camera) // mask.inverse = true clearMask = new THREE.ClearMaskPass copyPass = new THREE.ShaderPass(THREE.CopyShader) copyPass.renderToScreen = true composer.addPass(normal) composer.addPass(outline) composer.addPass(mask) composer.addPass(clearMask) composer.addPass(copyPass) 

Inoltre non ho idea se usare render target o renderer per la fonte del compositore. 🙁 Dovrei avere il primo passaggio nel compositore? Perché ho bisogno del pass di copia? Tante domande, lo so, ma non ci sono abbastanza risorse per imparare da, ho cercato su google per giorni.

Grazie per qualsiasi consiglio!

Ecco un violino con soluzione di lavoro. Prego. 🙂

http://jsfiddle.net/Eskel/g593q/6/

Aggiornamento con solo due passaggi di rendering (credito a WestLangley): http://jsfiddle.net/Eskel/g593q/9/

I pezzi mancanti erano questi:

 composer.renderTarget1.stencilBuffer = true composer.renderTarget2.stencilBuffer = true outline.clear = false 

Ora penso di aver trovato una soluzione un po ‘più semplice, dalla libreria THREEx. Pre-ridimensiona la mesh in modo da non aver bisogno di uno shader in tempo reale per questo. http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html