2015-04-01 74 views
0

操縱兩個紋理我這個昨天WebGL的一個廣場

http://www.buzzfeed.com/kellyoakes/space-pictures-that-will-actually-make-you-think#.lhw29D3BMV

第一個圖像的紋理2可以在您的鼠標來回滑動來改變2個紋理的邊界看到。我認爲這看起來很有趣,想試試它。

我的想法是,我需要繪製2個方格並在每次鼠標移動時更新它們的頂點並將緩衝區重置爲這些新點?似乎可能有一種更簡單和更有效的方式,所以我想我會看看有沒有人有任何想法。

+1

根據需求,在WebGL中實現類似的東西有很多種方法。如果您要嚴格複製鏈接內容,只需使用純HTML,不需要爲此使用WebGL ... – 2015-04-02 00:19:45

回答

0

正如LJ_1102所建議的那樣,使用純HTML肯定是一種方式,對於這種需求,也許也是一種簡單的方法。

的加工工藝製造,WEBGL這種效果將是如下:

創建畫布,畫出一個正方形在整個畫布(總共兩個三角形),拿在畫布上鼠標位置和計算的多遠左百分比/右邊是從邊緣之一;併爲那個方塊使用一些類似於這個波紋管的片段着色器。

uniform float percentage; 
uniform vec2 canvas_size; 
uniform sampler2D left_image; 
uniform sampler2D right_image; 

void main() { 
    vec2 uv = gl_FragCoord.xy/canvas_size; 
    if (uv.x<=percentage) 
     gl_FragColor = texture2D(left_image,uv); 
    else 
     gl_FragColor = texture2D(right_image,uv); 

}