WebGL在三角形内部插值与参考颜色。

Question

WebGL在三角形内部插值与参考颜色。

javascriptglslshaderwebglregl

3

使用regl，我正在尝试使用WebGL绘制一个三角形，在三角形内部的某个参考点定义一个颜色，并使其他像素的颜色与它们到该点的距离成为一个函数关系。

目前为止，只有当这个参考点是其中一个角落时才有效：

从角落渐变

这是使用以下的顶点和片段着色器完成的：

  vert: `
  precision mediump float;
  uniform float scale;
  attribute vec2 position;
  attribute vec3 color;
  varying vec3 fcolor;
  void main () {
    fcolor = color;
    gl_Position = vec4(scale * position, 0, 1);
  }
  `,

  frag: `
  precision mediump float;
  varying vec3 fcolor;
  void main () {
    gl_FragColor = vec4(sqrt(fcolor), 1);
  }
  `,

  attributes: {
    position: [
      [1, 0],
      [0, 1],
      [-1, -1]
    ],

    color: [
      [1, 0, 0],
      [0, 1, 0],
      [0, 0, 1]
    ]
  },

  uniforms: {
    scale: regl.prop('scale')
  }

这里的参考点是[1,0]，[0,1]和[-1,-1]。使用相同的三角形，我如何在[0,0]处放置另一个参考点，例如白色？（这将在三角形内部形成一个“岛屿”）

- Ren

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rabbid76 · Accepted Answer

你需要定义两个 uniform 变量，一个用于参考点的坐标，一个用于参考点的颜色：

uniforms: {
    scale: regl.prop('scale'),
    refPoint: [0, 0],
    refColor: [1, 1, 1]
}

通过一个 varying 变量从顶点着色器向片元着色器传递顶点坐标：

precision mediump float;

uniform float scale;

attribute vec2 position;
attribute vec3 color;

varying vec2 fpos;
varying vec3 fcolor;

void main()
{
    fpos        = position;
    fcolor      = color;
    gl_Position = vec4(scale * position, 0, 1);
}

使用distance函数在片段着色器中计算参考点到插值位置的距离：

float dist = distance(refPoint, fpos);

通过mix，根据距离插值颜色：

vec3 micColor = mix(refColor, fcolor, dist);

片段着色器：

precision mediump float;

uniform vec2 refPoint;
uniform vec3 refColor;

varying vec2 fpos;
varying vec3 fcolor;

void main()
{
    float dist    = distance(refPoint, fpos);
    vec3 micColor = mix(refColor, fcolor, dist);
    gl_FragColor  = vec4(sqrt(micColor), 1);
}