javascript - Open WebGL 无法通过迷宫平移三 Angular 形

Question

我正在尝试使用开放的 webGL 移动这个 Sprite (三 Angular 形)穿过迷宫。我现在有了它，所以当我按 I 时，它应该向上移动 0.15，但它不会渲染显示三 Angular 形更新位置的新屏幕。我尝试将渲染调用放在键盘事件函数中，但这会导致屏幕空白。我怀疑我设置的动画帧错误或者我不需要动画帧。

迷宫.js

var gl;
var points = 0;
// Three Vertices

var vertices = [];
var colors = [];

//SpritePos
var spriteX = -1;
var spriteY = .34;


// Plot functions

//draw and empty square
function plot0(x, y) {}

//draw a line on left of box
function plot1(x, y) {
  vertices.push(vec2(x, y));
  vertices.push(vec2(x, y - .166));
  colors.push(vec3(0, 0, 0));
  colors.push(vec3(0, 0, 0));
}

//draw a line on top of box
function plot2(x, y) {
  vertices.push(vec2(x, y));
  vertices.push(vec2(x + .166, y));
  colors.push(vec3(0, 0, 0));
  colors.push(vec3(0, 0, 0));
}

//draw a line on right of box
function plot3(x, y) {
  vertices.push(vec2(x + .166, y));
  vertices.push(vec2(x + .166, y - .166));
  colors.push(vec3(0, 0, 0));
  colors.push(vec3(0, 0, 0));
}

//draw a line on bottom of box
function plot4(x, y) {
  vertices.push(vec2(x, y - .166));
  vertices.push(vec2(x + .166, y - .166));
  colors.push(vec3(0, 0, 0));
  colors.push(vec3(0, 0, 0));
}

//I messed up with numbering my blocks and did block 1 twice so this is just a filler
function plot5(x, y) {}

//draw a line on left of box
//draw a line top of box
function plot6(x, y) {
  plot1(x, y);
  plot2(x, y);
}

//draw line on top of box
//draw a line right of box
function plot7(x, y) {
  plot3(x, y);
  plot2(x, y);
}

//draw line on right of box
//draw line on bottom of box
function plot8(x, y) {
  plot3(x, y);
  plot4(x, y);
}

//draw line left of box
//draw line on bottom of box
function plot9(x, y) {
  plot1(x, y);
  plot4(x, y);
}

//draw line right of box
//draw line on left of box
function plot10(x, y) {
  plot1(x, y);
  plot3(x, y);
}

//draw line on top of box
//draw line on bottom of box
function plot11(x, y) {
  plot2(x, y);
  plot4(x, y);
}

//draw line on top,left and bottom of box
function plot12(x, y) {
  plot2(x, y);
  plot1(x, y);
  plot4(x, y);
}

//draw line on right, top and left of box
function plot13(x, y) {
  plot2(x, y);
  plot1(x, y);
  plot3(x, y);
}

//draw line on top, right and bottom of box
function plot14(x, y) {
  plot2(x, y);
  plot4(x, y);
  plot3(x, y);
}

//draw line on right, left and bottom of box
function plot15(x, y) {
  plot1(x, y);
  plot4(x, y);
  plot3(x, y);
}


function plotSprite() {

  vertices.push(vec2(spriteX + .04, spriteY + .13));
  vertices.push(vec2(spriteX + .08, spriteY + .02));
  vertices.push(vec2(spriteX + .12, spriteY + .13));
  colors.push(vec3(0, 0, 0));
  colors.push(vec3(0, 0, 0));
  colors.push(vec3(0, 0, 0));

}

// Render functions
function renderSprite() {
  gl.drawArrays(gl.TRIANGLE_FAN, points, 3);
  points = points + 3;
}

function render0() {}

//render plot1
function render1() {
  gl.drawArrays(gl.LINE_STRIP, points, 2);
  points = points + 2;
}

//render plot2
function render2() {
  gl.drawArrays(gl.LINE_STRIP, points, 2);
  points = points + 2;
}

//render plot3
function render3() {
  gl.drawArrays(gl.LINE_STRIP, points, 2);
  points = points + 2;
}

//render plot4
function render4() {
  gl.drawArrays(gl.LINE_STRIP, points, 2);
  points = points + 2;
}

//render plot5
function render5() {}

//render plot6
function render6() {
  render1();
  render2();
}

//render plot7
function render7() {
  render3();
  render2();
}

//render plot8
function render8() {
  render3();
  render4();
}

//render plot9
function render9() {
  render1();
  render4();
}

//render plot10
function render10() {
  render1();
  render3();
}

//render plot11
function render11() {
  render2();
  render4();
}

//render plot12
function render12() {
  render2();
  render1();
  render4();
}

//render plot13
function render13() {
  render2();
  render1();
  render3();
}

//render plot14
function render14() {
  render2();
  render4();
  render3();
}

