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（）错误：0：77：'位置'：重新定义

似乎Three.js alredy在顶点着色器中设置了一个名为“position”的东西：

attribute vec3 position;

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

任何提示都将非常感激

Answer 1

THREE.js保留名称position，将顶点属性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;
    }

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

1 个答案: