Come implementare questa spirale rotante in WebGL? [chiuso]
-
08-10-2019 - |
Domanda
Qualcuno potrebbe cercare di attuare dato l'animazione in WebGL esempio dello shader? Sarebbe bello per le persone istruzionene WebGL come me.
Soluzione
Ho implementato l'animazione a http://www.brainjam.ca/stackoverflow/webglspiral .html . Vi darà un messaggio "WebGL non supportato" se il tuo browser non supporta WebGL. Si è adattato da un sandbox creato da mrdoob . L'idea di base è di mostrare una superficie rettangolare (costituito da due triangoli) e ad applicare lo shader alla superficie.
Il codice dello shader attuale è la seguente:
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 );
}
}
I ridimensiona a spirale con la finestra del browser, ma si potrebbe facilmente optare per una dimensione fissa tela al posto.
Aggiornamento: Solo per divertimento, ecco la stessa implementazione in un jsfiddle: http: / /jsfiddle.net/z9EmN/