Я написал демонстрационное приложение для тестирования возможностей вершинного шейдера, поскольку везде говорится, что он может обрабатывать миллионы квадратов в секунду, но в моем случае он дает сбой при определенном ограничении.
Я написал демо здесь , в котором поле ввода принимает только цифры, оно будет отображать квадраты в соответствии с введенным числом динамически.
Я легко могу увидеть его в действии без каких-либо задержек, пока не произойдет примерно 25 квадратных квадратов, после чего он замедлится, и в какой-то момент произойдет даже сбой графического процессора, что еще хуже.
Можем ли мы оптимизировать написанный мной код или это ограничение GPU и OpenGL-ES?
Код:
`
<script type="vertexShader" id="vertexShader">
#version 300 es
in vec3 position;
in vec4 color;
out vec4 fcolor;
void main () {
gl_Position = vec4(position, 1.0);
fcolor = color;
}
</script>
<script type="fragmentShader" id="fragmentShader">
#version 300 es
precision mediump float;
in vec4 fcolor;
out vec4 finalColor;
void main () {
finalColor = vec4(fcolor);
}
</script>
var gl, canvas;
gl = initWebGLCanvas('canvas');
var program = getProgram('vertexShader', 'fragmentShader', true);
document.getElementById('numOfGrids').oninput = function () {
clearCanvas(gl);
this.value = this.value || 1;
this.value = this.value >= 0 ? this.value : 0;
var gridVertices = createGridVerticesBuffer(this.value || 1);
enableVerticesToPickBinaryDataWithinGPU(program, 'position', 'color');
fetchDataFromGPUAndRenderToCanvas({
positionIndex : gl.positionIndex,
vertices : gridVertices,
positionSize : 3,
stride : 7,
colorIndex : gl.colorIndex,
colorSize : 4,
positionoffset : 0,
colorOffset : 3,
startIndexToDraw : 0,
numOfComponents : 6
}, gl);
};
var r = [1.0, 0.0, 0.0, 1.0];
var g = [0.0, 1.0, 0.0, 1.0];
var b = [0.0, 0.0, 1.0, 1.0];
var z = 0.0;
var createGridVerticesBuffer = (gridsRequested) => {
var vertices = [
1.0, -1.0, z, r[0], r[1], r[2], r[3],
-1.0, 1.0, z, g[0], g[1], g[2], g[3],
-1.0, -1.0, z, b[0], b[1], b[2], b[3],
1.0, -1.0, z, r[0], r[1], r[2], r[3],
-1.0, 1.0, z, g[0], g[1], g[2], g[3],
1.0, 1.0, z, b[0], b[1], b[2], b[3]];
var vertexArray = [];
var factor = 2.0/gridsRequested;
var areaRequired = -1.0 + factor;
vertices[21] = vertices[0] = areaRequired;
vertices[15] = vertices[1] = -areaRequired;
vertices[22] = -areaRequired;
vertices[35] = areaRequired;
vertices[36] = vertices[8];
vertexArray.push(vertices);
var lastVertices = vertices.slice();
var processX = true;
for (var i = 1; i <= gridsRequested * gridsRequested - 1; i++) {
var arr = lastVertices.slice();
if (processX) {
arr[21] = arr[0] = lastVertices[0] + factor;
arr[28] = arr[7] = lastVertices[35];
arr[8] = lastVertices[36];
arr[14] = lastVertices[0];
arr[15] = lastVertices[1];
arr[35] = lastVertices[35] + factor;
} else {
arr[22] = arr[1] = lastVertices[1] - factor;
arr[29] = arr[8] = lastVertices[8] - factor;
arr[15] = lastVertices[15] - factor;
arr[36] = lastVertices[36] - factor;
}
vertexArray.push(arr);
if ((i + 1) % gridsRequested === 0) {
lastVertices = vertexArray[i + 1 - gridsRequested];
processX = false;
} else {
processX = true;
lastVertices = arr;
}
}
return createBuffers(gl, vertexArray, true);
};
`