用鼠标点击webgl创建一个圆
我在网上发现了这个程序。当用户每次点击鼠标时，我如何修改下面的程序来创建圆圈？所以可以创建多个圆圈？我是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>
谢谢
回答 1
Stack Overflow用户
发布于 2016-10-25 08:16:25
我推荐一些webgl教程，比如http://webglfundamentals.org
这是一篇关于绘制多种事物的文章
但特别地，WebGL只是一个栅格化库。它没有直接的圆概念。如果您想要绘制多个圆圈，您需要决定如何表示您的圆圈(纹理、点、一些花哨的着色器)，然后决定如何绘制它们(每个圆圈一次绘制调用，每个四次调用一个圆圈，每次抽签调用多个圆圈)。由你决定。
即使你发布的代码也有太多的选项。这个代码画了一个圆圈。在绘制一个圆圈的代码周围放一个循环，它将画N个圆圈。另一方面，您也可以生成一个单独的圆和使用各种矩阵变换来缩放和定位它。
通过单击鼠标，您已经添加了多个问题。
默认情况下，画布将清除WebGL中的每个帧。所以你画用户点击鼠标的地方，但是下一次你画之前的圆圈会被擦除。
最简单的解决方案，所以告诉webgl不要用
gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true });但是这通常不是一个很好的解决方案，因为如果您想调整画布的大小，那么当您调整画布的大小时，它仍然会被清除。
相反，您需要保留所有鼠标单击的列表，然后为每次单击绘制一个圆圈。但这带来了一个新的问题，在太多的点击后，它将变得太慢。这意味着你需要做以上两件事的组合。
不要清除画布，只要点击新的圆圈，如果你需要调整画布的大小后，重新绘制所有旧的圆圈。
正如你所看到的，这是一个比听起来更重要的话题。
https://stackoverflow.com/questions/40214759
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号