Umkreisen eines Würfels in WebGL mit glMatrix

Question

https://jsfiddle.net/sepoto/Ln7qvv7w/2/

I haben eine Basis einen Würfel mit unterschiedlich gefärbten Flächen angezeigt werden eingerichtet. Was ich versuche, ist eine Kamera einzurichten und eine kombinierte Drehung der X-Achse und Y-Achse anzuwenden, so dass sich der Würfel gleichzeitig um beide Achsen dreht. Es scheint einige Probleme mit den Matrizen zu geben, die ich aufgestellt habe, da ich sehen kann, dass das blaue Gesicht nicht ganz richtig aussieht. Es gibt einige Beispiele, wie dies mit älteren Versionen von glMatrix gemacht wird, jedoch funktioniert der Code in den Beispielen nicht mehr, da vec4 in der glMatrix-Bibliothek geändert wurde. Weiß jemand, wie dies mit der neuesten Version von glMatrix gemacht werden kann, da ich ein CDN an die Geige angeschlossen habe?

Vielen Dank!

  function drawScene() { 

      gl.viewport(0,0,gl.viewportWidth, gl.viewportHeight); 

      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

      mat4.ortho(mOrtho, -5, 5, 5, -5, 2, -200); 

      mat4.identity(mMove); 

      var rotMatrix = mat4.create(); 

      mat4.identity(rotMatrix); 

      rotMatrix = mat4.fromYRotation(rotMatrix, yRot,rotMatrix); 

      rotMatrix = mat4.fromXRotation(rotMatrix, xRot,rotMatrix); 

      mat4.multiply(mMove, rotMatrix, mMove); 

      setMatrixUniforms(); 

      gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); 

      gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); 

      gl.bindBuffer(gl.ARRAY_BUFFER, triangleColorBuffer); 

      gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleColorBuffer.itemSize, gl.FLOAT, false, 0, 0); 

      gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); 

      yRot += 0.01; 

      xRot += 0.01; 

     } 

Answer 1

Wie der Name schon sagt, fromYRotation() initialisiert eine Matrix zu einer bestimmten Drehung. Daher müssen Sie zwei temporäre Matrizen für die Teildrehungen, die Sie dann kombinieren:

var rotMatrix = mat4.create(); 
var rotMatrixX = mat4.create(); 
var rotMatrixY = mat4.create(); 

mat4.fromYRotation(rotMatrixY, yRot); 
mat4.fromXRotation(rotMatrixX, xRot); 
mat4.multiply(rotMatrix, rotMatrixY, rotMatrixX); 

Und der Grund, warum Sie Ihr blaues Gesicht seltsam benahm, wurde die fehlende Tiefentest. Aktivieren Sie es in Ihrem Initialisierungsmethode:

gl.enable(gl.DEPTH_TEST); 

Answer 2

Sie brauchen nicht drei Matrizen verwenden:

// you should do allocations outside of the renderloop 
var rotMat = mat4.create(); 

// no need to set the matrix to identity as 
// fromYRotation resets rotMats contents anyway 
mat4.fromYRotation(rotMat, yRot); 
mat4.rotateX(rotMat,xRot);