Paso 12: Three.js: post-processing & efectos: atenuación de, borrando
Echa un vistazo! (y el tutorial que va con ella)
Efectos locos son posibles con postproceso en ThreeJS, pero justo necesitaba algo simple: para atenuar todo excepto la constelación quería mostrar. Las líneas blancas brillantes y puntos en la cima de un atenuaron escena.
Da vuelta hacia fuera, el mundo 3D no es como KineticJS. Sólo no puedo agregar una capa en la parte superior y contar con el navegador haciendo el canal alfa de esa capa para atenuar las cosas detrás de él. O más bien que pude, pero necesitaría una escena todo separado, lona y contexto y no está totalmente claro lo que pasa cuando tienes dos ventanas de webgl uno encima del otro. Creo que no es trivial hacer un contexto de representación semitransparente webgl.
Así que lo mejor era añadir postprocesses a mi procesador existente. Se trata de cómo, cuando yo estaba hablando de Sistemas de partículas en movimiento,
se convirtió en
Preparar:
1. en la repo de threejs, echa un vistazo a ejemplos/js/shaders y ejemplos/js/postproceso
2. Elija a algunos shaders. Son sólo WebGL código almacenado en archivos .js, pero en principio son como los shaders que pasé al describir la un brillo diferente para cada estrella.
3. el directorio postproceso tiene un montón de utilidades, esencialmente, que capa efectos sobre otros
Montar (poner los scripts en tu página):
-TRES. EffectComposer
-TRES. RenderPass (necesita un renderpass por lo que sus efectos aplican a algo)
-TRES. ShaderPass (o dos o tres, estas envuelven sus efectos)
-TRES. CopyShader (en caso que desea mostrar sin efectos algunas veces)
-TRES. AdditiveBlendShader (para mezclar a otros shaders)
-algunos shaders te gusta
El código:
Básicamente usted lo llama .render() en un compositor ahora, en lugar de directamente en un procesador. Se puede montar casi cualquier rango de efectos que te gusta primero haciendo un pase de render, añadiendo al compositor, y luego agregar shaderpasses posterior a la del mismo compositor. Finalmente, desea añadir un copyshader para juntar todo, ponerlo como renderToScreen y render. Hierve, podría verse así:
Pero en el caso de lo que he hecho aquí, hay realmente dos compositores independientes que hacen dos conjuntos separados de objetos en la escena. Cuando está activa una constelación, sus estrellas y las líneas de conexión se procesan sin desenfoque y en el brillo completo. Sin embargo, las estrellas de fondo, se oscureció y borrosa. Así para obtener los efectos aplicados a un conjunto de cosas y no el otro, que hay una escena todo separada con objetos clonados (topScene) y una pila de compositor todo separado.
Esto provoca la complicación leve que los dos necesitan ser mezclados como un último paso: pude hacer el topscene, pero oscurecería la escena de fondo. Así que la última cosa que recibe en mi caso es una mezcla aditiva de los resultados de los dos compositores:
El bit final: tienes que renderizar todos los tres compositores cada fotograma, o no actualización de los contenidos de ese compositor:
Eso es todo allí está a él!
