如何确定片段相对于其网格的坐标答案

【问题标题】：How to determine coordinates of fragment relative to its mesh如何确定片段相对于其网格的坐标
【发布时间】：2016-12-17 07:22:14
【问题描述】：

我正在尝试使用 ThreeJS 着色器创建一个平铺系统。我想我会从一个带有渐变填充的 PlaneBufferGeometry (ShaderMaterial) 开始。

我真的是 GLSL 新手，我正在努力寻找一种方法来确定片段在其网格内的坐标（以计算梯度值）。

为了清楚起见，我正在寻找这些示例中使用的相同变量 position： http://pixelshaders.com/sample/

代码（片段着色器）：

precision mediump float;

varying vec2 position;

void main() {
  gl_FragColor.r = position.x;
  gl_FragColor.g = 0.0;
  gl_FragColor.b = 0.0;
  gl_FragColor.a = 1.0;
}

但是这个例子只显示了片段着色器的代码，所以我不明白他是如何构造那个变量的。

我试图在我的顶点着色器中声明相同的变量：

varying vec2 position;

但我收到以下错误（Chrome 控制台）：

THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:77: 'position' : redefinition

看起来 Three.js 已经在顶点着色器中设置了一个叫做“位置”的东西：

attribute vec3 position;

但我很确定我需要创建自己的 vec2 变量，我只是不知道如何计算它。

任何提示将不胜感激

【问题讨论】：

标签： three.js glsl shader fragment-shader

【解决方案1】：

名称position 由THREE.js 保留，用于将顶点属性position 传递给顶点着色器。只需将变量命名为不同于position 即可。你可以改用这个——

顶点着色器：

varying vec2 vPosition;

void main() {
  // your calculation
  vPosition = position.xy;
  gl_Position = vec4(position, 1.0);
}

片段着色器：

varying vec2 vPosition;

void main() {
  gl_FragColor.r = vPosition.x;
  gl_FragColor.g = 0.0;
  gl_FragColor.b = 0.0;
  gl_FragColor.a = 1.0;
}

另外，您可以使用内置变量gl_FragCoord 来实现您要查找的内容。这样，您不必使用额外的变量。

片段着色器：

void main() {
      gl_FragColor.r = gl_FragCoord.x/WINDOW_WIDTH;
      gl_FragColor.g = 0.0;
      gl_FragColor.b = 0.0;
      gl_FragColor.a = 1.0;
    }

【讨论】：