javascript - 仅传递三 Angular 形边长就足以在 WebGL 中绘制三 Angular 形吗？

Question

这个问题可能不太清楚，但我会在这里澄清。让我们考虑一个在剪辑空间中具有三 Angular 形坐标的数组:

 var coor = [ 
   -0.4, 0.6, 
    0.0, -0.5, 
   -0.5, 0.0,  
    0.5, -0.5, 
    0.0 
 ]

因此，coor 数组将帮助我们使用 WebGL 绘制三 Angular 形。但我不想这样做:

var coor2 = [ 100, 100, 100 ]

在 coor2 中，我给出了绘制三 Angular 形的边长。这将是一个等边三 Angular 形。那么，我可以做一些事情，输入三 Angular 形的三个边，然后脚本将它们转换为可以在剪辑空间中剪辑并可以由 WebGL 读取的坐标吗？

提前致谢

Answer 1

WebGL 只关心您将 gl_Position 设置为剪辑空间值。它并不关心你如何做。由您决定如何做到这一点。在顶点着色器内部，至少在 WebGL1 中，事物是无状态的。这意味着当您绘制三 Angular 形时，您的顶点着色器将被调用 3 次。它需要在剪辑空间中将 gl_Position 设置为 3 个不同的值，并且调用之间没有状态。因此，给定 100 三次，每次调用顶点着色器时如何计算不同值？

想象一下 JavaScript 中的情况

const gl_Position1 = vertexShader(100);
const gl_Position2 = vertexShader(100);
const gl_Position3 = vertexShader(100);

函数vertexShader如何在没有其他输入的情况下产生3个不同的值？除非有其他状态，否则它不会产生不同的值。 WebGL1 中的顶点着色器没有任何其他状态。

您需要传入一些每次迭代都会更改的数据。

当然，如果值发生变化，那么您可以生成一个三 Angular 形。示例

function vertexShader(v) {
  const angle = v / 3 * Math.PI * 2;
  return [Math.cos(angle), Math.sin(angle), 0, 1];
}

const gl_Position1 = vertexShader(0);
const gl_Position2 = vertexShader(1);
const gl_Position3 = vertexShader(2);

会产生一个三 Angular 形。将其转换为 GLSL 和 WebGL

const gl = document.querySelector('canvas').getContext('webgl');

const vs = `
attribute float v;

#define PI radians(180.0)

void main() {
  float angle = v / 3.0 * PI * 2.0;
  gl_Position = vec4(cos(angle), sin(angle), 0, 1);
}
`;

const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(1, 0, 0, 1);
}
`;

const program = twgl.createProgram(gl, [vs, fs]);
const vLocation = gl.getAttribLocation(program, 'v');

const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 1, 2]), gl.STATIC_DRAW);

gl.enableVertexAttribArray(vLocation);
gl.vertexAttribPointer(vLocation, 1, gl.FLOAT, false, 0, 0);

gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

当然，鉴于我们只传入 [0, 1, 2]，我们不能轻易指定一个位置，但重点是至少现在我们有了一个可以改变的值，我们可以生成一个三 Angular 形，它只是为了重新iterate WebGL 只关心您将 gl_Position 设置为剪辑空间值。它并不关心你如何做。

参见this article了解更多