Obiekt obrysu (skala normalna + maska ​​szablonu) three.js

Question

Od jakiegoś czasu staram się dowiedzieć, jak zrobić zarys zaznaczania obiektów w mojej grze. (Tak więc gracz może zobaczyć obiekt nad wszystko inne, na myszy-over)

ten sposób wynik powinien wyglądać:

Rozwiązanie Chciałbym użyć idzie tak:

1. Warstwa 1: Narysuj model w regularnym cieniowaniu.
2. Warstwa 2: Narysuj kopię w kolorze czerwonym, przeskalowaną wzdłuż normalnych za pomocą narzędzia do cieniowania werteksów.
3. Mask: Narysuj czarny/biały płaski kolor modelu, aby użyć go jako maska ​​wzornik dla drugiej warstwy, aby ukryć wnętrze i pokazać warstwę 1.

I tu pojawia się problem. Nie mogę znaleźć żadnych dobrych materiałów edukacyjnych na temat masek. Czy mogę odjąć wnętrze od kształtu obrysu? Co ja robię źle?

Nie mogę wymyślić, jak ułożyć moje przejścia do renderowania, aby maska ​​działała. :(

Oto jsfiddle demo

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) 

Także nie mam pojęcia, czy użyć renderowanie cel lub renderujący dla źródła kompozytora. :(Mam mieć pierwszą przepustkę kompozytora w ogóle Dlaczego muszę przekazać kopię? Tak wiele pytań, wiem. Ale tam po prostu nie są wystarczające zasoby, aby dowiedzieć się od, byłem googlowania dni.

Dzięki za wszelkie rady!

Answer 1

Oto a js fiddle z rozwiązaniem roboczym. Nie ma za co. :)

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

Aktualizacja z tylko dwóch renderowanie pasuje (kredyt WestLangley): http://jsfiddle.net/Eskel/g593q/9/

Kawałki brakuje były takie:

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

Answer 2

Teraz myślę Znalazłem nieco prostsze rozwiązanie z biblioteki THREEx. Wstępnie skaluje siatkę, więc nie potrzebujesz do tego shadera w czasie rzeczywistym. http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html