我在网上找到了这个程序。我如何修改以下程序以在用户每次单击鼠标时创建圆圈？那么可以创建多个圈子吗？我是 webgl 新手，但我迷路了，非常感谢您的帮助
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body onload="onLoad()">
<script id="vertex-shader" type="x-shader/x-vertex">
uniform vec2 u_resolution;
attribute vec2 a_position;
void main(void) {
vec2 clipspace = a_position / u_resolution * 2.0 - 1.0;
gl_Position = vec4(clipspace * vec2(1, -1), 0, 1);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);
}
</script>
<script>
function onLoad () {
var canvas = document.getElementById("canvas");
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");//
//gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.8, 0.0, 0.3, 1.0);//
gl.clear(gl.COLOR_BUFFER_BIT);//
var v = document.getElementById("vertex-shader").firstChild.nodeValue;//
var f = document.getElementById("fragment-shader").firstChild.nodeValue;//
var vs = gl.createShader(gl.VERTEX_SHADER);//
gl.shaderSource(vs, v);//
gl.compileShader(vs);//
var fs = gl.createShader(gl.FRAGMENT_SHADER);//
gl.shaderSource(fs, f);//
gl.compileShader(fs);//
var program = gl.createProgram();//
gl.attachShader(program, vs);//
gl.attachShader(program, fs);//
gl.linkProgram(program);//
gl.useProgram(program);
var circle = {x: 50, y: 50, r: 15};
var ATTRIBUTES = 2;
var numFans = 16;
var degreePerFan = (2 * Math.PI) / numFans;
var vertexData = [circle.x, circle.y];
for(var i = 0; i <= numFans; i++) {
var index = ATTRIBUTES * i + 2; // there is already 2 items in array
var angle = degreePerFan * (i+1);
vertexData[index] = circle.x + Math.cos(angle) * circle.r;
vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r;
}
var vertexDataTyped = new Float32Array(vertexData);
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
gl.enableVertexAttribArray(positionLocation);
var positionLocation = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);
}
onLoad();
</script>
<canvas id="canvas" style="border: none;" width="300" height="150"></canvas>
</body>
</html>
谢谢
最佳答案
我推荐一些 webgl 教程，例如 http://webglfundamentals.org
Here's an article on drawing multiple things
但特别是 WebGL 只是一个光栅化库。它没有直接的圆的概念。如果你想绘制多个圆圈，你需要决定如何表示你的圆圈(纹理、点、一些奇特的着色器)，然后决定如何绘制它们(每个圆圈一个绘制调用，每个四边形一个圆圈，多个圆圈)每次绘制调用)。这取决于你。
即使您发布的代码也有太多选项。该代码画了一个圆。在绘制一个圆的代码周围放置一个循环，它将绘制 N 个圆。另一方面，您也可以生成一个圆圈和 use various matrix transforms to scale and position it
通过鼠标点击，您添加了多个问题。
默认情况下，WebGL 中的每一帧都会清除 Canvas 。因此，您在用户单击鼠标的位置绘制，但下次绘制时，之前的圆圈将被删除。
最简单的解决方案是告诉 webgl 不要清除 Canvas
gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true });
但这通常不是一个好的解决方案，因为如果您想调整 Canvas 大小，在调整大小时它仍然会被清除。
相反，您需要保留所有鼠标单击的列表，然后每次单击都画一个圆圈。但这带来了一个新问题，点击次数过多后，速度会变得太慢。这意味着您需要结合执行上述两件事。
不要清除 Canvas ，只需在单击时绘制新圆圈，如果在调整 Canvas 大小后需要调整 Canvas 大小，请绘制所有旧圆圈。
正如您所看到的，事实证明这是一个比听起来更大的话题。
关于javascript - 通过鼠标点击使用 webgl 创建一个圆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40214759/