Filtros de cámara

Los filtros de cámara son los filtros de la sección Lente de una cámara: efectos de shader que aplica a lo que filma, en el editor, el reproductor y las exportaciones. Apilados ahí, cada filtro trabaja sobre el resultado del que tiene encima, así que unos filtros sencillos se combinan en un estilo propio:

• Plantillas listas para usar, desde ajustes de color y desenfoques hasta distorsiones, aspectos de impresión y de película, y fondos generados.
• Filtros que escribes tú en GLSL, o que te escribe un agente conectado.
• Controles que se pueden animar, y patrones que pueden quedarse sujetos al tablero mientras la cámara se mueve.

Un elemento suelto tiene sus propios filtros, que funcionan de otra manera. Consulta Filtros de elementos.

Un filtro activado puede estar oculto mientras editas. Comprueba Lentes de cámara en los ajustes de interfaz y la Vista previa de la cámara en los ajustes de la lente. Estos ajustes de visualización no cambian el resultado en el reproductor ni en las exportaciones.

Crear un filtro

Un filtro de lente llega a una cámara de una de cuatro formas: desde una plantilla, desde un archivo de lente, desde código en blanco que escribes tú o escrito por un agente conectado.

Usar una plantilla

Un filtro ya hecho.

• Operación: elígelo en Añadir filtro, arriba de la sección Lente de la cámara. Escribe para buscarlo por nombre.
• Resultado: el filtro va al final de la pila, o el primero si es un fondo, con sus controles en los valores por defecto. Cambiar después su código lo convierte en un filtro Personalizado.
• Consejo: Plantillas de filtros de cámara lista todas las plantillas y las describe grupo por grupo.

Importar desde un archivo

Filtros guardados desde otra cámara.

• Operación: elige Desde archivo…, bajo Empezar en Añadir filtro, y escoge un archivo .lens.json.
• Resultado: todos los filtros del archivo van al final de la pila, activados o desactivados como se guardaron. Los archivos de lente no guardan imágenes, así que un filtro con controles de imagen te pide que vuelvas a elegirlas. Consulta Archivos de lente.

Escribir tu propio código

Un filtro que empieza vacío.

• Operación:
  1. Elige Blank, bajo Empezar en Añadir filtro.
  2. Activa Mostrar código en los ajustes de la lente y abre los ajustes del filtro.
  3. Escribe el código del shader en el panel de código.
• Resultado: Blank deja pasar la imagen sin cambios, con un comentario que nombra todo lo que el código puede leer. En cuanto el código funciona, la lente lo dibuja. Consulta Escribir código de lente.
• Consejo: Editar controles añade los valores que lee tu código como deslizadores y campos en los ajustes del filtro.

Pedírselo a un agente

Un filtro escrito para ti.

• Operación: conecta un agente, consulta Conectar el tablero con IA, y describe el efecto que quieres en una cámara.
• Resultado: el agente añade una plantilla con los valores que pediste, o escribe un filtro con su propio código y controles, y corrige el código hasta que funciona. Después puede cambiar los controles, reordenar los filtros o reescribir el código.
• Consejo: pídele que exponga como controles los valores que merece la pena cambiar.

Ajustes comunes

El cuadro de ajustes de un filtro tiene dos grupos: primero los controles de la lente y después los controles del filtro.

Controles de la lente

La lente aplica estos ajustes alrededor del código del filtro, así que funcionan igual en todos los filtros, también en uno personalizado, y el código del panel nunca los nombra.

• Mix: lo tienen todos los filtros. Funde el filtro desde 0, donde no cambia nada, hasta 1, su efecto completo.
• Edge overscan: en los filtros que deforman o desenfocan. Filma una franja del tablero alrededor de la cámara, como porcentaje de su lado más corto, de 0 a 25, para que el filtro lea los elementos que hay más allá del borde de la cámara en lugar de espacio vacío. Un filtro personalizado lo obtiene añadiendo en Editar controles un control numérico con el nombre de uniform uOverscan.

Controles del filtro

Estos controles pertenecen al código del filtro: un filtro tiene uno solo cuando su código lo lee. Varias plantillas comparten estos:

