Question

我试图找出如何随着时间的推移在画布内上下翻转用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>

显然我的物体永远不会向下移动？它只是向上移动。

Answer 1

因为这个

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。

上下翻译对象

1 个答案: