Question

我现在开始使用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>

所以我看到符号是不同的。因为旋转需要x，y，z轴，而不是traslation no。我只是尝试旋转我的翻译部分：

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

WebGL位置以进行平移和旋转

1 个答案: