Làm thế nào để thực hiện xoắn ốc quay này trong WebGL?

Question

Ai đó có thể cố gắng triển khai hoạt ảnh cụ thể vào ví dụ về trình đổ bóng WebGL? Nó sẽ là tuyệt vời cho những người learing WebGL như bản thân mình.

Nguồn: http://dvdp.tumblr.com/post/2664387637/110109

Answer 1

Tôi đã thực hiện hình ảnh động của bạn tại http://www.brainjam.ca/stackoverflow/webglspiral.html. Nó sẽ cung cấp cho bạn thông báo "WebGL không được hỗ trợ" nếu trình duyệt của bạn không hỗ trợ WebGL. Nó được điều chỉnh từ một số sandbox created by mrdoob. Ý tưởng cơ bản là hiển thị một bề mặt hình chữ nhật (bao gồm hai hình tam giác) và áp dụng đổ bóng lên bề mặt.

Mã shader thực tế là như sau:

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);      
    } 
} 

Các xoắn ốc thay đổi kích thước với cửa sổ trình duyệt, nhưng bạn có thể dễ dàng lựa chọn một kích thước vải cố định để thay thế.

Cập nhật: Chỉ cần cho vui, đây là cùng thực hiện chính xác trong một jsfiddle: http://jsfiddle.net/z9EmN/