Pitaya Jelly

Crea una escena 3D interactiva llamada «Pitaya Jelly»: media pitaya hecha de gelatina blanda y translúcida. Desarrolla todo el proyecto en un único archivo HTML utilizando renderizado WebGPU real y sombreadores WGSL. No uses modelos prefabricados ni recursos de imagen. APPEARANCE Una mitad grande de pitaya, apoyada con el lado cortado hacia arriba sobre una superficie de estudio clara. Piel de color rosa frambuesa intenso, una fina capa interior pálida y pulpa blanca nacarada. Aproximadamente 250 semillas negras diminutas, distribuidas de forma natural por la pulpa. Entre 12 y 14 pétalos carnosos de la cáscara alrededor de la fruta, con una transición de bases rosas a puntas verdes. Una superficie brillante y húmeda, con refracción de la luz, pequeñas burbujas internas y una sombra de contacto suave. El material debe parecer un caramelo de goma blando, no plástico rígido. Conserva los colores saturados sin altas luces quemadas. FÍSICA E INTERACCIÓN Implementa una deformación de cuerpo blando real mediante una malla volumétrica con conexiones elásticas y restricciones que preserven el volumen, como XPBD. El usuario debe poder agarrar la pulpa con el ratón o un dedo, estirarla y soltarla. La deformación debe concentrarse alrededor del punto agarrado, en lugar de trasladar todo el objeto. Después de soltarla, la fruta debe oscilar, vibrar y recuperar gradualmente su forma original. Haz que los pétalos de la cáscara se puedan arrastrar individualmente. Deben ser más blandos que la pulpa, doblarse y recuperar su forma sin dejar de estar unidos a la fruta. Las semillas deben seguir la superficie deformable sin separarse ni hundirse en la pulpa. Mantén la simulación estable durante los tirones fuertes, con contacto con el suelo y protección contra elementos invertidos. DISEÑO VISUAL Utiliza una interfaz de estudio minimalista y clara, con una estética editorial: mucho espacio en blanco, bordes finos, controles discretos y ninguna decoración innecesaria. Arriba a la izquierda: «MATERIAL STUDIES / NO. 019» Un encabezado grande en cursiva con serifas, distribuido en dos líneas: «Pitaya Jelly». Debajo: «Un poco salvaje». «Un poco dulce». «Un dragón muy blando». A la derecha, añade un panel flotante titulado «THE SPECIMEN» que contenga: Indicador de densidad: ρ 1.04 g/cm³. Tres presets: Pearl — pulpa blanca y piel rosa. Ruby — pulpa color frambuesa y piel rosa. Gold — pulpa pálida y piel dorada. Deslizadores de firmeza y amortiguación interna con valores visibles. Botones «Dale un toque» y «Restablecer». Casillas «¼ de velocidad» y «Mostrar malla». Un botón «Pausar». Incluye también: Un botón de pantalla completa con una opción para salir. Un indicador de estado «WEBGPU · LIVE». Lecturas en tiempo real de la masa, el porcentaje del volumen en reposo y la energía cinética. Una breve indicación de interacción: «Estira la pulpa. Tira de un pétalo. Suelta». Una sección desplegable «Dentro del experimento» que explique con precisión la implementación. REQUISITOS TÉCNICOS Entrega un único archivo autocontenido llamado pitaya-jelly-webgpu.html. Utiliza renderizado WebGPU real, no una imitación con Canvas 2D. Construye toda la geometría de forma procedural. Utiliza refracción con grosor, reflejos de Fresnel e iluminación de estudio suave. Usa un paso de tiempo fijo para que el comportamiento sea uniforme. Admite interacción de escritorio y táctil con un diseño adaptable. Evita reconstrucciones de geometría costosas o la compilación de sombreadores durante el arrastre. Muestra un mensaje alternativo claro cuando WebGPU no esté disponible. Verifica el arrastre, la liberación, la recuperación de la forma, los presets, el restablecimiento, la pausa, la pantalla completa y el diseño móvil. Las prioridades principales son un comportamiento convincente de gelatina, materiales atractivos y una interacción satisfactoria. El resultado debe transmitir la sensación de un experimento de materiales pulido y jugable.