(sim) Escrevendo shaders para a esfera de Vegas

 (whenistheweekend.com)
1 pontos por GN⁺ 2023-12-01 | 1 comentários | Compartilhar no WhatsApp
  • A página The Sphere mostra, com 5 exemplos e trechos de shader GLSL, como a cor da superfície da esfera é calculada
  • As entradas do shader são time, vUv e vNormal, e o tempo e as coordenadas UV são o centro da variação de cor
  • main() calcula a cor final de cada pixel atribuindo vec4(...) a gl_FragColor
  • Os valores RGB são criados com base em cos(time + vUv.xyx + vec3(0., 2., 4.)), representando uma variação baseada no tempo
  • O vNormal declarado não é usado dentro do trecho de código fornecido, então atualmente não afeta o cálculo da cor

Estrutura da página The Sphere

  • O título é The Sphere
  • No corpo, há marcações de exemplos de example 1 até example 5
  • Em seguida, é apresentado um código de shader que parece ser GLSL

Fluxo do código do shader GLSL

  • As variáveis de entrada são três: time, vUv e vNormal
    • time é uniform float
    • vUv é varying vec2
    • vNormal é varying vec3
  • A função main() define gl_FragColor
  • A cor é calculada na forma 0.5 + 0.5 * cos(...)
  • Na entrada de cos(), entram juntos o valor de tempo, vUv.xyx e vec3(0., 2., 4.)
  • O valor alfa é fixado em 1.

Leituras relacionadas

1 comentários

 
GN⁺ 2023-12-01
Comentários no Hacker News

  • Fiz um efeito de Matrix funcionar
    Tentei ajustar o UV para mostrar a parte de cima da esfera, mas desisti; ainda assim, os uniforms projectionMatrix e modelViewMatrix do three.js podiam ser referenciados só declarando-os no topo do GLSL

  • Fiz um tiling de Penrose estático: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    Como a esfera não é infinita, usar um tiling aperiódico não tem muito sentido prático, mas ainda fica bonito
    Ainda não sei se existe algum conjunto semelhante de tiles, ou um único tile, que permita azulejar um cone infinito

    • Se fossem tiles físicos, parece impossível por causa da incompatibilidade de curvatura
      Continua sendo uma pergunta interessante, mas não está claro o suficiente qual projeção faria sentido, então é difícil se aprofundar mais
    • Também seria divertido mostrar a esfera se movendo lentamente por entre um plano de tiles aperiódicos infinito

  • Fugindo um pouco do assunto, é fascinante o tamanho do projeto de engenharia que The Sphere realmente é
    Inclui desde a própria estrutura até a sincronização de milhares de painéis de LED dentro e fora da esfera, o resfriamento no calor de Las Vegas e manter os 18.000 assentos internos suficientemente frescos e ventilados
    Há muitos prédios de escritório comuns que nem conseguem uma ventilação decente

    • Todo esse esforço e recursos, no fim, servem só para prender ainda mais atenção em publicidade
    • É muito legal que eles consigam até gerar vento frio dentro da Sphere para efeitos especiais

  • Fiz um smiley.frag simples: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • O projeto é muito bom
    Seria mais fácil de compartilhar se cada código tivesse uma URL separada. Embutir o código na própria URL também parece uma boa ideia

  • Fiz um shader de rosto sorridente grande
    É um código GLSL que usa sdRing para fazer a boca, trata os olhos de uma vez usando simetria esquerda-direita e depois renderiza tudo em amarelo

  • Foi a primeira vez que mexi com shaders e fiz uma melancia girando
    Entendo mais ou menos que ele lida com tuplas RGB, que fract() parece uma operação de resto, e que ele eleva esse valor ao quadrado e soma para criar faixas suaves, mas ainda é meio opaco para mim como exatamente o shader funciona, o que é vUv e onde gl_FragColor é atribuído

    • A GPU recebe um objeto no espaço do modelo, ou seja, uma lista de vértices de triângulos, a posição da câmera e um vertex shader que transforma isso para o espaço de tela
      Depois ela divide os triângulos em fragmentos, isto é, pixels, e executa o fragment shader para cada fragmento
      Aqui, as entradas são o uniform time, que entra com o mesmo valor para todos os fragmentos, e vUv, que é emitido pelo vértice e depois interpolado linearmente dentro do triângulo
      vUv corresponde às coordenadas do pixel sobre a esfera
      gl_FragColor é a saída de cor RGBA aplicada àquele fragmento
      Em um shader típico de jogo ou do Google Earth, isso ainda incluiria texturização e iluminação, e embora o modelo de execução da GPU pareça programação de um pixel por vez, na prática é SIMT, então a NVIDIA processa 32 pixels e a AMD 64 pixels ao mesmo tempo
      Em geral, dá para pensar nos condicionais como operações condicionais em que os dois ramos acabam sendo executados
    • O código é executado para todos os pixels do canvas
      Você provavelmente também vai gostar de https://www.shadertoy.com/

  • Os shaders de https://www.glslsandbox.com também valem a pena
    Só que pessoas imaturas costumam postar shaders NSFW por lá, e o administrador aparentemente não faz uma moderação muito minuciosa, então é bom tomar cuidado

    • Já é impressionante criar um corpo com centenas de linhas de GLSL, mas montar uma cena de orgia em apenas 11 linhas é outro nível
      Fiquei curioso sobre qual seria a complexidade de Kolmogorov de “conteúdo GLSL NSFW”
      https://www.glslsandbox.com/e#108133.0
    • Isso é puro gênio
      NSFW: https://www.glslsandbox.com/e#108230.3
      Nos comentários do código ficaram prompts pedindo ao ChatGPT para deixar o corpo mais gordo, adicionar linhas de scroll no fundo, mudar as cores e acrescentar certas partes do corpo
    • Está bem melhor do que na época em que postavam hakenkreuz por lá

  • Muito bom
    No meu projeto isocity, a solução que alguém enviou permite compartilhar a cidade criada por URL
    Parece que daria para implementar algo parecido: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere parece um ótimo lugar para sediar uma demoparty
    https://en.wikipedia.org/wiki/Demoscene#Parties