1

我在WebGL示例的上下文中理解旋轉和翻譯的東西時有點麻煩。WebGL交互,旋轉後翻譯

發生了什麼事: 我有一個示例程序,讓我圍繞它的中心旋轉一個三角形,並在2D平面上翻譯它。下面的代碼確實如此(使用glmatrix庫)。 modelViewMatrix應用於三角形頂點。

問題: 如果三角形旋轉180°,那麼翻譯是錯誤的。當然,仍然可以移動三角形,但是方向是相反的。如果我向上拖動三角形,對象實際上會進一步移動到屏幕的底部。

問題: 這裏發生了什麼,爲什麼會發生這種情況?我需要做什麼來糾正這種行爲?我希望能夠拖動三角形,不管它被旋轉多少,平移軸應該是一致的。

在此先感謝您的回覆,我確定對於熟悉整個轉型內容的人來說,這是一個簡單的問題。 :)

var modelViewMatrix = mat4.create(); 

function mouseDown(mouseEvent){ 
    isMouseDown = true; 
    g_drawInterval = setInterval(redraw, 40); 
} 

var translationFactor = 0.01; 
var rotationFactor = 0.01; 

function mouseMove(mouseEvent){ 
    if (isMouseDown){ 
     deltaX = mouseEvent.clientX - oldPosX; 
     deltaY = mouseEvent.clientY - oldPosY; 
    if (mouseEvent.button === 0) // left mouse button 
     mat4.translate(modelViewMatrix, modelViewMatrix, 
     [deltaX * translationFactor, -deltaY * translationFactor, 0]); 
    else 
     mat4.rotateZ(modelViewMatrix, modelViewMatrix, 
     deltaX * rotationFactor -deltaY * rotationFactor); 
    } 
    oldPosX = mouseEvent.clientX; 
    oldPosY = mouseEvent.clientY; 
} 
+0

這是關於[矩陣運算如何工作]的文章(http://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html)。也許它會有幫助? – gman

回答

0

這樣做的原因是,你的modelViewMatrix積累組成所有轉換

旋轉函數通常圍繞本地原點(無論它是在應用時)旋轉。當你有一些翻譯,你轉移了原點,所以旋轉的行爲會有所不同。

我不知道有關「glmatrix」 lib和有關着色器的使用,但如果雙方遵循默認GL約定,您還可以將轉換以相反的順序施加的影響,從而使

rotate(...); 
translate(...) 

第一個翻譯,然後旋轉。

您可以通過分別跟蹤方向和位置來避免這種情況,即定義一個position向量和一個rotationMatrix矩陣,並相應地更新這些。對於繪圖,您可以將它們組合到模型視圖矩陣中,如

modelViewMatrix=viewMatrix * translate(position) * rotationMatrix 

(假定上述慣例再次描述)。

+0

好吧,通過將當前位置存儲在單獨的vec3中,我能夠解決問題。謝謝。 – m4rkus