Есть ли предел для массива JS при построении трехмерных фигур с помощью WEBGL? - PullRequest
Новая
       5

Есть ли предел для массива JS при построении трехмерных фигур с помощью WEBGL?

0 голосов
/ 18 марта 2020

Я пытался построить 3D персонажа. Вся модель имеет около 50 кубов / кубоидов, однако формы перестают формироваться после 35-й фигуры. Код уже достаточно длинный, но я не знаю, почему остальные фигуры не отображаются.

Код js выглядит следующим образом: 

var canvas;
var gl;

var total= 1188;

var vertex= [];

var vertexColors =[];

var indices =[];

window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );

gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }

gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 0.0,0.0,1.0, 1.0 );

gl.enable(gl.DEPTH_TEST);
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );

var iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);    
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

var cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );

var vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );

var vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );

render();

} 

function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    theta[axis] += 1.0;
    gl.uniform3fv(thetaLoc, theta);

    gl.drawElements( gl.TRIANGLES, total, gl.UNSIGNED_BYTE, 0 );
requestAnimFrame( render );

}

Я пытался сменить браузер и отредактировать свой код, но он все еще не работает.

1 Ответ

1 голос
/ 19 марта 2020

Вы используете UNSIGNED_BYTE индикаторы. UNSIGNED_BYTE может содержать значения только от 0 до 255. Таким образом, вы не можете использовать более 255 вершин.

Измените эту строку 

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

на эту 

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

и ваша линия рисования к этому 

gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_SHORT, 0 );

И вы сможете использовать индексы до 65535

Чтобы использовать более 65535 вершин, вам нужно либо прекратить использовать индексы и вместо этого используйте gl.drawArrays, или вы можете проверить и включить расширение OES_element_index_uint, а затем использовать Uint32Array и gl.UNSIGNED_INT и использовать индикаторы до 4294967296 (хотя, вероятно, недостаточно памяти для 4 миллиард вершин ?）

...