Javascript 平移和旋转的WebGl位置

我现在开始使用WebGl，我看到了这个例子

我在HTML部分中以这种方式提供了相同的传输示例：

gl_Position = traslation * vPosition;

其中传输是一个矩阵 现在，为了练习，我想做一个旋转和平移的三角形。 我也做过旋转和工作，但当我把这两件事结合起来时，就不会旋转了

在我的版本中，我有：

<script id="vertex-shader" type="x-shader/x-vertex">

    attribute vec4 vPosition;
    uniform float theta;

    void main()
    {
        float s = sin( theta );
        float c = cos( theta );

        gl_Position.x = -s * vPosition.y + c * vPosition.x;
        gl_Position.y =  s * vPosition.x + c * vPosition.y;
        gl_Position.z = 0.0;
        gl_Position.w = 1.0;

    }
</script>

我能用这个符号吗

在我链接的示例中，使用了我不太理解的方式

 gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);

为什么要使用vec4？我认为转换矩阵是更好的选择

有人能帮我吗？

这段代码

gl_Position.x = -s * vPosition.y + c * vPosition.x;
gl_Position.y =  s * vPosition.x + c * vPosition.y;
gl_Position.z = 0.0;
gl_Position.w = 1.0;
gl_Position = traslation * vPosition;

最后一行将替换前4行的结果

你可以这样做

gl_Position += traslation;

但是你可能应该用一个矩阵作为

至于为什么这个代码

 gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);

使用vec4，这是因为gl_位置是vec4

你也可以这样做

 gl_Position.xy = (u_matrix * vec3(a_position, 1)).xy;
 gl_Position.z = 0.0;
 gl_Position.w = 1.0;

还是这个

 gl_Position.xyz = u_matrix * vec3(a_position, 1);
 gl_Position.w = 1.0;

通常，大多数GLSL着色器使用vec4和mat4，因为这允许2D和3D使用相同的着色器

看

 gl_Position.xyz = u_matrix * vec3(a_position, 1);
 gl_Position.w = 1.0;