Geleia de Pitaya

Crie uma cena 3D interativa chamada “Pitaya Jelly” — metade de uma pitaya feita de uma gelatina macia e translúcida. Construa todo o projeto em um único arquivo HTML usando renderização WebGPU real e shaders WGSL. Não use modelos prontos nem imagens. APPEARANCE Uma metade grande de pitaya repousando com o lado cortado voltado para cima sobre uma superfície de estúdio clara. Casca rosa-framboesa intensa, uma fina camada interna clara e polpa branca perolada. Aproximadamente 250 pequenas sementes pretas distribuídas naturalmente pela polpa. 12–14 pétalas carnudas da casca ao redor da fruta, passando de bases rosadas a pontas verdes. Superfície brilhante e úmida, com refração da luz, pequenas bolhas internas e uma sombra de contato suave. O material deve parecer uma bala de goma macia, não um plástico rígido. Preserve as cores saturadas sem estourar os realces. FÍSICA E INTERAÇÃO Implemente uma deformação realista de corpo macio usando uma malha volumétrica com conexões elásticas e restrições que preservem o volume, como XPBD. Os usuários podem agarrar a polpa com o mouse ou o dedo, esticá-la e soltá-la. A deformação deve se concentrar ao redor do ponto agarrado, em vez de simplesmente transladar o objeto inteiro. Após ser solta, a fruta deve oscilar, tremer e recuperar gradualmente sua forma original. Permita arrastar individualmente as pétalas da casca. Elas devem ser mais macias que a polpa, dobrando e voltando à posição enquanto permanecem presas à fruta. As sementes devem acompanhar a superfície deformada sem flutuar para longe nem afundar na polpa. Mantenha a simulação estável durante puxões fortes, com contato com o chão e proteção contra elementos invertidos. DESIGN VISUAL Use uma interface de estúdio minimalista e clara, com estética editorial: bastante espaço em branco, bordas finas, controles discretos e nenhuma decoração desnecessária. No canto superior esquerdo: “ESTUDOS DE MATERIAIS / Nº 019” Um título grande, em fonte serifada e itálico, distribuído em duas linhas: “Pitaya Jelly.” Abaixo dele: “Um pouco selvagem.” “Um pouco doce.” “Um dragão muito macio.” À direita, adicione um painel flutuante intitulado “O ESPÉCIME” contendo: Indicador de densidade: ρ 1,04 g/cm³. Três predefinições: Pearl — polpa branca e casca rosa. Ruby — polpa cor de framboesa e casca rosa. Gold — polpa clara e casca dourada. Controles deslizantes de Firmeza e Amortecimento interno, com valores visíveis. Botões “Dar um toque” e “Redefinir”. Caixas de seleção “¼ da velocidade” e “Mostrar malha”. Um botão “Pausar”. Inclua também: Um botão de tela cheia com uma opção para sair. Um indicador de status “WEBGPU · AO VIVO”. Leituras em tempo real da massa, da porcentagem do volume de repouso e da energia cinética. Uma dica curta de interação: “Puxe a polpa. Puxe uma pétala. Solte.” Uma seção recolhível “Por dentro do experimento”, explicando a implementação com precisão. REQUISITOS TÉCNICOS Entregue um único arquivo independente chamado pitaya-jelly-webgpu.html. Use renderização WebGPU real, não uma imitação em Canvas 2D. Gere toda a geometria proceduralmente. Use refração com espessura, reflexos de Fresnel e iluminação suave de estúdio. Use um passo de tempo fixo na simulação para garantir um comportamento consistente. Ofereça suporte à interação em desktop e por toque, com um layout responsivo. Evite reconstruções dispendiosas da geometria ou compilação de shaders durante o arraste. Exiba uma mensagem clara de fallback quando o WebGPU não estiver disponível. Verifique o arraste, a soltura, a recuperação da forma, as predefinições, a redefinição, a pausa, a tela cheia e o layout para dispositivos móveis. As principais prioridades são um comportamento convincente de gelatina, materiais bonitos e uma interação prazerosa. O resultado deve parecer um experimento de materiais refinado e jogável.