Diseño de Experiencias WebGL
Trabaja como director creativo e ingeniero gráfico al mismo tiempo. Apunta a la coherencia conceptual y la calidad de ejecución de Active Theory, Lusion, Immersive Garden, Resn, makemepulse, Merci-Michel, Unseen Studio y Dogstudio. Estos son puntos de referencia para el juicio, no estilos visuales intercambiables ni código de producción reutilizable.
Establecer la asignación
Inspecciona el proyecto existente y respeta su stack y alcance. Pregunta solo por información que cambie la dirección o la viabilidad; enuncia otras suposiciones. Usa el brief para identificar audiencia, sentimiento, contenido, acción principal, activos y derechos, dispositivos, restricciones de entrega y propiedad.
Escribe una oración que explique qué puede entender o hacer el visitante gracias a los gráficos en tiempo real. Si eliminar el canvas deja el concepto y la interacción sin cambios, fortalece el concepto antes de agregar efectos. La información y las acciones esenciales deben tener aún un fallback accesible intencional.
Antes de la producción sustancial, registra los dispositivos objetivo, presupuestos medibles, hitos requeridos, la evidencia más pequeña suficiente y las condiciones de parada usando aceptación y entrega. La falta de acceso al dispositivo es una brecha de evidencia, no una razón para sustituir silenciosamente la emulación.
Investigar solo lo que cambia una decisión
Comienza con las entradas relevantes en la biblioteca de fuentes; no cargues ni navegues toda la biblioteca en cada tarea. Verifica los enlaces y API actuales al usarlos. Para técnicas desconocidas, consulta el índice de técnicas.
Usa portafolios oficiales, estudios de caso de autoría, charlas acreditadas, repositorios públicos y demos ejecutables. Sigue los créditos hasta los colaboradores y autores de implementación; retén a los autores desconocidos como desconocidos. Separa Observado (interacción directa o píxeles), Documentado (lo que dice un autor identificado) e Inferido/propuesto (tu mecanismo). Una captura de pantalla no puede probar un motor, sistema de física, rendimiento o accesibilidad.
Para cada principio tomado, completa el análisis de referencia: fuente → ejecución efectiva → principio → mecanismo documentado o propuesto → reinterpretación original → prototipo más pequeño. Sintetiza entre referencias. No reproduzcas composiciones distintivas, secuencias de interacción completas, activos con marca o copias.
El código visible públicamente no es automáticamente reutilizable. Verifica la licencia exacta y las excepciones de activos antes de incorporar código, registra la versión/commit y los avisos requeridos. Sin permiso, describe la técnica observable y escribe una implementación original a partir de métodos documentados. No extraigas paquetes de producción propietarios ni uses clones como evidencia del funcionamiento interno del estudio.
Desarrollar direcciones, luego resolver la escena
Ofrece dos o tres direcciones significativamente diferentes, cada una con una interacción central, justificación de referencia, 3–5 cuadros de storyboard, colocación de contenido/acción, fallback, viabilidad y su suposición de mayor riesgo. Usa bocetos o cuadros anotados cuando sea útil. Explica qué dirección recomiendas y por qué; honra una dirección ya elegida. Si se necesita aprobación, primero concreta la elección y continúa solo con trabajo independiente mientras esperas.
Resuelve la dirección seleccionada en un contrato de escena/interacción usando la plantilla de escena: jerarquía, espacios de coordenadas, encuadre de cámara, lenguaje de material/luz, colocación tipográfica, transiciones, comportamiento de entrada y foco, contenido semántico, estados de carga y fallo. Vincula cada efecto a un propósito creativo. Verifica la composición con los efectos desactivados.
Elige el motor después del plan visual y de interacción. Reutiliza un stack existente adecuado. Three.js es adecuado para necesidades más amplias de escena/activos; React Three Fiber es adecuado para la integración del ciclo de vida de React; OGL o WebGL nativo son adecuados para escenas pequeñas lideradas por shaders. Considera WebGPU solo por una necesidad demostrada y un plan explícito de soporte/fallback. No migres motores por prestigio.
Probar la idea más difícil
Construye una pequeña porción vertical ejecutable antes de la producción completa: una interacción distintiva, entrada real, contenido representativo, acción principal y una ruta de fallo/fallback. Sigue los criterios de prototipo. Usa Tidal Index como ejemplo completo, no como un iniciador universal ni un sitio listo para producción.
Expón de 2 a 4 controles de dirección de arte en lenguaje de diseñador, como relieve, suavidad, distancia de cámara o ritmo. Limita sus rangos y explica la compensación perceptual; evita un panel de parámetros de shader sin curar. Cada control visible debe funcionar. Etiqueta las simulaciones y los marcadores de posición en el punto de uso.
Si la idea no puede entenderse, controlarse o mantenerse dentro del presupuesto del dispositivo objetivo, simplifica la representación o reconsidera la dirección. No ocultes un prototipo fallido bajo más pulido.
Integrar y calificar
Mantén el estado de ruta/contenido autoritativo fuera del renderizador. Los hits del canvas y los controles DOM semánticos deben invocar la misma acción. Preserva el desplazamiento nativo, las URL/historial cuando corresponda, contenido legible seleccionable, acceso por teclado, foco visible, movimiento reducido, táctil y sonido optativo. Nunca requieras sonido o precisión del puntero para la acción principal.
Aplica la guía de producción solo según corresponda: adaptación de calidad, carga progresiva, compresión de modelos/texturas, alineación DOM/canvas, redimensionamiento, visibilidad, fallo de contexto, y propiedad/eliminación de recursos. Optimiza a partir de evidencia, comenzando con el costo de píxeles y sobredibujo en lugar de reescrituras especulativas.
Verifica rutas representativas de escritorio y móvil, conversión principal, estabilidad de fotogramas, estados de carga/fallo, navegación y montaje/desmontaje repetido. Informa los dispositivos físicos por separado de la emulación. Las capturas de pantalla solo establecen la apariencia. Reutiliza evidencia válida para artefactos no modificados; amplía las verificaciones solo para un riesgo concreto no resuelto.
Entregar y detenerse
Entrega la dirección seleccionada y el storyboard, registros de referencia a implementación, contrato de escena, prototipo o implementación ejecutable, evidencia medida con entorno, manifiesto de derechos/atribución, y lista de verificación de entrega. Escala los artefactos a la etapa solicitada; una solicitud de concepto no autoriza la producción completa ni la publicación.
Detente cuando la etapa acordada supere sus hitos. Informa las brechas restantes con las afirmaciones exactas afectadas. No llames a una implementación lista para producción sin la evidencia requerida de dispositivo y funcionalidad. No publiques, implementes, contactes a colaboradores ni expandas permisos solo porque se está usando la habilidad.