Question

我想在WebGl中制作2D形状的动画。该形状应该围绕它自己的轴旋转。旋转的中心应该是用户点击画布的位置，我有旋转和所有设置的交互。问题是我想要显示我之前绘制的所有其他形状，并且新形状与旧形状重叠。出于某种原因，我的计划总是“摆脱”。旧的形状。

因此，当我更新变换矩阵并重新绘制顶点时，它只是旋转形状但不保持旧形状的完整这是我到目前为止所得到的：

function main() {

 canvas = document.getElementById('webgl');
 gl = getWebGLContext(canvas);
 if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  }


  u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
  if (!u_xformMatrix) {
    console.log('Failed to get the storage location of u_xformMatrix');
    return;
  }

  STARTBT.addEventListener("click", controlAnimation, false);
  STOPBT.addEventListener("click", controlAnimation, false);
  window.addEventListener("keydown", setColour, true);
  u_Colour = gl.getUniformLocation(gl.program, 'u_Colour');
  gl.uniform4f(u_Colour, 0.6, 0.6, 0.3, 1);
  document.getElementById('range_disp').value = 30;

  gl.clearColor(0.4, 0.4, 0.6, 1);
  canvas.onmousedown = function(ev){ var x = ev.clientX; 
            var y = ev.clientY; 
            var rect = ev.target.getBoundingClientRect() ;
            TRANSLATE_X = ((x - rect.left) - canvas.width/2)        /(canvas.width/2);
            TRANSLATE_Y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);};



  animationF();


}
var animationF = function(){
     ANGLE_CENTER = animateCenter(ANGLE_CENTER);
     if(ANGLE_CENTER < 0){
         ANGLE_CENTER = 0;
     }

     draw(xformMatrix, gl, u_xformMatrix);
     if(RUNNING){
       requestAnimationFrame(animationF, canvas);
     }
 }

  var g_lastC = Date.now();
function animateCenter(angle) {
  // Calculate the elapsed time
  var now = Date.now();
  var elapsed = now - g_lastC;
  // Update the current rotation angle (adjusted by the elapsed time)
  if((now - g_lastC)/1000 > SPEED){
   g_lastC = now;
   var newAngle = (angle * 1.0) + (ANGLE_STEP * 1.0);
    return newAngle %= 360;
 }
 return angle;
}

function radioClick(source){
    if(source=='f1') SCALE = 0.5;
    if(source=='f2') SCALE = 1.0;
    if(source=='f3') SCALE = 1.5;
    if(source=='f4') SCALE = 2.0;
}

function controlAnimation(){
   RUNNING = !RUNNING;
   STARTBT.disabled = RUNNING;
   STOPBT.disabled = !RUNNING;
   if(RUNNING){
      g_lastC = Date.now();
      requestAnimationFrame(animationF, canvas);
  }
}

function reset(){
  document.getElementById('slideMe').value = 30;
  document.getElementById('range_disp').value = 30;
  ANGLE_STEP = 30;
 ANGLE_CENTER = 0;
 SCALE = 1;
 TRANSLATE_X = 0;
 TRANSLATE_Y = 0;
  gl.uniform4f(u_Colour, 0.6, 0.6, 0.3, 1);
  SPEED = 6;
  controlAnimation();
 }

function draw(xformMatrix, gl, u_xformMatrix){

  xformMatrix.setRotate(ANGLE, 0, 0, 1);
  xformMatrix.translate(TRANSLATE_X, TRANSLATE_Y, 0);
  xformMatrix.scale(SCALE, SCALE, 1);

  //xformMatrix.translate(TRANSLATE_X, TRANSLATE_Y, 0);
  xformMatrix.rotate(ANGLE_CENTER, 0, 0, 1);
  xformMatrix.translate(0, 0, 0);

  gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements);

  // Specify the color for clearing <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);
  // Draw the shapes
  gl.drawArrays(gl.TRIANGLE_FAN, 0, 8);
  gl.uniform4f(u_Colour, 0.0, 0.0, 0.0, 1.0);
  gl.drawArrays(gl.LINE_LOOP, 1, 6);
  gl.uniform4f(u_Colour, 0.6, 0.6, 0.3, 1.0);

}

function setTriAngle(){
    var slider = document.getElementById('slideMe');
    console.log('Slider: ' + slider.value);
    ANGLE_STEP = slider.value;
}

function initVertexBuffers(gl) {

  add();        
  var n = array.length/2;
  var vertices = new Float32Array(array); // The number of vertices

  // Create a buffer object
  var vertexBuffer = gl.createBuffer();

  var FSIZE = vertices.BYTES_PER_ELEMENT;

  // Bind the buffer object to target
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  // Write date into the buffer object
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 2 * FSIZE, 0);
  gl.enableVertexAttribArray(a_Position);

  return n;
}

function add(){
    array.push(0.0); array.push(0.0);
    array.push(0.0); array.push(-0.3);
    array.push(0.3); array.push(0.0);
    array.push(0.5); array.push(0.25);
    array.push(0.0); array.push(0.5);
    array.push(-0.5); array.push(0.25);
    array.push(-0.3); array.push(0.0);
    array.push(0.0); array.push(-0.3);
}

WebGl 2D动画重叠形状

0 个答案: