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

Question

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

我是 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 已经在顶点着色器中设置了一个叫做 'position' 的东西：

attribute vec3 position;

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

任何提示将不胜感激

Answer 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;
    }

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

How to determine coordinates of fragment relative to its mesh

shader

glsl

fragment-shader

three.js