Fatia cítrica de goma 3D interativa

Crie uma bela fatia cítrica de goma 3D interativa usando WebGPU. Entregue a experiência completa em um único arquivo HTML independente, com JavaScript e shaders WGSL incorporados. Esta deve ser uma simulação 3D em tempo real, não um vídeo, uma imagem ou uma animação em loop. APPEARANCE Crie uma fatia de laranja espessa e semicircular, com polpa translúcida e suculenta, oito segmentos distintos, membranas internas delicadas, pequenas bolhas, uma camada clara de albedo e uma casca de laranja macia. Faça com que pareça um doce de goma premium: cor saturada, brilhos especulares, luz atravessando a polpa, refração convincente e sombras de contato suaves. Evite bloom excessivo, cores desbotadas ou uma aparência de plástico rígido. Use um fundo de estúdio claro e quente e uma interface editorial limpa, com bastante espaço em branco. Adicione o título serifado grande em itálico “Citrus Jelly”. Mantenha os controles compactos e a fatia claramente visível. FÍSICA DE CORPO DEFORMÁVEL A sensação de gelatina é a parte mais importante. - Pegue qualquer parte da fatia com o mouse ou o dedo. - Puxe, levante, estique, torça e solte. - Faça a deformação ser local: puxar uma borda deve esticar a polpa próxima, enquanto o restante acompanha naturalmente. - Depois de solta, a fatia deve oscilar, passar um pouco do ponto de equilíbrio e recuperar gradualmente sua forma original. - Inclua gravidade, inércia, amortecimento, colisões com o chão e quique suave. - Preserve aproximadamente o volume e impeça que a malha colapse ou fique do avesso. - Faça a casca ser ligeiramente mais firme que a polpa. - Os segmentos internos, as membranas e as bolhas devem acompanhar a deformação sem flutuar para fora do corpo. Use um solver volumétrico estável para corpo deformável, como uma malha tetraédrica com restrições XPBD. Não simule a maciez escalando ou girando o objeto inteiro. CONTROLS Inclua três predefinições de cor: Laranja, Limão e Ruby. Adicione: - Controle deslizante de firmeza. - Controle deslizante de amortecimento interno. - Botão “Dar um empurrão”. - Botão Redefinir. - Caixa de seleção de velocidade de um quarto. - Caixa de seleção Mostrar malha. - Botão Pausar/retomar. Exiba leituras pequenas e atualizadas em tempo real para massa, porcentagem do volume em repouso e energia cinética. REQUISITOS TÉCNICOS Use renderização WebGPU genuína com shaders WGSL. Gere toda a geometria e todos os detalhes visuais de forma procedural, sem modelos importados nem arquivos de imagem. Mantenha as atualizações da simulação independentes da taxa de quadros da renderização. Ofereça suporte a dispositivos desktop e com tela sensível ao toque. Exiba uma mensagem clara de fallback se o WebGPU não estiver disponível. Teste arrastos fortes, solturas repetidas, todos os controles e telas estreitas. Corrija problemas de instabilidade da física, geometria quebrada e artefatos visuais antes de entregar o HTML final. O resultado deve parecer um pequeno experimento de doce tátil, realmente prazeroso de explorar.