nicoptere/mixer

## mixer
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>MIXER</title>
    <style>
        head, body{
            width:100%;
            height:100%;
            overflow: hidden;
            top:0;
            left:0;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>

    <script id="mix_vs" type="x-shader/x-vertex">// <![CDATA[
    varying vec2 uvs;
    void main() {
        uvs = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
    // ]]></script>

    <script id="mix_fs" type="x-shader/x-fragment">// <![CDATA[
    uniform sampler2D texture0;
    uniform sampler2D texture1;
    uniform sampler2D texture2;

    varying vec2 uvs;
    void main(){

        //sample les 3 textures
        vec4 tex0 = texture2D( texture0, uvs );
        vec4 tex1 = texture2D( texture1, uvs );
        vec4 tex2 = texture2D( texture2, uvs );

        //3 valeurs de blend vite fait
        float v0 = abs( sin( uvs.x * 10. ) );
        float v1 = abs( cos( uvs.y * 10. ) );
        float v2 = v0 * v1;

        //composite final
        gl_FragColor = mix( tex0, tex1, v0 ) + mix( tex0, tex2, v1 ) + mix( tex1, tex2, v2 );

    }
    // ]]></script>


    <script src="vendor/three.min.js"></script>

    <script>

        var scene, camera, renderer;
        var mesh0, mesh1, mesh2, rtt0, rtt1, rtt2;
        var renderShader, orthoCamera, rtt, mesh;
        var canvas;

        function init(){

            var w = window.innerWidth;
            var h = window.innerHeight;

            //une scène + caméra normale
            scene = new THREE.Scene();
            renderer = new THREE.WebGLRenderer();
            renderer.setSize( w,h );
            document.body.appendChild(renderer.domElement);

            //la scene 'normale'
            camera = new THREE.PerspectiveCamera(60,w/h, 1,10000 );
            camera.position.z = 250;

            //des meshes normaux
            mesh0 = new THREE.Mesh( new THREE.IcosahedronGeometry( 50, 2 ), new THREE.MeshBasicMaterial({color:0xFF0000}) );
            mesh1 = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial({color:0xFFCC00}) );
            mesh2 = new THREE.Mesh( new THREE.CylinderGeometry( 50,0, 100 ), new THREE.MeshBasicMaterial({color:0x0066CC}) );

            //options des textures cibles
            var options = {
                minFilter: THREE.LinearFilter,
                magFilter: THREE.LinearFilter,
                format: THREE.RGBAFormat
            };

            rtt0 = new THREE.WebGLRenderTarget( w, h, options );
            rtt1 = new THREE.WebGLRenderTarget( w, h, options );
            rtt2 = new THREE.WebGLRenderTarget( w, h, options );


            //le post processing:

            //shader pour le compositing
            var mix_vs = document.getElementById("mix_vs").text;
            var mix_fs = document.getElementById("mix_fs").text;
            renderShader = new THREE.ShaderMaterial( {
                uniforms: {
                    texture0: { type: "t", value: null },
                    texture1: { type: "t", value: null },
                    texture2: { type: "t", value: null },
                    mix: { type: "t", value: null }

                },
                vertexShader: mix_vs,
                fragmentShader: mix_fs,
                transparent: true
            } );

            //caméra ortho
            orthoCamera = new THREE.OrthographicCamera(-1,1,1,-1,1/Math.pow( 2, 53 ),1 );

            //l'objet rendu à l'écran, un quad tout con
            var geom = new THREE.BufferGeometry();
            geom.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array([   -1,-1,0, 1,-1,0, 1,1,0, -1,-1, 0, 1, 1, 0, -1,1,0 ]), 3 ) );
            geom.addAttribute( 'uv', new THREE.BufferAttribute( new Float32Array([   0,1, 1,1, 1,0,     0,1, 1,0, 0,0 ]), 2 ) );
            mesh = new THREE.Mesh( geom, renderShader );


            //GO !
            window.addEventListener( "resize", onResize );
            onResize();
            update();

        }


        //update loop
        function update()
        {
            requestAnimationFrame(update);

            var t = Date.now() * 0.0001;
            var p0  = Math.sin( Math.PI * t ) * 50;
            var s1  = 1.1 - Math.abs( Math.sin( Math.PI * t ) );
            var s2  = .1 + Math.abs( Math.sin( Math.PI * t * 2. ) );

            //rend les textures
            mesh0.position.x = p0;
            scene.add( mesh0 );
            renderer.render( scene, camera, rtt0, true );
            scene.remove( mesh0 );

            mesh1.rotation.x = Math.PI * t;
            mesh1.rotation.y = -Math.PI * t;
            mesh1.scale.set(s1,s1,s1);
            scene.add( mesh1 );
            renderer.render( scene, camera, rtt1, true );
            scene.remove( mesh1 );

            mesh2.rotation.z = Math.PI * t * 2.;
            mesh2.scale.set(s2,s2,s2);
            scene.add( mesh2 );
            renderer.render( scene, camera, rtt2, true );
            scene.remove( mesh2 );


            //2 use the result of the swap as the new position for the particles' renderer
            renderShader.uniforms.texture0.value = rtt0;
            renderShader.uniforms.texture1.value = rtt1;
            renderShader.uniforms.texture2.value = rtt2;


            scene.add( mesh );
            renderer.render( scene, orthoCamera );
            scene.remove( mesh );

        }

        function onResize()
        {
            var w = window.innerWidth;
            var h = window.innerHeight;
            renderer.setSize(w,h);
            camera.aspect = w/h;
            //updater les textures...
            camera.updateProjectionMatrix();
        }

        init();

    </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>MIXER</title>
	<style>
	head, body{
	width:100%;
	height:100%;
	overflow: hidden;
	top:0;
	left:0;
	margin:0;
	padding:0;
	}
	</style>
	</head>
	<body>

	<script id="mix_vs" type="x-shader/x-vertex">// <![CDATA[
	varying vec2 uvs;
	void main() {
	uvs = uv;
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
	// ]]></script>

	<script id="mix_fs" type="x-shader/x-fragment">// <![CDATA[
	uniform sampler2D texture0;
	uniform sampler2D texture1;
	uniform sampler2D texture2;

	varying vec2 uvs;
	void main(){

	//sample les 3 textures
	vec4 tex0 = texture2D( texture0, uvs );
	vec4 tex1 = texture2D( texture1, uvs );
	vec4 tex2 = texture2D( texture2, uvs );

	//3 valeurs de blend vite fait
	float v0 = abs( sin( uvs.x * 10. ) );
	float v1 = abs( cos( uvs.y * 10. ) );
	float v2 = v0 * v1;

	//composite final
	gl_FragColor = mix( tex0, tex1, v0 ) + mix( tex0, tex2, v1 ) + mix( tex1, tex2, v2 );

	}
	// ]]></script>


	<script src="vendor/three.min.js"></script>

	<script>

	var scene, camera, renderer;
	var mesh0, mesh1, mesh2, rtt0, rtt1, rtt2;
	var renderShader, orthoCamera, rtt, mesh;
	var canvas;

	function init(){

	var w = window.innerWidth;
	var h = window.innerHeight;

	//une scène + caméra normale
	scene = new THREE.Scene();
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( w,h );
	document.body.appendChild(renderer.domElement);

	//la scene 'normale'
	camera = new THREE.PerspectiveCamera(60,w/h, 1,10000 );
	camera.position.z = 250;

	//des meshes normaux
	mesh0 = new THREE.Mesh( new THREE.IcosahedronGeometry( 50, 2 ), new THREE.MeshBasicMaterial({color:0xFF0000}) );
	mesh1 = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial({color:0xFFCC00}) );
	mesh2 = new THREE.Mesh( new THREE.CylinderGeometry( 50,0, 100 ), new THREE.MeshBasicMaterial({color:0x0066CC}) );

	//options des textures cibles
	var options = {
	minFilter: THREE.LinearFilter,
	magFilter: THREE.LinearFilter,
	format: THREE.RGBAFormat
	};

	rtt0 = new THREE.WebGLRenderTarget( w, h, options );
	rtt1 = new THREE.WebGLRenderTarget( w, h, options );
	rtt2 = new THREE.WebGLRenderTarget( w, h, options );


	//le post processing:

	//shader pour le compositing
	var mix_vs = document.getElementById("mix_vs").text;
	var mix_fs = document.getElementById("mix_fs").text;
	renderShader = new THREE.ShaderMaterial( {
	uniforms: {
	texture0: { type: "t", value: null },
	texture1: { type: "t", value: null },
	texture2: { type: "t", value: null },
	mix: { type: "t", value: null }

	},
	vertexShader: mix_vs,
	fragmentShader: mix_fs,
	transparent: true
	} );

	//caméra ortho
	orthoCamera = new THREE.OrthographicCamera(-1,1,1,-1,1/Math.pow( 2, 53 ),1 );

	//l'objet rendu à l'écran, un quad tout con
	var geom = new THREE.BufferGeometry();
	geom.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array([ -1,-1,0, 1,-1,0, 1,1,0, -1,-1, 0, 1, 1, 0, -1,1,0 ]), 3 ) );
	geom.addAttribute( 'uv', new THREE.BufferAttribute( new Float32Array([ 0,1, 1,1, 1,0, 0,1, 1,0, 0,0 ]), 2 ) );
	mesh = new THREE.Mesh( geom, renderShader );


	//GO !
	window.addEventListener( "resize", onResize );
	onResize();
	update();

	}


	//update loop
	function update()
	{
	requestAnimationFrame(update);

	var t = Date.now() * 0.0001;
	var p0 = Math.sin( Math.PI * t ) * 50;
	var s1 = 1.1 - Math.abs( Math.sin( Math.PI * t ) );
	var s2 = .1 + Math.abs( Math.sin( Math.PI * t * 2. ) );

	//rend les textures
	mesh0.position.x = p0;
	scene.add( mesh0 );
	renderer.render( scene, camera, rtt0, true );
	scene.remove( mesh0 );

	mesh1.rotation.x = Math.PI * t;
	mesh1.rotation.y = -Math.PI * t;
	mesh1.scale.set(s1,s1,s1);
	scene.add( mesh1 );
	renderer.render( scene, camera, rtt1, true );
	scene.remove( mesh1 );

	mesh2.rotation.z = Math.PI * t * 2.;
	mesh2.scale.set(s2,s2,s2);
	scene.add( mesh2 );
	renderer.render( scene, camera, rtt2, true );
	scene.remove( mesh2 );


	//2 use the result of the swap as the new position for the particles' renderer
	renderShader.uniforms.texture0.value = rtt0;
	renderShader.uniforms.texture1.value = rtt1;
	renderShader.uniforms.texture2.value = rtt2;


	scene.add( mesh );
	renderer.render( scene, orthoCamera );
	scene.remove( mesh );

	}

	function onResize()
	{
	var w = window.innerWidth;
	var h = window.innerHeight;
	renderer.setSize(w,h);
	camera.aspect = w/h;
	//updater les textures...
	camera.updateProjectionMatrix();
	}

	init();

	</script>

	</body>
	</html>