三角形的“变化”值是如何计算的？

Question

我的问题标题不清楚，没能说得简短准确。
在下面的代码中，我将属性传递到片段着色器中。
我传递了 6 个属性：我知道这些属性用于 2 个绘制的三角形的每个顶点。
但我在片段中传递这些属性（变化）。

顶点之间的值是如何计算的？

在示例中，我创建了一个 readpixel，我复制粘贴了该 readpixel 的控制台日志并对其进行了格式化

"use strict";
    
   
let vertex = `
attribute vec2 a_position;
attribute float a_number;
varying float v_number;
void main() {
  v_number = a_number;
  gl_Position = vec4(a_position, 0, 1);
}
`;
let fragment = `
precision highp float;
varying float v_number;
void main() {
  gl_FragColor=vec4(v_number,0,0,0);
}
`;

var canvas = document.querySelector("#canvas");
canvas.width = 5;
canvas.height = 5;
var gl = canvas.getContext("webgl");
gl.getExtension('OES_texture_float');

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,5,5,0,gl.RGBA,gl.FLOAT,null);
      
let program = gl.createProgram();
const vertexShader=gl.createShader(gl.VERTEX_SHADER);
const fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

let numberBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,numberBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([1,2,3,4,5,6]),gl.STATIC_DRAW);

let positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([
-1, -1,
-1, +1,
+1, -1,
+1, -1,
-1, +1,
+1, +1,
]),gl.STATIC_DRAW);

gl.useProgram(program);
let numberLoc = gl.getAttribLocation(program,"a_number");
gl.enableVertexAttribArray(numberLoc);
gl.bindBuffer(gl.ARRAY_BUFFER,numberBuffer);
gl.vertexAttribPointer(numberLoc,1,gl.FLOAT,false,0,0);

let positionLoc = gl.getAttribLocation(program,"a_position");
gl.enableVertexAttribArray(positionLoc);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLoc,2,gl.FLOAT,false,0,0);


gl.viewport(0, 0, 5, 5);

var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D, texture, 0);

gl.drawArrays(gl.TRIANGLES, 0, 6);
let pixels = new Float32Array(5 * 5 * 4);
gl.readPixels(0, 0, 5, 5, gl.RGBA, gl.FLOAT, pixels);
console.log(pixels);

<canvas id="canvas"></canvas>

<pre>
4.9  5.1  5.3  5.5  5.7
1.9  4.7  4.9  5.1  5.3
1.7  2.1  4.5  4.7  4.9
1.5  1.9  2.3  4.3  4.5 
1.3  1.7  2.1  2.5  4.1

</pre>

Answer 1

它们是线性插值的：

v1 * (1-s) + v2 * s

然而，片段着色器在片段的 center 点而不是角点进行采样，因此当您有两个像素作为输出且数值范围为 0 - 1 时，左侧像素具有

.25

，右侧像素具有

.75 

，如果你有三个像素，它们的左侧“像素内角”将位于

0

、

.33

、

.66

，而它们的右侧像素内角将位于

.33

、

.66

、

1

，因此最终在输出缓冲区中的数字将是两个角之间的中心：

.166

，

.5

，

.833

。

"use strict";
    
   
let vertex = `
attribute vec2 a_position;
attribute float a_number;
varying float v_number;
void main() {
  v_number = a_number;
  gl_Position = vec4(a_position, 0, 1);
}
`;
let fragment = `
precision highp float;
varying float v_number;
void main() {
  gl_FragColor=vec4(v_number,0,0,0);
}
`;

var canvas = document.querySelector("#canvas");
canvas.width = 2;
canvas.height = 2;
var gl = canvas.getContext("webgl");
gl.getExtension('OES_texture_float');

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,5,5,0,gl.RGBA,gl.FLOAT,null);
      
let program = gl.createProgram();
const vertexShader=gl.createShader(gl.VERTEX_SHADER);
const fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

let numberBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,numberBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([0,0,1,1,0,1]),gl.STATIC_DRAW);

let positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([
-1, -1,
-1, +1,
+1, -1,
+1, -1,
-1, +1,
+1, +1,
]),gl.STATIC_DRAW);

gl.useProgram(program);
let numberLoc = gl.getAttribLocation(program,"a_number");
gl.enableVertexAttribArray(numberLoc);
gl.bindBuffer(gl.ARRAY_BUFFER,numberBuffer);
gl.vertexAttribPointer(numberLoc,1,gl.FLOAT,false,0,0);

let positionLoc = gl.getAttribLocation(program,"a_position");
gl.enableVertexAttribArray(positionLoc);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLoc,2,gl.FLOAT,false,0,0);

const vd = 2;
gl.viewport(0, 0, vd, vd);

var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D, texture, 0);

gl.drawArrays(gl.TRIANGLES, 0, 6);
let pixels = new Float32Array(vd * vd * 4);
gl.readPixels(0, 0, vd, vd, gl.RGBA, gl.FLOAT, pixels);
console.log(pixels);

<canvas id="canvas"></canvas>
<pre>
0 1
0 1
</pre>