Hi folks here is my vertex array I am using:
vertices = [
-1.0, 1.0, 0.0,
0.0, 1.0, 0.0,
-0.5, 1.0, 0.0,
0.5, 1.0, 0.0,
1.0, 1.0, 0.0,
1.0, 0.5, 0.0,
0.0, 0.5, 0.0,
0.5, 0.5, 0.0,
-0.5, 0.5, 0.0,
-1.0, 0.5, 0.0,
-1.0, 0.0, 0.0,
-0.5, 0.0, 0.0,
0.0, 0.0, 0.0,
0.5, 0.0, 0.0,
1.0, 0.0, 0.0,
-1.0, -0.5, 0.0,
0.0, -0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
1.0, -0.5, 0.0,
1.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.5, -1.0, 0.0,
-0.5, -1.0, 0.0,
-1.0, -1.0, 0.0,
];
In a html-select I want to select a rendering mode and use it inmy drawScene-method:
var renderModeSelector = document.getElementById("renderModeDropDown");
var selectedRenderModeValue = renderModeSelector.options[renderModeSelector.selectedIndex].value;
switch (selectedRenderModeValue) {
case "0":
gl.drawArrays(gl.POINTS, 0, squareVertexPositionBuffer.numItems);
break;
case "1":
gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);
break;
case "2":
gl.drawArrays(gl.LINE_LOOP, 0, squareVertexPositionBuffer.numItems);
break;
default:
console.log("No rendering mode selected.");
}
- Case '0' is supposed to draw the points which works fine
- Case '1' should draw a filled rectangle, with the shader below. Unfortunately it is messed up, see also in the picture below.
Fragment shader:
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
Vertex-shader:
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
gl_PointSize = 5.0;
}
3. And finally in case '2' it is supposed to draw only the outlines, which also does not work as expected, see below.
So I wonder if it is possible to meet my requirements while using one vertexPositionBuffer. Also if it is not what would be another appropriate solution? Should I create another vertexPositionBuffer or can I just change mine "on the fly", before rendering?