• Anchor: en los fondos y en los filtros que ponen un patrón sobre la imagen. Camera deja el patrón quieto en la vista de la cámara, y Board lo sujeta al tablero, así que se desliza y cambia de escala cuando la cámara se desplaza y hace zoom. Consulta Sujetar un patrón al tablero.
• Picture: en los fondos. Fija cómo se combina el efecto generado con lo que filma la cámara. Consulta Fondos.
• Speed y Time offset: en los filtros que se mueven solos. Siguen la línea de tiempo: arrastrar el cabezal los mueve, la reproducción los anima y una línea de tiempo parada los congela. Un Speed de 0 deja el efecto quieto en su Time offset, y en los fondos un Speed negativo lo hace ir hacia atrás.
• Seed: en los filtros con detalle aleatorio. Un número distinto da un patrón distinto.
• Controles de imagen: haz clic en la miniatura para elegir un archivo, o pega una imagen a su lado. Cuando ya tiene una imagen, también puede descargarla o quitarla. Un control de imagen vacío se lee como negro.
• Puntos: controles como Center sitúan algo en el área de la cámara, con X e Y de 0 a 1 a lo ancho y alto de ella, empezando abajo a la izquierda. Los usan nueve filtros, como Bulge / pinch, Twist y Zoom blur.
• Source: en Paper texture, Fluted glass, Water, Image dithering, Halftone dots, Halftone CMYK y Lens distortion. Camera aplica el efecto a lo que filma la cámara, e Image a una imagen subida. Paper texture y Water ofrecen además None, el efecto solo. Fit, Origin X y Origin Y colocan la imagen, y solo se muestran mientras Source es Image.
• Colors: 14 fondos admiten una lista de colores que puedes ampliar, recortar y reordenar, hasta su límite de 5 a 10. Con la lista vacía, solo se ve el color de fondo, o nada en los efectos que no lo tienen.

Los tamaños en píxeles se miden como si la cámara tuviera 720 píxeles de alto, así que un filtro se ve igual en la vista previa y en una exportación de cualquier tamaño.

Sujetar un patrón al tablero

Algunos filtros ponen un patrón sobre la imagen: el grano del papel, celdas de píxeles, puntos de semitono, un sombreado o un fondo. Anchor fija cómo se comporta ese patrón cuando la cámara se desplaza o hace zoom, a mano o en una animación: en Board, el filtro se comporta como parte del tablero, así que su patrón se mueve y cambia de escala con los elementos que filma la cámara; en Camera, se comporta como parte de la cámara y se queda quieto en la vista.

• Camera: el patrón se queda quieto en la vista, filme lo que filme la cámara. Sirve para efectos que pertenecen a la lente, como un aspecto de impresión en semitono sobre una escena en movimiento.

• Board: el patrón se queda con los elementos. Sirve para texturas que pertenecen a lo filmado, como el papel bajo un dibujo: cuando la cámara se desplaza, el papel se desliza con el dibujo, y cuando hace zoom, el grano crece con él.

• Operación:

  1. Abre los ajustes del filtro en la sección Lente de la cámara.
  2. Pon Anchor, el último control del filtro, en Board.
  3. Ajusta el control de tamaño, como Scale o el tamaño de celda, si el patrón se ve demasiado grande o pequeño.

• Resultado: el patrón queda sujeto al tablero en el editor, el reproductor y las exportaciones.

• Consejo: en Board el patrón se mide en unidades del tablero, así que una cámara que filma un área grande lo muestra más pequeño. Una cámara de 720 unidades de alto lo muestra del mismo tamaño que en Camera. Scale y Rotation giran alrededor del origen del tablero, y un fondo ignora Fit.

Lo que filma la cámara

Un filtro trabaja sobre la imagen de los elementos apilados detrás de su cámara. Donde no hay elementos, esa imagen es transparente y se ve el fondo del tablero. Esto cambia cómo se comportan algunos filtros:

• Filtros de bordes: Glow, Outline, Bevel, Drop shadow y Gooey trabajan a partir de los bordes donde los elementos se encuentran con la transparencia. Sobre un área de cámara llena de borde a borde, como una imagen completa, no tienen ningún borde con el que trabajar.
• Filtros que cubren toda el área: Vignette, CRT scanlines y Film grain ponen su color sobre todo, también sobre las partes transparentes, así que también oscurecen o texturizan el fondo del tablero.
• Fondos: con Picture en Over the effect, rellenan las partes transparentes y dejan los elementos encima.

Animar un filtro

Cualquier control de un filtro puede cambiar con el tiempo, Mix incluido, con un bloque de Animación de atributos en la cámara.

• Operación:
  1. Con la cámara como único elemento seleccionado, empieza una Animación de atributos.
  2. Abre los ajustes del filtro y elige los controles que quieres animar con el botón de selección de cada fila.
  3. Acepta, y después fija los valores de inicio y fin en los ajustes del filtro, con el cabezal en el inicio o el fin del bloque.
• Resultado: los números, ángulos, colores, puntos y demás valores hechos de números cambian de forma suave entre los dos extremos. Los controles de sí o no, las selecciones y las imágenes cambian a mitad de camino. El editor, el reproductor y las exportaciones muestran el mismo valor en el mismo momento.
• Consejo: para fundir un filtro al entrar o salir, anima su Mix. Para que una distorsión crezca, anima su propio control de intensidad, porque Mix funde la imagen recta con la deformada.

Definir los controles de un filtro

Los ajustes de un filtro que escribes tú salen de sus controles. Cada control tiene un nombre que lee el código y un campo en los ajustes del filtro, así que su valor se puede cambiar y animar sin tocar el código.

• Operación:
  1. Abre los ajustes del filtro y haz clic en Editar controles.
  2. Haz clic en Añadir control. Llega como un número de 0 a 1, llamado uControl1, uControl2 y así sucesivamente.
  3. Dale una Etiqueta del control, el nombre que se ve en los ajustes, y un Nombre del uniform, el nombre que usa el código.
  4. Elige su Tipo y ajusta el resto: mínimo, máximo y paso, si muestra un deslizador, o las opciones de una selección.
  5. En el código, lee el valor por su nombre de uniform. La lente lo proporciona, así que el código no lo declara.
• Resultado: el control aparece entre los controles del filtro en sus ajustes, con el campo que necesita su tipo, y el código lee su valor actual cada vez que la lente dibuja.
• Tipos: Número, Número entero, Ángulo, Sí o no, Selección, Rango, Color, Punto, Vector, Vector de enteros, Matriz, Imagen, Lista y Degradado. Escribir código de lente muestra cómo lee el código cada uno.
• Lo que mantiene el código en marcha:
  • Un nombre de uniform tiene que estar libre en el filtro y ser válido en el código; los nombres que usa la propia lente se rechazan.
  • Cambiar el tipo de un control restablece su valor, y se rechaza cuando el código dejaría de funcionar con él.
  • Un control que usa el código no se puede quitar ni cambiar de nombre de uniform. Un control animado no se puede quitar ni cambiar de tipo.
• Consejo: Editar controles también funciona con los controles de una plantilla.

Escribir código de lente

Un filtro se escribe en GLSL, el lenguaje de shaders de WebGL2, al estilo de Shadertoy: una función mainImage que la lente ejecuta para cada píxel del área de la cámara y que devuelve el color de ese píxel. El código se ve en el panel de código junto a la cámara, y Blank te da uno vacío para empezar.

Lo que puede leer el código

• lensPicture(uv): la imagen que recibe el filtro, que es lo que filma la cámara o el resultado del filtro de encima. uv va de 0 a 1 a lo ancho y alto de la cámara, desde abajo a la izquierda. Con Edge overscan activado, un uv por debajo de 0 o por encima de 1 lee la franja que rodea la cámara.
• fragCoord e iResolution.xy: el píxel que se dibuja y el tamaño de la cámara, ambos en píxeles.
• iTime e iFrame: el tiempo de la línea de tiempo en segundos y el número de fotograma. Un filtro que los lee se mueve mientras la línea de tiempo se reproduce.
• uLensView: el rectángulo de la cámara en el tablero, como x, y, ancho y alto en unidades del tablero, para patrones sujetos al tablero.
• Cada control, por su nombre de uniform. Consulta Cómo lee el código los controles.

Un ejemplo

Un filtro que vuelve gris la imagen, con un control Número de 0 a 1 cuyo nombre de uniform es uAmount:

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
	vec4 picture = lensPicture(fragCoord / iResolution.xy);
	float grey = dot(picture.rgb, vec3(0.299, 0.587, 0.114));
	fragColor = vec4(mix(picture.rgb, vec3(grey), uAmount), picture.a);
}

Cómo lee el código los controles

Dos pasadas

Algunos efectos, como un desenfoque, funcionan mejor en dos pasos. Un filtro cuyo código tiene la línea #define IR_LENS_TWO_PASS se ejecuta dos veces, con IR_LENS_PASS a 1 y después a 2. En la segunda pasada, lensPicture(uv) lee el resultado de la primera, y lensInput(uv) lee la imagen que recibió el filtro. Blur, Tilt-shift, Gooey, Sharpen y Drop shadow funcionan así.

Cuando el código falla

Poco después de que dejes de escribir, la lente comprueba el código. El código que funciona pasa a ser lo que dibuja la lente. El código que falla se guarda como borrador mientras la lente sigue dibujando la última versión que funcionaba, y el error se muestra junto a la línea que falla, en la fila del filtro y como El código de la lente tiene errores en la cámara.

Reglas

• Lee la imagen con lensPicture. iChannel0 también la contiene, pero en otra forma y con la franja incluida, así que dibuja en el sitio equivocado en cuanto se activa Edge overscan.
• No declares los controles. La lente los declara, y el código que declara uno con otro tipo no compila.
• Mide los tamaños respecto a iResolution. Las exportaciones dibujan la cámara a su tamaño de exportación, mayor que el de la vista previa, así que un tamaño contado en píxeles fijos se ve distinto allí. Las plantillas miden como si la cámara tuviera 720 píxeles de alto.
• Los nombres de los controles no pueden empezar por gl_, ir_, webgl_, ni por i seguida de una mayúscula, y no pueden ser una palabra de GLSL ni un nombre que ya use la lente.
• El código puede tener hasta 32.000 caracteres.