Cómo implementar esta espiral que gira en WebGL? [cerrado]
-
08-10-2019 - |
Pregunta
¿Alguien podría tratar de aplicar la animación entregado en WebGL ejemplo de sombreado? Sería muy bueno para la gente como yo learing WebGL.
Solución
He implementado la animación en http://www.brainjam.ca/stackoverflow/webglspiral .html . Se le dará un mensaje de "WebGL no compatible" si su navegador no soporta WebGL. Está adaptado a partir de un caja de arena creado por mrdoob . La idea básica es mostrar una superficie rectangular (que consiste en dos triángulos) y para aplicar el sombreado a la superficie.
El código de shader real es como sigue:
uniform float time;
uniform vec2 resolution;
uniform vec2 aspect;
void main( void ) {
vec2 position = -aspect.xy + 2.0 * gl_FragCoord.xy / resolution.xy * aspect.xy;
float angle = 0.0 ;
float radius = length(position) ;
if (position.x != 0.0 && position.y != 0.0){
angle = degrees(atan(position.y,position.x)) ;
}
float amod = mod(angle+30.0*time-120.0*log(radius), 30.0) ;
if (amod<15.0){
gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );
} else{
gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
}
}
Los redimensiona espiral con la ventana del navegador, pero aquí se puede optar por un tamaño fijo de la lona en su lugar.
Actualización: Sólo por diversión, aquí está exactamente la misma aplicación en un jsFiddle: http: / /jsfiddle.net/z9EmN/