Three.js Post-Processingpor CloudAI-X

Three.js Post-Processing Skill.

Trata los efectos de pantalla como un pipeline de renderizado ordenado y no como filtros independientes.

3D
Three.js

Revisión de la fuente · Three.js Post-ProcessingSKILL.md

Tarea 3D Produce • Una cadena ordenada de pases del composer • Ajustes de efectos vinculados a un propósito visual • Gestión del redimensionado y comparación del coste de los efectos Antes de empezar Un proyecto de Three.js y un renderer que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Three.js Post-Processing: Crea un pipeline de efectos de pantalla

Configuración del composer, efectos en espacio de pantalla, pases personalizados, render targets y redimensionado.

Flujo de trabajo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Three.js Post-Processing abarca EffectComposer y los pases que transforman una escena renderizada. Los ejemplos incluyen resplandor, antialiasing, oclusión ambiental, profundidad de campo, contornos, corrección de color y shaders personalizados en espacio de pantalla.

La diferencia con el trabajo de materiales es el alcance: el posprocesado actúa sobre la imagen renderizada y puede afectar a toda la composición. El orden de los pases, la resolución de los targets, la gestión del redimensionado y la comparación con la escena sin tratar forman parte del plan de implementación. Verifica los constructores de los ejemplos y la compatibilidad del renderer con la versión instalada de Three.js antes de usarlos.

Entregables esperados

Una cadena ordenada de pases del composer
Ajustes de efectos vinculados a un propósito visual
Gestión del redimensionado y comparación del coste de los efectos

Ver el brief de ejemplo

Del brief a la revisión

01
Elige la intención
Especifica qué debe brillar, mantenerse enfocado o recibir énfasis.
02
Ensambla los pases
Parte de un render de la escena y añade solo los pases necesarios para el tratamiento deseado.
03
Compara y perfila
Revisa la vista sin efectos, la salida redimensionada y el coste de renderizado a la resolución objetivo.

02 Cuándo usarlo

Cuándo usarla

Un proyecto de Three.js y un renderer que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Buen encaje

Acabado de presentaciónAplica un resplandor o un enfoque controlado cuando la escena base ya funcione.
Énfasis de selecciónDibuja el contorno de la geometría seleccionada sin sustituir su material base.

Límites que conviene revisar

Más trabajo de renderizadoCada pase puede añadir coste y puede ocultar un problema de la escena en lugar de resolverlo.
Verificación de la API necesariaLa fuente capturada contiene constructores sensibles a la versión y patrones de WebGPU.

Aporta estos datos

Escena baseProporciona un render funcional antes de aplicar efectos.
Tratamiento visualDescribe el resplandor, el enfoque, el contorno o la corrección de color deseados.
Objetivo de rendimientoIndica la resolución, el pixel ratio y los dispositivos de destino.

03 Decisiones importantes

Decisiones importantes

Razonamiento del pipeline
El orden explica interacciones que el ajuste aislado de cada efecto puede pasar por alto.
Efectos reversibles
Una comparación con la base ayuda a eliminar pases costosos que no sirven a la toma.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Usa el directorio threejs-skills correspondiente como guía para el agente. No es el runtime de Three.js ni instala recursos de escena.

Archivo fuente original

https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md

Un proyecto de Three.js y un renderer que funcionen; verifica los ejemplos de la fuente con la versión instalada. Los controles y cargadores adicionales dependen de la ruta elegida.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa threejs-postprocessing para añadir un contorno sutil y bloom opcional a esta escena. Conserva una comparación sin efectos, explica el orden de los pases, verifica el redimensionado y mide el coste añadido. Comprueba los constructores con la versión instalada antes de usarlos.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

El composer es la ruta de renderizado final prevista.
Los efectos se mantienen al redimensionar y al cambiar el pixel ratio.
Cada pase activado tiene un propósito claro.

OpenDesign ofrece un espacio de diseño local para agentes de programación. Este listado no implica que la skill se incluya ni que se incluyan sus herramientas externas, credenciales o dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: CloudAI-X
Repositorio: CloudAI-X/threejs-skills
Archivo de la skill: skills/threejs-postprocessing/SKILL.md
Licencia: No confirmada: revisa los términos originales antes de reutilizarla.
Instantánea revisada: 2026-10-07 · b1c623076c66

Resumen editorial de la fuente

Configuración del composer, efectos en espacio de pantalla, pases personalizados, render targets y redimensionado.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Es el bloom una propiedad del material aquí?

No. Esta skill presenta el bloom como un pase de posprocesado.

¿Por qué actualizar la resolución al redimensionar?

Los targets del composer y los uniforms específicos de cada pase deben seguir alineados con la salida.

¿Está garantizada la compatibilidad actual con WebGPU?

No. Hay que comprobar el renderer y la versión instalada.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño