绘制 webgl 基元
Drawing webgl primitives
我知道如何使用 WebGL 绘制正方形、矩形和三角形。然而，我对如何使用 triangle_fan 画圆有点困惑。我创建了一个包含顶点的数组并将其绑定到缓冲区。
在我绘制三角形等的方式中，我创建了一个数组来填充它的顶点。
var circle= [...];
所以当我这样做来创建一个圆时，似乎我必须放置很多顶点才能使其平滑。
有没有一种方法可以用更简单、更少的代码创建一个圆圈？
确实常用的做法是使用大量的顶点来使不完美circle/ball。由于我们使用像素来显示事物，circles/balls 从来都不是完美的，但可能看起来很完美。
例如three.js editor中的基本圆是由32个三角形组成的。您应该根据相机与圆圈的距离来增加或减少数量。
无论如何，还有其他方法可以创建完美的形状，而不仅仅是圆形。逐个案例，您的想象力或模式被用来实现它。
例如在 webgl 中我们只有点和三角形。可以在着色器中修改最终外观：
- 在画之前，你建立一套你想画的points/triangles。
- 然后vertex shader转。它可能会修改每个顶点的位置。它现在可能没有帮助，所以我现在将跳过描述。
- 片段着色器转。片段着色器表示在 triangle/point 覆盖的每个像素的位置上应该显示什么颜色。
现在重要的是，你可以使用 aplha 通道来渲染透明颜色（或者高级你可以跳过绘制这个像素 - 不确定这一点）。所以你可以做的是内切圆。如果你用顶点着色器改变顶点的位置，你也可以做外接圆。 Example is here, it is from previously answered question Change color in middle of circle
片段着色器的核心部分：
varying vec4 pos;
uniform vec2 middle;
uniform float r;
void main() {
// inscribed circle math
if (distance(pos.xy, middle) > r) {
discard;
}
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
我不会说这是最好的选择，它只是可能的。
广泛使用的是例如 Bezier curves，它可以帮助您实现任何自定义形状。这通常不用于实时渲染太慢，但适用于预渲染视频或电影。
我最后要提到的是顶点法线。这是核心的东西。您为每个顶点分配一个法向量。然后你可以在着色器中使用这个向量来修改光反射或更多。然后球看起来更好，因为在反射中没有尖锐的边缘。
以 this demo 为例。如果你玩了一会儿，你会在表面上认出相当大的三角形，或者如果你专注于边缘，你会注意到。但如果你不集中注意力，球似乎很完美。这是因为镜子分散了你的注意力。一个彩球不会看起来像这样。
法线也可以像贝塞尔曲线一样使用。
一种方法是将列表中的前两个顶点设置为 (0,0,0) 和 (1,0,0)。然后您可以使用 cos() 和 sin() 计算剩余的顶点，因为它们将 return 圆上点的 x 和 y 值。
var numTris = 100;
vertices = [
0.0, 0.0, 0.0,
1.0, 0.0, 0.0
];
var degPerTri = (2 * Math.PI) / numTris;
for(var i = 0; i < numTris; i++) {
var index = 2*3 + i*3
var angle = degPerTri * (i+1);
vertices[index] = Math.cos(angle);
vertices[index+1] = Math.sin(angle);
vertices[index+2] = 0;
}
这是一张图片，向您展示 TRIANGLE_FAN 期望顶点的顺序：
列表中的第一个顶点将由扇形中的每个三角形共享（因此它将成为我们圆的中心）。扇形中的每个三角形都由两个连续的顶点和列表中的第一个顶点组成。注意顶点1和7在同一个位置。
您可以在此处查看实际效果：
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
var squareVertexPositionBuffer;
function initBuffers() {
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
var numTris = 100;
vertices = [
0.0, 0.0, 0.0,
1.0, 0.0, 0.0
];
var degPerTri = (2 * Math.PI) / numTris;
for(var i = 0; i < numTris; i++) {
var index = 2*3 + i*3
var angle = degPerTri * (i+1);
vertices[index] = Math.cos(angle);
vertices[index+1] = Math.sin(angle);
vertices[index+2] = 0;
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = numTris + 2;
}
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 0.0, -3.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);
}
function webGLStart() {
var canvas = document.getElementById("canvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://antonpantev.com/so-related/attribsnotsetup/custom_lesson4_files/glMatrix-0.9.5.min.js"></script><style type="text/css">.cf-hidden { display: none; } .cf-invisible { visibility: hidden; }</style>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
</head>
<body onload="webGLStart();">
<canvas id="canvas" style="border: none;" width="500" height="500"></canvas>
</body>
</html>
我知道如何使用 WebGL 绘制正方形、矩形和三角形。然而，我对如何使用 triangle_fan 画圆有点困惑。我创建了一个包含顶点的数组并将其绑定到缓冲区。
在我绘制三角形等的方式中，我创建了一个数组来填充它的顶点。
var circle= [...];
所以当我这样做来创建一个圆时，似乎我必须放置很多顶点才能使其平滑。
有没有一种方法可以用更简单、更少的代码创建一个圆圈？
确实常用的做法是使用大量的顶点来使不完美circle/ball。由于我们使用像素来显示事物，circles/balls 从来都不是完美的，但可能看起来很完美。
例如three.js editor中的基本圆是由32个三角形组成的。您应该根据相机与圆圈的距离来增加或减少数量。
无论如何，还有其他方法可以创建完美的形状，而不仅仅是圆形。逐个案例，您的想象力或模式被用来实现它。
例如在 webgl 中我们只有点和三角形。可以在着色器中修改最终外观：
- 在画之前，你建立一套你想画的points/triangles。
- 然后vertex shader转。它可能会修改每个顶点的位置。它现在可能没有帮助，所以我现在将跳过描述。
- 片段着色器转。片段着色器表示在 triangle/point 覆盖的每个像素的位置上应该显示什么颜色。 现在重要的是，你可以使用 aplha 通道来渲染透明颜色（或者高级你可以跳过绘制这个像素 - 不确定这一点）。所以你可以做的是内切圆。如果你用顶点着色器改变顶点的位置，你也可以做外接圆。 Example is here, it is from previously answered question Change color in middle of circle
片段着色器的核心部分：
varying vec4 pos;
uniform vec2 middle;
uniform float r;
void main() {
// inscribed circle math
if (distance(pos.xy, middle) > r) {
discard;
}
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
我不会说这是最好的选择，它只是可能的。
广泛使用的是例如 Bezier curves，它可以帮助您实现任何自定义形状。这通常不用于实时渲染太慢，但适用于预渲染视频或电影。
我最后要提到的是顶点法线。这是核心的东西。您为每个顶点分配一个法向量。然后你可以在着色器中使用这个向量来修改光反射或更多。然后球看起来更好，因为在反射中没有尖锐的边缘。 以 this demo 为例。如果你玩了一会儿，你会在表面上认出相当大的三角形，或者如果你专注于边缘，你会注意到。但如果你不集中注意力，球似乎很完美。这是因为镜子分散了你的注意力。一个彩球不会看起来像这样。 法线也可以像贝塞尔曲线一样使用。
一种方法是将列表中的前两个顶点设置为 (0,0,0) 和 (1,0,0)。然后您可以使用 cos() 和 sin() 计算剩余的顶点，因为它们将 return 圆上点的 x 和 y 值。
var numTris = 100;
vertices = [
0.0, 0.0, 0.0,
1.0, 0.0, 0.0
];
var degPerTri = (2 * Math.PI) / numTris;
for(var i = 0; i < numTris; i++) {
var index = 2*3 + i*3
var angle = degPerTri * (i+1);
vertices[index] = Math.cos(angle);
vertices[index+1] = Math.sin(angle);
vertices[index+2] = 0;
}
这是一张图片，向您展示 TRIANGLE_FAN 期望顶点的顺序：
列表中的第一个顶点将由扇形中的每个三角形共享（因此它将成为我们圆的中心）。扇形中的每个三角形都由两个连续的顶点和列表中的第一个顶点组成。注意顶点1和7在同一个位置。
您可以在此处查看实际效果：
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}
var mvMatrix = mat4.create();
var pMatrix = mat4.create();
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
var squareVertexPositionBuffer;
function initBuffers() {
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
var numTris = 100;
vertices = [
0.0, 0.0, 0.0,
1.0, 0.0, 0.0
];
var degPerTri = (2 * Math.PI) / numTris;
for(var i = 0; i < numTris; i++) {
var index = 2*3 + i*3
var angle = degPerTri * (i+1);
vertices[index] = Math.cos(angle);
vertices[index+1] = Math.sin(angle);
vertices[index+2] = 0;
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = numTris + 2;
}
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 0.0, -3.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);
}
function webGLStart() {
var canvas = document.getElementById("canvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://antonpantev.com/so-related/attribsnotsetup/custom_lesson4_files/glMatrix-0.9.5.min.js"></script><style type="text/css">.cf-hidden { display: none; } .cf-invisible { visibility: hidden; }</style>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
</head>
<body onload="webGLStart();">
<canvas id="canvas" style="border: none;" width="500" height="500"></canvas>
</body>
</html>