Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

177
Vistas
¿Cómo hacer un círculo ondulado y simétrico en WebGL?

Estoy tratando de desarrollar un sombreador donde pueda modular la cantidad de curvas en un círculo, pero tengo un problema porque no es simétrico. Es decir, aunque puedo aumentar la ondulación del círculo, parece como si todas las ondas vinieran de un punto del lado izquierdo.

Aquí hay un shader que demuestra este efecto perfectamente.

Si hace clic en el enlace ShaderToy de arriba, notará que parece que todas las curvas adicionales provienen del origen (0 grados). Es decir, el lado izquierdo se mueve mucho y el lado derecho del círculo apenas se mueve.

¿Hay alguna forma de modificar este efecto para que las curvas sean más simétricas en su generación? Idealmente, no parecería que las curvas se originan en el lado izquierdo, sino que aparecerán de una manera más uniforme.

Código Shader copiado a continuación en caso de que no pueda acceder al enlace ShaderToy:

 void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord/iResolution.xy; uv = uv * 2.0 - 1.0; uv.x *= iResolution.x / iResolution.y; float l = length(uv); float thi = atan(uv.y,uv.x); float freq = sin(iTime) * 9.5 + 5.0; float sina = sin(floor(freq) * thi); float sinb = sin(ceil(freq) * thi); float fr = fract(freq); float r = 0.5 + 0.05 * mix(sina, sinb, fr); //float r = 0.5 + 0.05 * sin(freq * thi); l = step(l,r); vec3 col = vec3(0.0,0.5,0.8); fragColor = vec4(col*l,1.0); }

Editar: Vaya, ¡no me di cuenta de que el enlace del sombreador estaba configurado como privado! Debería arreglarse ahora.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

El problema con este enfoque es que para cada frecuencia entera, el punto cero siempre será el pico de la onda sinusoidal. Entonces ese lugar que comparte esos picos parecerá no cambiar.

Tienes que elegir algún punto para considerar el ángulo "cero". Pero puede variar dónde está eso para que los picos no se acumulen notablemente entre sí.

He resumido un ejemplo de eso a esta función:

 float ripples(float thi, float freq) { float adjustedThi = thi + freq; // causes each frequency to have it's zero peak at a different spot. return sin(floor(freq) * adjustedThi); }

Esto lo hace un poco más orgánico.

Ver: https://www.shadertoy.com/view/NtSBWz

about 4 years ago · Juan Pablo Isaza Denunciar

0

Tal vez puedas eliminar el tiempo y darle una frecuencia fija, y simplemente mezclarlos con la base. r = mix(0.5, r, abs(sin(iTime)));

O hazlo incluso para obtener simetría.

https://www.shadertoy.com/view/sljBzm

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda