Перевести объект вверх и вниз

Im пытается выяснить, как я могу перевести объект круга, нарисованный с помощью TRIANGLE_FAN вверх и вниз по холсту с течением времени.Перевести объект вверх и вниз

object.js

var canvas; 
var gl; 
var bufferId; 
var theta = 0.0; 
var thetaLoc; 
window.onload = function init() { 
canvas = document.getElementById("gl-canvas"); 

gl = WebGLUtils.setupWebGL(canvas); 
if (!gl) { alert("WebGL isn't available"); } 

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

// Load shaders and initialize attribute buffers 
var program = initShaders(gl, "vertex-shader", "fragment-shader"); 
gl.useProgram(program); 

var numTris = 100; 

var vertices = [ 
    0.0, 0.0, 0.0, 
    1.0, 0.0, 0.0 
]; 

var degPerTri = (2 * Math.PI)/numTris; 

for (var i = 0; i < numTris; i++) { 
    var index = 2 * 3 + i * 3; 
    var angle = degPerTri * (i + 1); 

    vertices[index] = Math.cos(angle); 
    vertices[index + 1] = Math.sin(angle); 
    vertices[index + 2] = 0; 
} 

// Load the data into the GPU 
bufferId = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); 
gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); 
bufferId.itemSize = 3; 
bufferId.numItems = numTris + 2; 

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

thetaLoc = gl.getUniformLocation(program, "theta"); 

render(); 
}; 


function render() { 

gl.clear(gl.COLOR_BUFFER_BIT); 

theta += 0.01; 
gl.uniform1f(thetaLoc, theta); 

gl.drawArrays(gl.TRIANGLE_FAN, 0, bufferId.numItems); 

window.requestAnimFrame(render); 
}

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 

    <script id="vertex-shader" type="x-shader/x-vertex"> 
     attribute vec4 vPosition; 
     uniform float theta; 

     void main() { 

      float s = -theta; 
      float c = theta; 

      if (vPosition.y > 1.0) { 
       gl_Position.y = vPosition.y - s; 
      } else if (vPosition.y <= 0.0) { 
       gl_Position.y = vPosition.y + c; 
      } 

      gl_Position.x = vPosition.x; 
      gl_Position.z = vPosition.z; 
      gl_Position.w = vPosition.w; 
     } 
    </script> 

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

     void main() { 
     gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 
     } 
    </script> 
</head> 
<body> 
    <canvas id="gl-canvas" width="500" height="500"> 
     Oops ... your browser doesn't support the HTML5 canvas element 
    </canvas> 
</body> 
</html>

Видимо мой объект никогда не будет двигаться вниз ?? Он движется только вверх.

источник

2015-10-12 Anonymous

Поскольку это

float s = -theta; 
float c = theta; 

if (vPosition.y > 1.0) { 
    gl_Position.y = vPosition.y - s; 
} else if (vPosition.y <= 0.0) { 
    gl_Position.y = vPosition.y + c; 
}

в основном это

if (vPosition.y > 1.0) { 
    gl_Position.y = vPosition.y + theta; // vPosition.y - (-theta) 
} else if (vPosition.y <= 0.0) { 
    gl_Position.y = vPosition.y + theta; 
}

и вы всегда растет theta.

источник

2015-10-12 23:01:14

Е. Основной проблемой было постоянное увеличение тета. Спасибо, что указал мне в правильном направлении! – Anonymous

Перевести объект вверх и вниз

ответ

Смежные вопросы