javascript - 用于平移和旋转的 WebGl 位置

Question

我现在开始使用 WebGl，并且我看到了这个示例

WebGL How It Works

我在 HTML 部分中以这种方式使用相同的示例(用于翻译):

gl_Position = traslation * vPosition;

其中平移是矩阵 现在(只是为了练习)我希望让我的三 Angular 形旋转和平移。 我已经进行了旋转和工作，但是当我将两者结合起来时，不会旋转。

在我的旋转版本中，我有:

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

所以我看到符号是不同的。因为旋转需要 x,y,z 轴，而平移则不需要。我只是轮流尝试我的翻译部分:

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;

我可以使用这个表示法吗？

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

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

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

有人可以帮助我吗？

Answer 1

这段代码

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;

但是你可能应该使用矩阵 this article explains

至于为什么这段代码

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

使用 vec4，因为 gl_Position 是 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

参见https://webglfundamentals.org/webgl/lessons/webgl-3d-orthographic.html