123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- <!DOCTYPE HTML>
- <html lang="en">
- <head>
- <title>three.js webgl - render-to-texture</title>
- <meta charset="utf-8">
- <style type="text/css">
- body {
- color: #ffffff;
- font-family:Monospace;
- font-size:13px;
- text-align:center;
- font-weight: bold;
- background-color: #000000;
- margin: 0px;
- overflow: hidden;
- }
- #info {
- position: absolute;
- top: 0px; width: 100%;
- padding: 5px;
- }
- a {
- color: #ffffff;
- }
- </style>
- </head>
- <body>
- <div id="container"></div>
- <div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> render-to-texture webgl example</div>
- <script type="text/javascript" src="../build/Three.js"></script>
- <script type="text/javascript" src="js/Detector.js"></script>
- <script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
- <script type="text/javascript" src="js/Stats.js"></script>
- <script id="fragment_shader_screen" type="x-shader/x-fragment">
- varying vec2 vUv;
- uniform sampler2D tDiffuse;
- void main(void) {
- //gl_FragColor = texture2D( tDiffuse, vec2( vUv.x, 1.0 - vUv.y ) );
- gl_FragColor = texture2D( tDiffuse, vUv );
- }
- </script>
- <script id="fragment_shader_pass_1" type="x-shader/x-fragment">
- varying vec2 vUv;
- uniform float time;
- void main(void) {
- //gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
- float r = vUv.x;
- if( vUv.y < 0.5 ) r = 0.0;
- float g = vUv.y;
- if( vUv.x < 0.5 ) g = 0.0;
- gl_FragColor = vec4( r, g, time, 1.0 );
- }
- </script>
- <script id="vertex_shader" type="x-shader/x-vertex">
- varying vec2 vUv;
- void main() {
- vUv = uv;
- //gl_Position = vec4( position, 1.0 );
- gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
- }
- </script>
- <script type="text/javascript">
- if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
- var container, stats;
- var cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
- var mouseX = 0, mouseY = 0;
- var windowHalfX = window.innerWidth / 2;
- var windowHalfY = window.innerHeight / 2;
- var rtTexture, material, quad;
- var delta = 0.01;
- init();
- animate();
- function init() {
- container = document.getElementById( 'container' );
- cameraRTT = new THREE.Camera();
- cameraRTT.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
- cameraRTT.position.z = 100;
- camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
- camera.position.z = 100;
- camera.updateMatrix();
- sceneRTT = new THREE.Scene();
- sceneScreen = new THREE.Scene();
- scene = new THREE.Scene();
- var light = new THREE.DirectionalLight( 0xffffff );
- light.position.x = 0;
- light.position.y = 0;
- light.position.z = 1;
- light.position.normalize();
- scene.addLight( light );
- sceneRTT.addLight( light );
- sceneScreen.addLight( light );
- light = new THREE.DirectionalLight( 0xffaaaa, 0.5 );
- light.position.x = -1;
- light.position.y = 0;
- light.position.z = -1;
- light.position.normalize();
- scene.addLight( light );
- rtTexture = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
- material = new THREE.MeshShaderMaterial( {
- uniforms: { time: { type: "f", value: 0.0 } },
- vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
- fragment_shader: document.getElementById( 'fragment_shader_pass_1' ).textContent
- } );
- var materialScreen = new THREE.MeshShaderMaterial( {
- uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture } },
- vertex_shader: document.getElementById( 'vertex_shader' ).textContent,
- fragment_shader: document.getElementById( 'fragment_shader_screen' ).textContent
- } );
- // var mt = new THREE.MeshBasicMaterial( { color:0xffffff, map: ImageUtils.loadTexture( "textures/land_ocean_ice_cloud_2048.jpg" ) } );
- var plane = new Plane( window.innerWidth, window.innerHeight );
- quad = new THREE.Mesh( plane, material );
- quad.position.z = -100;
- sceneRTT.addObject( quad );
- var loader = new THREE.Loader();
- loader.loadBinary( { model: "obj/torus/Torus_bin.js", callback: function( geometry ) { createMesh( geometry, sceneRTT ) } } );
- quad = new THREE.Mesh( plane, materialScreen );
- quad.position.z = -100;
- sceneScreen.addObject( quad );
- var n = 5,
- geometry = new Sphere( 10, 64, 32 ),
- material2 = new THREE.MeshLambertMaterial( { color:0xffffff, map: rtTexture } );
- //material2 = new THREE.MeshBasicMaterial( { color:0xffffff, map: rtTexture } );
- for( var j = 0; j < n; j++ ) {
- for( var i = 0; i < n; i++ ) {
- mesh = new THREE.Mesh( geometry, material2 );
- mesh.position.x = ( i - (n-1)/2 ) * 20;
- mesh.position.y = ( j - (n-1)/2 ) * 20;
- mesh.position.z = 0;
- mesh.rotation.y = 1.57;
- scene.addObject( mesh );
- }
- }
- renderer = new THREE.WebGLRenderer();
- renderer.setSize( window.innerWidth, window.innerHeight );
- renderer.autoClear = false;
- container.appendChild( renderer.domElement );
- stats = new Stats();
- stats.domElement.style.position = 'absolute';
- stats.domElement.style.top = '0px';
- container.appendChild( stats.domElement );
- document.addEventListener( 'mousemove', onDocumentMouseMove, false );
- }
- function createMesh( geometry, xscene ) {
- var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular:0xffaa00, shininess:5 } ),
- mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular:0xff2200, shininess:5 } );
- zmesh1 = new THREE.Mesh( geometry, mat1 );
- zmesh1.position.x = 0;
- zmesh1.position.y = 0;
- zmesh1.position.z = 100;
- zmesh1.scale.x = zmesh1.scale.y = zmesh1.scale.z = 150;
- xscene.addObject( zmesh1 );
- zmesh2 = new THREE.Mesh( geometry, mat2 );
- zmesh2.position.x = 0;
- zmesh2.position.y = 150;
- zmesh2.position.z = 100;
- zmesh2.scale.x = zmesh2.scale.y = zmesh2.scale.z = 75;
- xscene.addObject( zmesh2 );
- }
- function onDocumentMouseMove( event ) {
- mouseX = ( event.clientX - windowHalfX );
- mouseY = ( event.clientY - windowHalfY );
- }
- //
- function animate() {
- requestAnimationFrame( animate );
- render();
- stats.update();
- }
- function render() {
- var time = new Date().getTime() * 0.0015;
- camera.position.x += ( mouseX - camera.position.x ) * .05;
- camera.position.y += ( - mouseY - camera.position.y ) * .05;
- if ( zmesh1 && zmesh2 ) {
- zmesh1.rotation.x = 1.57;
- zmesh1.rotation.z = time;
- zmesh2.rotation.z = 1.57;
- zmesh2.rotation.y = -time;
- }
- if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
- delta *= -1;
- }
- material.uniforms.time.value += delta;
- renderer.clear();
- // Render first scene into texture
- renderer.render( sceneRTT, cameraRTT, rtTexture );
- // Render full screen quad with generated texture
- // (disable depth writing so that it stays in the background)
- renderer.context.depthMask( 0 );
- renderer.render( sceneScreen, cameraRTT );
- //renderer.render( sceneRTT, cameraRTT );
- renderer.context.depthMask( 1 );
- // Render second scene to screen
- // (using first scene as regular texture)
- renderer.render( scene, camera );
- stats.update();
- }
- </script>
- </body>
- </html>
|