Share
De forma predeterminada, todo lo que renderiza en Three.js se envía a la pantalla. Después de todo, ¿qué sentido tiene renderizar algo si no puedes verlo? Resulta que hay un punto muy importante: capturar los datos. antes de se envía a la pantalla (y por lo tanto se pierde).
Esto hace que sea mucho más fácil aplicar efectos de posprocesamiento, como corrección de color, cambio de color o desenfoque, y también es útil para efectos de sombreado.
Esta técnica es conocida como renderizado a una textura o renderizado a un buffer de cuadros; Su resultado final se almacena en una textura. que luego puedes renderizar a la pantalla. En esta Sugerencia rápida, le mostraré cómo hacerlo y luego lo guiaré a través de un ejemplo práctico de representación de un cubo en movimiento sobre las superficies de otro cubo en movimiento.
Nota: Este tutorial asume que tienes cierta familiaridad básica con Three.js. Si no, revisa Cómo aprender Three.js para el desarrollo de juegos.
Hay muchos ejemplos sobre cómo hacer esto que tienden a estar integrados en efectos más complicados. Aquí está lo mínimo que necesitas para renderizar algo en una textura en Three.js:
// @author Omar Shehata. 2016. // Estamos cargando la biblioteca Three.js desde el CDN aquí: // http://cdnjs.com/libraries/three.js/ //// Esta es la configuración básica de la escena //// var scene = nuevo THREE.Scene (); var width, height = window.innerWidth, window.innerHeight; var camera = new THREE.PerspectiveCamera (70, width / height, 1, 1000); var renderer = new THREE.WebGLRenderer (); renderer.setSize (ancho, alto); document.body.appendChild (renderer.domElement); //// Aquí es donde creamos nuestro objetivo de renderizado fuera de pantalla //// // Creamos una escena diferente para contener nuestros objetos de búfer var bufferScene = new THREE.Scene (); // Crea la textura que almacenará nuestro resultado var bufferTexture = new THREE.WebGLRenderTarget (window.innerWidth, window.innerHeight, minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter); //// // Agregue todo lo que desee procesar / capturar en bufferScene aquí // //// function render () requestAnimationFrame (render); // Render en nuestra textura fuera de pantalla renderer.render (bufferScene, camera, bufferTexture); // Finalmente, dibuje en la pantalla renderer.render (escena, cámara); render (); // renderizar todo!
Primero tenemos la configuración básica de la escena. Entonces, creamos otra escena., bufferScene; cualquier objeto que agreguemos a esta escena será dibujado a nuestro objetivo fuera de la pantalla en lugar de a la pantalla.
Entonces creamos bufferTexture, que es un WebGLRenderTarget. Esto es lo que Three.js usa para permitirnos renderizar en otra cosa que no sea la pantalla.
Finalmente, le decimos a Three.js que renderice. bufferScene:
renderer.render (bufferScene, camera, bufferTexture);
Esto es como representar una escena normal, excepto que especificamos un tercer argumento: el objetivo de procesamiento.
Así que los pasos son:
Esto es esencialmente lo que tenemos que hacer. Sin embargo, no es muy emocionante, ya que no podemos ver nada. Incluso si has añadido cosas a la bufferScene, todavía no verás nada; esto se debe a que necesita representar de alguna manera la textura que creó en su escena principal. El siguiente es un ejemplo de cómo hacer eso..
Vamos a crear un cubo en una escena, dibujarlo en una textura y luego usar ese Como textura para un nuevo cubo.!
Aquí está nuestra escena básica con un cubo giratorio rojo y un plano azul detrás de él. Aquí no hay nada especial, pero puede consultar el código cambiando a CSS o JS pestañas en la demo.
Puedes bifurcar y editar esto en CodePen.Ahora vamos a tomar eso y convertirlo en una textura. Todo lo que necesitamos hacer es crear un bufferScene Al igual que en la implementación básica anterior, y agregue nuestros objetos a ella.
Si se hace correctamente, no veremos nada, ya que ahora no se muestra nada en la pantalla. En cambio, nuestra escena se renderiza y se guarda en bufferTexture.
bufferTexture No es diferente de cualquier otra textura. Simplemente podemos crear un nuevo objeto y usarlo como nuestra textura:
var boxMaterial = new THREE.MeshBasicMaterial (map: bufferTexture); var boxGeometry2 = new THREE.BoxGeometry (5, 5, 5); var mainBoxObject = new THREE.Mesh (boxGeometry2, boxMaterial); // Muevalo hacia atrás para que podamos verlo mainBoxObject.position.z = -10; // Agregarlo a la escena principal scene.add (mainBoxObject);Puedes bifurcar y editar esto en CodePen.
Podrías dibujar cualquier cosa en la primera textura y luego renderizarlo en lo que quieras!
El uso más directo es cualquier tipo de efecto de post-procesamiento. Si desea aplicar algún tipo de corrección de color o cambio a su escena, en lugar de aplicarla a cada objeto, puede representar toda la escena en una textura y luego aplicar el efecto que desee a esa textura final antes de representarla. la pantalla.
Cualquier tipo de sombreado que requiera múltiples pases (como el desenfoque) hará uso de esta técnica. Explico cómo usar los buffers de cuadros para crear un efecto de humo en este tutorial..
Esperemos que hayas encontrado este pequeño consejo útil! Si detecta algún error o tiene alguna pregunta, hágamelo saber en los comentarios.!
Accentsconagua