修改属性 vec2 变量

Question

在我的顶点着色器中，我想修改在片段着色器中共享的 attribute vec2 a_position 变量。通过此修改，我应该将图像转换为圆柱投影。
这就是我在着色器中所做的：

<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
    attribute vec2 a_position;

    uniform vec2 u_resolution;
    uniform mat3 u_matrix;

    varying vec2 v_texCoord;

    void main() {
       // modifying START
       float angle = atan(a_position.y, a_position.x);
       float r = sqrt(a_position.x*a_position.x + a_position.y*a_position.y);
       a_position.x = r*cos(angle);
       a_position.y = r*sin(angle);
       // modifying STOP
       gl_Position = vec4(u_matrix * vec3(a_position, 1), 1);
       v_texCoord = a_position;
    }
</script>

<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
    precision mediump float;

    // our texture
    uniform sampler2D u_image;

    // the texCoords passed in from the vertex shader.
    varying vec2 v_texCoord;

    void main() {
       gl_FragColor = texture2D(u_image, v_texCoord);
    }
</script>

但是我收到了这个错误：

compiling shader '[object WebGLShader]':ERROR: 0:12: 'assign' : l-value required "a_position" (can't modify an attribute) ERROR: 0:13: 'assign' : l-value required "a_position" (can't modify an attribute)

你不知道如何解决这个问题吗？

Answer 1

只需使用另一个变量

attribute vec2 a_position;

uniform vec2 u_resolution;
uniform mat3 u_matrix;

varying vec2 v_texCoord;

void main() {
   // modifying START
   float angle = atan(a_position.y, a_position.x);
   float r = sqrt(a_position.x*a_position.x + a_position.y*a_position.y);
   vec3 p = vec3(
     r*cos(angle),
     r*sin(angle),
     1);
   // modifying STOP
   gl_Position = vec4(u_matrix * p, 1);
   v_texCoord = a_position;
}

修改属性 vec2 变量

modify attribute vec2 variable

html

canvas

projection

webgl