通过一个三角形的边的长度，是否足以在WebGL中绘制一个三角形

Question

这个问题可能不清楚，但我会在这里澄清。让我们考虑一个在剪辑空间中具有三角形坐标的阵列：

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

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

var coor2 = [ 100, 100, 100 ]

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

提前感谢

Answer 1

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

想象一下它在JavaScript 中

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

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

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

当然，如果值发生了变化，就可以生成一个三角形。示例

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);

会产生一个三角形。将其转换为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]，我们就不能容易地指定位置，但关键是至少现在我们有了一个改变的值，我们可以生成一个三角形，这只是为了重新迭代WebGL只关心您将gl_Position设置为剪裁空间值。它不在乎你怎么做。

请参阅本文了解更多