three.js - Transparent object behind outline object -
i have outlined object.
behind want draw transparent object. problem outline blends transparent object.
how can draw outline doesn't blended?
# plane geo1 = new three.planegeometry 500, 500 mat1 = new three.meshphongmaterial({color: 0x00ff00, transparent: true, opacity: 0.5}) plane = new three.mesh geo1, mat1 plane.position.z = -100 scene.add plane # shaded model torusknotgeo = new three.torusknotgeometry 50, 10, 128, 16 phongmat2 = new three.meshphongmaterial 0xffffff torusknot = new three.mesh torusknotgeo, phongmat2 scene.add torusknot # outline uniforms = offset: type: "f" value: 2 shader = shader['outline'] shadermat = new three.shadermaterial uniforms: uniforms, vertexshader: shader.vertex_shader, fragmentshader: shader.fragment_shader, torusknotoutline = new three.mesh torusknotgeo, shadermat torusknotoutline.material.depthwrite = false outscene.add torusknotoutline
jsfiddle (based on https://stackoverflow.com/a/23198184/2785396)
i cannot comment (not enough rep), post answer.
you took example original js fiddle: http://jsfiddle.net/eskel/g593q/5/ , removed composer. composer ads few operations in rendering process.
composer.addpass normal composer.addpass mask composer.addpass outline composer.addpass clearmask composer.addpass copypass
- first renders object scene, outline scene , mask scene.
- then makes mask onto renders outline, , clears mask. part creates outline , important step make. why? because if take code , add object, see outline obscured both objects. happens regardles if second object in front or in of scene, sure don't want happen. example: http://jsfiddle.net/adrian_moisa/84470k4n/1/
- lastly copies outline over rendered scene.
my advice fork original example , keep composer intact. in case don't work, remember include following scripts original example. if of these go missing in action have broken composer, means page won't render.
- shaderpass.js
- renderpass.js
- maskpass.js
- effectcomposer.js
- copyshader.js
- additiveblendshader.js
Comments
Post a Comment