Threejs, using ShaderMaterial to fake a hole in geometries

Question

In Release 53 of Three.js I could fake a hole in a geometry with another geometry using a shader material with

vertex:void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

and

fragment:void main() {
    gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0); //alpha is zero
}

I could peep through the 'hole' and saw objects behind. Since release 54 I just see the inner object white, I can't peep through anymore. How can I get it work again?

my complete sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - geometry - cube</title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-color: #DDFFDD;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="../build/old/three_53.js"></script>
    <script src="../build/old/controls/TrackballControls_53.js"></script>

    <script>

        var camera, scene, renderer, controls, pointLight;

        init();
        animate();

        function init() {

            renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
            //renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.sortObjects = false;
            document.body.appendChild( renderer.domElement );

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 400;


            controls = new THREE.TrackballControls( camera );
            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            scene = new THREE.Scene();

            scene.add( new THREE.AmbientLight( 0x505050 ) );

            pointLight = new THREE.PointLight(0xFFFFFF, 0.9);
            scene.add(pointLight);


            var mainGroup = new THREE.Object3D();

            var geometry = new THREE.CubeGeometry( 100, 100, 10 );
            var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xaaaaaa } ) );
            //mesh.renderOrder = 2;

            var geometry2 = new THREE.CubeGeometry( 50, 50, 11 );

            var material2 = new THREE.ShaderMaterial({vertexShader:'void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}', fragmentShader:'void main() { gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0);}'});

            var innerGroup = new THREE.Object3D();
            var mesh2 = new THREE.Mesh( geometry2, material2 );
            //mesh2.renderOrder = 1;
            mainGroup.add( mesh );

            innerGroup.add(mesh2);
            mainGroup.add( innerGroup );
            //

            var geometry3 = new THREE.SphereGeometry( 50);
            var mesh3 = new THREE.Mesh( geometry3, new THREE.MeshLambertMaterial( { color: 0x00ff00 } ) );
            mesh3.position.z = -200;
            //mesh2.renderOrder = 3;
            mainGroup.add( mesh3 );

            scene.add(mainGroup);

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );

            controls.update();
            pointLight.position.set(camera.position.x, camera.position.y, camera.position.z);

            renderer.render( scene, camera );

        }

    </script>

</body>

It only works, if the 'hole-object' with the shader material is in a group.

See [this related answer](http://stackoverflow.com/questions/28869268/three-js-transparent-object-occlusion/28869802#28869802). — WestLangley, Aug 21 '15 at 09:53

score 0 · Answer 1 · answered Aug 21 '15 at 06:41

If this worked before it's merely by accident. But you can, in 71, get this to work if you use renderOrder:

holeObj.renderOrder = 1;
bgObj.renderOrder = 2;

Now, if holeObj is in front of bgObj then in normal cases you will see through the bgObj. This is because holeObj will still write to the Z-buffer, when it draws its transparent pixels. The bgObj will be masked from that location. But this will only work for a particular view direction without some careful management of the sorting.

renderOrder doesn't work, I figured out, that it worked til release 53, since 54 something is different, I appended my sample in my question — Fuxer, Aug 28 '15 at 14:47

Threejs, using ShaderMaterial to fake a hole in geometries

1 Answers1