Open WebGLは迷路を通して三角形を翻訳できません

Question

開いているwebGLを使ってこのスプライト（三角形）を迷路に移動しようとしています。私は今それを持っているので、私は15を動かすべきですが、それを押すと、三角形が更新された位置を示す新しい画面は表示されません。レンダリングコールをキーボードイベント機能内に入れようとしましたが、画面が空白になります。私は、アニメーションフレームを間違って設定したか、アニメーションフレームは必要ないと思う。

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(); 


} 

maze.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

maze.jsは確かにあなたはアニメーションループを得るためにあなたのrender()関数にrequestAnimFrame(render);を追加する必要があります。 requestAnimFramesetIntervalのように動作しません、それはあなたが新しい「ループ」するたびに呼び出さなければなりません。

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); 
}