//render plot15
function render15() {
  render1();
  render4();
  render3();
}


//array of plot functions
var plotGrid = [
  plot0,
  plot1,
  plot2,
  plot3,
  plot4,
  plot5,
  plot6,
  plot7,
  plot8,
  plot9,
  plot10,
  plot11,
  plot12,
  plot13,
  plot14,
  plot15
];

//array of render functions
var renderGrid = [
  render0,
  render1,
  render2,
  render3,
  render4,
  render5,
  render6,
  render7,
  render8,
  render9,
  render10,
  render11,
  render12,
  render13,
  render14,
  render15
];

//the maze to be printed out
//each index is a different box that will be printed
var grid = [
  [6, 11, 2, 11, 7, 12, 11, 11, 2, 11, 11, 7],
  [10, 13, 10, 13, 9, 7, 6, 11, 8, 6, 14, 10],
  [1, 8, 10, 9, 11, 4, 3, 13, 6, 3, 6, 3],
  [8, 6, 3, 6, 7, 12, 8, 1, 8, 9, 8, 13],
  [6, 8, 15, 10, 9, 11, 7, 9, 7, 12, 11, 3],
  [1, 11, 11, 4, 11, 14, 9, 7, 9, 11, 7, 10],
  [10, 6, 11, 7, 6, 11, 11, 8, 6, 14, 9, 3],
  [10, 10, 13, 10, 10, 12, 2, 2, 8, 6, 11, 3],
  [10, 10, 10, 10, 9, 7, 10, 10, 6, 8, 12, 7],
  [10, 9, 3, 9, 7, 10, 15, 10, 10, 12, 2, 0],
  [10, 13, 10, 13, 15, 9, 7, 10, 9, 11, 8, 10],
  [9, 8, 9, 4, 11, 11, 8, 9, 11, 11, 11, 8]
];

// var gridSprite = [
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [1,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
//   [0,0,0,0,0,0,0,0,0,0,0,0],
// ];

window.onload = function init() {
  var canvas = document.getElementById("gl-canvas");
  gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) {
    alert("WebGL isn't available");
  }



  //push the points into the color and vertices array
  var x = -1;
  var y = 1;
  for (var i = 0; i < grid.length; i++) {
    var row = grid[i];
    for (var j = 0; j < row.length; j++) {
      var num = row[j];
      plotGrid[num](x + (j * .166), y - (i * .166));
    }
  }

  plotSprite(spriteX, spriteY);

  // for(var i=0; i<gridSprite.length; i++){
  //   var row = gridSprite[i];
  //   for(var j=0; j<row.length; j++){
  //     if(row[j] == 1){
  //       plotSprite(x+(j*.166),y-(i*.166));
  //     }
  //   }
  // }

  //  Configure WebGL
  //
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 1.0, 1.0, 1.0);

  //  Load shaders and initialize attribute buffers

  var program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  // Load the data into the GPU
  var cBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

  // Associate out shader variables with our data buffer
  var vColor = gl.getAttribLocation(program, "vColor");
  gl.vertexAttribPointer(vColor, 3, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vColor);

  // Load the data into the GPU
  var vBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);

  // Associate out shader variables with our data buffer
  var vPosition = gl.getAttribLocation(program, "vPosition");
  gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vPosition);


  //handle keyboard events
  window.onkeydown = function(event) {
    var key = String.fromCharCode(event.keyCode);
    switch (key) {
      case 'J':

        break;

      case 'K':
        break;

      case 'I':
        spriteX += .15;
        plotSprite();
        break;
    }
  };
  requestAnimFrame(render);
};

function render() {

  gl.clear(gl.COLOR_BUFFER_BIT);
  //render all the squares from the grid
  for (var i = 0; i < grid.length; i++) {
    var row = grid[i];
    for (var j = 0; j < row.length; j++) {
      renderGrid[row[j]]();
    }
  }

  renderSprite();


}

迷宫.html

<!DOCTYPE html>
<html>

    <meta charset="utf-8"/>

<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec3 vColor;
varying vec4 color;


void
main()
{
    gl_Position = vPosition;
    color = vec4(vColor, 1.0);

}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;

varying vec4 color;

void
main()
{
    gl_FragColor = color;
}
</script>



<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="maze.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

Answer 1

事实上，您应该将 requestAnimFrame(render); 添加到 render() 函数中以获得动画循环。 requestAnimFrame 不像 setInterval 那样工作，每次你想要一个新的“循环”时都必须调用它:

function render() {
  gl.clear(gl.COLOR_BUFFER_BIT);
  //render all the squares from the grid
  for (var i = 0; i < grid.length; i++) {
    var row = grid[i];
    for (var j = 0; j < row.length; j++) {
      renderGrid[row[j]]();
    }
  }
  renderSprite();

  // loop again
  requestAnimFrame(render); 
}