Рисование gl.POINTS и gl.TRIANGLES в одном и том же холсте
Я пытаюсь понять, как я могу рисовать треугольники вместо точек на основе событий мыши. Код как пара:
var gl;
var points = [];
var tpoints = [];
var index = 0;
var cIndex = 0;
var dTri = false;
var dPoint = true;
var count = 0;
var counter = 0;
function init() {
var canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
alert("WebGL isn't available");
}
var colors = [
vec4(0.3921, 0.5843, 0.9294, 1.0), //Default
vec4(0.0, 0.0, 0.0, 1.0), // black
vec4(1.0, 0.0, 0.0, 1.0), // red
vec4(1.0, 1.0, 0.0, 1.0), // yellow
vec4(0.0, 1.0, 0.0, 1.0), // green
vec4(0.0, 0.0, 1.0, 1.0), // blue
vec4(1.0, 0.0, 1.0, 1.0), // magenta
vec4(0.0, 1.0, 1.0, 1.0) // cyan
];
gl.viewport(0, 0, canvas.width, canvas.height);
var m = document.getElementById("mymenu");
m.addEventListener("click", function() {
cIndex = m.selectedIndex;
});
var a = colors[cIndex][0];
var b = colors[cIndex][1];
var c = colors[cIndex][2];
var d = colors[cIndex][3];
gl.clearColor(a, b, c, d);
// Load shaders and initialize attribute buffers
var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, 8 * 200, gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
var cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, 16 * 200, gl.STATIC_DRAW);
var vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);
canvas.addEventListener("mousedown", function(event) {
counter++;
var i = index;
x = 2 * (event.clientX - 12) / canvas.width - 1;
y = 2 * (canvas.height - (event.clientY - 165)) / canvas.height - 1;
var pts = [x, y];
console.log(pts);
if (dPoint || (dTri && counter % 3 != 0)) {
points.push(pts);
} else if (dTri) {
index = index - 3;
tpoints.push(pts);
tpoints.push(points.pop());
tpoints.push(points.pop());
count++;
}
index++;
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 8 * i, flatten(pts));
t = vec4(colors[cIndex]);
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 16 * i, flatten(t));
});
render();
};
function drawTriangles() {
dTri = true;
dPoint = false;
counter = 0;
}
function drawPoints() {
dTri = false;
dPoint = true;
}
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, index);
gl.drawArrays(gl.TRIANGLES, 0, count);
window.requestAnimationFrame(render);
}
function clearC() {
var oldcanv = document.getElementById('gl-canvas');
document.body.removeChild(oldcanv);
var canv = document.createElement('canvas');
canv.id = 'gl-canvas';
canv.width = 500;
canv.height = 500;
document.body.appendChild(canv);
index = 0;
count = 0;
init();
}<!DOCTYPE html>
<html>
<head>
<title>CG - Part2</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition; attribute vec4 vColor; varying vec4 fColor; void main() { gl_Position = vPosition; gl_PointSize = 10.0; fColor = vColor; }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float; varying vec4 fColor; void main() { gl_FragColor = fColor; }
</script>
<script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
<script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
<script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
<script>
window.onload = init;
</script>
</head>
<body>
<div style="margin-top: 10px; margin-bottom: 10px">
<input type="button" onClick="clearC()" value="Clear">
<input type="button" onClick="drawTriangles()" value="Draw Triangles">
<input type="button" onClick="drawPoints()" value="Draw Points">
<select id="mymenu" size="8">
<option selected value="0">Default</option>
<option value="1">Black</option>
<option value="2">Red</option>
<option value="3">Yellow</option>
<option value="4">Green</option>
<option value="5">Blue</option>
<option value="6">Magenta</option>
<option value="7">Cyan</option>
</select>
</div>
<canvas id="gl-canvas" width="500" height="500">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>Как видите, холст использует массив точек вместо массива точек треугольника для рисования треугольников. Кто-нибудь может увидеть, где я иду не так?
ОБНОВЛЕНО:
var gl, canvas, program, colors, menu;
var points = [];
var tpoints = [];
var cpoints = [];
var colorsP = [];
var tcolorsP = [];
var ccolorsP = [];
var pointIndex = 0;
var triangleIndex = 0;
var circleIndex = 0;
var colorIndex = 0;
var counter = 0;
var numTris = 100;
var degPerTri = (2 * Math.PI) / numTris;
var dTri = false;
var dPoint = true;
var dCircle = false;
var vbuffer;
var cBuffer;
function begin() {
canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) { alert("WebGL isn't available"); }
gl.viewport(0, 0, canvas.width, canvas.height);
program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
colors = [
vec4(0.3921, 0.5843, 0.9294, 1.0), //Default
vec4(0.0, 0.0, 0.0, 1.0), // black
vec4(1.0, 0.0, 0.0, 1.0), // red
vec4(1.0, 1.0, 0.0, 1.0), // yellow
vec4(0.0, 1.0, 0.0, 1.0), // green
vec4(0.0, 0.0, 1.0, 1.0), // blue
vec4(1.0, 0.0, 1.0, 1.0), // magenta
vec4(0.0, 1.0, 1.0, 1.0) // cyan
];
r = colors[colorIndex][0];
g = colors[colorIndex][1];
b = colors[colorIndex][2];
a = colors[colorIndex][3];
gl.clearColor(r, g, b, a);
menu = document.getElementById("mymenu");
}
function init() {
begin();
vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, 8 * 200, gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, 16 * 200, gl.STATIC_DRAW);
var vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);
menu.addEventListener("click", function () {
colorIndex = menu.selectedIndex;
});
canvas.addEventListener("mousedown", function (event) {
var mousePos = getMousePos(canvas, event);
x = 2 * (mousePos.x - 5) / canvas.width - 1;
y = 2 * (canvas.height - (mousePos.y - 5)) / canvas.height - 1;
var pts = [x, y];
counter++;
console.log('Punkt : ', pts);
if (dPoint || (dTri && counter % 3 != 0) || (dCircle && counter % 2 != 0)) {
points.push(pts);
colorsP.push(vec4(colors[colorIndex]));
} else if (dTri) {
pointIndex = pointIndex - 3;
tpoints.push(pts);
tcolorsP.push(vec4(colors[colorIndex]));
tpoints.push(points.pop());
tcolorsP.push(colorsP.pop());
tpoints.push(points.pop());
tcolorsP.push(colorsP.pop());
triangleIndex++;
} else if (dCircle) {
pointIndex = pointIndex - 2;
cpoints.push(pts);
ccolorsP.push(vec4(colors[colorIndex]));
cpoints.push(points.pop());
ccolorsP.push(colorsP.pop());
var xs = cpoints[0][0] - cpoints[1][0];
var ys = cpoints[0][1] - cpoints[1][1];
console.log('Diff x:',xs, ' Diff y:',ys);
var radius = Math.sqrt(Math.pow(xs, 2) + Math.pow(ys, 2));
console.log(radius);
cpoints = [
cpoints[0][0], cpoints[0][1],
cpoints[1][0], cpoints[1][1]
];
console.log('Punkt nr: 0', 'X Koordinat:', cpoints[0], 'Y Koordinat:', cpoints[1]);
console.log('Punkt nr: 1', 'X Koordinat:', cpoints[2], 'Y Koordinat:', cpoints[3]);
for (var i = 0; i < numTris; i++) {
var index = 2 * 2 + i * 2;
var angle = degPerTri * (i+1);
cpoints[index] = (Math.cos(angle) / 4);
cpoints[index + 1] = (Math.sin(angle) / 4);
console.log('Punkt nr:', index, 'X Koordinat:', cpoints[index], 'Y Koordinat:', cpoints[index+1]);
}
circleIndex++;
}
pointIndex++;
});
render();
};
function drawCircles() {
dTri = false;
dPoint = false;
dCircle = true;
counter = 0;
}
function drawTriangles() {
dTri = true;
dPoint = false;
dCircle = false;
counter = 0;
}
function drawPoints() {
dTri = false;
dPoint = true;
dCircle = false;
}
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(points));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(colorsP));
gl.drawArrays(gl.POINTS, 0, pointIndex);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(tpoints));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(tcolorsP));
gl.drawArrays(gl.TRIANGLES, 0, triangleIndex * 3);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(cpoints));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(ccolorsP));
gl.drawArrays(gl.TRIANGLE_FAN, 0, 52 * (circleIndex * 2));
window.requestAnimationFrame(render);
}
function clearC() {
var oldcanv = document.getElementById('gl-canvas');
document.body.removeChild(oldcanv);
var canv = document.createElement('canvas');
canv.id = 'gl-canvas';
canv.width = 500;
canv.height = 500;
document.body.appendChild(canv);
pointIndex = 0;
triangleIndex = 0;
circleIndex = 0;
counter = 0;
points = [];
colorsP = [];
tpoints = [];
tcolorsP = [];
cpoints = [];
ccolorsP = [];
init();
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
1 ответ
Решение
Извините, я не мастер javascript, но вот код, который работает:
var gl;
var points = [];
var tpoints = [];
var colorsP = [];
var tcolorsP = [];
var index = 0;
var cIndex = 0;
var dTri = false;
var dPoint = true;
var vbuffer;
var cBuffer;
var count = 0;
var counter = 0;
function init() {
var canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
alert("WebGL isn't available");
}
colors = [
vec4(0.3921, 0.5843, 0.9294, 1.0), //Default
vec4(0.0, 0.0, 0.0, 1.0), // black
vec4(1.0, 0.0, 0.0, 1.0), // red
vec4(1.0, 1.0, 0.0, 1.0), // yellow
vec4(0.0, 1.0, 0.0, 1.0), // green
vec4(0.0, 0.0, 1.0, 1.0), // blue
vec4(1.0, 0.0, 1.0, 1.0), // magenta
vec4(0.0, 1.0, 1.0, 1.0) // cyan
];
gl.viewport(0, 0, canvas.width, canvas.height);
var m = document.getElementById("mymenu");
m.addEventListener("click", function() {
cIndex = m.selectedIndex;
});
var a = colors[cIndex][0];
var b = colors[cIndex][1];
var c = colors[cIndex][2];
var d = colors[cIndex][3];
gl.clearColor(a, b, c, d);
// Load shaders and initialize attribute buffers
var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, 8 * 200, gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, 16 * 200, gl.STATIC_DRAW);
var vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);
canvas.addEventListener("mousedown", function(event) {
counter++;
var i = index;
x = 2 * (event.clientX - 12) / canvas.width - 1;
y = 2 * (canvas.height - (event.clientY - 165)) / canvas.height - 1;
var pts = [x, y];
console.log(pts);
if (dPoint || (dTri && counter % 3 != 0)) {
points.push(pts);
colorsP.push(vec4(colors[cIndex]));
} else if (dTri) {
index = index - 3;
tpoints.push(pts);
tcolorsP.push(vec4(colors[cIndex]));
tpoints.push(points.pop());
tcolorsP.push(colorsP.pop());
tpoints.push(points.pop());
tcolorsP.push(colorsP.pop());
count++;
}
index++;
});
render();
};
function drawTriangles() {
dTri = true;
dPoint = false;
counter = 0;
}
function drawPoints() {
dTri = false;
dPoint = true;
}
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(points));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(colorsP));
gl.drawArrays(gl.POINTS, 0, index);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(tpoints));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(tcolorsP));
gl.drawArrays(gl.TRIANGLES, 0, count*3);
window.requestAnimationFrame(render);
}
function clearC() {
var oldcanv = document.getElementById('gl-canvas');
document.body.removeChild(oldcanv);
var canv = document.createElement('canvas');
canv.id = 'gl-canvas';
canv.width = 500;
canv.height = 500;
document.body.appendChild(canv);
index = 0;
count = 0;
init();
}
Что было не так и что я сделал:
gl.drawArrays(gl.TRIANGLES, 0, count); -> gl.drawArrays(gl.TRIANGLES, 0, count*3);
Для drawArrays требуется количество точек, поэтому 3 * количество треугольников.
Я предположил, что вы хотели отделить точки от треугольников, поэтому вы не можете смешивать треугольники, вершины и точки. После каждого щелчка мышью вы отправляли данные о 1 точке и ее цвете. И никогда не меняйте предыдущие данные так gl.drawArrays(gl.POINTS, 0, index); работал нормально. Но затем вы хотите нарисовать треугольники, поэтому вам нужно предоставить новые данные. Вы хранили вершины треугольника в tpoints но никогда не отправляйте его в память GPU. Таким образом, вам нужно создать 4 буфера (2 позиции, 2 цвета) в 2 VAO или (что проще, как я показал выше) копировать данные дважды для каждого кадра - один раз для данных для точек и один для треугольников.
Я надеюсь, что это было полезно, не стесняйтесь задавать больше вопросов.
РЕДАКТИРОВАТЬ:
var gl, canvas, program, colors, menu;
var points = [];
var tpoints = [];
var cpoints = [];
var colorsP = [];
var tcolorsP = [];
var ccolorsP = [];
var pointIndex = 0;
var triangleIndex = 0;
var circleIndex = 0;
var colorIndex = 0;
var counter = 0;
var numTris = 20;
var degPerTri = (2 * Math.PI) / numTris;
var dTri = false;
var dPoint = true;
var dCircle = false;
var vbuffer;
var cBuffer;
function begin() {
canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) { alert("WebGL isn't available"); }
gl.viewport(0, 0, canvas.width, canvas.height);
program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
colors = [
vec4(0.3921, 0.5843, 0.9294, 1.0), //Default
vec4(0.0, 0.0, 0.0, 1.0), // black
vec4(1.0, 0.0, 0.0, 1.0), // red
vec4(1.0, 1.0, 0.0, 1.0), // yellow
vec4(0.0, 1.0, 0.0, 1.0), // green
vec4(0.0, 0.0, 1.0, 1.0), // blue
vec4(1.0, 0.0, 1.0, 1.0), // magenta
vec4(0.0, 1.0, 1.0, 1.0) // cyan
];
r = colors[colorIndex][0];
g = colors[colorIndex][1];
b = colors[colorIndex][2];
a = colors[colorIndex][3];
gl.clearColor(r, g, b, a);
menu = document.getElementById("mymenu");
}
function init() {
begin();
vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, 8 * 200, gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, 16 * 200, gl.STATIC_DRAW);
var vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);
menu.addEventListener("click", function () {
colorIndex = menu.selectedIndex;
});
canvas.addEventListener("mousedown", function (event) {
var mousePos = getMousePos(canvas, event);
x = 2 * (mousePos.x - 5) / canvas.width - 1;
y = 2 * (canvas.height - (mousePos.y - 5)) / canvas.height - 1;
var pts = [x, y];
counter++;
console.log('Punkt : ', pts);
if (dPoint || (dTri && counter % 3 != 0) || (dCircle && counter % 2 != 0)) {
points.push(pts);
colorsP.push(vec4(colors[colorIndex]));
} else if (dTri) {
pointIndex = pointIndex - 3;
tpoints.push(pts);
tcolorsP.push(vec4(colors[colorIndex]));
tpoints.push(points.pop());
tcolorsP.push(colorsP.pop());
tpoints.push(points.pop());
tcolorsP.push(colorsP.pop());
triangleIndex++;
} else if (dCircle) {
pointIndex = pointIndex - 2;
var p2 = pts;
var p1 = points.pop();
var c2 = vec4(colors[colorIndex]);
var c1 = colorsP.pop();
var xs = p1[0] - p2[0];
var ys = p1[1] - p2[1];
console.log('Diff x:',xs, ' Diff y:',ys);
var radius = Math.sqrt(Math.pow(xs, 2) + Math.pow(ys, 2));
console.log(radius);
console.log('Punkt nr: 0', 'X Koordinat:', p1, 'Y Koordinat:', cpoints[1]);
console.log('Punkt nr: 1', 'X Koordinat:', cpoints[2], 'Y Koordinat:', cpoints[3]);
for (var i = 0; i < numTris; i++) {
var angle1 = degPerTri * (i);
var angle2 = degPerTri * (i+1);
var pt2 = vec2(Math.cos(angle1)*radius, Math.sin(angle1)*radius);
var pt3 = vec2(Math.cos(angle2)*radius, Math.sin(angle2)*radius);
var p2 = vec2(p1[0]+pt2[0], p1[1]+pt2[1]);
var p3 = vec2(p1[0]+pt3[0], p1[1]+pt3[1]);
cpoints.push(p1);
cpoints.push(p2);
cpoints.push(p3);
ccolorsP.push(c1);
ccolorsP.push(c2);
ccolorsP.push(c2);
}
console.log(cpoints);
circleIndex++;
}
pointIndex++;
});
render();
};
function drawCircles() {
dTri = false;
dPoint = false;
dCircle = true;
counter = 0;
}
function drawTriangles() {
dTri = true;
dPoint = false;
dCircle = false;
counter = 0;
}
function drawPoints() {
dTri = false;
dPoint = true;
dCircle = false;
}
function render() {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(points));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(colorsP));
gl.drawArrays(gl.POINTS, 0, pointIndex);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(tpoints));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(tcolorsP));
gl.drawArrays(gl.TRIANGLES, 0, triangleIndex * 3);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(cpoints));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(ccolorsP));
gl.drawArrays(gl.TRIANGLES, 0, 3*circleIndex*numTris);
window.requestAnimationFrame(render);
}
function clearC() {
var oldcanv = document.getElementById('gl-canvas');
document.body.removeChild(oldcanv);
var canv = document.createElement('canvas');
canv.id = 'gl-canvas';
canv.width = 500;
canv.height = 500;
document.body.appendChild(canv);
pointIndex = 0;
triangleIndex = 0;
circleIndex = 0;
counter = 0;
points = [];
colorsP = [];
tpoints = [];
tcolorsP = [];
cpoints = [];
ccolorsP = [];
init();
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
Что я изменил:
var numTris = 20;
с gl.bufferData Вы выделяете часть памяти на GPU и копируете некоторые данные (или нет). С gl.bufferSubData Вы только копируете данные без выделения памяти. Если ваши данные будут больше выделенной памяти, у вас будут большие проблемы.
gl.drawArrays(gl.TRIANGLES, 0, 3*circleIndex*numTris);
С gl.TRIANGLE_FAN Вы не сможете нарисовать несколько кругов, поскольку треугольники в фанатах связаны. Я также убрал магическую константу.
for (var i = 0; i < numTris; i++) {
var angle1 = degPerTri * (i);
var angle2 = degPerTri * (i+1);
var pt2 = vec2(Math.cos(angle1)*radius, Math.sin(angle1)*radius);
var pt3 = vec2(Math.cos(angle2)*radius, Math.sin(angle2)*radius);
var p2 = vec2(p1[0]+pt2[0], p1[1]+pt2[1]);
var p3 = vec2(p1[0]+pt3[0], p1[1]+pt3[1]);
cpoints.push(p1);
cpoints.push(p2);
cpoints.push(p3);
ccolorsP.push(c1);
ccolorsP.push(c2);
ccolorsP.push(c2);
}
Вы делали некоторые сумасшедшие вещи здесь, присваивая некоторую ценность cpoints чем изменить его, беспорядок. Здесь я нажимаю 3 позиции и 3 цвета для каждого треугольника в круге. Извините за дополнительные назначения, но конкатенация строк JavaScript вместо добавления сводит меня с ума;) p1 также центр круга