mask

sghowing outline pass in threejs

by grano

HTML

<script type="x-shader/x-fragment" id="fragment">
        uniform sampler2D baseTexture;
        uniform sampler2D maskTexture;
        varying vec2 vUV;

        void main() {
            float mask = texture2D(maskTexture, vUV).r;
            if (mask > 0.0) {
                gl_FragColor = texture2D(baseTexture, vUV);
            } else {
								gl_FragColor = vec4(1.0,1.0,1.0,1.0);
            }
        }
</script>
<script type="x-shader/x-vertex" id="vertex">
        varying vec2 vUV;
        void main() {
            vUV = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
</script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/OutlinePass.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

// refer from
// https://qiita.com/edo_m18/items/b9dd6ca0cc667064fdc5

var camera, scene, renderer;
var geometry, material, mesh, material2, redCube, blueSphere, maskMaterial;
var scene1, camera1;
var renderTarget, maskTarget;

var shareDepth = function() {
  var scene = new THREE.Scene();
  var camera = new THREE.Camera();

  return function(renderer, renderTargetTo, renderTargetFrom) {
    // to force setup RT1, not for rendering.
    //            renderer.render(scene, camera, renderTargetFrom);
renderer.setRenderTarget(renderTargetFrom);
renderer.render(scene, camera)
renderer.setRenderTarget(null);

    // to force setup RT2, not for rendering.
    //renderer.render(scene, camera, renderTarget);

renderer.setRenderTarget(renderTargetTo);
renderer.render(scene, camera)
renderer.setRenderTarget(null);


            var _gl = renderer.getContext();
             var framebuffer = renderer.properties.get(renderTargetTo).__webglFramebuffer;
//             var framebuffer = renderTargetTo.texture;
            var renderbufferShareFrom = renderer.properties.get(renderTargetFrom).__webglDepthbuffer;
            console.log('renderbufferShareFrom',renderbufferShareFrom)
//				    var renderbufferShareFrom = renderTargetFrom.depthTexture;
//    var renderbufferShareFrom = renderTargetFrom.__webglDepthbuffer;
             _gl.bindFramebuffer(_gl.FRAMEBUFFER, framebuffer);
             _gl.bindRenderbuffer(_gl.RENDERBUFFER, renderbufferShareFrom);
//             console.log('_gl.RENDERBUFFER',_gl.RENDERBUFFER)
//          console.log('framebuffer',framebuffer)
//                    console.log('renderbufferShareFrom',renderbufferShareFrom)


            _gl.framebufferRenderbuffer(
                _gl.FRAMEBUFFER, 
                _gl.DEPTH_ATTACHMENT,
                _gl.RENDERBUFFER,
                renderbufferShareFrom
            );
            console.log('_gl.DEPTH_ATTACHMENT', _gl.DEPTH_ATTACHMENT)


             _gl.bindFramebuffer(_gl.FRAMEBUFFER, null);
     ...