个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我是新手，每次在鼠标点击时，我都试图在 WebGL 中绘制一个大小为 10 的点。在我点击的地方。但是由于一些逻辑错误，它的行为有点不同，它在点击时画了两个点。我也通过了黑色。它有时会绘制不同颜色的点(如绿色)。
<html>
<head>
<meta charset="utf-8">
<script id="vertex" type="x-shader">
attribute vec2 aVertexPosition;
attribute vec4 vColor;
varying vec4 fColor;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
gl_PointSize = 10.0;
fColor = vColor;
}
</script>
<script id="fragment" type="x-shader">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 fColor;
void main() {
gl_FragColor = fColor;
}
</script>
<script type="text/javascript">
var points = [];
var index = 0;
function init1(){
var canvas = document.getElementById("mycanvas");
gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var v = document.getElementById("vertex").firstChild.nodeValue;
var f = document.getElementById("fragment").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);
color= [0.0, 0.0, 0.0, 1.0];
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, 8*200, gl.STATIC_DRAW);
program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
var cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, 16*200, gl.STATIC_DRAW);
program.vColor = gl.getAttribLocation(program, "vColor");
gl.enableVertexAttribArray(program.vColor);
gl.vertexAttribPointer(program.vColor, 3, gl.FLOAT, false, 0, 0);
var flattenedVertices = [];
var idx = 0;
canvas.addEventListener("mousedown", function(event){
x=2*event.clientX/canvas.width-1;
y=2*(canvas.height-event.clientY)/canvas.height-1;
var pts = [x, y];
points.push(pts);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 8*index++, new Float32Array(pts));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 16*index++, new Float32Array(color));
});
render();
}
function render(){
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays(gl.POINTS, 0, index);
window.requestAnimationFrame(render);
}
</script>
</head>
<body onload="init1()">
<canvas id="mycanvas" width="800" height="500"></canvas>
</body>
以上是我的代码，如果有人可以帮助我微调它以完全按照我的要求工作。我面临一些问题，
1) 我怀疑它在每次点击时都会绘制两个点。2) 如果我在 gl.vertexAttribPointer(program.vColor, 3, gl.FLOAT, false, 0, 0); 行中将数字 3 更改为 4 它只绘制一个点，即初始点，并且不会在连续点击时绘制任何点。 请帮忙。
最佳答案
您通过两次 index++ 调用将 index 递增两次。改为这样做:
var i = index;
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 8*i, new Float32Array(pts));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 16*i, new Float32Array(color));
index ++;
我怀疑你的意思是 gl.vertexAttribPointer(program.vColor, 4, gl.FLOAT, false, 0, 0); 而不是 gl.vertexAttribPointer(program.vColor, 3 , gl.FLOAT, false, 0, 0); 因为你的颜色是 4 个元素:var color= [0.0, 0.0, 0.0, 1.0];
此外，在分配新的 BufferData 时使用适当的提示。如果您的数据不是静态的(比如在“绘制”新点时如何更改缓冲区)，请使用 gl.STREAM_DRAW 或 gl.DYNAMIC_DRAW。使用错误的提示可能会造成 5-10 倍的性能损失。
关于javascript - 在 webGL 中点击绘制点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31322725/
26
4
0
我需要你的帮助!我在它们之间放置了随机数量的 div。 Item description Item description Item description Item
我有两个 NSDates，时间格式为“h:mm a”(即 6:00 AM 和 8:00 PM)。 我试图找出这两个时间之间的中点是什么时间。 对于上面的示例，早上 6:00 和晚上 8:00 之间的中
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
我正在寻找一种有效的算法来检查一个点是否在 3D 中的另一个点附近。 sqrt((x2-x1)^2 + (y2-y1)^2 + (z2-z1)^2) < radius 这似乎并不太快，实际上我不需要这
我可以让 pandas cut/qcut 函数返回 bin 端点或 bin 中点而不是一串 bin 标签吗？ 目前 pd.cut(pd.Series(np.arange(11)), bins = 5)
我是一名优秀的程序员,十分优秀！