webgl在顶点着色器中旋转三角形，而不使用变换矩阵

因此，这是尝试在不使用矩阵变换的情况下旋转三角形的结果，我的赋值要求将浮点值传递给顶点着色器，然后在着色器中发生变换数学

我使用旋转顶点

    uPosition.x = (cos(fRotation)*uPosition.x)-(sin(fRotation)*uPosition.y);
    uPosition.y = (cos(fRotation)*uPosition.y)+(sin(fRotation)*uPosition.x);

从我在各地看到的情况来看，它的数学运算与矩阵运算相同，我不想用矩阵运算

完整代码如下 Webgl代码：

var gl;
var points;
var colours;
var fRotation;
var program;

window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );

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

    fRotation = 1;

    //
    //  Initialize our data for the Triangle
    //

    // First, initialize the corners of our triangle with three points.
    points = [
        vec2( 0, 0.6 ),
        vec2( -0.5, -0.3 ),
        vec2( 0.5, -0.3 )
    ];

    //Next, initialize the colours for each corner in Red,Green,Blue
    colours = [
        vec3( 1, 0,0 ),
        vec3( 0, 1,0 ),
        vec3( 0, 0,1 )
    ];

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

    //  Load shaders and initialize attribute buffers
    program = initShaders( gl, vBasicShaderCode,
                               fBasicShaderCode );
    gl.useProgram( program );

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

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

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

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


    render();
};


function render()
{

    gl.uniform1f(gl.getUniformLocation(program, "fRotation"), fRotation );
    gl.clear( gl.COLOR_BUFFER_BIT );
    gl.drawArrays( gl.TRIANGLES, 0, 3 ); //Draw a single triangle (3 points)

    fRotation += 0.1;
}

顶点着色器

var vBasicShaderCode  =`
attribute vec2 aPosition; 
attribute vec3 aColour;
uniform float fRotation;
varying vec3 vColour;


void 
main() 
{
    vColour=aColour;

    vec2 uPosition = vec2(0.0,0.0);

    //translate

    uPosition.x = aPosition.x;
    uPosition.y = aPosition.y;

    uPosition.x = (cos(fRotation)*uPosition.x)-(sin(fRotation)*uPosition.y);
    uPosition.y = (cos(fRotation)*uPosition.y)+(sin(fRotation)*uPosition.x);

    gl_Position = vec4(uPosition.x,uPosition.y,0.0,1.0); 
}`;

---

您正在更改着色器代码中的变量

upposition.x

，然后再将其用于计算

upposition.y

uPosition.x = (cos(fRotation)*uPosition.x)-(sin(fRotation)*uPosition.y);
uPosition.y = (cos(fRotation)*uPosition.y)+(sin(fRotation)*uPosition.x);

使用属性

aPosition

计算

upposition

：

uPosition.x = (cos(fRotation)*aPosition.x)-(sin(fRotation)*aPosition.y);
uPosition.y = (cos(fRotation)*aPosition.y)+(sin(fRotation)*aPosition.x);

---

我说是为了作业，这是讲师们的愿望。另外，为什么我只想跳过这一步，永远不知道它为什么不起作用，对我来说似乎有点无知。我很想学习，我认为这很容易做到，我看不出为什么它不起作用。啊，干杯，谢谢你堆拉比，我知道这很简单，哈哈。我现在很高兴：）