JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/MarchingCubes.js"></script>
<script src="http://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="http://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script>
TextureMaskShader = {
uniforms: {
"textureA": { type: "t", value: null },
"textureB": { type: "t", value: null }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"uniform float opacity;",
"uniform sampler2D textureA;",
"uniform sampler2D textureB;",
"varying vec2 vUv;",
"void main() {",
"vec4 texelA = texture2D( textureA, vUv );",
"vec4 texelB = texture2D( textureB, vUv );",
"vec4 background = vec4(1.0, 1.0, 1.0, 0.0);",
// just textureA
//"gl_FragColor = texelA;",
// just textureB
//"gl_FragColor = texelB;",
// textureB masking textureA
"gl_FragColor = mix( background, texelA, texelB.r );",
...
CSS
body {
margin: 0px;
background-color: #444;
overflow: hidden;
}
.info {
position: absolute;
top:10px;
left:10px;
color: #fff;
}
JavaScript
var camera, renderer, composer;
var box, object, light;
var sceneMain, sceneMask, rtMain, rtMask;
var shaderMask;
init();
animate();
function init() {
// setup
renderer = new THREE.WebGLRenderer( { premultipliedAlpha:false, alpha:true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000, 0.0);
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
// main scene
sceneMain = new THREE.Scene();
sceneMain.fog = new THREE.Fog( 0x000000, 1, 1000 );
// add blobs (MarchingCubes)
object = new Blob(sceneMain);
object.init();
sceneMain.add( object );
// add lights
sceneMain.add( new THREE.AmbientLight( 0x222222 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
sceneMain.add( light );
// mask scene with one red cube
sceneMask = new THREE.Scene();
box = new THREE.Mesh(new THREE.BoxGeometry(250, 250, 250), new THREE.MeshBasicMaterial({ color:0xff0000 }));
sceneMask.add(box);
// texture mask shader
shaderMask = new THREE.ShaderPass( TextureMaskShader );
shaderMask.renderToScreen = true;
// a render target for each scene
rtMain = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter } );
rtMask = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter } );
// pass render targets as textures to texture mask shader
shaderMask.uniforms[ "textureA" ].value = rtMain;
shaderMask.uniforms[ "textureB" ].value = rtMask;
// custom effect
composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget(...