GLSL片段着色器获取顶点位置

Question

<script id="shader-triangle-fs" type="x-shader/x-fragment">
  precision mediump float;

  uniform vec4 colorVec;
  uniform sampler2D uSampler;

  varying highp vec2 vTextureCoord;
  varying vec3 vVertexPosition;


  void main(void) {
    float dist = length(vVertexPosition.xy - gl_FragCoord.xy);
    float att = 100.0/dist;
    vec4 color = vec4(att,att,att, 1);
    vec4 texture = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
    gl_FragColor = color;
  }
</script>

<script id="shader-triangle-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying highp vec2 vTextureCoord;
  varying vec3 vVertexPosition;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
    vVertexPosition = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  }
</script>

在float dist = length(vVertexPosition.xy - gl_FragCoord.xy);中，我想要得到的是当前顶点坐标到片元坐标的距离。

但是我总是得到这个结果。

http://puu.sh/6rbva.jpg
http://puu.sh/6rbzM.jpg

(我使用了triangleStrip。)

这些图像显示vVertexPosition.xy - gl_FragCoord.xy = 0所以vVertexPosition.xy == gl_FragCoord.xy。

为什么会发生这种情况？
如何从当前顶点位置到当前FragCoord获取距离？

- bmyu

Answer 1

你将vVertexPosition声明为varying，因此它在三角形的三个顶点之间插值。由于每个顶点设置的值都是顶点位置，因此它最终将与片段位置相同。

问题是，你想要什么？你说你想要“从当前顶点位置到距离”，但这没有任何意义，因为片段着色器中不存在单个“当前”顶点 - 有多个顶点定义包含片段的基元。

随着OGL / GLSL的更新版本，你可以将它定义为flat varying（或者根据版本只是flat），这样它就是引发顶点的位置。

- Chris Dodd

---

谢谢。但是当使用 flat varying vec3 vVertexPosition; 时，我遇到了一个错误“非法使用保留字”。我正在使用 WebGL，glsl 版本为 100。 - bmyu